Learn WEBGPU with Real Code Examples

# webgpu/demo/triangle.js
async function initWebGPU() {
    const canvas = document.getElementById('canvas');
    const adapter = await navigator.gpu.requestAdapter();
    const device = await adapter.requestDevice();

    // Setup GPU pipeline and render triangle
    const context = canvas.getContext('webgpu');
    // ... pipeline, buffers, shaders, rendering logic ...
}

initWebGPU();

A basic WebGPU program in JavaScript that renders a colored triangle to a canvas.

# webgpu/demo/clear_color.js
async function clearColor() {
    const canvas = document.getElementById('canvas');
    const adapter = await navigator.gpu.requestAdapter();
    const device = await adapter.requestDevice();

    const context = canvas.getContext('webgpu');
    context.configure({
        device: device,
        format: 'bgra8unorm'
    });

    const commandEncoder = device.createCommandEncoder();
    const textureView = context.getCurrentTexture().createView();
    const renderPass = commandEncoder.beginRenderPass({
        colorAttachments: [{
        view: textureView,
        clearValue: { r: 0, g: 0, b: 1, a: 1 },
        loadOp: 'clear',
        storeOp: 'store'
        }]
    });
    renderPass.end();
    device.queue.submit([commandEncoder.finish()]);
}

clearColor();

Clears the canvas with a solid color using WebGPU.

# webgpu/demo/animated_triangle.js
async function animateTriangle() {
    const canvas = document.getElementById('canvas');
    const adapter = await navigator.gpu.requestAdapter();
    const device = await adapter.requestDevice();
    const context = canvas.getContext('webgpu');
    context.configure({device: device, format: 'bgra8unorm'});

    let angle = 0;
    function frame() {
        angle += 0.01;
        // update transformation matrices for rotation
        // draw triangle
        requestAnimationFrame(frame);
    }
    frame();
}

animateTriangle();

Animates a triangle rotating using WebGPU.

# webgpu/demo/rectangle.js
async function drawRectangle() {
    const canvas = document.getElementById('canvas');
    const adapter = await navigator.gpu.requestAdapter();
    const device = await adapter.requestDevice();
    const context = canvas.getContext('webgpu');

    // Create vertex buffer for rectangle
    // Setup pipeline and render rectangle
}

drawRectangle();

Draws a rectangle using WebGPU pipeline and vertex buffer.

# webgpu/demo/compute.js
async function runCompute() {
    const adapter = await navigator.gpu.requestAdapter();
    const device = await adapter.requestDevice();

    // Create buffer, compute pipeline, and dispatch
}

runCompute();

Executes a simple compute shader using WebGPU.

# webgpu/demo/texture.js
async function loadTexture() {
    const canvas = document.getElementById('canvas');
    const adapter = await navigator.gpu.requestAdapter();
    const device = await adapter.requestDevice();
    const context = canvas.getContext('webgpu');

    // Load image texture and render it
}

loadTexture();

Loads an image texture and renders it using WebGPU.

# webgpu/demo/indexed_triangle.js
async function drawIndexed() {
    const canvas = document.getElementById('canvas');
    const adapter = await navigator.gpu.requestAdapter();
    const device = await adapter.requestDevice();
    const context = canvas.getContext('webgpu');

    // Setup vertex buffer, index buffer, and render pipeline
}

drawIndexed();

Draws a triangle using an index buffer.

# webgpu/demo/multi_triangles.js
async function drawMultiple() {
    const canvas = document.getElementById('canvas');
    const adapter = await navigator.gpu.requestAdapter();
    const device = await adapter.requestDevice();
    const context = canvas.getContext('webgpu');

    // Setup multiple vertex buffers for triangles and render
}

drawMultiple();

Renders multiple triangles with different colors.

# webgpu/demo/depth_test.js
async function depthTest() {
    const canvas = document.getElementById('canvas');
    const adapter = await navigator.gpu.requestAdapter();
    const device = await adapter.requestDevice();
    const context = canvas.getContext('webgpu');

    // Setup depth buffer and render objects
}

depthTest();

Demonstrates depth testing with WebGPU.

# webgpu/demo/offscreen.js
async function offscreenRender() {
    const canvas = document.getElementById('canvas');
    const adapter = await navigator.gpu.requestAdapter();
    const device = await adapter.requestDevice();
    const context = canvas.getContext('webgpu');

    // Create offscreen texture, render, then copy to canvas
}

offscreenRender();

Renders to a texture offscreen and displays it.