TypeShade, a shader language you write in TypeScript

One file, two targets

The compiler lowers hello.shade.ts to one intermediate representation and emits both targets from it. The file imports nothing, so it is the whole program; the pane beside it holds the WGSL and the GLSL ES 3.00 fragment a host hands to WebGPU or WebGL2, one tab each.

"use typeshade";

class Clip {
  @builtin("position") pos: vec4;
}

class Color {
  @location(0) color: vec4;
}

@vertex
export function vs(@builtin("vertex_index") i: u32): Clip {
  const x = i === 1 ? 0.8 : i === 2 ? 0. : -0.8;
  const y = i === 2 ? 0.8 : -0.8;
  return { pos: vec4(x, y, 0., 1.) };
}

@fragment
export function fs(): Color {
  return { color: vec4(1., 0., 0., 1.) };
}

struct Clip {
  @builtin(position) pos: vec4<f32>,
}

struct Color {
  @location(0) color: vec4<f32>,
}

@vertex
fn vs(@builtin(vertex_index) i: u32) -> Clip {
  let _cse0 = (i == 2u);
  let x = select(select(-0.8, 0.0, _cse0), 0.8, (i == 1u));
  let y = select(-0.8, 0.8, _cse0);
  return Clip(vec4<f32>(x, y, 0.0, 1.0));
}

@fragment
fn fs() -> Color {
  return Color(vec4<f32>(1.0, 0.0, 0.0, 1.0));
}

#version 300 es
precision highp float;
precision highp int;

layout(location = 0) out vec4 color;

void main() {
  color = vec4(1.0, 0.0, 0.0, 1.0);
}

• Domain warping
• Plasma
• Voronoi
• Julia set
• Ocean horizon
• Starfield
• Tunnel
• Kaleidoscope
• Mandelbrot set

What carries over from TypeScript

GPU code has three things: resources, value layouts and entry points. TypeShade gives each a place TypeScript already has, and keeps the rest of the language where it fits the GPU. The full rules are in the language guide.

"use typeshade"

The directive is the language boundary

It is the first statement of the file, where a JavaScript directive goes. A file without it does not compile as a shader; with it, everything under it is checked as TypeShade and lowered to the compiler's intermediate representation.

f32, vec3, mat4, sin(x)

GPU types and builtins are globals

f32, vec3, mat4 and the builtins such as sin and vec4(...) need no import, and Math.sin and Math.PI are aliases of the same operations. The checker applies the shader rules to them in the editor, before any code is emitted.

class VsIn { @location(0) uv: vec2 }

A type or a class is a value layout

Plain data is a type alias; a class carries per-field metadata such as @location and @builtin, and its fields lay out the struct both targets receive.

new Circle(center, 0.3).coverage(p)

A class is a TypeScript class

Fields, a constructor and new, methods and static functions, extends with super and abstract, generic classes and functions, and the mixin pattern all compile. A method lowers to a function that takes the struct first, and a generic is compiled once per set of type arguments. The gallery has a file for each of them.

declare const u: uniform<Camera>

declare names a resource the host fills

uniform<T> reads a uniform block, and storage<T, "read_write"> is a storage buffer the shader writes. There is no initializer: the host owns the slot, in the order the file declares them, and reflect() reports its layout.

@fragment export function fs(v: VsOut): vec4

A decorated export is an entry point

@vertex, @fragment and @compute([64, 1, 1]) name the stage; a function without one is a helper. Stage inputs are explicit parameters, a @builtin("vertex_index") or a @location. There is no hidden global.

await scale({ k, xs, ys }, 4)

A host file imports the module and calls it

Through the typeshade/vite plugin, a host file imports a .shade.ts and calls what it exports. A helper runs on the CPU, a @compute entry runs on WebGPU or the WebGL2 compute tier where supported, and a full-screen @fragment entry draws into a canvas as fs(canvas, bindings). The bindings object is typed from the module, so a binding the call leaves out is a type error on the host's line.