wtc-gl — recipe

One class.
One shader.

FragmentShader handles canvas creation, pixel-ratio scaling, resize, and a render loop. Move your mouse — the shader above responds to u_mouse via a custom uniform.

npm install wtc-gl View on GitHub

Usage

Running in seconds.

import { FragmentShader, Uniform } from 'wtc-gl'
import frag from './my-shader.frag'

// Custom uniforms go in alongside u_time / u_resolution
const u_mouse = new Uniform({
  name: 'u_mouse',
  value: [0, 0],
  kind: 'float_vec2'
})

const fs = new FragmentShader({
  fragment: frag,
  uniforms: { u_mouse }
})

// Update the uniform value any time
window.addEventListener('mousemove', e => {
  u_mouse.value = [e.clientX, e.clientY]
})

The canvas is appended to document.body by default. Pass a container element to mount it elsewhere.

u_time and u_resolution are always provided. Add any number of extra uniforms via the uniforms option.

API

Constructor options.

fragment

GLSL fragment shader string. Import your .frag file via vite-plugin-glsl.

vertex

Custom vertex shader. Defaults to a full-screen triangle that covers the viewport.

uniforms

Extra Uniform instances beyond u_time and u_resolution.

container

The element the canvas is appended to. Defaults to document.body.

autoResize

Listens for window resize and updates the canvas and resolution uniform automatically.

onBeforeRender / onAfterRender

Callbacks fired each frame — useful for reading back values or driving external state.

One class.One shader.