Shader forge guide

Every control

Every control in the panel, top to bottom. Custom uniforms and Export start closed; tap their titles to open them.

Save PNGButton: Saves the preview as a PNG named shader-forge- and a number, such as shader-forge-1789560000000.png. See PNG.
Copy imageButton: Copies the preview to the clipboard as a PNG. See clipboard.
Copy shader codeButton: Copies the code in the box to the clipboard as text, with a uniform line for each custom uniform under the precision line and its current value as a comment, so the copy compiles on its own. The bar under the code says Copied to the clipboard.

PresetPick one: Puts a preset's code in the box and runs it, replacing what you had. Plasma: sine waves added together and coloured, with a glow where you point; see plasma shader. Voronoi cells: moving cells with glowing edges; see Voronoi cells shader. Fractal noise: layers of noise that bend each other into slow smoke; see fractal noise shader. Raymarched sphere: a lit sphere on a floor, with a soft shadow, seen from a camera that circles it; see raymarching and signed distance function. Ramanujan waves: rings and spokes at prime-number frequencies. Lorenz flow: five coloured layers of stripes from the equations of the Lorenz attractor. AIKIZI neon: glowing lines, bars and an orb in the AIKIZI colours, with a glow where you point. Your code: appears once you type in the box, and is marked while you do; it holds the last code you typed, kept in this browser, and brings back the custom uniforms that code used. A reload opens it again if it was in the box.

Under the buttons, a line shows how many frames a second the preview draws, updated twice a second. See frame rate.

PauseButton: Stops time: iTime holds still and the picture freezes. It then reads Play and starts time again from where it stopped. The page still draws every frame while paused.
Restart timeButton: Sets iTime and iFrame back to 0. Paused, it holds the picture at time 0.

Code only · Preview onlyPick one: Shows one half of the frame at full size. Press the same button again to see both.

Code only: Hides the preview and gives the code box the whole frame.

Preview only: Hides the code and gives the preview the whole frame.

Pick a type in the list, then press Add uniform. See uniform slider.

TypeChoice: The type of the next uniform: float, color, vec2, vec3 or int. See vec3.
Add uniformButton: Asks for a name, such as uSpeed, and adds a uniform of the type picked in the list. Names use letters, digits and _, and cannot start with a digit. A name GLSL keeps for itself (a word such as float or sampler2D, a built-in function such as sin, or anything that starts with gl_ or holds __), a name the page already uses (iTime, iResolution, iMouse, iFrame, fragColor, main) and a name already in the list are each refused with a note. The page declares it for you, so use it in your code without writing uniform … yourself. See uniform.
One card per uniformFilled in by the tool: Each card shows the name and type, its control, and a Remove button. float: a slider from 0 to 1, starting at 0.5, that the preview eases towards. int: a slider from 0 to 10, starting at 1. vec2 and vec3: two or three sliders from 0 to 1, starting at 0.5. color: a colour picker, starting at white, handed to your code as a vec3 of red, green and blue from 0 to 1. Remove takes the uniform away and recompiles. The list and each value are kept in this browser, so they come back after a reload.

The Plasma preset goes in the box. Your typed code stays kept under Your code.

ResetButton: Removes your uniforms, shows both halves at the middle split, starts time again from 0 and loads the Plasma preset. Your typed code, and the uniforms it used, stay under Your code.