feat(ImageCPRMapper): add ImageCPRMapper in WebGPU

Sources/Rendering/Core/ImageCPRMapper/example/index.js

@@ -24,6 +24,7 @@ import vtkPlaneManipulator from '@kitware/vtk.js/Widgets/Manipulators/PlaneManip
 import vtkPolyData from '@kitware/vtk.js/Common/DataModel/PolyData';
 import vtkRenderer from '@kitware/vtk.js/Rendering/Core/Renderer';
 import vtkResliceCursorWidget from '@kitware/vtk.js/Widgets/Widgets3D/ResliceCursorWidget';
+import vtkURLExtract from '@kitware/vtk.js/Common/Core/URLExtract';
 import vtkWidgetManager from '@kitware/vtk.js/Widgets/Core/WidgetManager';
 import widgetBehavior from '@kitware/vtk.js/Widgets/Widgets3D/ResliceCursorWidget/cprBehavior';
 
@@ -34,16 +35,21 @@ import spineJSON from './spine_centerline.json';
 const volumePath = `${__BASE_PATH__}/data/volume/LIDC2.vti`;
 const centerlineJsons = { Aorta: aortaJSON, Spine: spineJSON };
 const centerlineKeys = Object.keys(centerlineJsons);
+const userParams = vtkURLExtract.extractURLParameters();
+const viewAPI = userParams.viewAPI || 'WebGL';
 
 // ----------------------------------------------------------------------------
 // Standard rendering code setup
 // ----------------------------------------------------------------------------
 
-const fullScreenRenderer = vtkFullScreenRenderWindow.newInstance();
+const fullScreenRenderer = vtkFullScreenRenderWindow.newInstance({
+  defaultViewAPI: viewAPI,
+});
 const stretchRenderer = fullScreenRenderer.getRenderer();
 const renderWindow = fullScreenRenderer.getRenderWindow();
 const gui = new GUI();
 const params = {
+  viewAPI,
   Angle: 0,
   Animate: false,
   Centerline: centerlineKeys[0],
@@ -59,6 +65,15 @@ const interactor = renderWindow.getInteractor();
 interactor.setInteractorStyle(vtkInteractorStyleImage.newInstance());
 interactor.setDesiredUpdateRate(15.0);
 
+gui
+  .add(params, 'viewAPI', ['WebGL', 'WebGPU'])
+  .name('Renderer')
+  .onChange((api) => {
+    const query = new URLSearchParams(window.location.search);
+    query.set('viewAPI', api);
+    window.location.search = query.toString();
+  });
+
 // Reslice Cursor Widget
 const stretchPlane = 'Y';
 const crossPlane = 'Z';

Sources/Rendering/WebGPU/ForwardPass/index.js

@@ -25,7 +25,13 @@ fn main(
 {
   var output: fragmentOutput;
 
-  var computedColor: vec4<f32> = clamp(textureSampleLevel(opaquePassColorTexture, finalPassSampler, input.tcoordVS, 0.0),vec4<f32>(0.0),vec4<f32>(1.0));
+  var texCoord: vec2<i32> =
+    vec2<i32>(i32(input.fragPos.x), i32(input.fragPos.y));
+  var computedColor: vec4<f32> = clamp(
+    textureLoad(opaquePassColorTexture, texCoord, 0),
+    vec4<f32>(0.0),
+    vec4<f32>(1.0)
+  );
 
   //VTK::RenderEncoder::Impl
   return output;
@@ -181,6 +187,16 @@ function vtkForwardPass(publicAPI, model) {
     ]);
     model._fullScreenQuad.setAdditionalBindables([model._fsqSampler]);
     model._fullScreenQuad.setFragmentShaderTemplate(finalBlitFragTemplate);
+    model._fullScreenQuad
+      .getShaderReplacements()
+      .set('replaceShaderTCoord', (hash, pipeline) => {
+        const vDesc = pipeline.getShaderDescription('vertex');
+        if (!vDesc.hasOutput('tcoordVS')) {
+          vDesc.addOutput('vec2<f32>', 'tcoordVS');
+        }
+        const fDesc = pipeline.getShaderDescription('fragment');
+        fDesc.addBuiltinInput('vec4<f32>', '@builtin(position) fragPos');
+      });
     model._finalBlitOutputTextureView = vtkWebGPUTextureView.newInstance();
     model._finalBlitEncoder.setColorTextureView(
       0,

Sources/Rendering/WebGPU/Glyph3DMapper/index.js

@@ -20,6 +20,13 @@ function vtkWebGPUGlyph3DCellArrayMapper(publicAPI, model) {
     publicAPI.setNumberOfInstances(model.glyphInstances);
   };
 
+  publicAPI.computePipelineHash = () => {
+    superClass.computePipelineHash();
+    if (model.renderable.getColorArray()) {
+      model.pipelineHash += 'gc';
+    }
+  };
+
   publicAPI.replaceShaderPosition = (hash, pipeline, vertexInput) => {
     const vDesc = pipeline.getShaderDescription('vertex');
     vDesc.addBuiltinInput('u32', '@builtin(instance_index) instanceIndex');
@@ -182,21 +189,38 @@ function vtkWebGPUGlyph3DMapper(publicAPI, model) {
       );
       const device = model.WebGPURenderWindow.getDevice();
 
+      const ssboInstances = Math.max(model.numInstances, 1);
       model.SSBO.clearData();
-      model.SSBO.setNumberOfInstances(model.numInstances);
+      model.SSBO.setNumberOfInstances(ssboInstances);
       model.SSBO.addEntry('matrix', 'mat4x4<f32>');
       model.SSBO.addEntry('normal', 'mat4x4<f32>');
       if (model.carray) {
         model.SSBO.addEntry('color', 'vec4<f32>');
       }
 
-      model.SSBO.setAllInstancesFromArray('matrix', garray);
-      model.SSBO.setAllInstancesFromArray3x3To4x4('normal', narray);
-      if (model.carray) {
-        model.SSBO.setAllInstancesFromArrayColorToFloat(
-          'color',
-          model.carray.getData()
+      if (model.numInstances > 0) {
+        model.SSBO.setAllInstancesFromArray('matrix', garray);
+        model.SSBO.setAllInstancesFromArray3x3To4x4('normal', narray);
+        if (model.carray) {
+          model.SSBO.setAllInstancesFromArrayColorToFloat(
+            'color',
+            model.carray.getData()
+          );
+        }
+      } else {
+        model.SSBO.setArray(
+          'matrix',
+          0,
+          [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]
+        );
+        model.SSBO.setArray(
+          'normal',
+          0,
+          [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]
         );
+        if (model.carray) {
+          model.SSBO.setArray('color', 0, [1, 1, 1, 1]);
+        }
       }
 
       model.SSBO.send(device);