v150 · WebGPU
Transform Uniforms
Drag the canvas to translate, use sliders for rotation and scale. Translation, rotation, and scale are packed into four floats and sent as immediate data each frame — no buffer round-trips.
Feature detection: checking…
// Transform = [tx, ty, rotation, scale] — 4 floats = 16 bytes
// Sent to vertex shader via immediates each frame
// WGSL (conceptual — immediates syntax is experimental):
// var<immediate> transform: vec4f;
//
// @vertex fn vs(pos: vec2f) -> @builtin(position) vec4f {
// let tx = transform.x; // translate X
// let ty = transform.y; // translate Y
// let rot = transform.z; // rotation (radians)
// let sc = transform.w; // scale
// let cos_r = cos(rot); let sin_r = sin(rot);
// let rotated = vec2f(pos.x*cos_r - pos.y*sin_r,
// pos.x*sin_r + pos.y*cos_r);
// return vec4f((rotated * sc + vec2f(tx, ty)) / vec2f(1.5, 1.0), 0, 1);
// }
// JS:
const xform = new Float32Array([tx, ty, rotationRad, scale]);
renderPass.setImmediateData(0, xform); // Chrome 150+see also
implementation reference
Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