AlexWayne.codes

TypeGPU Shader Canvas

2026-02-15

TypeGPU Shader Canvas is an open source library that makes it easy to render TypeScript based fragment shaders directly to a web based canvas element through a WebGPU pipeline. Just call createShaderCanvas() with a canvas reference and a shader function and that’s it. It serves as an quick onramp for getting started with WebGPU and TypeGPU.

This is, of course, only possible because of the amazing TypeGPU library.

import { f32, vec2f, vec3f, vec4f } from "typegpu/data"
import { abs, length, select, sin, smoothstep } from "typegpu/std"

import { createShaderCanvas } from "typegpu-shader-canvas"

createShaderCanvas(
  document.getElementById("shader-canvas-example"),
  ({ uv, time, mouse, aspectRatio }) => {
    "use gpu"

    let color = vec3f()

    const r = smoothstep(0, 0.08, abs(uv.y + sin(time * 3 + uv.x * 4) * 0.2))
    const g = smoothstep(0, 0.07, abs(uv.y + sin(time * 2 + uv.x * 5) * 0.2))
    const b = smoothstep(0, 0.06, abs(uv.y + sin(time * 1 + uv.x * 6) * 0.2))
    color = color.add(vec3f(1).sub(vec3f(r, g, b)))

    const mouseDistance = mouse.uv.sub(uv)
    color = color.add(
      smoothstep(0.2, 0, length(mouseDistance.div(vec2f(1, aspectRatio)))) *
        select(0.5, f32(1), mouse.down === 1),
    )

    return vec4f(color, 1)
  },
).startRendering()

AlexWayne<Codes>

TypeGPU Shader Canvas