TypeGPU Documentation

The @typegpu/sdf package provides signed distance functions (SDFs) and helpers for TypeGPU and WebGPU projects. It is designed for shader-side logic such as UI masks, ray-marched scenes, collision checks, and texture-based SDF generation.

Key Concepts:

• SDF Output: A negative value indicates being inside the shape, 0 is the boundary, and a positive value is outside.
• Transformations: Shape primitives are centered at the origin. To move, scale, or rotate a shape, apply the inverse transform to the point passed into the SDF.
• Integration: SDF helpers can be called from TypeGPU functions (tgpu.fn) just like any other TypeGPU resource; resolving the function automatically includes the SDF code and its dependencies.

import { tgpu, d, std } from 'typegpu';
import * as sdf from '@typegpu/sdf';

const renderRoundedBox = tgpu.fn([d.vec2f], d.vec4f)((uv) => {
  'use gpu';
  const p = uv - 0.5;
  const dist = sdf.sdRoundedBox2d(p, d.vec2f(0.26, 0.12), 0.04);
  const edge = std.max(std.fwidth(dist), 0.001);
  const alpha = 1 - std.smoothstep(-edge, edge, dist);
  const glow = std.exp(-std.abs(dist) * 28) * 0.2;

  const bg = std.mix(d.vec3f(0.93, 0.95, 0.97), d.vec3f(0.74, 0.82, 0.95), uv.y);
  const fill = d.vec3f(0.08, 0.08, 0.1);
  const color = std.mix(bg, fill, alpha) + d.vec3f(1, 0.55, 0.28) * glow;

  return d.vec4f(std.min(color, d.vec3f(1)), 1);
});

TypeGPU uses a build-time plugin (unplugin-typegpu) to transform JavaScript/TypeScript code into WebGPU-compatible WGSL. When you mark a function with the 'use gpu' directive, the plugin performs three main transformations:

1. Auto-naming: It uses globalThis.__TYPEGPU_AUTONAME__ to assign names to resources (like buffers or constants) based on their variable identifiers, which helps in generating readable WGSL.
2. Function metadata assignment: It attaches an AST (Abstract Syntax Tree) and a set of externals (captured variables from the outer scope) to the function via globalThis.__TYPEGPU_META__.
3. Operator overloading: It replaces standard operators with specialized functions (e.g., __tsover_add) to handle GPU-specific math operations.

You can preview the generated WGSL code using tgpu.resolve([pipeline]) or by inspecting the transformed code during development.

import { tgpu, d } from 'typegpu';

const root = await tgpu.init();
const counter = root.createMutable(d.vec2u);

const increment = tgpu.computeFn({ workgroupSize: [1] })(() => {
  'use gpu';
  counter.$ += 1;
});

const incrementPipeline = root.createComputePipeline({ compute: increment });

// Preview the generated WGSL
console.log(tgpu.resolve([incrementPipeline]));