Code updates after SME review

Author: chrisdavidmills

webgpu-compute-demo/script.js

@@ -1,17 +1,17 @@
 // Compute shader
 
 const shader = `
-@group(0) @binding(1)
+@group(0) @binding(0)
 var<storage, read_write> output: array<f32>;
 
 @compute @workgroup_size(64)
 fn main(
 
   @builtin(global_invocation_id)
-  global_id : vec3<u32>,
+  global_id : vec3u,
 
   @builtin(local_invocation_id)
-  local_id : vec3<u32>,
+  local_id : vec3u,
 
 ) {
   output[global_id.x] =
@@ -63,22 +63,22 @@ async function init() {
     const bindGroupLayout =
     device.createBindGroupLayout({
         entries: [{
-            binding: 1,
+            binding: 0,
             visibility: GPUShaderStage.COMPUTE,
             buffer: {
-                type: "storage",
+                type: "storage"
             }
         }]
     });
 
     const bindGroup = device.createBindGroup({
         layout: bindGroupLayout,
         entries: [{
-            binding: 1,
+            binding: 0,
             resource: {
-            buffer: output,
-            },
-        }],
+              buffer: output,
+            }
+        }]
     });
 
     const computePipeline = device.createComputePipeline({

webgpu-render-demo/script.js

@@ -14,13 +14,13 @@ const vertices = new Float32Array([
 
 const shaders = `
 struct VertexOut {
-    @builtin(position) position : vec4<f32>,
-    @location(0) color : vec4<f32>
+    @builtin(position) position : vec4f,
+    @location(0) color : vec4f
 }
 
 @vertex
-fn vertex_main(@location(0) position: vec4<f32>,
-                 @location(1) color: vec4<f32>) -> VertexOut
+fn vertex_main(@location(0) position: vec4f,
+                 @location(1) color: vec4f) -> VertexOut
 {
   var output : VertexOut;
   output.position = position;
@@ -29,7 +29,7 @@ fn vertex_main(@location(0) position: vec4<f32>,
 }
 
 @fragment
-fn fragment_main(fragData: VertexOut) -> @location(0) vec4<f32>
+fn fragment_main(fragData: VertexOut) -> @location(0) vec4f
 {
   return fragData.color;
 }
@@ -65,25 +65,21 @@ async function init() {
     const canvas = document.querySelector('#gpuCanvas');
     const context = canvas.getContext('webgpu');
 
-    // Configure swap chain, link the GPU to the canvas
     context.configure({
         device: device,
-        format: 'bgra8unorm',
+        format: navigator.gpu.getPreferredCanvasFormat(),
         alphaMode: 'premultiplied'
     });
 
     // 4: Create vertex buffer to contain vertex data
     const vertexBuffer = device.createBuffer({
         size: vertices.byteLength, // make it big enough to store vertices in
         usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
-        mappedAtCreation: true // mapped at creation
-        });
-
-    // Store mapped range of vertex buffer in a typed array, then copy the triangle vertex data into it
-    new Float32Array(vertexBuffer.getMappedRange()).set(vertices);
+    });
 
-    // Unmap the vertex buffer; we are done changing it, and the new contents are automatically copied to the GPU
-    vertexBuffer.unmap();
+    // Store vertices in a typed array, then copy the vertex data over to the GPUBuffer using writeBuffer() utility function
+    const array = new Float32Array(vertices);
+    device.queue.writeBuffer(vertexBuffer, 0, array, 0, array.length);
 
     // 5: Create a GPUVertexBufferLayout and GPURenderPipelineDescriptor to provide a definition of our render pipline
     const vertexBuffers = [{
@@ -110,7 +106,7 @@ async function init() {
             module: shaderModule,
             entryPoint: 'fragment_main',
             targets: [{
-            format: 'bgra8unorm'
+              format: navigator.gpu.getPreferredCanvasFormat()
             }]
         },
         primitive: {