Run a custom shader (Water)

quick start Intermediate ⏱ 7 min vgai 0.1.0

Prerequisites: Installed vgai and run the editor

What you'll learn

• Run a scene using a custom material from the material registry
• See a GLSL ShaderMaterial animate via a self-updated uniform
• Understand the MaterialDef build/update contract

What you'll build: A look at the water-shader scene — the shipped custom Water material in motion.

Walkthrough — Run a custom shader (Water) · generated by site/media/lessons/scenes-batch.lesson.ts (4 steps)

A scene material of type: 'custom' resolves a named material-def from the registry. The water-shader scene uses the shipped Water def — a ShaderMaterial that animates itself.

Steps

1. Open the water-shader scene. Load examples/scenes/water-shader.vscn.json.

   

   The water-shader scene.

2. Enter play mode — the custom Water material runs. The registry resolves the water def and build() returns a ShaderMaterial.

   

   The custom Water material.

3. The shader animates waves via its uTime uniform. The def’s update(dt, …) advances uTime each frame; the vertex shader displaces the surface with summed sine waves.

   

   Self-animating shader (uTime).

4. Stop play mode. Press Stop (or Escape).

Registered defs, not inline GLSL

Custom materials are registered MaterialDefs referenced by name — raw GLSL directly inside a .vscn.json is not supported. Author your shader as a def (copy water.ts) and reference it.

Recap

New functionality

• Ran a scene using a custom material
• Saw a self-animating GLSL ShaderMaterial

New concepts & skills

• type: 'custom' resolves a named MaterialDef from the registry
• build() returns a THREE.Material; update() ticks self-animating uniforms
• Inline GLSL in .vscn is not supported — use a registered def

Next lesson → Manual: Custom shaders

On Your Own!

Extend what you built:

• Tweak the Water def's wave height/speed uniforms
• Register a second custom def (e.g. a pulsing emissive) and use it in a scene
• Read the custom-shaders manual page for the full MaterialDef contract

See also

• Custom shaders · Materials