30:T5d9,## Usage ```js import { quad } from "@nxrix/shader-quad" ``` ### Parameters | Parameter | Type | Default | Description | | :-------- | :--- | :------ | :---------- | | `width` | `number` | `256` | Canvas width | | `height` | `number` | `256` | Canvas height | | `paused` | `boolean` | `true` | Start paused (`true`) or running (`false`). When paused, only re-renders on interaction (resize, mouse, touch, `step()`). | | `controls` | `boolean` | `false` | Show a Reset / Play-Pause / Step button bar below the canvas. | | `uniforms` | `object` | `{}` | User-defined uniforms. | | `common` | `string` | `""` | Source prepended to every shader (buffers + main). | | `main` | `string` | `""` | Main shader. | | `bufferA` | `string` | `undefined` | `iChannel0`. | | `bufferB` | `string` | `undefined` | `iChannel1`. | | `bufferC` | `string` | `undefined` | `iChannel2`. | | `bufferD` | `string` | `undefined` | `iChannel3`. | ### Built-in uniforms | Uniform | Type | Description | | :------ | :-------- | :---------- | | `iResolution` | `vec3` | `(width, height, aspect)` in pixels. Updated on resize. | | `iTime` | `float` | Seconds since start. | | `iFrame` | `int` | Frame counter. | | `iMouse` | `vec4` | `(x, y, z, w)`. `x/y` = current cursor in pixel coords (y up). `z/w` = click position (`z` is negated as a click flag - `z < 0` means "currently pressed"). | | `iCamera` | `vec2` | Pan offset accumulated from drag, in pixel coords. | | `iChannel0..3` | `sampler2D` | Feedback textures. | 31:T30ab,quad = ({ width = 256, height = 256, paused = true, controls = false, uniforms = {}, common = "", main = "", bufferA, bufferB, bufferC, bufferD } = {}) => { const renderer = new THREE.WebGLRenderer({ antialias: false, preserveDrawingBuffer: true }); //renderer.outputColorSpace = THREE.LinearSRGBColorSpace; const canvas = renderer.domElement; canvas.style.maxWidth = "100%"; canvas.style.imageRendering = "pixelated"; canvas.style.touchAction = "pinch-zoom"; function handleSource(string, errorLine) { const lines = string.split("\n"); const lines2 = []; const from = Math.max(errorLine - 6, 0); const to = Math.min(errorLine + 6, lines.length); for (let i = from; i < to; i++) { const line = i + 1; lines2.push(`${line === errorLine ? ">" : " "} ${line}: ${lines[i]}`); } return lines2.join("\n"); } function getShaderErrors(gl, shader, type) { const status = gl.getShaderParameter(shader, gl.COMPILE_STATUS); const shaderInfoLog = gl.getShaderInfoLog(shader) || ""; const errors = shaderInfoLog.trim(); if (status && errors === "") return ""; const errorMatches = /ERROR: 0:(\d+)/.exec(errors); if (errorMatches) { const errorLine = parseInt(errorMatches[1]); return ( errors + "\n" + handleSource(gl.getShaderSource(shader), errorLine) ); } else { return errors; } } const errors = []; renderer.debug.onShaderError = ( gl, program, glVertexShader, glFragmentShader ) => { /*const programInfoLog = gl.getProgramInfoLog(program) || ""; const fragmentShaderInfoLog = gl.getShaderInfoLog(glFragmentShader) || ""; const programLog = programInfoLog.trim(); const fragmentLog = fragmentShaderInfoLog.trim();*/ if (gl.getProgramParameter(program, gl.LINK_STATUS) === false) { const fragmentErrors = getShaderErrors(gl, glFragmentShader, "fragment"); errors.push(fragmentErrors); } }; const dummyTexture = new THREE.DataTexture( new Uint8Array([0, 0, 0, 0]), 1, 1, THREE.RGBAFormat ); dummyTexture.needsUpdate = true; uniforms.iResolution ??= { value: { x: 0, y: 0, z: 1 } }; uniforms.iTime ??= { value: 0 }; uniforms.iFrame ??= { value: 0 }; uniforms.iMouse ??= { value: { x: 0, y: 0, z: 0, w: 0 } }; uniforms.iCamera ??= { value: { x: 0, y: 0 } }; uniforms.iChannel0 ??= { value: dummyTexture }; uniforms.iChannel1 ??= { value: dummyTexture }; uniforms.iChannel2 ??= { value: dummyTexture }; uniforms.iChannel3 ??= { value: dummyTexture }; uniforms._pan ??= { lastPointer: { x: 0, y: 0 }, lastCamera: { x: 0, y: 0 } }; uniforms.iTime.value = 0; uniforms.iFrame.value = 0; uniforms.iMouse.value.z = 0; uniforms.iMouse.value.w = 0; const vs = `void main() { gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1); }`; const createShaderMaterial = (source) => { const fs = ` precision highp float; uniform vec3 iResolution; uniform int iFrame; uniform float iTime; uniform vec4 iMouse; uniform vec2 iCamera; uniform sampler2D iChannel0; uniform sampler2D iChannel1; uniform sampler2D iChannel2; uniform sampler2D iChannel3; ${common} ${source} void main() { vec2 fragCoord = gl_FragCoord.xy; mainImage(gl_FragColor, fragCoord); } `; const m = new THREE.ShaderMaterial({ uniforms, vertexShader: vs, fragmentShader: fs, depthWrite: false, depthTest: false }); return m; }; class DoubleBuffer { constructor(w, h) { this.read = new THREE.WebGLRenderTarget(w, h, { minFilter: THREE.NearestFilter, magFilter: THREE.NearestFilter, format: THREE.RGBAFormat, type: THREE.FloatType }); this.write = this.read.clone(); } swap() { const tmp = this.read; this.read = this.write; this.write = tmp; } setSize(w, h) { this.read.setSize(w, h); this.write.setSize(w, h); } dispose() { this.read.dispose(); this.write.dispose(); } } const targets = { bufferA: bufferA ? new DoubleBuffer(width, height) : null, bufferB: bufferB ? new DoubleBuffer(width, height) : null, bufferC: bufferC ? new DoubleBuffer(width, height) : null, bufferD: bufferD ? new DoubleBuffer(width, height) : null }; const geometry = new THREE.PlaneGeometry(2, 2); const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1); const scene = new THREE.Scene(); const mesh = new THREE.Mesh(geometry); scene.add(mesh); const passes = []; if (bufferA) passes.push({ key: "bufferA", material: createShaderMaterial(bufferA), target: targets.bufferA }); if (bufferB) passes.push({ key: "bufferB", material: createShaderMaterial(bufferB), target: targets.bufferB }); if (bufferC) passes.push({ key: "bufferC", material: createShaderMaterial(bufferC), target: targets.bufferC }); if (bufferD) passes.push({ key: "bufferD", material: createShaderMaterial(bufferD), target: targets.bufferD }); passes.push({ key: "main", material: createShaderMaterial(main), target: null }); let id = null; let last = 0; let elapsed = 0; const render = () => { for (const pass of passes) { mesh.material = pass.material; if (pass.target) { renderer.setRenderTarget(pass.target.write); renderer.render(scene, camera); pass.target.swap(); if (pass.key === "bufferA") uniforms.iChannel0.value = targets.bufferA.read.texture; if (pass.key === "bufferB") uniforms.iChannel1.value = targets.bufferB.read.texture; if (pass.key === "bufferC") uniforms.iChannel2.value = targets.bufferC.read.texture; if (pass.key === "bufferD") uniforms.iChannel3.value = targets.bufferD.read.texture; } else { renderer.setRenderTarget(null); renderer.render(scene, camera); } } uniforms.iFrame.value += 1; }; const animate = (time) => { if (last === 0) last = time; const delta = (time - last) / 1000; last = time; elapsed += delta; uniforms.iTime.value = elapsed; render(); if (!paused) id = requestAnimationFrame(animate); }; const resize = () => { const a = Math.min(window.innerWidth * devicePixelRatio, width); const b = a / (width / height); renderer.setSize(a, b, false); canvas.style.width = a / devicePixelRatio + "px"; uniforms.iResolution.value.x = a; uniforms.iResolution.value.y = b; uniforms.iResolution.value.z = a / b; for (const key in targets) { if (targets[key]) { targets[key].setSize(a, b); } } if (paused) render(); }; window.addEventListener("resize", resize); resize(); const updateCoords = (clientX, clientY, click = false) => { const rect = canvas.getBoundingClientRect(); const x = ((clientX - rect.left) / rect.width) * canvas.width; const y = (1 - (clientY - rect.top) / rect.height) * canvas.height; uniforms.iMouse.value.x = x; uniforms.iMouse.value.y = y; if (click) { uniforms._pan.lastPointer.x = x; uniforms._pan.lastPointer.y = y; uniforms._pan.lastCamera.x = uniforms.iCamera.value.x; uniforms._pan.lastCamera.y = uniforms.iCamera.value.y; uniforms.iMouse.value.z = -x; uniforms.iMouse.value.w = y; } else { uniforms.iCamera.value.x = uniforms._pan.lastCamera.x - (x - uniforms._pan.lastPointer.x); uniforms.iCamera.value.y = uniforms._pan.lastCamera.y - (y - uniforms._pan.lastPointer.y); } if (paused) render(); }; let mouseDown = false; const onMouseDown = (e) => { mouseDown = true; updateCoords(e.clientX, e.clientY, true); }; const onMouseUp = () => { mouseDown = false; uniforms.iMouse.value.z = 0; uniforms.iMouse.value.w = 0; }; const onMouseMove = (e) => { if (mouseDown) { updateCoords(e.clientX, e.clientY, false); } }; const onTouchStart = (e) => { if (e.touches.length === 1) { e.preventDefault(); const touch = e.touches[0]; if (touch) { mouseDown = true; updateCoords(touch.clientX, touch.clientY, true); } } }; const onTouchMove = (e) => { if (e.touches.length === 1 && mouseDown) { e.preventDefault(); const touch = e.touches[0]; updateCoords(touch.clientX, touch.clientY, false); } }; const onTouchEnd = (e) => { if (e.touches.length === 0) { //e.preventDefault(); mouseDown = false; uniforms.iMouse.value.z = 0; uniforms.iMouse.value.w = 0; } if (paused) render(); }; const onTouchCancel = (e) => { if (e.touches.length === 0) { //e.preventDefault(); mouseDown = false; uniforms.iMouse.value.z = 0; uniforms.iMouse.value.w = 0; } if (paused) render(); }; canvas.addEventListener("mousedown", onMouseDown); canvas.addEventListener("mouseup", onMouseUp); canvas.addEventListener("mousemove", onMouseMove); canvas.addEventListener("touchstart", onTouchStart, { passive: false }); canvas.addEventListener("touchmove", onTouchMove, { passive: false }); canvas.addEventListener("touchend", onTouchEnd, { passive: false }); canvas.addEventListener("touchcancel", onTouchCancel, { passive: false }); Inputs.disposal(canvas).then(() => { if (id) cancelAnimationFrame(id); window.removeEventListener("resize", resize); canvas.removeEventListener("mousedown", onMouseDown); canvas.removeEventListener("mouseup", onMouseUp); canvas.removeEventListener("mousemove", onMouseMove); canvas.removeEventListener("touchstart", onTouchStart); canvas.removeEventListener("touchmove", onTouchMove); canvas.removeEventListener("touchend", onTouchEnd); canvas.removeEventListener("touchcancel", onTouchCancel); renderer.dispose(); geometry.dispose(); for (const pass of passes) { pass.material.dispose(); } for (const key in targets) { if (targets[key]) { targets[key].dispose(); } } dummyTexture.dispose(); renderer.forceContextLoss(); }); let rbtn; let pbtn; let sbtn; if (controls) { rbtn = html``; pbtn = html``; sbtn = html``; } const e = html`

