Web

In the browser, vgpu renders with WebGPU straight to a <canvas>. Install the package, write a fragment shader, and draw.

Install

Bash
1
npm install vgpu

Render a gradient

Create a context, wrap your canvas in a Surface, and draw an effect:

TypeScript
1
2
3
4
5
6
7
8
9
import { init, effect, surface } from "vgpu";
import gradientSource from "./gradient.wgsl";
 
const gpu = await init();
const canvas = document.querySelector("canvas")!;
const canvasSurface = surface(gpu, canvas);
const gradient = effect(gpu, gradientSource);
 
gradient.draw(canvasSurface); // renders immediately
WGSL
1
2
3
4
// gradient.wgsl
@fragment fn fs_main(@location(0) uv: vec2f) -> @location(0) vec4f {
  return vec4f(uv, 0.4, 1.0);
}

Load .wgsl files in Next.js

Add the loader rule to your Next.js config:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
// next.config.mjs
const config = {
  turbopack: {
    rules: {
      "*.wgsl": {
        loaders: ["@vgpu/wgsl/loader-webpack"],
        as: "*.js",
      },
    },
  },
};
 
export default config;

Good to know: for webpack builds, add the same loader as a module rule: config.module.rules.push({ test: /\.wgsl$/, use: "@vgpu/wgsl/loader-webpack" }).

Load .wgsl files in Vite

Add the plugin from @vgpu/wgsl/loader-vite:

JavaScript
1
2
3
4
5
6
7
// vite.config.js
import { defineConfig } from "vite";
import { wgslVitePlugin } from "@vgpu/wgsl/loader-vite";
 
export default defineConfig({
  plugins: [wgslVitePlugin()],
});

Type .wgsl imports

Create a wgsl-env.d.ts in your project so TypeScript types every .wgsl import as a string:

TSX
1
/// <reference types="@vgpu/wgsl/wgsl-types" />

API in this chapter

GpuSurfaceEffect