30:T1821,function shader({ width = 640, height = 480, devicePixelRatio = window.devicePixelRatio, invalidation, visibility, uniforms = {}, inputs = {}, iTime = false, sources = [], preserveDrawingBuffer = false } = {}) { if (visibility !== undefined && typeof visibility !== "function") throw new Error("invalid visibility"); return async function () { const source = String.raw.apply(String, arguments); const canvas = DOM.canvas( width * devicePixelRatio, height * devicePixelRatio ); canvas.style = `max-width: 100%; width: ${width}px; height: auto;`; const ctx = canvas.getContext("webgpu"); if (!navigator.gpu) { throw new Error( "`gpupresent` context could not be created. Is WebGPU enabled on your device?" ); } const adapter = await navigator.gpu.requestAdapter(); const device = await adapter.requestDevice(); ctx.configure({ device, format: "bgra8unorm" }); const ondispose = invalidation === undefined ? Inputs.disposal(canvas) : invalidation; let frame; let disposed = false; ondispose.then(() => (disposed = true)); const shader = device.createShaderModule({ code: ` [[block]] struct Uniforms { resolution: vec3; time: f32; ${Object.keys(uniforms) .map((name) => `${name}: f32;`) .join("\n")} ${Object.keys(inputs) .map((name) => `${name}: f32;`) .join("\n")} }; [[group(0), binding(0)]] var u: Uniforms; struct VertexInput { [[location(0)]] pos: vec2; }; struct VertexOutput { [[builtin(position)]] pos: vec4; [[location(0)]] uv: vec2; }; [[stage(vertex)]] fn main_vertex(input: VertexInput) -> VertexOutput { var output: VertexOutput; var pos: vec2 = input.pos * 2.0 - 1.0; output.pos = vec4(pos, 0.0, 1.0); output.uv = input.pos; return output; } ${[...sources].join("\n")} ${source} [[stage(fragment)]] fn main_fragment(in: VertexOutput) -> [[location(0)]] vec4 { let x = u.resolution; // need to use all inputs return main(in.uv); } ` }); const pipeline = device.createRenderPipeline({ vertex: { module: shader, entryPoint: "main_vertex", buffers: [ { arrayStride: Float32Array.BYTES_PER_ELEMENT * 2, attributes: [ { offset: 0, shaderLocation: 0, format: "float32x2" } ] } ] }, fragment: { module: shader, entryPoint: "main_fragment", targets: [{ format: "bgra8unorm" }] }, primitives: { topology: "triangle-list" } }); const textureView = ctx.getCurrentTexture().createView(); const renderPassDescriptor = { colorAttachments: [ { view: textureView, loadValue: { r: 0.0, g: 0.0, b: 0.0, a: 1.0 }, storeOp: "store" } ] }; const attribs = new Float32Array([0, 0, 1, 0, 0, 1, 0, 1, 1, 0, 1, 1]); const attribsBuffer = createBuffer(device, attribs, GPUBufferUsage.VERTEX); let uniformsArray = new Float32Array([ width, // res.x height, // res.y devicePixelRatio, // res.z 0, // time ...Object.values(uniforms), ...Array.from(Object.values(inputs), (input) => input.value) ]); let uniformsBuffer = createBuffer( device, uniformsArray, GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST ); async function render() { const commandEncoder = device.createCommandEncoder(); const textureView = ctx.getCurrentTexture().createView(); renderPassDescriptor.colorAttachments[0].view = textureView; const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor); passEncoder.setPipeline(pipeline); const bindGroup = device.createBindGroup({ layout: pipeline.getBindGroupLayout(0), entries: [ { binding: 0, resource: { buffer: uniformsBuffer } } ] }); passEncoder.setBindGroup(0, bindGroup); passEncoder.setVertexBuffer(0, attribsBuffer); passEncoder.draw(6, 1, 0, 0); passEncoder.endPass(); device.queue.submit([commandEncoder.finish()]); } const uniformIndex = new Map( Object.entries(Object.keys(uniforms)).map(([idx, key]) => [key, +idx]) ); Object.assign(canvas, { update(values = {}) { if (disposed) return false; for (const [name, value] of Object.entries(values)) { if (uniformIndex.get(name) == undefined) throw new Error(`Could not find uniform ${name}`); uniformsArray.set([value], 4 + uniformIndex.get(name)); } uniformsBuffer = createBuffer( device, uniformsArray, GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST ); frame || requestAnimationFrame(render); return true; } }); const uniformLen = Object.keys(uniforms).length; for (const [i, input] of Object.entries(Object.values(inputs))) { const update = () => { uniformsArray.set([input.value], +i + uniformLen + 4); uniformsBuffer = createBuffer( device, uniformsArray, GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST ); frame || requestAnimationFrame(render); }; input.addEventListener("input", update); ondispose.then(() => input.removeEventListener("input", update)); } if (iTime) { frame = true; let timeframe; (async function tick() { if (visibility !== undefined) await visibility(); uniformsArray.set([performance.now() / 1000], 3); uniformsBuffer = createBuffer( device, uniformsArray, GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST ); render(); return (timeframe = requestAnimationFrame(tick)); })(); ondispose.then(() => cancelAnimationFrame(timeframe)); } else { render(); } return canvas; }; }31:[] 2e:{"title":"WGSL Shader","cells":[{"id":0,"value":"# WGSL Shader\nA port of [Mike Bostock's Shader util](/@mbostock/shader) so it can take WGSL rather than GLSL, but missing a few features. Currently only takes floats as uniforms and inputs that return floats for Inputs.\n\n**Notes:**
\n1. WebGPU is not a complete API yet, so you need to use a browser with the proper flags enabled. I developed this in Chrome Canary.\n2. The WebGPU & WGSL spec are still in flux, so this will almost definitely be obsolete by launch date. I'll try to keep it up to date, but using this version means your mileage may vary.\n\n**Usage:**
\n```js\nimport {shader} from '@lsh/shader'\n```\n\nUniforms are accessed through: `u.[uniform]`, with time and resolution supplied.\nSo `u.time` results in time.\n\n**Related links:**
\n* [WebGPU Spec](https://www.w3.org/TR/webgpu/)\n* [WGSL Spec](https://www.w3.org/TR/WGSL/)\n* [Mike Bostock's Shader](/@mbostock/shader)\n* [Austin Eng's WebGPU Samples](http://austin-eng.com/webgpu-samples)","pinned":false,"hidden":false,"mode":"md"},{"id":87,"value":"shader({ width: 640, height: 100 })`\nfn main(uv: vec2) -> vec4 {\n return vec4(uv, 0.0, 1.0);\n}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":205,"value":"shader({ width: 640, height: 100 })`\nlet size = 25.0;\n\nfn main(uv: vec2) -> vec4 {\n var p = uv * u.resolution.xy;\n var q = p.x % size * 2.0 < size == p.y % size * 2.0 < size;\n var o = f32(q);\n return vec4(o,o,o,1.0);\n}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":749,"value":"shader({\n width: 640,\n height: 100,\n iTime: true\n})`\nfn rotate2d(a: f32) -> mat2x2 {\n let c = cos(a);\n let s = sin(a);\n return mat2x2(\n vec2(c, -s),\n vec2(s, c)\n );\n}\n\nlet size = 15.0;\n\nfn main(uv: vec2) -> vec4 {\n var p = (uv - 0.5) * (u.resolution.xy) * rotate2d(u.time / 10.0);\n if (p.x < 0.0) {p.x = p.x - size;}\n if (p.y < 0.0) {p.y = p.y - size;}\n p = abs(p);\n let q = p.x % (size * 2.0) < size == p.y % (size * 2.0) < size;\n let o = f32(q);\n return vec4(o,o,o,1.0);\n}\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":287,"value":"canvas = shader({\n width: 640,\n height: 100,\n uniforms: { angle: 0 }\n})`\nfn rotate2d(a: f32) -> mat2x2 {\n let c = cos(a);\n let s = sin(a);\n return mat2x2(\n vec2(c, -s),\n vec2(s, c)\n );\n}\n\nlet size = 15.0;\n\nfn main(uv: vec2) -> vec4 {\n var p = (uv - 0.5) * (u.resolution.xy) * rotate2d(u.angle);\n if (p.x < 0.0) {p.x = p.x - size;}\n if (p.y < 0.0) {p.y = p.y - size;}\n p = abs(p);\n let q = p.x % (size * 2.0) < size == p.y % (size * 2.0) < size;\n let o = f32(q);\n return vec4(o,o,o,1.0);\n}\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":378,"value":"canvas.update({ angle: (now / 10000.0) % (2 * Math.PI) })","pinned":true,"hidden":false,"mode":"ojs"},{"id":313,"value":"viewof angle = Inputs.range([-Math.PI, Math.PI], { label: \"angle\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":315,"value":"viewof size = Inputs.range([10, 100], {\n value: 25,\n transform: Math.log,\n label: \"size\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":319,"value":"shader({\n height: 100,\n inputs: { angle: viewof angle, size: viewof size },\n visibility\n})`\nfn rotate2d(a: f32) -> mat2x2 {\n let c = cos(a);\n let s = sin(a);\n return mat2x2(\n vec2(c, -s),\n vec2(s, c)\n );\n}\n\n\nfn main(uv: vec2) -> vec4 {\n var p = (uv - 0.5) * (u.resolution.xy) * rotate2d(u.angle);\n if (p.x < 0.0) {p.x = p.x - u.size;}\n if (p.y < 0.0) {p.y = p.y - u.size;}\n p = abs(p);\n let q = p.x % (u.size * 2.0) < u.size == p.y % (u.size * 2.0) < u.size;\n let o = f32(q);\n return vec4(o,o,o,1.0);\n}\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":430,"value":"## Implementation","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":58,"value":"createBuffer = (device, arr, usage) => {\n let desc = { size: (arr.byteLength + 3) & ~3, usage, mappedAtCreation: true };\n let buffer = device.createBuffer(desc);\n\n const writeArray =\n arr instanceof Uint16Array\n ? new Uint16Array(buffer.getMappedRange())\n : new Float32Array(buffer.getMappedRange());\n writeArray.set(arr);\n buffer.unmap();\n return buffer;\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}