${canvas} ${ controls ? html`

${rbtn}${pbtn}${sbtn}

` : "" }

`; e.pause = () => { if (id) { cancelAnimationFrame(id); id = null; paused = true; if (controls) pbtn.innerText = paused ? "Play" : "Pause"; } }; e.resume = () => { if (!id && paused) { paused = false; last = 0; if (controls) pbtn.innerText = paused ? "Play" : "Pause"; id = requestAnimationFrame(animate); } }; e.step = (delta = 1 / 60) => { /*if (id) { cancelAnimationFrame(id); id = null; paused = true; }*/ if (paused) { elapsed += delta; uniforms.iTime.value = elapsed; render(); } }; e.clearBuffers = () => { const currentTarget = renderer.getRenderTarget(); renderer.setClearColor(0x000000, 0); for (const key in targets) { const buffer = targets[key]; if (buffer) { renderer.setRenderTarget(buffer.read); renderer.clear(); renderer.setRenderTarget(buffer.write); renderer.clear(); } } renderer.setRenderTarget(currentTarget); }; if (controls) { rbtn.onclick = () => { elapsed = 0; uniforms.iTime.value = 0; uniforms.iFrame.value = 0; e.clearBuffers(); render(); }; pbtn.onclick = () => { if (paused) e.resume(); else e.pause(); }; sbtn.onclick = () => { e.step(); }; } e.canvas = canvas; e.uniforms = uniforms; e.clearBuffers(); animate(performance.now()); if (errors.length > 0) return html`

${errors.join("\n\n")}

`; return e; }32:[] 2e:{"title":"Shader Quad","cells":[{"id":0,"value":"# Shader Quad","pinned":false,"hidden":false,"mode":"md"},{"id":711,"value":"shader = quad({\n width: 512 * 1.5,\n height: 512,\n paused: false,\n controls: true,\n main: `\n void mainImage(out vec4 fragColor, in vec2 fragCoord) {\n vec2 u = (fragCoord*2.0-iResolution.xy)/min(iResolution.x,iResolution.y)*1.5;\n vec2 a = abs(u);\n vec3 col = vec3(u*0.5+0.5,sin(iTime)*0.5+0.5)*(a.x<1.0&&a.y<1.0?1.0:0.0);\n fragColor = vec4(col,1);\n }`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":211,"value":"$30","pinned":false,"hidden":false,"mode":"md"},{"id":91,"value":"## Core","pinned":false,"hidden":false,"mode":"md"},{"id":8,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"THREE = {\n try {\n return await import(\"three@0.184.0\");\n } catch (e) {\n // IOS 15 issue\n return await import(\"https://esm.sh/three@0.184.0?target=es2020\");\n }\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}