Learn vgpu
Tiny TypeScript WebGPU API. Change one value per step, then Run.
step 01 · init · what you edit
@fragment fn fs_main(@location(0) uv: vec2f) -> @location(0) vec4f {
return vec4f(0.42, 0.25, 0.94, 1.0);
}Those four numbers are r, g, b, a. The panel on the right is that color. Try vec4f(1.0, 0.2, 0.2, 1.0) for red.
vec4f(0.42, 0.25, 0.94, 1.0)- 01
initone handleEdit the four numbers inside
vec4f(0.42, 0.25, 0.94, 1.0)— that's r, g, b, a. Tryvec4f(1.0, 0.2, 0.2, 1.0)for red. Then Run. - 02
effectbindings are namesEdit
{ set: { tint: { r, g, b, a } } }. Changetint.b. Then Run. - 03
frameexplicit passesEdit the
2.0insin(params.time * 2.0)— that's pulse speed. Then Run. - 04
targetread a PNGEdit
vec4f(uv, 0.4, 1.0)—0.4is the blue channel. Then Run. The PNG istarget.read()on the node runtime. - 05
htmlpixels start as HTMLEdit
amount: 0.012(warp) and/or thewashvec3f(0.42, 0.25, 0.94)purple mix. Then Run.
why
Why vgpu is cool
Most WebGPU libraries want to be an engine. vgpu wants to be a small function. You write one program, and it is a live canvas, a serverless PNG, and a CI snapshot.
Same shader, three runtimes
Browser, vgpu/node (Dawn, no window), vgpu/mock (CI). One file. This studio walks that API in the tab; the node pane is target.read() of the current pass.
A library, not a scene graph
init, effect, frame, target. No hidden global, no add-this-mesh-to-the-world. Bindings are the WGSL names. Change a value, hit Run.
Built for the thing next to the canvas
OG images, pixel diffs, headless CI. vgpu assumes the GPU program has a life outside the tab. HTML-in-Canvas is optional extra credit: pixels can start as real HTML.
FAQ
Five questions
What is vgpu?
vgpu is Vercel Labs' tiny TypeScript WebGPU API. The same calls run in the browser, headless Node via Dawn (vgpu/node), and CI via vgpu/mock. One program can be a live canvas, an OG PNG, and a pixel snapshot.
What do I edit in this studio?
On step 1, change the four numbers inside vec4f(r, g, b, a), then hit Run. Each later step names one value: tint, the sin frequency, the offscreen vec4, or the HTML warp amount.
Do I need HTML-in-Canvas for vgpu?
No. vgpu draws to a canvas or an offscreen target. HTML-in-Canvas is only when the source pixels should be live, clickable HTML. The holographic foil on html-in-canvas.dev is extra credit, not this lesson.
Can vgpu render on a server for OG images?
Yes. target.read() is the product. This studio's node pane is a browser stand-in for that readback. Swap the import to vgpu/node and Dawn renders the same WGSL with no window.
Does the CI runtime need a GPU?
vgpu/mock is a software adapter: same API, no GPU. The studio CI pane asserts against the browser target.read() of your current pass. It is a stand-in, not a Dawn process on this server.
Extra credit: holographic foil at html-in-canvas.dev (opens in a new tab). Docs at vgpu.sh (opens in a new tab).