Examples
There are 36 runnable examples in the repository, covering cartographic passes, the ShaderToy-era screen-space effects, the emulated-double tier and a compute kernel. 35 of them emit WGSL and GLSL ES 3.00 from one source. The compute kernel has no vertex or fragment stage to emit as GLSL ES 3.00, so it emits WGSL and reflection; its WebGL2 path is the opt-in emulation. 13 use emulated double precision. The renderable ones are exported from examples/index.ts; browse the examples directory.
| Example | Category | Targets | Description |
|---|---|---|---|
| Graticule | Cartographic | WGSL and GLSL ES 3.00 | The lon/lat grid every map draws. |
| Hillshade | Cartographic | WGSL and GLSL ES 3.00 | Shaded relief. |
| fp64 deep zoom | Cartographic | WGSL and GLSL ES 3.00 | Emulated double precision (two-f32 df64). |
| fp64 checker plane | Cartographic | WGSL and GLSL ES 3.00 | A 1-unit checkerboard on a world plane. |
| fp64 hyperbolic navigation | Cartographic | WGSL and GLSL ES 3.00 | A LORAN-style chart grid. |
| fp64 Mercator tiles | Cartographic | WGSL and GLSL ES 3.00 | The tile-engine formula itself. |
| fp64 relative-to-center | Cartographic | WGSL and GLSL ES 3.00 | Why planet-scale engines render relative-to-eye. |
| Colour ramp | Cartographic | WGSL and GLSL ES 3.00 | The data-driven choropleth ramp. |
| Discard cutout | Screen space | WGSL and GLSL ES 3.00 | A fragment helper discards outside a centred circle and returns the fill colour, called once as the fragment IO-struct's constructor argument. |
| Plasma | Screen space | WGSL and GLSL ES 3.00 | The classic sum-of-sines plasma folded through an RGB palette. |
| Voronoi | Screen space | WGSL and GLSL ES 3.00 | Animated cellular noise. |
| Julia set | Screen space | WGSL and GLSL ES 3.00 | Escape-time Julia fractal. |
| Mandelbrot set | Screen space | WGSL and GLSL ES 3.00 | The Mandelbrot set with smooth escape-time colouring. |
| fBm clouds | Screen space | WGSL and GLSL ES 3.00 | Fractal Brownian motion. |
| Domain warping | Screen space | WGSL and GLSL ES 3.00 | fbm fed its own output. |
| Raymarched sphere | Screen space | WGSL and GLSL ES 3.00 | A sphere signed-distance field, sphere-traced from a camera ray and Blinn-Phong shaded with an orbiting light. |
| Raymarched box field | Screen space | WGSL and GLSL ES 3.00 | Domain repetition. |
| Tunnel | Screen space | WGSL and GLSL ES 3.00 | The demoscene tunnel. |
| Metaballs | Screen space | WGSL and GLSL ES 3.00 | Implicit blobs. |
| Ocean horizon | Screen space | WGSL and GLSL ES 3.00 | A seascape from first principles. |
| Starfield | Screen space | WGSL and GLSL ES 3.00 | A textureless night sky. |
| Truchet tiles | Screen space | WGSL and GLSL ES 3.00 | One tile. |
| Kaleidoscope | Screen space | WGSL and GLSL ES 3.00 | The polar mirror fold. |
| Beating heart | Screen space | WGSL and GLSL ES 3.00 | The sextic heart curve (x²+y²−1)³ = x²y³, sign-filled and fwidth-anti-aliased, thumping to a sharpened-sine heartbeat with a beat-synced glow. |
| fp64 Mandelbrot | Screen space | WGSL and GLSL ES 3.00 | The classic double-float demo. |
| fp64 Julia set | Screen space | WGSL and GLSL ES 3.00 | The Julia-set face of the double-float technique. |
| fp64 Burning Ship | Screen space | WGSL and GLSL ES 3.00 | The Burning Ship fractal (fold |Re z|, |Im z| before squaring) zoomed onto its needle spike. |
| fp64 Newton fractal | Screen space | WGSL and GLSL ES 3.00 | Newton’s method for z³ = 1, colour = which cube root a pixel falls into. |
| fp64 distance estimate | Screen space | WGSL and GLSL ES 3.00 | Mandelbrot boundary rendered by distance estimate (d = ½·|z|·ln|z|/|dz|) with precision split mid-formula. |
| fp64 long-uptime clock | Screen space | WGSL and GLSL ES 3.00 | The long-uptime animation bug. |
| fp64 catastrophic cancellation | Screen space | WGSL and GLSL ES 3.00 | The numerics-textbook plot on a GPU. |
| fp64 sine sweep | Screen space | WGSL and GLSL ES 3.00 | sin(x) for x = a large base + a small on-screen sweep. |
| Gradient pass | Screen space | WGSL and GLSL ES 3.00 | A two-colour vertical gradient with a biasable blend. |
| Specialization constant | Screen space | WGSL and GLSL ES 3.00 | A pipeline-overridable quality constant. |
| 2D array texture | Screen space | WGSL and GLSL ES 3.00 | A tile atlas as one texture_2d_array<f32> binding. |
| Compute reduction | Compute | WGSL | A @workgroup_size compute kernel folding a window of an input storage buffer into one output element with reduce(). |
From a checkout of the repository, the first command prints WGSL, GLSL and reflection for every example; the second does one by id.
npx tsx examples/print.tsnpx tsx examples/print.ts hillshadeThe gradient pass in GLSL ES 3.00
The front page shows the fragment stage of gradient-pass.ts and the WGSL entry point it emits. The same function emits this GLSL ES 3.00 main:
void main() { _ret = vec4(mix(u.bottom.rgb, u.top.rgb, (uv.y + u.mix_bias)), 1.0);}The whole module is 28 lines of WGSL; the GLSL vertex stage is 17 lines and the fragment stage 15. Uniform types, byte offsets, bind-group entries and entry signatures come from reflect(), which reads the same intermediate representation and stays off the emit path, so a host can pack its uniform buffer from that layout. The checks page shows the reflected layout of a uniform block beside the diagnostic for a misspelt field.
Emulated double precision
Neither WGSL nor GLSL ES 3.00 has a double-precision float. TypeShade emulates one as an unevaluated pair of f32 values, and lowers arithmetic, comparisons and a set of builtins into calls on that pair. An operation outside that set fails at emit with a coded error. What you write is unchanged: only the declared type differs. In the deep-zoom example the origin field is declared f64 in the source and occupies a vec2<f32> slot in the uniform block, which the host fills with the split pair.
A module that does f64 arithmetic also carries an injected guard texture binding for the host to fill with a single white texel. A downstream shader compiler cannot fold a texel read, and without one it is free to optimise the error-compensation terms away. Each operation costs several times its f32 equivalent, so the type is opted into per value. The example is fp64-deep-zoom.ts.
