fix(WebGPU): update to account for changes in webgpu

Deal with deprecation of [[block]] and handle firefox
validation of UBO sizes to be a multiple of alignment

Also fix a bug with mixing geometry and volumes under webgpu

Author: martinken

Sources/Rendering/WebGPU/StorageBuffer/index.js

@@ -172,7 +172,7 @@ function vtkWebGPUStorageBuffer(publicAPI, model) {
     }
     lines.push(`
 };
-[[block]] struct ${model.name}Struct
+struct ${model.name}Struct
 {
   values: array<${model.name}StructEntry>;
 };

Sources/Rendering/WebGPU/UniformBuffer/index.js

@@ -46,6 +46,19 @@ function vtkWebGPUUniformBuffer(publicAPI, model) {
     let currOffset = 0;
     const newEntries = [];
 
+    // compute the max alignment, this is required as WebGPU defines a UBO to have
+    // a size that is a multiple of the maxAlignment
+    let maxAlignment = 4;
+    for (let i = 0; i < model.bufferEntries.length; i++) {
+      const entry = model.bufferEntries[i];
+      if (entry.sizeInBytes % 16 === 0) {
+        maxAlignment = Math.max(16, maxAlignment);
+      }
+      if (entry.sizeInBytes % 8 === 0) {
+        maxAlignment = Math.max(8, maxAlignment);
+      }
+    }
+
     // pack anything whose size is a multiple of 16 bytes first
     // this includes a couple types that don't require 16 byte alignment
     // such as mat2x2<f32> but that is OK
@@ -169,6 +182,8 @@ function vtkWebGPUUniformBuffer(publicAPI, model) {
       model._bufferEntryNames.set(model.bufferEntries[i].name, i);
     }
     model.sizeInBytes = currOffset;
+    model.sizeInBytes =
+      maxAlignment * Math.ceil(model.sizeInBytes / maxAlignment);
     model.sortDirty = false;
   };
 
@@ -266,7 +281,7 @@ function vtkWebGPUUniformBuffer(publicAPI, model) {
     // sort the entries
     publicAPI.sortBufferEntries();
 
-    const lines = [`[[block]] struct ${model.name}Struct\n{`];
+    const lines = [`struct ${model.name}Struct\n{`];
     for (let i = 0; i < model.bufferEntries.length; i++) {
       const entry = model.bufferEntries[i];
       lines.push(`  ${entry.name}: ${entry.type};`);

Sources/Rendering/WebGPU/VolumePass/index.js

@@ -275,8 +275,8 @@ function vtkWebGPUVolumePass(publicAPI, model) {
         code,
         '//VTK::RenderEncoder::Impl',
         [
-          'output.outColor1 = vec4<f32>(stopval, 0.0, 0.0, 0.0);',
-          'output.outColor2 = vec4<f32>(input.fragPos.z, 0.0, 0.0, 0.0);',
+          'output.outColor1 = vec4<f32>(input.fragPos.z, 0.0, 0.0, 0.0);',
+          'output.outColor2 = vec4<f32>(stopval, 0.0, 0.0, 0.0);',
         ]
       ).result;
       fDesc.setCode(code);