Shader graph

A shader graph is a shader fill made of nodes instead of code: noise, gradients, plasma and rings, warps like zoom, kaleidoscope and tunnel, colour ramps and blends, a feedback node for trails, and an Audio node that listens to the timeline's sound. PopCraft compiles the graph into an ordinary shader fill, so everything a shader fill has, a graph has too: it draws on the GPU, it plays in Animate, Present and exports, and its knobs can be keyed.

Every built-in shader preset is a shader graph: the backgrounds (Mesh gradient, Waves and the rest), the effects (particles, lines, bursts and light rays) and the audio visualizers (Zoom feedback, Kaleidoscope, Plasma pulse, Synth tunnel, Starfield warp, Liquid ink). Pattern nodes give a value that a Mix or Blend colours; effect nodes draw in colour themselves, the effects with transparency so they layer over a picture.

Make a shader layer

1. 1.Press R and drag out a rectangle0:00
2. 2.Open its fill in the Design panel0:02
3. 3.Choose Shader, then a visualizer0:03
4. 4.Press Space to play it0:06

Description

A launch post in Animate with the Design panel open. R picks the rectangle tool and a rectangle is dragged out across the post. Its fill opens from the Design panel; Shader is picked, then Kaleidoscope under Audio visualizers, and the rectangle fills with a turning kaleidoscope. Space plays it: a shader graph that reads time moves on its own.

1. Press R and drag out a rectangle. Any layer with a fill works too, the frame's background included.
2. Open its fill in the Design panel.
3. Choose Shader, then any preset: each tile plays a short loop of it. Edit nodes opens the preset's graph. To build a graph from nothing instead, click Build with nodes (the + beside Edit nodes; see Edit the nodes).
4. Press Space to play it. A graph that reads time moves on its own, and its audio inputs follow the timeline's sound (see Audio-reactive motion).

Tune its knobs

Every input of a node that no wire feeds is a knob: a shader param named <node>_<input>, listed in the Design panel under the fill. Changing a knob re-renders straight away without recompiling, so dragging one, keying one or driving one from the music is cheap.

1. 1.Select the layer: its knobs are in the Design panel0:00
2. 2.Change a knob0:01
3. 3.Press Space to see it play0:03

Description

The Synthwave tunnel visualizer in Animate with its Neon tunnel layer selected. The Design panel lists the graph’s knobs: every unwired input of its nodes. A knob’s value is typed and the tunnel changes at once, without recompiling; Space plays it with the music.

1. Select the layer with the graph fill. Its knobs are listed under the fill in the Design panel.
2. Type a new value, or drag the field.
3. Click a knob's ◆ to key it, the way you'd key any property, or give it a behaviour (an audio behaviour makes it follow the sound).

Edit the nodes

