Shaders

Visual template system

Fantasynth uses a template-based shader system. You write a single .glsl file with JSON frontmatter that defines the shader’s metadata and parameters, plus the GLSL code for your visual.

File structure

Visual shaders live in public/content/visuals/. Each file contains:

  1. JSON frontmatter (between --- delimiters): ID, name, type, channels, parameters
  2. GLSL body: includes, uniforms, helper functions, and the main computeVisual() function

The computeVisual function

Every visual shader must implement:

vec4 computeVisual(vec2 uv, float time) {
  // your shader code here
  return vec4(color, intensity);
}

Return vec4(rgb, intensity). The RGB color and an intensity value that controls blending.

Built-in uniforms

The template provides uniforms automatically: uTime, uBeat, uClipAge, uActivationBeat, uTrackFader, uOpacity, and more. You don’t need to declare these.

Custom parameters

Define parameters in the JSON frontmatter, then declare matching uniforms in the GLSL body. A param named speed becomes uniform float uSpeed (prefix u + capitalize).

World Position Offset

Optionally implement computeVertex(vec3 position, float time) to displace vertices in object space. This enables geometry animation driven by your shader.