2b:null 2c:["$","title",null,{"children":"WebGPU Compute Playground | Introduction to Computer Graphics MSState | Observable"}] 31:T431,initial_src = `// Globals, functions, etc. go here // This is the canvas texture we write to @group(0) @binding(0) var tex: texture_storage_2d<${presentationFormat}, write>; // The tick: How many frames have been rendered @group(0) @binding(1) var tick : u32; // The delta_t: Milliseconds since the last call to render @group(0) @binding(2) var delta_t : u32; // Other constants const width : u32 = ${ewidth}; const height : u32 = ${height}; // Shader main function // Compute shader; works on 8 x 8 tiles of the image @compute @workgroup_size(8, 8) fn set_pixels(@builtin(global_invocation_id) globalId : vec3u) { // Check to see if we are past the size (GPU might create more pixels that // can be set for its efficiency). i,j are the index into our picture (the // pixel coords) let i = globalId.x; let j = globalId.y; if(i >= width || j >= height) { return; } let pixel = vec2u(i, j); // Generate the color var color = vec3f(1,1,1); // Write the color to the texture textureStore(tex, globalId.xy, vec4f(color, 1)); } `32:T6c3,render = () => { if(device === undefined) return; // WebGPU is particular that every uniform must be stored in a buffer, even scalar types. // So we upload tick and delta_t to a buffer here. const tick_data = new Uint32Array([tick()]); const tick_buffer = device.createBuffer({ size: 4, usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST, }); device.queue.writeBuffer(tick_buffer, 0, tick_data); const delta_data = new Uint32Array([delta_t()]); const delta_buffer = device.createBuffer({ size: 4, usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST, }); device.queue.writeBuffer(delta_buffer, 0, delta_data); // Get the current texture from the canvas context and // set it as the texture to render to. const canvasTexture = gpu.getCurrentTexture(); // Bind the texture & other data to the pipeline for writing const bindGroup = device.createBindGroup({ layout: pipeline.getBindGroupLayout(0), entries: [ { binding: 0, resource: canvasTexture.createView() }, { binding: 1, resource: { buffer: tick_buffer }}, { binding: 2, resource: { buffer: delta_buffer }} ], }); // make a command encoder to start encoding commands const encoder = device.createCommandEncoder({ label: 'WLGSL Playground encoder' }); // make a compute pass encoder to encode the current pipeline and // bind the canvas texture to it for writing const pass = encoder.beginComputePass(); pass.setPipeline(pipeline); pass.setBindGroup(0, bindGroup); pass.dispatchWorkgroups(canvasTexture.width / 8, canvasTexture.height / 8); pass.end(); const commandBuffer = encoder.finish(); device.queue.submit([commandBuffer]); }33:[] 2f:{"id":"80c1011dcbb3fc11","slug":null,"title":"WebGPU Compute Playground","thumbnail":"d7043c5927ef4ab6fcd42b130362a705909a7a91de62d973b06e6428df6db37a","access_level":"public","create_time":"$D2026-08-25T16:53:24.182Z","update_time":"$D2026-08-25T16:53:24.182Z","view_time":null,"first_public_time":"$D2026-08-25T16:53:24.182Z","has_unpublished_edits":null,"fork":{"id":"e6c366c94455d6e5","slug":"webgpu-compute-playground","title":"WebGPU Compute Playground","owner":{"id":"7c0dab8b587e2ed2","login":"cse4413msstate","name":"Introduction to Computer Graphics MSState"}},"stars":0,"starred":false,"owner":{"type":"team","id":"7c0dab8b587e2ed2","login":"cse4413msstate","name":"Introduction to Computer Graphics MSState","avatar_url":"https://avatars-next.observableusercontent.com/343b1e48cbb2480c08063f107b4631944c5bb97a5258576dd939a5be852f30bc","tier":"pro_2024"},"version":176,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"a4317f24fffc4908","login":"mia19","name":"Mia","avatar_url":"https://avatars-next.observableusercontent.com/aee107e8f5468ebb6ab3f06b161acf5aabf521c33a6a316ee62a7021372f5c80","tier":null}],"members":[{"type":"individual","id":"a4317f24fffc4908","login":"mia19","name":"Mia","avatar_url":"https://avatars-next.observableusercontent.com/aee107e8f5468ebb6ab3f06b161acf5aabf521c33a6a316ee62a7021372f5c80","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"WebGPU Compute Playground","cells":[{"id":0,"value":"# WebGPU Compute Playground\n\nA simple notebook to allow playing with WebGPU and WGSL in a compute shader.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"viewof gpu = {\n // Do we support WebGPU?\n if(!(\"gpu\" in navigator) || adapter === undefined)\n return html`WebGPU Not Supported. Please use Chrome or other supported browser.`;\n\n // Create the backing canvas \n // For now, ignore the device pixel ratio (the ratio of physical to virtual pixels)\n const canvas = DOM.canvas(ewidth, height);\n canvas.style.width = `${ewidth}px`;\n canvas.style.height = `${height}px`;\n canvas.style.border = \"thin solid black\";\n canvas.style.transform = \"scaleY(-1)\"; // WebGPU textures have 0, 0 have in the \"wrong\" place\n\n // Load WebGPU into the canvas\n const context = (canvas.value = canvas.getContext('webgpu'));\n context.configure({\n device,\n format: presentationFormat,\n // This is what's required to be able to write to a texture from a compute shader\n usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.STORAGE_BINDING,\n });\n \n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"error_log = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"viewof shader_src = Inputs.textarea({rows: 40, value:initial_src, resize: true, monospace: true, submit: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"A [helpful reference](https://webgpufundamentals.org/webgpu/lessons/webgpu-wgsl-function-reference.html).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":42,"value":"## Implementation\n\nBelow are parts need to get the compute pipeline to work. They do not need to be changed.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":44,"value":"### Canvas Variables\n\nEstablish the size of the Canvas.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":46,"value":"ewidth = Math.min(width, 600)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"height = ewidth","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"### `tick`\n`tick()` increases and returns how many frames (render calls) have occurred.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":54,"value":"mutable last_tick = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"tick = () => { mutable last_tick += 1; return mutable last_tick; }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"### `delta_t`\n\n`delta_t()` indicates how long it has been since the last call to `delta_t` in milliseconds. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":63,"value":"mutable last_t = Date.now()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"delta_t = () => {let t = Date.now(); let delta = t - mutable last_t; mutable last_t = t; return delta; }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"### WebGPU Initialization & Pipeline Creation\n\nWe initialize WebGPU if supported and then create a render pipeline as needed (when pipeline constants change).\n\nWrite-to-canvas info from [WebGPUFundamentals](https://webgpufundamentals.org/webgpu/lessons/webgpu-storage-textures.html#canvas-as-a-storage-texture \"WebGPU Storage Textures: Canvas as a Storage Texture\").","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":72,"value":"#### Adapter\n\nCreate the WebGPU adapter if we have it","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":74,"value":"adapter = await navigator.gpu?.requestAdapter();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"#### Device and Canvas Storage\n\nSpecify the storage format. If the newer `bgra8unorm`, we have to specify its storage (defaults to `rgba`'s version).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":78,"value":"presentationFormat = adapter?.features.has('bgra8unorm-storage')\n ? navigator.gpu.getPreferredCanvasFormat()\n : 'rgba8unorm';","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"Create the device to use the GPU. We have to explicitly call for `bgra` storage if that is what is preferred. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":82,"value":"device = await adapter?.requestDevice({\n requiredFeatures: presentationFormat === 'bgra8unorm'\n ? ['bgra8unorm-storage']\n : [],\n });","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"#### Initial Shader Source","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":23,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"#### Shader module\n\nCompile the shader. Process any errors for reporting (from [WebGPUFundamentals](https://webgpufundamentals.org/webgpu/lessons/webgpu-debugging.ht \"WebGPU Debugging\")). \n\nFirst, an error logger:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":86,"value":"function log(...args) {\n const elem = html`

`;\n elem.innerHTML = args.join(' ');\n error_log.appendChild(elem);\n error_log.style.display = \"block\";\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"Now the shader itself. Uses the shader source above.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":93,"value":"module = \n{\n if(!device)\n return undefined;\n\n const module = device.createShaderModule({\n label: 'WGSL Playground Shader',\n code: shader_src\n });\n\n error_log.style.display = \"none\";\n error_log.innerHTML = \"\"; \n const errors = await module.getCompilationInfo();\n if(errors.messages.length != 0)\n {\n \n // Split the code into lines\n const lines = shader_src.split('\\n');\n \n // Sort the messages by line numbers in reverse order\n // so that as we insert the messages they won't affect\n // the line numbers.\n const msgs = [...errors.messages].sort((a, b) => b.lineNum - a.lineNum);\n \n // Insert the error messages between lines\n for (const msg of msgs) {\n lines.splice(msg.lineNum, 0,\n \"

\",\n        `${''.padEnd(msg.linePos - 1)}${''.padEnd(msg.length, '^')}`,\n        msg.message,\n        \"

\"\n      );\n    }\n  \n    log(lines.join('\\n'));\n  }\n  \n  return module;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"#### Pipeline\n\nCreate the pipeline using the shader module and bound buffers.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":98,"value":"Specify the layout (we have to do this as tick/delta_t is not always used).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":100,"value":" bindGroupLayout = device?.createBindGroupLayout({\n   label : \"WGSL Playground Bind Group\",\n    entries: [\n      {\n        binding: 0,\n        visibility: GPUShaderStage.COMPUTE,\n        storageTexture: {format: presentationFormat, access: \"write-only\"},\n      },\n      {\n        binding: 1,\n        visibility:  GPUShaderStage.COMPUTE,\n        buffer: {type:\"uniform\"},\n      },\n      {\n        binding: 2,\n        visibility:  GPUShaderStage.COMPUTE,\n        buffer: {type:\"uniform\"},\n      },\n    ],\n  });","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"Create the pipeline layout.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":106,"value":"pipelineLayout = device.createPipelineLayout({\n  layout: \"WGSL Playground Pipeline Layout\",\n  bindGroupLayouts: [bindGroupLayout],\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"Finally, create the pipeline to be used.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":111,"value":"pipeline = device?.createComputePipeline({\n    label: 'WGSL Playground Pipeline',\n    layout: pipelineLayout,\n    compute: {\n      module,\n      entryPoint: 'set_pixels',\n    },\n  })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"#### GPU Renderer\nThe render function. Called continuously for the Playground due to possible animation. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":116,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"{\n  // Renderer generator loop\n  while(true)\n  {\n    render();\n    yield last_tick;\n  }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}}
30:"$2f:body"