All examples · Shaders and post

Scanlines

What this example shows

The first custom shader. createMaterial takes one function, and the engine hands it the picture already read and already tinted: return it unchanged and nothing looks different. mu.time is put there for you, so the bands scroll with no per-frame code at all. Left is the built-in shader, right is the same picture through the material.

The effect is written twice, once in WGSL and once in GLSL, because the engine will not pretend to translate one into the other. Delete the GLSL half and the effect becomes WebGPU only: WebGL2 then draws the plain sprite and says so once, rather than showing you nothing.

Starting