chore(WebGPU): better 3d texture support and volren

Test out a few 3d texture paths and fix them (webgpu)

Add gradient opacity support for volume rendering and
many fixes and improvements (webgpu)

Sources/Rendering/WebGPU/MapperHelper/index.js

@@ -261,12 +261,7 @@ function vtkWebGPUMapperHelper(publicAPI, model) {
     publicAPI.renderForPipeline(renderEncoder);
   };
 
-  publicAPI.build = (renderEncoder, device) => {
-    // handle per primitive type
-    model.renderEncoder = renderEncoder;
-
-    model.pipeline = device.getPipeline(model.pipelineHash);
-
+  publicAPI.getBindables = () => {
     const bindables = [];
     if (model.UBO) {
       bindables.push(model.UBO);
@@ -284,7 +279,17 @@ function vtkWebGPUMapperHelper(publicAPI, model) {
         bindables.push(samp);
       }
     }
-    model.bindGroup.setBindables(bindables);
+
+    return bindables;
+  };
+
+  publicAPI.build = (renderEncoder, device) => {
+    // handle per primitive type
+    model.renderEncoder = renderEncoder;
+
+    model.pipeline = device.getPipeline(model.pipelineHash);
+
+    model.bindGroup.setBindables(publicAPI.getBindables());
 
     // build VBO for this primitive
     // build the pipeline if needed

Sources/Rendering/WebGPU/README.md

@@ -24,6 +24,7 @@ instead calling renderWindow.newAPISpecificView('WebGPU') should be all that
 is needed.
 
 # ToDo
+- add device.lost handler
 - create background class to encapsulate, background clear,
   gradient background, texture background, skybox etc
 - PBR lighting to replace the simple model currently coded

Sources/Rendering/WebGPU/RenderWindow/index.js

@@ -173,6 +173,7 @@ function vtkWebGPURenderWindow(publicAPI, model) {
   publicAPI.create3DContextAsync = async () => {
     // Get a GPU device to render with
     model.adapter = await navigator.gpu.requestAdapter();
+    // console.log([...model.adapter.features]);
     model.device = vtkWebGPUDevice.newInstance();
     model.device.initialize(await model.adapter.requestDevice());
     model.context = model.canvas.getContext('gpupresent');

Sources/Rendering/WebGPU/Texture/index.js

@@ -57,7 +57,8 @@ function vtkWebGPUTexture(publicAPI, model) {
 
   // set the data
   publicAPI.writeImageData = (req) => {
-    let bufferBytesPerRow = model.width * 4;
+    const tDetails = vtkWebGPUTypes.getDetailsFromTextureFormat(model.format);
+    let bufferBytesPerRow = model.width * tDetails.stride;
     if (req.nativeArray) {
       // create and write the buffer
       const buffRequest = {
@@ -75,7 +76,6 @@ function vtkWebGPUTexture(publicAPI, model) {
       // bytesPerRow must be a multiple of 256 so we might need to rebuild
       // the data here before passing to the buffer. e.g. if it is unorm8x4 then
       // we need to have width be a multiple of 64
-      const tDetails = vtkWebGPUTypes.getDetailsFromTextureFormat(model.format);
       const currWidthInBytes = model.width * tDetails.stride;
       if (currWidthInBytes % 256) {
         const oArray = req.dataArray.getData();
@@ -86,10 +86,10 @@ function vtkWebGPUTexture(publicAPI, model) {
 
         const nArray = macro.newTypedArray(
           oArray.name,
-          bufferWidth * model.height
+          bufferWidth * model.height * model.depth
         );
 
-        for (let v = 0; v < model.height; v++) {
+        for (let v = 0; v < model.height * model.depth; v++) {
           nArray.set(
             oArray.subarray(v * oWidth, (v + 1) * oWidth),
             v * bufferWidth
@@ -190,7 +190,11 @@ function vtkWebGPUTexture(publicAPI, model) {
     }
   };
 
-  publicAPI.createView = (options) => {
+  publicAPI.createView = (options = {}) => {
+    // if options is missing values try to add them in
+    if (!options.dimension) {
+      options.dimension = model.depth === 1 ? '2d' : '3d';
+    }
     const view = vtkWebGPUTextureView.newInstance();
     view.create(publicAPI, options);
     return view;

Sources/Rendering/WebGPU/TextureManager/index.js

@@ -37,6 +37,8 @@ function vtkWebGPUTextureManager(publicAPI, model) {
       req.height = dims[1];
       req.depth = dims[2];
       const numComp = req.dataArray.getNumberOfComponents();
+      // todo pick format based on native type
+      // todo fix handling of 3 component
       switch (numComp) {
         case 1:
           req.format = 'r8unorm';

Sources/Rendering/WebGPU/TextureView/index.js

@@ -14,8 +14,10 @@ function vtkWebGPUTextureView(publicAPI, model) {
   publicAPI.create = (texture, options) => {
     model.texture = texture;
     model.options = options;
+    model.options.dimension = model.options.dimension || '2d';
     model.textureHandle = texture.getHandle();
     model.handle = model.textureHandle.createView(model.options);
+    model.bindGroupLayoutEntry.texture.viewDimension = model.options.dimension;
   };
 
   publicAPI.getBindGroupEntry = () => {
@@ -26,7 +28,7 @@ function vtkWebGPUTextureView(publicAPI, model) {
   };
 
   publicAPI.getShaderCode = (binding, group) => {
-    const result = `[[binding(${binding}), group(${group})]] var ${model.name}: texture_2d<f32>;`;
+    const result = `[[binding(${binding}), group(${group})]] var ${model.name}: texture_${model.options.dimension}<f32>;`;
     return result;
   };
 
@@ -94,7 +96,7 @@ export function extend(publicAPI, model, initialValues = {}) {
     /* eslint-enable no-undef */
     texture: {
       // sampleType: 'float',
-      // viewDimension: '2d',
+      viewDimension: '2d',
       // multisampled: false,
     },
   };

Sources/Rendering/WebGPU/Volume/index.js

@@ -30,7 +30,8 @@ function vtkWebGPUVolume(publicAPI, model) {
         model.propID = model.WebGPURenderWindow.getUniquePropID();
       }
       publicAPI.prepareNodes();
-      publicAPI.addMissingNode(model.renderable.getMapper());
+      model.renderable.getMapper().update();
+      // publicAPI.addMissingNode(model.renderable.getMapper());
       publicAPI.removeUnusedNodes();
     }
   };

Sources/Rendering/WebGPU/VolumePass/index.js

@@ -224,7 +224,6 @@ function vtkWebGPUVolumePass(publicAPI, model) {
         usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.SAMPLED,
       });
       const maxView = model.depthRangeTexture.createView();
-      maxView.addSampler(device);
       maxView.setName('maxTexture');
       model.depthRangeEncoder.setColorTextureView(0, maxView);
       model.depthRangeTexture2 = vtkWebGPUTexture.newInstance();
@@ -236,7 +235,6 @@ function vtkWebGPUVolumePass(publicAPI, model) {
       });
       const minView = model.depthRangeTexture2.createView();
       minView.setName('minTexture');
-      // shares the maxTextureSampler
       model.depthRangeEncoder.setColorTextureView(1, minView);
       model._mapper.setDevice(viewNode.getDevice());
       model._mapper.setTextureViews([model.depthTextureView]);