2d:null 2e:["$","title",null,{"children":"WebGPU Shader Playground | Introduction to Computer Graphics MSState | Observable"}] 33:T401,module = { if(!device) return undefined; const module = device.createShaderModule({ label: 'WGSL Playground Shader', code: vs_shader_src + fs_shader_src }); error_log.style.display = "none"; error_log.innerHTML = ""; const errors = await module.getCompilationInfo(); if(errors.messages.length != 0) { // Split the code into lines const lines = (vs_shader_src + fs_shader_src).split('\n'); // Sort the messages by line numbers in reverse order // so that as we insert the messages they won't affect // the line numbers. const msgs = [...errors.messages].sort((a, b) => b.lineNum - a.lineNum); // Insert the error messages between lines for (const msg of msgs) { lines.splice(msg.lineNum, 0, "

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

"
      );
    }
  
    log(lines.join('\n'));
  }
  
  return module;
}34:[]
31:{"id":"fd31f1fc39fe08cf","slug":"webgpu-shader-playground","title":"WebGPU Shader Playground","thumbnail":"aad81a3e7aece8e89f157c7fa69bbdd775b8b2789456be26d9f6bda19052848a","access_level":"public","create_time":"$D2025-11-13T14:42:30.334Z","update_time":"$D2026-09-01T17:35:31.004Z","view_time":null,"first_public_time":"$D2025-11-13T16:08:29.378Z","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":265,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"e83a97795d4ad3a2","login":"infowantstobeseen","name":"T.J. Jankun-Kelly","avatar_url":"https://avatars-next.observableusercontent.com/df9d7f817f9ad92a763b56ee2e891ca0716a6c2f6c398811547f89f0448fa181","tier":null}],"members":[{"type":"individual","id":"e83a97795d4ad3a2","login":"infowantstobeseen","name":"T.J. Jankun-Kelly","avatar_url":"https://avatars-next.observableusercontent.com/df9d7f817f9ad92a763b56ee2e891ca0716a6c2f6c398811547f89f0448fa181","tier":null,"role":"editor"},{"type":"team","id":"7c0dab8b587e2ed2","login":"cse4413msstate","name":"Introduction to Computer Graphics MSState","avatar_url":"https://avatars-next.observableusercontent.com/343b1e48cbb2480c08063f107b4631944c5bb97a5258576dd939a5be852f30bc","tier":"pro_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"WebGPU Shader Playground","cells":[{"id":0,"value":"# WebGPU Shader Playground\n\nA simple notebook to allow playing with WebGPU and WGSL with vertex & fragment shaders.","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":184,"value":"### Geometry","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":191,"value":"geometry = new Float32Array(\n  [ \n    0.25, -0.25, 1, 0, 0,\n    0.75, -0.25, 1, 0, 0,\n    0.75,  0.25, 1, 0, 0,\n    0.25,  0.25, 1, 0, 0\n  ]) ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"### Indices (if used, must be Uint32Array)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":200,"value":"indicies = new Uint32Array([\n  0, 1, 2,\n  0, 2, 3\n])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"### Vertex Shader","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":13,"value":"viewof vs_shader_src = Inputs.textarea({rows: 40, value:initial_vs_src, resize: true, monospace: true, submit: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":182,"value":"### Fragment Shader","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":203,"value":"viewof fs_shader_src = Inputs.textarea({rows: 40, value:initial_fs_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":"initial_vs_src = `// Globals, functions, etc. go here\n\nstruct vs_output_struct\n{\n  @builtin(position) position : vec4f, // transformed position\n  @location(0) color : vec4f, // per vertex color\n};\n\n@vertex fn vertex(\n  @location(0) position : vec2f,\n  @location(1) color : vec4f) -> vs_output_struct\n{\n  return vs_output_struct(vec4f(position, 0, 1), color);\n}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"initial_fs_src = `// Globals, functions, etc. go here\n\n@fragment fn fragment(vs_out : vs_output_struct) -> @location(0) vec4f\n{\n  return vs_out.color;\n}\n`","pinned":true,"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":"$33","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":103,"value":"Create the pipeline layout.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","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?.createRenderPipeline({\n    label: 'WGSL Playground Pipeline',\n    layout: \"auto\",\n    vertex: {\n      module,\n      entryPoint: 'vertex',\n      buffers: [\n        {\n          arrayStride: (2 + 3) * 4, // 2 position floats, 3 color floats, 4 bytes each\n          attributes: [\n            {shaderLocation: 0, offset: 0, format: 'float32x2'}, // position\n            {shaderLocation: 1, offset: 8, format: 'float32x3'}  // color\n            ]\n        }\n      ]\n    },\n    fragment: {\n      module,\n      targets: [{ format: presentationFormat }]\n    }\n  })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"#### Create Vertex/Index buffers","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":223,"value":"vertex_buffer = {\n  const buffer_size = (2 + 3) * 4; // 2 positions, 3 colors, 4 bytes each \n  const buffer = device.createBuffer({\n    label: \"WebGPU Playground Vertex Buffer\",\n    size: geometry.byteLength,\n    usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST\n  });\n  device.queue.writeBuffer(buffer, 0, geometry);\n  return buffer;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"index_buffer = {\n  if(indicies === undefined) return undefined;\n  \n  const buffer = device.createBuffer({\n    label: \"WebGPU Playground Index Buffer\",\n    size: indicies.byteLength,\n    usage: GPUBufferUsage.INDEX | GPUBufferUsage.COPY_DST\n  });\n  device.queue.writeBuffer(buffer, 0, indicies);\n  return buffer;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":234,"value":"renderConfig = {\n  device.queue.writeBuffer(vertex_buffer, 0, geometry);\n  if(indicies !== undefined)\n    device.queue.writeBuffer(index_buffer, 0, indicies);\n\n  return {\n    label: \"WebGPU Playground Render Configuration\",\n    colorAttachments: [\n      {\n        clearValue: [1, 1, 1, 1], // White background\n        loadOp: \"clear\", // clear every draw\n        storeOp: \"store\", // Save output\n      }\n    ]\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":"render = () => {\n  if(device === undefined)\n    return;\n  \n  // Get the current texture from the canvas context and\n  // set it as the texture to render to.\n  renderConfig.colorAttachments[0].view = gpu.getCurrentTexture().createView();\n\n  // make a command encoder to start encoding commands\n  const encoder = device.createCommandEncoder({ label: 'WLGSL Playground encoder' });\n  \n  // make a render pass encoder to encode the current pipeline and\n  // bind the canvas texture to it for writing\n  const pass = encoder.beginRenderPass(renderConfig);\n  pass.setPipeline(pipeline);\n  pass.setVertexBuffer(0, vertex_buffer);\n  if(index_buffer !== undefined)\n  {\n    pass.setIndexBuffer(index_buffer, 'uint32');\n    pass.drawIndexed(indicies.length);\n  }\n  else\n  {\n    pass.draw(geometry.length / 5);  // 5 entries per vertex, so this is how many vertices\n  }\n  pass.end();\n  \n  const commandBuffer = encoder.finish();\n  device.queue.submit([commandBuffer]);\n}","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":"$W34","stdlib":"1","titling":"auto"}}
32:"$31:body"