All examples · Shaders and post

Portable shaders

What this example shows

A custom material is WGSL, and WebGL2 cannot compile WGSL: the engine will not pretend to translate it. So a material may carry a second half in GLSL ES 300 (fragmentGlsl, vertexGlsl), and each renderer takes the one it speaks. Here the same cel-shaded sphere runs on both.

The halves are one shader in two spellings, so they share one parameter set: mu.steps is generated once and read by both. A shader file can hold both under a single @shader/@uniform header, which is the better shape: with two files the header lives twice and the halves can drift. Better still, a .shader graph: see Portable by construction.

Starting