TypeShade

The verifiable TypeScript shader library

A TypeScript library that writes a shader once and emits WGSL and GLSL ES 3.00. The same module runs on the CPU in double precision, so the compiler's output can be checked.

Get started Why TypeShade Examples

Pre-release: 0.1.0 is not on npm yet. Install as a git submodule

Metaballs, from examples/metaballs.ts, drawn at build time.

The authored fragment and its WGSL

The fragment stage of the gradient example as written, 10 lines, and the WGSL entry point it emits. The GLSL ES 3.00 stage comes from the same function.

const fsGradient = fn(
  'fs_gradient',
  { vo: VsOut },
  (p) => {
    const t = p.vo.uv.y.add(U.field.mix_bias)
    const rgb = mix(U.field.bottom.rgb, U.field.top.rgb, t)
    return vec4(rgb, f32(1))
  },
  { stage: 'fragment', retAttr: '@location(0)' },
)

@fragment
fn fs_gradient(vo: VsOut) -> @location(0) vec4<f32> {
  return vec4<f32>(mix(u.bottom.rgb, u.top.rgb, (vo.uv.y + u.mix_bias)), 1.0);
}

Quick start

One source, two targets

One typed module emits WGSL for WebGPU and GLSL ES 3.00 for WebGL2. 35 of the 36 examples in the repository emit both from one file.

Checked against the CPU

The same module runs on the CPU in f64, and the test suite checks the compiler's algebra against it. Every emit is compiled on Tint and linked on WebGL2 on each push.

Typed in the editor

A misspelt uniform field or a wrong-typed return is a TypeScript error in the editor. reflect() reads bind groups and std140 and std430 layouts from the same intermediate representation.