WGSL Canvas

A TypeScript library for rendering WGSL shaders with WebGPU, inspired by glsl-canvas.

🎨 Live Demo

https://github.com/user-attachments/assets/17d938d8-6d3d-419a-b30a-ceeb9f1f38db

Features

• Easy-to-use API for WebGPU shader rendering
• Built-in uniforms (time, resolution, mouse)
• TypeScript support
• Animation loop management
• Responsive canvas sizing

Installation

npm install wgsl-canvas

Usage

import { WGSLCanvas } from 'wgsl-canvas';

// Create a new WGSL canvas
const canvas = document.getElementById('myCanvas') as HTMLCanvasElement;
const wgslCanvas = new WGSLCanvas(canvas);

// Load a fragment shader
const shader = `
@fragment
fn main(@location(0) uv: vec2<f32>) -> @location(0) vec4<f32> {
  return vec4<f32>(uv.x, uv.y, 0.5, 1.0);
}
`;

await wgslCanvas.load(shader);

// Start animation
wgslCanvas.play();

Default Uniforms

The following uniforms are automatically available in your shaders:

struct Uniforms {
  time: f32,              // Time in seconds since start
  resolution: vec2<f32>,  // Canvas resolution in pixels
  mouse: vec2<f32>,       // Mouse position in pixels
};

API

Constructor

new WGSLCanvas(canvas?: HTMLCanvasElement | WGSLCanvasOptions, options?: WGSLCanvasOptions)

Methods

• async init(): Initialize WebGPU context
• async load(fragment: string, vertex?: string): Load shaders
• play(): Start animation loop
• pause(): Pause animation
• toggle(): Toggle play/pause
• resize(width?: number, height?: number): Resize canvas
• destroy(): Clean up resources

Development

# Install dependencies
npm install

# Build library
npm run build

# Run demo
npm run demo

# Type checking
npm run typecheck

Browser Support

This library requires WebGPU support. Currently supported in:

• Chrome 113+
• Edge 113+
• Chrome Canary with WebGPU flag enabled

License

MIT