Install vgpu, render a gradient to a canvas, and load .wgsl files in Next.js or Vite.

Web

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

Install

npm install vgpu

Render a gradient

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

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

// gradient.wgsl
@fragment fn fs_main(@location(0) uv: vec2f) -> @location(0) vec4f {
  return vec4f(uv, 0.4, 1.0);
}

The entry shader can import reusable functions, structs, aliases, and constants from other .wgsl files. Learn the authoring model and pure-module rule in WGSL modules.

Load .wgsl files in Next.js

Add the loader rule to your Next.js config:

// 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:

// 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:

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