Context

Everything in vgpu starts from one call. init() requests the WebGPU adapter and device and returns a Gpu context. Every other object — surfaces, targets, effects, draws, frames — is created from that context, so all of them share one device.

import { init, effect, surface, target } from "vgpu";
 
const gpu = await init();
 
const canvas = document.querySelector("canvas")!;
const canvasSurface = surface(gpu, canvas); // the canvas you render into
const colorTarget = target(gpu, { size: [256, 256] }); // an offscreen texture
const gradient = effect(gpu, `
  @fragment fn fs_main(@location(0) uv: vec2f) -> @location(0) vec4f {
    return vec4f(uv, 0.4, 1.0);
  }
`);
 
// Render the gradient onto the canvas once
gradient.draw(canvasSurface);

Create resources once, draw every frame

Create the context, surface, and effects once, up front. Each draw() renders immediately; rendering should encode work, not rebuild long-lived resources every tick.

The expensive objects — context, surface, effect — live outside your render code and are reused by every draw. What changes per frame is data, not resources.