function shader({ width = 640, height = 480, devicePixelRatio = window.devicePixelRatio, invalidation, // when the canvas is considered disposed visibility, // if present, only draw when resolves uniforms = {}, // declare your uniforms here inputs = {}, // bind inputs to uniforms iMouse = false, // not yet supported! iTime = false, // enable built-in iTime uniform flipY = true, // Use WebGL-style y-up convention for fragCoord sources = [], // extra sources (lib functions etc.) controls = false, // display animation controls play = true // play immediately when iTime = true //preserveDrawingBuffer = false // if you want “Download PNG” to work } = {}) { if (!navigator.gpu) { throw new Error("WebGPU is not supported on this browser."); } uniforms = new Map( Object.entries(uniforms).map(([name, type]) => [name, { type }]) ); inputs = new Map(Object.entries(inputs)); for (const { type } of uniforms.values()) if (type !== "float") throw new Error(`unknown type: ${type}`); for (const name of inputs.keys()) if (!uniforms.has(name)) uniforms.set(name, { type: "float" }); if (iTime && !uniforms.has("iTime")) uniforms.set("iTime", { type: "float" }); if (visibility !== undefined && typeof visibility !== "function") { throw new Error("invalid visibility"); } return async function () { const id = `shader-${crypto.randomUUID()}`; const container = DOM.element("div"); container.id = id; container.style.display = "inline-block"; const source = String.raw.apply(String, arguments); const canvas = document.createElement("canvas"); canvas.width = width * devicePixelRatio; canvas.height = height * devicePixelRatio; canvas.style = `max-width: 100%; width: ${width}px; height: auto;`; container.appendChild(canvas); const adapter = await navigator.gpu.requestAdapter(); const device = await adapter.requestDevice({ requiredFeatures: ["timestamp-query"] }); if (!adapter.features.has("timestamp-query")) { throw new Error("Timestamp query feature is not available"); } const context = canvas.getContext("webgpu"); const querySet = device.createQuerySet({ type: "timestamp", count: 2 }); let dirty = true; let startTime; let timeDisplay = DOM.element("pre"); let msDisplay = DOM.element("pre"); let rewind, playPause; let playing = play; if (controls) { const css = html``; container.appendChild(css); const controlsDiv = DOM.element("div"); controlsDiv.classList.add("controls"); container.appendChild(controlsDiv); rewind = DOM.element("button"); rewind.classList.add("rewind"); controlsDiv.appendChild(rewind); playPause = DOM.element("button"); playPause.classList.add("play-pause"); if (iTime && play) playPause.classList.add("playing"); controlsDiv.appendChild(playPause); timeDisplay.classList.add("time-display"); controlsDiv.appendChild(timeDisplay); msDisplay.classList.add("ms-display"); controlsDiv.appendChild(msDisplay); } const format = navigator.gpu.getPreferredCanvasFormat(); context.configure({ device, format, alphaMode: "opaque" }); const ondispose = invalidation === undefined ? Inputs.disposal(canvas) : invalidation; let frame; let frameCounter = 0; let disposed = false; ondispose.then(() => (disposed = true)); const bindingWGSL = []; const bindGroupEntries = []; const uniformBuffers = new Map(); for (const [name, uniform] of uniforms) { const buffer = device.createBuffer({ size: 4, usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST }); uniformBuffers.set(name, buffer); const binding = bindGroupEntries.length; bindGroupEntries.push({ binding, resource: { buffer } }); bindingWGSL.push( `@binding(${binding}) @group(0) var ${name}: f32;` ); } const vert = `@vertex fn vs_main(@builtin(vertex_index) vertexIndex: u32) -> @builtin(position) vec4 { var positions = array, 6>( vec2(-1.0, -1.0), vec2( 1.0, -1.0), vec2(-1.0, 1.0), vec2(-1.0, 1.0), vec2( 1.0, -1.0), vec2( 1.0, 1.0) ); return vec4(positions[vertexIndex], 0.0, 1.0); }`; const entry = `_fragMain_${crypto.randomUUID().replace(/-/g, "_")}`; const frag = `${bindingWGSL.join("\n")} const iResolution = vec3(${[ (width * devicePixelRatio).toFixed(1), (height * devicePixelRatio).toFixed(1), devicePixelRatio.toFixed(1) ].join(", ")}); ${[...sources, source].join("\n")} @fragment fn ${entry}(@builtin(position) fragCoord: vec4) -> @location(0) vec4 { var coord = fragCoord; ${flipY ? "coord.y = iResolution.y - coord.y;" : ""} var fragColor: vec4 = vec4(0f); mainImage(coord.xy, &fragColor); return fragColor; }`; const vertModule = device.createShaderModule({ code: vert }); const fragModule = device.createShaderModule({ code: frag }); // Format error messages equivalently to WebGPU's builtin console reporting. // Really just so that we can display errors to the *notebook* rather than // to the *JavaScript console*. const fragInfo = await fragModule.getCompilationInfo(); if (fragInfo.messages.length) { const errLines = [ `${fragInfo.messages.length} error(s) generated while compiling the shader:` ]; const lines = frag.split(/\n/g); for (const message of fragInfo.messages) { const line = lines[message.lineNum]; errLines.push( `:${message.lineNum}:${message.linePos} error: ${message.message}` ); errLines.push(lines[message.lineNum - 1]); errLines.push( "".padStart(message.linePos - 1) + "".padStart(message.length, "^") ); } throw new Error(errLines.join("\n")); } const pipeline = device.createRenderPipeline({ layout: "auto", vertex: { module: vertModule, entryPoint: "vs_main" }, fragment: { module: fragModule, entryPoint: entry, targets: [{ format }] }, primitive: { topology: "triangle-list" } }); let bindGroup; if (bindGroupEntries.length) { bindGroup = device.createBindGroup({ layout: pipeline.getBindGroupLayout(0), entries: bindGroupEntries }); } const resolveBuffer = device.createBuffer({ size: 2 * 8, // 2 timestamps, 8 bytes each (64-bit) usage: GPUBufferUsage.QUERY_RESOLVE | GPUBufferUsage.COPY_SRC }); const readBuffer = device.createBuffer({ size: resolveBuffer.size, usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ }); const msDecay = 0.999; let msEased = 0; async function draw(time = 0) { if (!playing && !dirty) return; dirty = false; timeDisplay.textContent = `${((time - stopTime) / 1000).toFixed( 2 )}`.padStart(5); const commandEncoder = device.createCommandEncoder(); commandEncoder.resolveQuerySet(querySet, 0, 2, resolveBuffer, 0); const passEncoder = commandEncoder.beginRenderPass({ timestampWrites: { querySet, beginningOfPassWriteIndex: 0, endOfPassWriteIndex: 1 }, colorAttachments: [ { view: context.getCurrentTexture().createView(), loadOp: "clear", clearValue: { r: 0, g: 0, b: 0, a: 1 }, storeOp: "store" } ] }); if (uniformBuffers.has("iTime")) { const buffer = uniformBuffers.get("iTime"); device.queue.writeBuffer( buffer, 0, new Float32Array([(time - stopTime) / 1000]) ); } passEncoder.setPipeline(pipeline); if (bindGroup) passEncoder.setBindGroup(0, bindGroup); passEncoder.draw(6); passEncoder.end(); device.queue.submit([commandEncoder.finish()]); try { if (readBuffer.mapState === "unmapped") { const resolveEncoder = device.createCommandEncoder(); device.queue.submit([resolveEncoder.finish()]); const copyEncoder = device.createCommandEncoder(); copyEncoder.copyBufferToBuffer( resolveBuffer, 0, readBuffer, 0, resolveBuffer.size ); device.queue.submit([copyEncoder.finish()]); await readBuffer.mapAsync(GPUMapMode.READ); const arrayBuffer = readBuffer.getMappedRange(); const timestamps = new BigUint64Array(arrayBuffer); const ms = Number(timestamps[1] - timestamps[0]) * 1e-6; if (isFinite(ms)) msEased = (1.0 - msDecay) * ms + msDecay * msEased; msDisplay.textContent = `${ms.toFixed(2)}`.padStart(5); readBuffer.unmap(); } } catch { readBuffer.unmap(); } frameCounter++; } //async function render() { // if (visibility !== undefined) await visibility(); // frame = undefined; // //draw(); //} Object.assign(container, { update(values = {}) { if (disposed) return false; for (const name in values) { const u = uniforms.get(name); if (!u) throw new Error(`unknown uniform: ${name}`); const buffer = uniformBuffers.get(name); device.queue.writeBuffer(buffer, 0, new Float32Array([values[name]])); if (!iTime) draw(); } dirty = true; return true; } }); for (const [name, input] of inputs) { const u = uniforms.get(name); if (!u) throw new Error(`unknown uniform: ${name}`); const buffer = uniformBuffers.get(name); device.queue.writeBuffer(buffer, 0, new Float32Array([input.value])); const update = () => { const buffer = uniformBuffers.get(name); device.queue.writeBuffer(buffer, 0, new Float32Array([input.value])); draw(); }; input.addEventListener("input", update); ondispose.then(() => input.removeEventListener("input", update)); } let stopTime = 0; if (rewind) { rewind.addEventListener("click", function () { startTime = playing ? performance.now() : NaN; stopTime = 0; dirty = true; draw(0); }); } if (playPause) { let stoppedAt; playPause.addEventListener("click", function () { playing = !playing; if (playing) { stopTime += performance.now() - stoppedAt; playPause.classList.add("playing"); } else { stoppedAt = performance.now(); playPause.classList.remove("playing"); } if (isNaN(startTime)) { stopTime = 0; startTime = performance.now(); } }); } startTime = performance.now(); if (iTime) { frame = true; // always rendering let timeframe; (async function tick() { if (visibility !== undefined) await visibility(); const time = performance.now() - startTime; draw(time); return (timeframe = requestAnimationFrame(tick)); })(); ondispose.then(() => cancelAnimationFrame(timeframe)); } else { draw(0); } return container; }; }