Shader forge guide

Overview

Shader forge runs a small program that you write, once for every pixel, and shows you the picture it makes.

A shader code box with line numbers on the left, and on the right soft bands of pink, violet, cyan, yellow and green, lighter in the middle
The Plasma preset as the page opens: its code on the left, the picture it draws on the right.

That program is a fragment shader. It gets one question, what colour is this pixel, and answers it for every pixel of every frame on the GPU. The picture is worked out, not painted.

It is written in GLSL. The page draws one full-screen quad over the preview, so your code runs for the whole frame. gl_FragCoord gives the pixel's position; see fragment coordinate. Your code writes the colour to fragColor.

The page hands your code four values, called uniforms: iTime, the seconds since the start (see time uniform), iResolution, the preview's size in pixels (see resolution uniform), iMouse, where you last pointed at the preview, from 0 to 1 (see mouse uniform), and iFrame, the number of frames drawn.

Seven presets show what comes out: Plasma, Voronoi cells, Fractal noise, Raymarched sphere, Ramanujan waves, Lorenz flow and AIKIZI neon. Change the code and the preview recompiles as you type. See live recompile.

You can add your own sliders as uniforms, and keep a PNG, a copy of the picture, or the code.

Open Shader forge Start here

In this guide

  1. StartWhat you need and your first shader in five steps.
  2. Every controlEvery control in the panel, one line each.
  3. Three looksThree pictures and the steps that made them.
  4. Keep your workThe PNG, the copy, and the code.
  5. KeysCompile, save and indent from the code box.
  6. HelpWhat to do when something goes wrong.

It runs in your browser with WebGL 2. Nothing is uploaded; your last code and your custom uniforms are kept in this browser only. A mouse, a trackpad, a pen and a finger all work.