The node editor opens under the canvas, the way the timeline does. Every node shows a live preview of the graph up to that node, so you can see what each step adds. To open it, select the layer with the graph fill and click Edit nodes under the fill in the Design panel (or in the fill's Shader tab).

The video builds a graph from nothing and goes through every step below; each step is a chapter you can jump to.

1. 1.Click Build with nodes (+): the editor opens with only the Output0:00
2. 2.Double-click empty space and pick a node0:01
3. 3.Drag from an output to an input to wire them0:04
4. 4.Drag a node by its body to move it0:07
5. 5.Drop a wire on empty space to add a node already wired0:09
6. 6.Wire it into the Output: the old wire is replaced0:12
7. 7.Select a node: its options and knobs are on the right0:16
8. 8.Press Shift+A to search and add a node0:19
9. 9.Drag across empty space to select several0:22
10. 10.Cmd+D duplicates them, Delete removes them0:24
11. 11.Drag a wire off an input to disconnect it0:26
12. 12.Right-click a wire and choose Disconnect0:28
13. 13.Cmd+Z undoes each change0:30
14. 14.Scroll to pan, Cmd+scroll to zoom0:32
15. 15.Press F to fit the graph0:33

Description

A launch post whose frame has the Plasma shader fill, its fill open. Build with nodes (the + beside Edit nodes) opens the node editor under the canvas with only the Output node. A double-click on empty space opens the node search and Plasma is added; a wire from its output into the Output's colour makes the frame draw it. The Output is dragged to the right, and a wire dropped from Plasma onto empty space adds a Colour ramp already wired; wiring the ramp into the Output replaces the old wire and the frame turns purple. Selecting Plasma shows its knobs on the right, and its scale is typed. Shift+A adds Noise, which is dragged under Plasma; a marquee selects both, Cmd+D duplicates them with their knob values and Delete removes the copies. A wire is dragged off the Output's input to disconnect it, another is disconnected from its right-click menu, and Cmd+Z brings both back. Scrolling pans, Cmd+scroll zooms, and F fits the graph.

1. Click Build with nodes (the + beside Edit nodes) in the fill's Shader tab. The graph replaces the shader, and the editor opens with only the Output node.
2. Double-click empty space and pick a node: type part of its name and press Enter.
3. Drag from a node's output (the dot on its right) to another node's input to wire them. Wire into the Output node's colour, and the layer draws it.
4. Drag a node by its body to move it.
5. Drop a wire on empty space to add a node there, already wired from the node you dragged it out of.
6. Wire it into the Output. A wire into an input that already has one replaces it.
7. Select a node to see its options and knobs on the right. Type a knob's value or drag the field.
8. Press Shift+A, or click +, to search for a node and add it in the middle of the view.
9. Drag across empty space to select several nodes. Shift-click adds a node to the selection or takes it out.
10. Cmd/Ctrl+D duplicates the selection, knob values included. Delete removes it.
11. Drag an input's wire away and let go on empty space to disconnect it.
12. Right-click a wire and choose Disconnect.
13. Cmd/Ctrl+Z undoes each change, one step at a time.
14. Scroll to pan, and pinch or hold Cmd/Ctrl and scroll to zoom. Middle-drag also pans.
15. Press F to fit the whole graph in view.

Right-clicking a node offers Duplicate and Delete; right-clicking empty space offers Add node here and Fit graph. Click a wire to pick it, and Delete disconnects it. Cmd/Ctrl+A selects every node, the arrow keys nudge the selection (Shift for bigger steps), and Escape clears the selection, then closes the editor. The state machine graph is the same editor, so all of this works there too.

Wiring an input turns its knob off: the knob's value and any key or audio behaviour on it go away, because the wire now drives that input. Disconnect the wire and the input gets its knob back at the node's default. A node that isn't wired through to the Output draws nothing yet, but its knobs keep their values for when it is.

Save in the Shader tab keeps the graph with its knob values under My shaders, and Publish puts it in a shader pack with the graph included, so a saved or installed node shader opens in the node editor again. See Save and share your shaders. Editing its WGSL by hand turns it into plain code: the graph goes, because it would overwrite the edit.

How a graph works

• Nodes are fields. Each node is a function of the pixel's position, and a node reads an input by asking the node wired into it for its value at that position. Most pass the position straight on; the warp nodes (zoom & rotate, kaleidoscope, tunnel, liquid warp, mirror) ask at a moved position, which is how they bend everything upstream.
• Feedback without the frame before. The feedback node reads its input many times, each echo zoomed and turned a step further and read a little earlier in time. That gives MilkDrop's trails while every frame stays a pure function of its time and knobs: scrubbing, looping and exporting all agree.
• Ports convert. Values are numbers, 2D and 3D vectors, and colours. Wiring one kind into another converts it: a number spreads to a grey, a colour reads as its brightness.
• The Audio node is the graph's music input. It compiles to a knob marked @audio, which gets an audio behaviour when the fill is applied.

The nodes

A graph is stored on the fill (Paint.shaderGraph): nodes and edges in maps keyed by id. The file format has the full shape. The graph is one value of the layer's fills, so if two people edit the same graph at the same moment, the last edit wins.