GLSL Renderer

The GLSL renderer runs fragment shaders on a fullscreen quad using WebGL2. No external dependencies — WebGL2 is browser-native.

Algorithm contract

GLSL algorithms are fragment shader source code, not JavaScript. The renderer provides a fullscreen quad vertex shader and binds uniforms automatically.

Built-in uniforms

Custom uniforms

Parameters and colors are mapped to uniforms automatically:

• Parameters: u_paramName → state.params[paramName] as float
• Colors: u_color1, u_color2, etc. → state.colorPalette[N-1] as vec3 (RGB normalized to 0–1)

Color uniforms use 1-indexed naming: u_color1 maps to the first color in the palette.

Validation

• Must include #version 300 es (or similar version directive)
• Must contain void main()
• Must write to fragColor or gl_FragColor

Template

#version 300 es
precision highp float;

uniform vec2 u_resolution;
uniform float u_time;
uniform float u_seed;
uniform float u_noiseScale;    // ← mapped from state.params.noiseScale
uniform vec3 u_color1;         // ← mapped from state.colorPalette[0]
uniform vec3 u_color2;         // ← mapped from state.colorPalette[1]

out vec4 fragColor;

void main() {
  vec2 uv = gl_FragCoord.xy / u_resolution;
  vec3 color = mix(u_color1, u_color2, uv.x);
  fragColor = vec4(color, 1.0);
}

Built-in vertex shader

The renderer provides this vertex shader automatically — you don't need to write one:

#version 300 es
in vec2 a_position;
void main() {
  gl_Position = vec4(a_position, 0.0, 1.0);
}

CDN dependency

None — WebGL2 is browser-native.

Renderer configuration

{
  "renderer": {
    "type": "glsl"
  }
}

Uniform extraction

The renderer parses your shader to discover custom uniforms using the pattern:

uniform (float|vec2|vec3|vec4|int|mat2|mat3|mat4) u_name;

Built-in uniforms (u_resolution, u_time, u_seed) are excluded from custom binding. Color uniforms are identified by the u_color\d+ pattern.

Tips

• GLSL shaders are great for real-time animated effects — u_time updates every frame
• Use u_seed to seed your own pseudo-random functions in GLSL
• Normalized UV coordinates: vec2 uv = gl_FragCoord.xy / u_resolution;
• For static output, ignore u_time and base the composition entirely on u_seed and parameters