Shader forge guide

Start

The tool opens with the Plasma preset: its code in the box on the left, and the moving picture it draws on the right. On a phone the picture sits above the code.

What you need

• A current browser with WebGL 2. Chrome, Edge, Firefox and Safari all have it.
• Nothing else. You do not need to know GLSL to start; the presets are there to change.

Your first result

1. Open Shader forge. Plasma is already running.
2. Press a preset under Presets, such as Voronoi cells. Its code replaces what is in the box.
3. Change a number in the code, such as 0.8 in iTime * 0.8. The preview recompiles a moment after you stop typing.
4. Break something on purpose, such as a missing ;. The bar under the code turns to an error named by line, and the last working picture keeps running.
5. Press Save PNG at the top of the panel to keep the picture.

Good to know

• Move the pointer over the preview, or touch and drag on it, to move iMouse. Plasma and AIKIZI neon glow where you point.
• Drag the bar between the code and the preview to give one of them more room.
• The line under the Playback buttons shows how many frames a second the preview draws. See frame rate.
• The page keeps the last code you typed in this browser, with its custom uniforms. After a reload, a preset or Reset, press Your code under Presets to get it back.
• On a phone the controls sit in a bar at the bottom of the screen. Tap the bar to open them.