Build and optimize WebGPU apps with the vgpu package and entrypoints vgpu/node, vgpu/mock, vgpu/scene, and vgpu/client. Use @vgpu/render/inspect, /utils, /edit, and /perf only as slim tooling subpaths. Bundles performance guides and the API reference; load one doc at a time.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
A direct command skips the review prompt. Inspect the source before running it.
Build and optimize WebGPU apps with the vgpu package and entrypoints vgpu/node, vgpu/mock, vgpu/scene, and vgpu/client. Use @vgpu/render/inspect, /utils, /edit, and /perf only as slim tooling subpaths. Bundles performance guides and the API reference; load one doc at a time.
vgpuVersion
0.3.0
gitSha
ad9d38af0e144d12ad1182e0303253b5d27d4754
generatedAt
"2026-08-20T15:31:32.100Z"
vgpu
Generated from the vgpu .docs.md source. Each entry maps to a file in references/ and to a
doc you can load on demand with the CLI — load only what you need, don't read the whole skill:
vgpu is layered: vgpu/core (thin WebGPU wrappers) → vgpu (main API with WGSL reflection) → vgpu/scene (geometry/camera helpers). Lower layers are always accessible and interoperable.
Glossary: Surface means a canvas-backed render target (swapchain) created with surface(gpu, canvas); do not confuse it with the general phrase ‘API surface’.
Context — Everything in vgpu starts from one call. references/guides/concepts-context.docs.md
Draws — A Draw renders geometry with custom vertex buffers: you write both the vertex and the fragment stage, and a geometry supplies the buffers. references/guides/concepts-draws.docs.md
Compilation — Pipelines compile lazily: the first draw() against a new target pays the pipeline creation cost, and that cost lands inside your frame. references/guides/concepts-compilation.docs.md
Effects — An Effect is a full-screen fragment shader created with effect(gpu, source). references/guides/concepts-effects.docs.md
Passes — A pass is a render-pass section inside a frame. references/guides/concepts-passes.docs.md
Frames — A frame is one unit of GPU work. references/guides/concepts-frames.docs.md
Render bundles — A render loop re-encodes every pipeline, bind group, and draw on every tick — even when nothing changed. references/guides/concepts-render-bundles.docs.md
Writing or optimizing a shader? Read performance-model first, then the rest as needed.
WebGPU screenshots with agent-browser — Use agent-browser to verify and capture vgpu previews that run WebGPU on Linux, including containers without a GPU. references/guides/agent-browser-webgpu.docs.md
Authoring shaders for performance — Write WGSL so reflection can build stable layouts. references/guides/authoring-for-perf.docs.md
Browser testing with Playwright WebGPU — Browser tests should exercise the same public API users copy: init(), surface(gpu, canvas, opts), explicit targets, and deterministic frame submiss… references/guides/browser-testing.docs.md
External ticker — By default vgpu owns the clock: every frame(gpu) moves clock(gpu).time forward by the wall-clock delta since the last frame, and frameLoop(gpu, cb)… references/guides/external-ticker.docs.md
Getting started — Start with the public vgpu package. references/guides/getting-started.docs.md
Measuring — Measure the thing you intend to optimize: CPU encoding, pipeline warm-up, bind-group churn, target memory, or shader cost. references/guides/measuring.docs.md
Overview — Share one GPUDevice between vgpu and a machine learning runtime so model outputs stay on the GPU. references/guides/ml.docs.md
Quickstart: Browser — In this quickstart you run an ONNX model with ONNX Runtime Web's WebGPU execution provider and consume its output with vgpu shaders — on one shared… references/guides/ml-browser.docs.md
Buffers & ownership — ts export interface InitOptions { readonly adapter?: VGPUAdapter; / Never set: adoption lives in initFromDevice(device). references/guides/ml-buffers.docs.md
Quickstart: Node — In this quickstart you run the same integration in Node, with Dawn providing WebGPU. references/guides/ml-node.docs.md
Using vgpu with Next.js and other bundlers — effect(gpu, source) takes WGSL as a string, so nothing forces you to use a bundler loader. references/guides/nextjs.docs.md
Using vgpu without a bundler — effect(gpu, source) and draw(gpu, { shader }) take WGSL as a plain string, so nothing forces you to use a bundler. references/guides/no-bundler.docs.md
Optimize a pass — Optimize one pass by first deciding what changes every frame. references/guides/optimize-pass.docs.md
API reference
258 symbols across 20 packages — open references/<package>/<file> or npx -y vgpu docs cat <symbol>:
Performance model — vgpu's public API is organized around stable identities. references/guides/performance-model.docs.md
Performance patterns — This is the quick index. references/guides/performance-patterns.docs.md
Performance playbook: write fast vgpu by default — This guide is for LLMs and humans writing shaders. references/guides/performance-playbook.docs.md
Publishing WGSL module packages — A WGSL module package is an ordinary npm package whose exports map points at .wgsl files instead of JavaScript. references/guides/publishing-wgsl-packages.docs.md
Debugging shaders by extracting internal values — A shader has no console.log. references/guides/shader-debugging.docs.md
Shader diagnostics and fix-its — Use these messages as the self-correction map for generated shader code. references/guides/shader-fix-its.docs.md
The default workflow for developing shaders with vgpu — Follow these eight steps in order every time you write or change a shader. references/guides/shader-workflow.docs.md
Practical texture-format matrix — Choose a target format from the operations it must support, not just its channel precision. references/guides/texture-formats.docs.md
Two-pass rendering: offscreen depth target composited to the canvas — Surfaces and canvases have no depth buffer, and Draws need one for any real 3D scene. references/guides/two-pass-rendering.docs.md
