Skip to main content

Shader fills

Choose Shader in an object's Fill selector to render a self-contained GLSL mainImage pass in WebGL 2. Shapes, text, images, image sequences, Lottie, and tiled patterns support shader fills. The shader follows the object's shape or source alpha, including animated silhouettes; its output alpha preserves transparency. For a full-screen background or rain overlay, use a rectangle sized to the composition. Existing shader layers open as rectangles with shader fills.

Edit the source and its declared controls in Properties. Shaders use composition time for repeatable scrubbing and OGraf goToTime() seeking. For media, choose Original pixels to remove the shader fill. Shader fills replace visible color; they do not filter source pixels.

Text also has an independent Outline paint selector. Choose Shader there and set Stroke Width to animate its border separately from the fill. The object remains editable text: changes to Content, font, sizing, or alignment update both paints. Solid and shader paints can be mixed.

The shader library​

Resources → Shaders lists saved library shaders and every applied Fill, Outline, and shader Effect, including bypassed effects and shaders inside component definitions. Applied entries identify their object and destination; displaying them does not create another library copy. New Shader opens a draft without adding a canvas object. Choose Save shader to keep it in the project, then drag it onto the canvas and choose Fill, Outline or Effect when needed; Cancel discards the new draft. Unused project shaders are retained in editable .ogs files. Entries have a thumbnail, Edit, Load, and a remove icon. Edit shader in an object's Properties also opens the dedicated shader editor; parameter controls remain in Properties. The editor has an editable shader name and a larger animated preview. Changes stay in the window until Save shader; Cancel discards them. Preview shader tests source changes in the preview, and loading a file opens a draft. Editing an applied entry changes only its identified Fill, Outline, or Effect. Library entries and applied copies stay independent, even when their source is identical. Edits preserve compatible parameter values and keep the current canvas selection. Drag a shader entry from Resources onto an object's Fill or text Outline row to apply a copy of its current source, settings, name, and controls. The destination highlights while dragging; the original shader stays independent. Dropping on the canvas opens the Fill/Outline/Effect chooser instead of applying immediately. Effect-only resources are labelled Effect shader and preview against a temporary reference image. That image is never saved, and Fill/Outline remain unavailable until the shader has its own suitable input. Effects always take their input from the layer's stack. Removing a saved library shader keeps copies already applied to objects. Removing an applied Fill or Outline detaches that shader; removing an applied Effect removes only its stack entry. Text returns to solid paint, shapes to a solid fill, and media to its original pixels. The Fill and Outline controls in Properties also offer Solid or Original pixels. Use Undo to restore a change.

Exposed controls​

Mark literal global constants to create editable controls and OGraf data fields automatically:

#pragma ograf intensity slider min(0) max(2) step(0.1)
const float intensity = 0.5;
#pragma ograf tint color
const vec3 tint = vec3(0.1, 0.3, 0.6);
#pragma ograf enabled toggle
const bool enabled = true;
#pragma ograf offset vector2 min(-1) max(1) step(0.01)
const vec2 offset = vec2(0.0);

void mainImage(out vec4 color, in vec2 coord) {
  vec2 uv = coord / iResolution.xy + offset;
  float wave = 0.5 + 0.5 * sin(uv.x * 8.0 - iTime);
  color = vec4(tint * intensity * wave, enabled ? 1.0 : 0.0);
}

slider supports float and int, color supports vec3 and vec4, toggle supports bool, and vector2 supports vec2. Literal object-like #define constants are also accepted. The optional min(...), max(...), and step(...) annotations set numeric control limits. Marked symbols must be read-only; expressions, conditional declarations, and values needed as compile-time constants are rejected when they cannot safely become uniforms.

Every marked symbol gets a normal field in Data and a fill.parameters.NAME binding. Colors use hexadecimal RGB/RGBA strings in OGraf data; vectors use { "x": 0, "y": 0 }. Control edits and field defaults stay synchronized. Field keys and labels may be renamed; change the source pragma to change a field's type, limits, or presence. Duplicated objects get independent shader fields. Uncheck the generated field in Data → Operator controls to keep it internal while retaining the shader control, default, bindings, Rules and animation. Changing to Shader detaches incompatible whole-fill and gradient-stop bindings while keeping their data fields and Brand Kit tokens available. Text outline parameters use strokePaint.parameters.NAME and independent fields, so the same parameter name can appear in both shaders without sharing its value.

Animating controls​

Exposed shader controls can also own keyframes and local loops. Expand the object in Timeline and use + Property → Fill shader or Outline shader to choose a control; explicit key creation does not require Auto-keyframe. Move the playhead and adjust the control in Properties, or edit a selected key's Value in the Keyframe editor. Edit → At playhead records changes to keyed controls at that time; Whole animation shifts their existing values together. Select a property and use its Loop section to set repeating values and preview the loop.

Float controls use the usual easing and curves. Integers and toggles hold their values until the next key; vectors use X/Y tracks and colors use R/G/B/A tracks. Keys follow the limits declared in the shader. Keyed channels take precedence over data-bound values while their tracks are active; unkeyed channels remain data-driven. Removing the final key returns that channel to its authored/data value. The shader's iTime clock continues independently. Animation belongs to the object, not a saved library shader. Keep exposed names stable: removing declarations or shader paints removes their matching tracks.

Image input and limits​

The original source and values are saved in .ogs and compiled packages. Under Rendering, an embedded PNG or JPEG can be assigned as a portable static Image input. Shadertoy Image code samples it as sampler2D iChannel0; iChannelResolution[0] reports its pixel dimensions. Repeat or Clamp wrapping and Linear or Nearest filtering are authored with the shader. The supported profile also provides iTime and iResolution. Additional channels, video, buffer/feedback passes, audio inputs, mouse inputs, and custom uniform declarations are unsupported. Shadertoy Image passes that fit this profile can be adapted; check their individual licences. Export certification checks rendering and repeated seeks, but the destination player must still support WebGL 2. Shader-filled objects can use geometric masks, but cannot currently supply an alpha mask for another object.