2b:null 2c:["$","title",null,{"children":"\"Your first WebGPU app\" demo | UnluckyNinja | Observable"}] 31:T530,currentStep = { let step = 0 while (true) { // In updateGrid() // Move the encoder creation to the top of the function. const encoder = gpu.device.createCommandEncoder(); const computePass = encoder.beginComputePass(); // New lines computePass.setPipeline(pipeline.simulationPipeline); computePass.setBindGroup(0, bindGroups[step % 2]); // New lines const workgroupCount = Math.ceil(settings.GRID_SIZE / settings.WORKGROUP_SIZE); computePass.dispatchWorkgroups(workgroupCount, workgroupCount); computePass.end(); step = (step + 1) % 2 // Start a render pass const pass = encoder.beginRenderPass({ colorAttachments: [{ view: canvas.context.getCurrentTexture().createView(), loadOp: "clear", clearValue: backgroundSetting.color, storeOp: "store", }] }); // Draw the grid. pass.setPipeline(pipeline.cellPipeline); pass.setBindGroup(0, bindGroups[step % 2]); // Updated! pass.setVertexBuffer(0, geodata.vertexBuffer); pass.draw(geodata.vertexBuffer.size /4 /2, settings.GRID_SIZE * settings.GRID_SIZE); // End the render pass and submit the command buffer pass.end(); gpu.device.queue.submit([encoder.finish()]); yield Promises.tick(interval*1000, step) } }32:T4d6,bindGroups = { // Create a uniform buffer that describes the grid. const uniformArray = new Float32Array([settings.GRID_SIZE, settings.GRID_SIZE]); const uniformBuffer = gpu.device.createBuffer({ label: "Grid Uniforms", size: uniformArray.byteLength, usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST, }); gpu.device.queue.writeBuffer(uniformBuffer, 0, uniformArray); const bindGroups = [ gpu.device.createBindGroup({ label: "Cell renderer bind group A", layout: bindGroupLayout, entries: [{ binding: 0, resource: { buffer: uniformBuffer } }, { binding: 1, resource: { buffer: state.cellStateStorage[0] } }, { binding: 2, // New Entry resource: { buffer: state.cellStateStorage[1] } }], }), gpu.device.createBindGroup({ label: "Cell renderer bind group B", layout: bindGroupLayout, entries: [{ binding: 0, resource: { buffer: uniformBuffer } }, { binding: 1, resource: { buffer: state.cellStateStorage[1] } }, { binding: 2, // New Entry resource: { buffer: state.cellStateStorage[0] } }], }) ]; return bindGroups }33:T931,shaderModule = { const cellShaderModule = gpu.device.createShaderModule({ label: "Cell shader", code: ` struct VertexInput { @location(0) pos: vec2f, @builtin(instance_index) instance: u32, }; struct VertexOutput { @builtin(position) pos: vec4f, @location(0) cell: vec2f, // New line! }; @group(0) @binding(0) var grid: vec2f; @group(0) @binding(1) var cellStateIn: array; @group(0) @binding(2) var cellStateOut: array; @vertex fn vertexMain(input: VertexInput) -> VertexOutput { let i = f32(input.instance); let cell = vec2f(i % grid.x, floor(i / grid.x)); let state = f32(cellStateIn[input.instance]); // New line! let cellOffset = cell / grid * 2; let gridPos = (input.pos*state+1) / grid - 1 + cellOffset; var output: VertexOutput; output.pos = vec4f(gridPos, 0, 1); output.cell = cell; // New line! return output; } @fragment fn fragmentMain(input: VertexOutput) -> @location(0) vec4f { let c = input.cell/grid; return vec4f(c.x+(1-c.x)*0.5, c.y+(1-c.x)*0.5, 1.0-(c.x+c.y)*0.5, 1); } // New function fn cellIndex(cell: vec2u) -> u32 { return (cell.y % u32(grid.y)) * u32(grid.x) + (cell.x % u32(grid.x)); } fn cellActive(x: u32, y: u32) -> u32 { return cellStateIn[cellIndex(vec2(x, y))]; } @compute @workgroup_size(${settings.WORKGROUP_SIZE}, ${settings.WORKGROUP_SIZE}) // New line fn computeMain(@builtin(global_invocation_id) cell: vec3u) { let activeNeighbors = cellActive(cell.x+1, cell.y+1) + cellActive(cell.x+1, cell.y) + cellActive(cell.x+1, cell.y-1) + cellActive(cell.x, cell.y-1) + cellActive(cell.x-1, cell.y-1) + cellActive(cell.x-1, cell.y) + cellActive(cell.x-1, cell.y+1) + cellActive(cell.x, cell.y+1); let i = cellIndex(cell.xy); // Conway's game of life rules: switch activeNeighbors { case 2: { // Active cells with 2 neighbors stay active. cellStateOut[i] = cellStateIn[i]; } case 3: { // Cells with 3 neighbors become or stay active. cellStateOut[i] = 1; } default: { // Cells with < 2 or > 3 neighbors become inactive. cellStateOut[i] = 0; } } } ` }); return cellShaderModule }34:T450,state = { button // Create an array representing the active state of each cell. const cellStateArray = new Uint32Array(settings.GRID_SIZE * settings.GRID_SIZE); // Create a storage buffer to hold the cell state. const cellStateStorage = [ gpu.device.createBuffer({ label: "Cell State A", size: cellStateArray.byteLength, usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST, }), gpu.device.createBuffer({ label: "Cell State B", size: cellStateArray.byteLength, usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST, }) ]; // Mark every third cell of the first grid as active. for (let i = 0; i < cellStateArray.length; i+=3) { cellStateArray[i] = Math.random() > 0.3 ? 1 : 0; } gpu.device.queue.writeBuffer(cellStateStorage[0], 0, cellStateArray); // Mark every other cell of the second grid as active. // for (let i = 0; i < cellStateArray.length; i++) { // cellStateArray[i] = i % 2; // } // gpu.device.queue.writeBuffer(cellStateStorage[1], 0, cellStateArray); return { cellStateStorage, } }35:[] 2f:{"id":"0869e1d8a801daed","slug":null,"title":"\"Your first WebGPU app\" demo","thumbnail":"e6f4e2890c75439d99f6cc3208175fa3885e4e31e594bc89debf927bb5c0269c","access_level":"public","create_time":"$D2024-05-20T11:03:27.558Z","update_time":"$D2024-06-02T09:24:27.079Z","view_time":null,"first_public_time":"$D2024-05-20T11:03:27.558Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"ebb6118c9a990a2c","login":"unluckyninja","name":"UnluckyNinja","avatar_url":"https://avatars-next.observableusercontent.com/95d8d23bafa30b0b30e2ead4a72666d02cc17899c3c958c22c65fc0fc09afe3d","tier":"starter_2024"},"version":274,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"4df1f6fd87aa7295","login":"unluckyninja","name":"UnluckyNinja","avatar_url":"https://avatars-next.observableusercontent.com/95d8d23bafa30b0b30e2ead4a72666d02cc17899c3c958c22c65fc0fc09afe3d","tier":null}],"members":[{"type":"individual","id":"4df1f6fd87aa7295","login":"unluckyninja","name":"UnluckyNinja","avatar_url":"https://avatars-next.observableusercontent.com/95d8d23bafa30b0b30e2ead4a72666d02cc17899c3c958c22c65fc0fc09afe3d","tier":null,"role":"editor"},{"type":"team","id":"ebb6118c9a990a2c","login":"unluckyninja","name":"UnluckyNinja","avatar_url":"https://avatars-next.observableusercontent.com/95d8d23bafa30b0b30e2ead4a72666d02cc17899c3c958c22c65fc0fc09afe3d","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"fdfe83271d2de732","slug":"webgpu","title":"WebGPU","owner":{"id":"ebb6118c9a990a2c","login":"unluckyninja","name":"UnluckyNinja"}},"type":"notebook","body":{"title":"\"Your first WebGPU app\" demo","cells":[{"id":0,"value":"# \"Your first WebGPU app\" demo\nBy following https://codelabs.developers.google.com/your-first-webgpu-app","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":62,"value":"viewof backgroundSetting = {\n const array = [\n ['Opaque', {alphaMode: 'opaque', color: [0,0,.4,1]}],\n ['Transparent', {alphaMode: 'premultiplied', color: [0,0,0,0]}],\n ]\n const control = Inputs.radio(new Map(array), {value: array[0][1], label: 'Background Mode', default: 'Opaque'})\n return control\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"viewof button = Inputs.button(\"Randomize\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"text${canvas.canvas}","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":194,"value":"viewof interval = Inputs.range([0.1, 1], { value: 1, label: 'Frame length (s)', step: 0.05})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"bindGroupLayout = {\n \n // Create the bind group layout and pipeline layout.\n const bindGroupLayout = gpu.device.createBindGroupLayout({\n label: \"Cell Bind Group Layout\",\n entries: [{\n binding: 0,\n // Add GPUShaderStage.FRAGMENT here if you are using the `grid` uniform in the fragment shader.\n visibility: GPUShaderStage.VERTEX | GPUShaderStage.COMPUTE | GPUShaderStage.FRAGMENT,\n buffer: {} // Grid uniform buffer\n }, {\n binding: 1,\n visibility: GPUShaderStage.VERTEX | GPUShaderStage.COMPUTE,\n buffer: { type: \"read-only-storage\"} // Cell state input buffer\n }, {\n binding: 2,\n visibility: GPUShaderStage.COMPUTE,\n buffer: { type: \"storage\"} // Cell state output buffer\n }]\n });\n return bindGroupLayout\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"settings = {\n return {\n GRID_SIZE: 32,\n WORKGROUP_SIZE: 8,\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"geodata = {\n const square = new Float32Array([\n // X, Y,\n -0.8, -0.8, // Triangle 1 (Blue)\n 0.8, -0.8,\n 0.8, 0.8,\n \n -0.8, -0.8, // Triangle 2 (Red)\n 0.8, 0.8,\n -0.8, 0.8,\n ]);\n const vertexBuffer = gpu.device.createBuffer({\n label: \"Cell vertices\",\n size: square.byteLength,\n usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,\n });\n gpu.device.queue.writeBuffer(vertexBuffer, /*bufferOffset=*/0, square);\n const vertexBufferLayout = {\n arrayStride: 8,\n attributes: [{\n format: \"float32x2\",\n offset: 0,\n shaderLocation: 0, // Position, see vertex shader\n }],\n };\n return {\n vertexBuffer,\n vertexBufferLayout,\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"pipeline = {\n const pipelineLayout = gpu.device.createPipelineLayout({\n label: \"Cell Pipeline Layout\",\n bindGroupLayouts: [ bindGroupLayout ],\n });\n const cellPipeline = gpu.device.createRenderPipeline({\n label: \"Cell pipeline\",\n layout: pipelineLayout,\n vertex: {\n module: shaderModule,\n entryPoint: \"vertexMain\",\n buffers: [geodata.vertexBufferLayout]\n },\n fragment: {\n module: shaderModule,\n entryPoint: \"fragmentMain\",\n targets: [{\n format: navigator.gpu.getPreferredCanvasFormat()\n }]\n }\n });\n // Create a compute pipeline that updates the game state.\n const simulationPipeline = gpu.device.createComputePipeline({\n label: \"Simulation pipeline\",\n layout: pipelineLayout,\n compute: {\n module: shaderModule,\n entryPoint: \"computeMain\",\n }\n });\n return {\n cellPipeline,\n simulationPipeline,\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"gpu = {\n if (!navigator.gpu) {\n return new Error('WebGPU is not supported by your browser.')\n }\n const adapter = await navigator.gpu.requestAdapter()\n if (!adapter) {\n throw new Error(\"No appropriate GPUAdapter found.\")\n }\n const device = await adapter.requestDevice();\n return {\n device\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"canvas = {\n const canvas = DOM.canvas(320, 320)\n const context = canvas.getContext(\"webgpu\")\n const format = navigator.gpu.getPreferredCanvasFormat()\n context.configure({\n alphaMode: backgroundSetting.alphaMode,\n device: gpu.device,\n format,\n })\n return {\n canvas,\n context,\n format,\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 30:"$2f:body"