feat(ImageCPRMapper): add ImageCPRMapper in WebGPU

Author: daker

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');