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 →
Black Hole
Raymarched gravitational lensing — null geodesics bend starlight around an event horizon while a Keplerian accretion disk glows with Doppler beaming, graded through an HDR bloom chain.
Radiance Cascades
Draw light with the pointer and watch it bounce: a jump-flooded distance field feeds six radiance cascades — base 4, geometric intervals, linear RGBA16F — merged top-down with visibility alpha into 2D global illumination.
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.
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.