Shader stages: explicit GPU entry points

TypeShade entry points are top-level exported functions. A decorator marks the shader stage and any stage-specific metadata.

1. Start from TypeScript functions and modules

In TypeScript, export function makes a function part of a module’s public surface. In TypeShade, adding a stage decorator gives that function the GPU meaning of a pipeline entry point. An undecorated function remains a reusable helper.

function addBias(value: f32): f32 {
  return value + 0.5
}

@compute([64, 1, 1])
export function paint(@builtin("global_invocation_id") gid: vec3u) {
  pixels[gid.x] = addBias(camera.pos.x)
}

2. Compute

@compute carries the workgroup size. A compute builtin such as global_invocation_id is an explicit function parameter, not an injected global.

3. Vertex and fragment

@vertex and @fragment describe graphics-pipeline entry points. Inputs, outputs and builtins are expressed explicitly in the function signature.

@vertex
export function vs(
  @builtin("vertex_index") vid: u32,
  vin: VsIn
): vec4 {
  return camera.view * vec4(vin.position, 1)
}

@fragment
export function fs(): vec4 {
  return vec4(1, 0, 0, 1)
}

4. Helper functions

An undecorated function is a helper, not an entry point. Do not put entry points on classes or treat this as a pipeline object.

function saturate(x: f32): f32 {
  return clamp(x, 0.0, 1.0)
}

Back to the language overview

Edit this page Report a problem