Webinteractive · canvas
One shader. Render everywhere.
Use the same shader in the browser and headless Node.js. Make it interactive, render it at any resolution, turn it into video, or run tests on your CI.
eve.ts
import { effect } from "vgpu";
const eve = effect(gpu, eveWgsl);
eve.draw({ target });Imagepng · 8192 × 4608
Videomp4 · 60 fps
00:00 / 00:00
CIheadless · artifact
CI runs the render test, compiles the shader, renders a headless frame, compares the snapshot, and passes.
Shader code that scales.
Import and export WGSL like TypeScript. vgpu resolves the module graph, reflects bindings, removes unused declarations, and emits compact shader source at build time.
1import { effect, frame, init, surface } from "vgpu";2import shaderSource from "./main.wgsl";3 4export async function render(canvas: HTMLCanvasElement) {5 const gpu = await init();6 const output = surface(gpu, canvas, { dpr: 1 });7 const shader = effect(gpu, shaderSource);8 9 shader.set({ uniforms: { resolution: output.size } });10 frame(gpu, (f) => f.pass(output, shader));11 return () => gpu.dispose();12}
resolve importsremove unusedminify
result
compiled.wgsl397 B
struct U{r:vec2f}@group(0)@binding(0)var<uniform>u:U;
@fragment fn fs_main(@location(0)b:vec2f)->@location(0)vec4f{
let c=(b-0.5)*(u.r/min(u.r.x,u.r.y));let d=length(c);let e=atan2(c.y,c.x)/6.28318+0.5;
let f=exp(-95.0*pow(abs(d-0.31),2.0));let h=exp(-18.0*pow(abs(d-0.31),2.0));
let i=0.82+0.18*sin(e*25.13272+d*42.0);let g=a(e+d*0.65);
return vec4f(g*(f*i*2.0+h*0.22),1.0)}fn a(b:f32)->vec3f{let c=vec3f(0.0,0.33,0.67);
return 0.55+0.45*cos(6.28318*(b+c))}The CLI guides your agent.
The docs, examples, validation tools, and runtime diagnostics are accesible from the CLI. Everything starts with npx vgpu
Browse examples
View all →
Depth Estimation
Estimate depth from a photo or webcam with ONNX Runtime Web on WebGPU. Shade its GPU-resident output beside the input through a zero-copy vgpu buffer wrap.
FFT ocean surface
A displaced ocean surface driven by a real inverse FFT. A Phillips spectrum evolves in frequency space, two compute passes run a shared-memory radix-2 IFFT into a displacement field, and a procedural grid rides it with per-pixel normals, foam and a Fresnel sky reflection under a tunable sunset. Orbit with the mouse; tweak the sea from the panel.
Raymarched fractal
A raymarched Sierpiński tetrahedron emerges from pure black under directional light and restrained HDR bloom, with drag-only orbit controls.
Next.js Flare
Next.js logo shader — a rim-lit N glyph with volumetric scattering: a 48-step ray walk jittered by blue noise over a separable Gaussian blur chain, breathing autonomously until the pointer takes over.
Explore the Docs
Getting Started →
Install vgpu and render with init().
Core Concepts →
Learn Gpu, set(), targets, frames, bundles, and adapters.
API Reference →
Package map and generated topic pages.
Examples →
Live WebGPU demos with read-only source views.
Building agent tooling? Read the vgpu Examples API reference or inspect its OpenAPI 3.1 description.
