28:null 29:["$","title",null,{"children":"WebGPU Shader | Ricky Reusser | Observable"}] 2e:T188d,shader({ width: 512, height: 288, invalidation, iTime: true, visibility, iResolution: true, controls: true })`/* * "Seascape" by Alexander Alekseev aka TDM - 2014 * License Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License. * Contact: tdmaav@gmail.com */ const NUM_STEPS: i32 = 32; const PI: f32 = 3.141592; const EPSILON: f32 = 1e-3; fn EPSILON_NRM() -> f32 { return 0.1 / iResolution.x; } fn SEA_TIME() -> f32 { return 1.0 + iTime * SEA_SPEED; } // sea const ITER_GEOMETRY: i32 = 3; const ITER_FRAGMENT: i32 = 5; const SEA_HEIGHT: f32 = 0.6; const SEA_CHOPPY: f32 = 4.0; const SEA_SPEED: f32 = 0.8; const SEA_FREQ: f32 = 0.16; const SEA_BASE: vec3 = vec3(0.0,0.09,0.18); const SEA_WATER_COLOR: vec3 = vec3(0.8,0.9,0.6)*0.6; const octave_m = mat2x2(1.6,1.2,-1.2,1.6); // math fn fromEuler(ang: vec3) -> mat3x3 { let a1 = vec2(sin(ang.x),cos(ang.x)); let a2 = vec2(sin(ang.y),cos(ang.y)); let a3 = vec2(sin(ang.z),cos(ang.z)); return mat3x3( vec3(a1.y*a3.y+a1.x*a2.x*a3.x,a1.y*a2.x*a3.x+a3.y*a1.x,-a2.y*a3.x), vec3(-a2.y*a1.x,a1.y*a2.y,a2.x), vec3(a3.y*a1.x*a2.x+a1.y*a3.x,a1.x*a3.x-a1.y*a3.y*a2.x,a2.y*a3.y) ); } fn hash( p: vec2 ) -> f32 { let h = dot(p, vec2(127.1,311.7)); return fract(sin(h)*43758.5453123); } fn noise( p: vec2 ) -> f32 { let i = floor( p ); let f = fract( p ); let u = f*f*(3.0-2.0*f); return -1.0+2.0*mix( mix( hash( i + vec2(0.0,0.0) ), hash( i + vec2(1.0,0.0) ), u.x), mix( hash( i + vec2(0.0,1.0) ), hash( i + vec2(1.0,1.0) ), u.x), u.y); } // lighting fn diffuse(n: vec3, l: vec3, p: f32) -> f32 { return pow(dot(n,l) * 0.4 + 0.6, p); } fn specular(n: vec3, l: vec3, e: vec3, s: f32) -> f32 { let nrm = (s + 8.0) / (PI * 8.0); return pow(max(dot(reflect(e,n),l),0.0),s) * nrm; } // sky fn getSkyColor(e: vec3) -> vec3 { let ep: vec3 = vec3(e.x, (max(e.y, 0.0) * 0.8 + 0.2) * 0.8, e.z); return vec3(pow(1.0-ep.y,2.0), 1.0-ep.y, 0.6+(1.0-ep.y)*0.4) * 1.1; } // sea fn sea_octave(uv_: vec2, choppy: f32) -> f32 { let uv = uv_ + noise(uv_); var wv = 1.0-abs(sin(uv)); let swv = abs(cos(uv)); wv = mix(wv,swv,wv); return pow(1.0-pow(wv.x * wv.y,0.65),choppy); } fn map(p: vec3) -> f32 { var freq = SEA_FREQ; var amp = SEA_HEIGHT; var choppy = SEA_CHOPPY; var uv = p.xz; uv.x *= 0.75; var d: f32; var h: f32 = 0.0; for(var i: i32 = 0; i < ITER_GEOMETRY; i++) { d = sea_octave((uv+SEA_TIME())*freq,choppy); d += sea_octave((uv-SEA_TIME())*freq,choppy); h += d * amp; uv *= octave_m; freq *= 1.9; amp *= 0.22; choppy = mix(choppy,1.0,0.2); } return p.y - h; } fn map_detailed(p: vec3) -> f32 { var freq = SEA_FREQ; var amp = SEA_HEIGHT; var choppy = SEA_CHOPPY; var uv = p.xz; uv.x *= 0.75; var d: f32; var h = 0.0; for(var i: i32 = 0; i < ITER_FRAGMENT; i++) { d = sea_octave((uv+SEA_TIME())*freq,choppy); d += sea_octave((uv-SEA_TIME())*freq,choppy); h += d * amp; uv *= octave_m; freq *= 1.9; amp *= 0.22; choppy = mix(choppy,1.0,0.2); } return p.y - h; } fn getSeaColor(p: vec3, n: vec3, l: vec3, eye: vec3, dist: vec3) -> vec3 { var fresnel = clamp(1.0 - dot(n, -eye), 0.0, 1.0); fresnel = min(fresnel * fresnel * fresnel, 0.5); let reflected = getSkyColor(reflect(eye, n)); let refracted = SEA_BASE + diffuse(n, l, 80.0) * SEA_WATER_COLOR * 0.12; var color = mix(refracted, reflected, fresnel); let atten = max(1.0 - dot(dist, dist) * 0.001, 0.0); color += SEA_WATER_COLOR * (p.y - SEA_HEIGHT) * 0.18 * atten; color += specular(n, l, eye, 60.0); return color; } // tracing fn getNormal(p: vec3, eps: f32) -> vec3 { var n: vec3; n.y = map_detailed(p); n.x = map_detailed(vec3(p.x+eps,p.y,p.z)) - n.y; n.z = map_detailed(vec3(p.x,p.y,p.z+eps)) - n.y; n.y = eps; return normalize(n); } struct TraceResult { value: f32, point: vec3 } fn heightMapTracing(ori: vec3, dir: vec3) -> TraceResult { var result: TraceResult; var tm = 0.0; var tx = 1000.0; var hx = map(ori + dir * tx); if(hx > 0.0) { result.point = ori + dir * tx; result.value = tx; return result; } var hm = map(ori); var i: i32 = 0; loop { let tmid = mix(tm, tx, hm / (hm - hx)); result.point = ori + dir * tmid; let hmid = map(result.point); if(hmid < 0.0) { tx = tmid; hx = hmid; } else { tm = tmid; hm = hmid; } if (abs(hmid) < EPSILON) { break; } if (i >= NUM_STEPS) { break; } i++; } result.value = mix(tm, tx, hm / (hm - hx)); return result; } fn getPixel(coord: vec2, time: f32) -> vec3 { var uv = coord / iResolution.xy; uv = uv * 2.0 - 1.0; uv.x *= iResolution.x / iResolution.y; // ray let ang = vec3(sin(time*3.0)*0.1,sin(time)*0.2+0.3,time); let ori = vec3(0.0,3.5,time*5.0); var dir = normalize(vec3(uv.xy,-2.0)); dir.z += length(uv) * 0.14; dir = normalize(dir) * fromEuler(ang); // tracing var result: TraceResult = heightMapTracing(ori,dir); let dist = result.point - ori; let n = getNormal(result.point, dot(dist,dist) * EPSILON_NRM()); let light = normalize(vec3(0.0,1.0,0.8)); // color return mix( getSkyColor(dir), getSeaColor(result.point,n,light,dir,dist), pow(1.0 - smoothstep(-0.02, 0.0,dir.y),0.2)); } // main fn mainImage( fragCoord: vec2, fragColor: ptr> ) { var color: vec3; let foo = iResolution * 0.1; let time = iTime * 0.3;// + iMouse.x*0.01; if (false) { color = vec3(0.0); for(var i: i32 = -1; i <= 1; i++) { for(var j: i32 = -1; j <= 1; j++) { let uv = fragCoord + vec2(f32(i),f32(j)) / 3.0; color += getPixel(uv, time); } } color /= 9.0; } else { color = getPixel(fragCoord, time); } // post *fragColor = vec4(pow(color,vec3(0.65)), 1.0); }`2f:T315c,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; }; }30:[] 2c:{"id":"cd843c1d2f35664f","slug":"webgpu-shader","title":"WebGPU Shader","thumbnail":"e1fafbd48776bfd692c8a733e8871921a720c799c19b1144bfc081be2d2d219c","access_level":"public","create_time":"$D2024-12-18T16:55:15.780Z","update_time":"$D2025-06-03T17:41:48.954Z","view_time":null,"first_public_time":"$D2024-12-19T06:20:40.545Z","has_unpublished_edits":null,"fork":false,"stars":11,"starred":false,"owner":{"type":"team","id":"f1b8352b963a77b4","login":"rreusser","name":"Ricky Reusser","avatar_url":"https://avatars-next.observableusercontent.com/49c18a2ac0092176d4ea8348a1dd538e0b460b086b89d602b8d21ffe0821d92e","tier":"starter_2024"},"version":927,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"908c4be2279a714e","login":"rreusser","name":"Ricky Reusser","avatar_url":"https://avatars-next.observableusercontent.com/fa41989f47bb986723af5b9c22176cb503748426f56e565000ea93acd9eab86c","tier":null}],"members":[{"type":"individual","id":"908c4be2279a714e","login":"rreusser","name":"Ricky Reusser","avatar_url":"https://avatars-next.observableusercontent.com/fa41989f47bb986723af5b9c22176cb503748426f56e565000ea93acd9eab86c","tier":null,"role":"editor"},{"type":"team","id":"f1b8352b963a77b4","login":"rreusser","name":"Ricky Reusser","avatar_url":"https://avatars-next.observableusercontent.com/49c18a2ac0092176d4ea8348a1dd538e0b460b086b89d602b8d21ffe0821d92e","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":5,"collection":{"id":"dcd095ad05c2b722","slug":"writeups","title":"Fun Notebooks","owner":{"id":"f1b8352b963a77b4","login":"rreusser","name":"Ricky Reusser"}},"type":"notebook","body":{"title":"WebGPU Shader","cells":[{"id":0,"value":"# WebGPU Shader\n\nThis notebook provides a helper for fragment shaders. It's a direct workalike for Mike Bostock's [`@mbostock/shader`](https://observablehq.com/@mbostock/shader) notebook, except it uses [WebGPU](https://www.w3.org/TR/webgpu/) and [WebGPU Shading Language (WGSL)](https://www.w3.org/TR/WGSL/). Both are heavily inspired by Inigo Quilez’s [Shadertoy](https://www.shadertoy.com). To import into your notebook:\n\n~~~js\nimport {shader} from \"@rreusser/webgpu-shader\"\n~~~\n\nFor example:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"shader({ width: 640, height: 100 })`\nfn mainImage (fragCoord: vec2, fragColor: ptr>) {\n *fragColor = vec4(fragCoord.xy / iResolution.xy, 0f, 1f);\n}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":546,"value":"Note that [WGSL permits references and pointers](https://www.w3.org/TR/WGSL/#ref-ptr-types), so for consistency with Shadertoy, you must write to `fragColor`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":297,"value":"shader({ width: 640, height: 100, sources, controls: true })`\nconst size = 25.0;\n\nfn mainImage(fragCoord: vec2, fragColor: ptr>) {\n let p = fragCoord.xy;\n let k = f32((fmod(p.x, size * 2.0) < size) == (fmod(p.y, size * 2.0) < size));\n *fragColor = vec4(vec3(k), 1);\n}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":538,"value":"As a brief aside, due to slightly different behavior of WGSL's `%` modulo operator over negative numbers compared to GLSL's `mod` function, we implement a library function which we’ve passed through `sources`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":385,"value":"sources = [`fn fmod(x: f32, y: f32) -> f32 { return x - y * floor(x / y); }`]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":499,"value":"If *width* is not specified, it defaults to 640. If *height* is not specified, it defaults to 480. A *devicePixelRatio* option may also be specified; it defaults to the native value. Shaders can reference constant `iResolution: vec3` for the canvas dimensions; *z* stores the devicePixelRatio.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":506,"value":"The *iTime* option enables time-dependent shaders with the same behavior as on Shadertoy: it defines a uniform `iTime: f32` whose value is in seconds. (iMouse and others are not yet implemented; maybe in the future.) If you also pass in the *visibility* option using Observable’s built-in [visibility function](/@observablehq/awaiting-visibility), Shader will only render when the canvas is visible.\n\nSetting `controls: true` displays time controls, which may be particularly useful for `iTime`-dependent shaders.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":342,"value":"shader({\n height: 100,\n iTime: true,\n sources,\n visibility,\n controls: true\n})`\nconst size = 25.0;\nfn rotate2d(a: f32) -> mat2x2 {\n return mat2x2(cos(a), -sin(a), sin(a), cos(a));\n}\n\nfn mainImage(fragCoord: vec2, fragColor: ptr>) {\n let p = (fragCoord.xy - iResolution.xy / 2.0) * rotate2d(iTime / 10.0);\n let k = f32((fmod(p.x, size * 2.0) < size) == (fmod(p.y, size * 2.0) < size));\n *fragColor = vec4(vec3(k), 1.0);\n}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":514,"value":"More generally, the *uniforms* option allows you to declare uniforms. These can then by updated programmatically by calling *canvas*.update. Currently only `f32` float uniforms are supported.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":369,"value":"figure = shader({\n height: 100,\n sources,\n uniforms: { angle: \"float\" }\n})`\nconst size = 25.0;\n\nfn rotate2d(a: f32) -> mat2x2 {\n return mat2x2(cos(a), -sin(a), sin(a), cos(a));\n}\n\nfn mainImage(fragCoord: vec2, fragColor: ptr>) {\n let p = (fragCoord.xy - iResolution.xy / 2.0) * rotate2d(angle);\n let k = f32((fmod(p.x, size * 2.0) < size) == (fmod(p.y, size * 2.0) < size));\n *fragColor = vec4(vec3(k), 1.0);\n}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":459,"value":"figure.update({ angle: (now / 10000.0) % (2 * Math.PI) })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":519,"value":"If you pass an *inputs* object, the shader can reference uniforms whose value corresponds to the input’s value. If a corresponding uniform is not declared, it is assumed to be a float.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":377,"value":"viewof angle = Inputs.range([-Math.PI, Math.PI], { label: \"angle\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":379,"value":"viewof size = Inputs.range([10, 100], {\n value: 25,\n transform: Math.log,\n label: \"size\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":925,"value":"***Note: there's a bug that prevents the controls from having an effect until the cell bellow is re-evaluated.***","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":375,"value":"shader({ height: 100, inputs: { angle: viewof angle, size: viewof size } })`\nfn modulo(x: f32, y: f32) -> f32 { return x - y * floor(x / y); }\n\nfn rotate2d(a: f32) -> mat2x2 {\n return mat2x2(cos(a), -sin(a), sin(a), cos(a));\n}\n\nfn mainImage(fragCoord: vec2, fragColor: ptr>) {\n let p = (fragCoord.xy - iResolution.xy / 2.0) * rotate2d(angle);\n let k = f32((modulo(p.x, size * 2.0) < size) == (modulo(p.y, size * 2.0) < size));\n *fragColor = vec4(vec3(k), 1.0);\n}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":524,"value":"More features deserve to be added. Mouse interaction would be nice. And this helper does not currently perform any offscreen passes in the style of Shadertoy, i.e. Buffer A, Buffer B, etc. It also does not implement a solution for `Download PNG` since WebGPU does not have an equivalent to WebGL's `preserveDrawingBuffer` context creation attribute.\n\nAlso, there was some prior art in Lukas Hermann's [`@lsh/shader`](https://observablehq.com/@lsh/shader) notebook, but since the WebGPU spec has evolved a lot since 2021, I wasn't able to get it working and took this approach.\n\nSo it's not Shadertoy, but you can still accomplish a lot. Some mostly-trivial translation from GLSL to WGSL yields a WebGPU version of Alexander Alekseev's lovely Seascape shader: https://www.shadertoy.com/view/Ms2SD1.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":55,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":527,"value":"\n\"Seascape\" by Alexander Alekseev aka TDM - 2014
\nLicense Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.
\nContact: tdmaav@gmail.com\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2d:"$2c:body"