TypeScript and WebGPU concepts

TypeShade starts from TypeScript authoring and adds GPU-specific semantics. This page connects the concepts you already know to the concepts you need to write shaders.

Start with a TypeScript file

"use typeshade";

@vertex
export function main(): vec4 {
  return vec4(0., 0., 0., 1.);
}

"use typeshade" marks the file as TypeShade source, and the file compiles with the TypeShade files it imports as one program. The rest of the program still uses familiar TypeScript-shaped constructs: functions, parameters, return types, objects, imports and exports.

The mental model

TypeScript types

Type annotations describe values and make incorrect programs visible to tooling.

TypeShade adds GPU value types such as f32, u32, vec2, vec3 and vec4, plus rules for shader operations.

Functions

A function has parameters, a return type and a body.

TypeShade adds Stage decorators such as @vertex and @fragment to identify entry points.

Modules

import and export share code between the files of a program.

TypeShade adds Shader files import one another by relative paths and compile as one program, which the compiler lowers to GPU code from what its entry points reach.

Web APIs

The host application owns devices, pipelines, buffers and rendering.

TypeShade adds Shader source and reflection metadata for the host's own WebGPU or WebGL2 code. A module the host imports through the Vite plugin brings a runtime that creates the device and the pipelines its calls need.

Where WebGPU fits

Think of TypeShade as the authoring and compilation layer above the browser graphics API. TypeShade produces shader code, and the application creates a GPUDevice, configures a pipeline, binds resources and submits work. A module the application imports through the Vite plugin does those steps inside the calls it exports.

Learn in this order

Learn the TypeScript shape: types, functions and modules.
Add "use typeshade" and learn the GPU types.
Add entry-point decorators and resource declarations.
Use the Playground to see diagnostics and generated WGSL while you edit.
Only then move into compiler and backend details.

Edit this page Report a problem