@kitware/vtk.js 24.5.1 → 24.5.4

package/Rendering/WebGPU/RenderEncoder.js

@@ -10,6 +10,7 @@ function vtkWebGPURenderEncoder(publicAPI, model) {
   model.classHierarchy.push('vtkWebGPURenderEncoder');
 
   publicAPI.begin = function (encoder) {
+    model.drawCallbacks = [];
     model.handle = encoder.beginRenderPass(model.description);
 
     if (model.label) {
@@ -18,14 +19,30 @@ function vtkWebGPURenderEncoder(publicAPI, model) {
   };
 
   publicAPI.end = function () {
+    // loop over registered pipelines and their callbacks
+    for (var i = 0; i < model.drawCallbacks.length; i++) {
+      var pStruct = model.drawCallbacks[i];
+      var pl = pStruct.pipeline;
+      publicAPI.setPipeline(pl);
+
+      for (var cb = 0; cb < pStruct.callbacks.length; cb++) {
+        pStruct.callbacks[cb](publicAPI);
+      }
+    }
+
     if (model.label) {
       model.handle.popDebugGroup();
     }
 
     model.handle.end();
+    model.boundPipeline = null;
   };
 
   publicAPI.setPipeline = function (pl) {
+    if (model.boundPipeline === pl) {
+      return;
+    }
+
     model.handle.setPipeline(pl.getHandle());
     var pd = pl.getPipelineDescription(); // check attachment state
 
@@ -57,6 +74,7 @@ function vtkWebGPURenderEncoder(publicAPI, model) {
     }
 
     model.boundPipeline = pl;
+    pl.draw(publicAPI);
   };
 
   publicAPI.replaceShaderCode = function (pipeline) {
@@ -100,6 +118,22 @@ function vtkWebGPURenderEncoder(publicAPI, model) {
     if (model.depthTextureView) {
       model.description.depthStencilAttachment.view = model.depthTextureView.getHandle();
     }
+  }; // register pipeline callbacks from a mapper
+
+
+  publicAPI.registerDrawCallback = function (pipeline, cb) {
+    // if there is a matching pipeline just add the cb
+    for (var i = 0; i < model.drawCallbacks.length; i++) {
+      if (model.drawCallbacks[i].pipeline === pipeline) {
+        model.drawCallbacks[i].callbacks.push(cb);
+        return;
+      }
+    }
+
+    model.drawCallbacks.push({
+      pipeline: pipeline,
+      callbacks: [cb]
+    });
   }; // simple forwarders
 
 

package/Rendering/WebGPU/Renderer.js

@@ -93,22 +93,6 @@ function vtkWebGPURenderer(publicAPI, model) {
     }
 
     return count;
-  }; // register pipeline callbacks from a mapper
-
-
-  publicAPI.registerPipelineCallback = function (pipeline, cb) {
-    // if there is a matching pipeline just add the cb
-    for (var i = 0; i < model.pipelineCallbacks.length; i++) {
-      if (model.pipelineCallbacks[i].pipeline === pipeline) {
-        model.pipelineCallbacks[i].callbacks.push(cb);
-        return;
-      }
-    }
-
-    model.pipelineCallbacks.push({
-      pipeline: pipeline,
-      callbacks: [cb]
-    });
   };
 
   publicAPI.updateUBO = function () {
@@ -148,25 +132,11 @@ function vtkWebGPURenderer(publicAPI, model) {
 
   publicAPI.opaquePass = function (prepass) {
     if (prepass) {
-      // clear last pipelines
-      model.pipelineCallbacks = [];
       model.renderEncoder.begin(model._parent.getCommandEncoder());
       publicAPI.updateUBO();
     } else {
       publicAPI.scissorAndViewport(model.renderEncoder);
-      publicAPI.clear(); // loop over registered pipelines
-
-      for (var i = 0; i < model.pipelineCallbacks.length; i++) {
-        var pStruct = model.pipelineCallbacks[i];
-        var pl = pStruct.pipeline;
-        model.renderEncoder.setPipeline(pl);
-        publicAPI.bindUBO(model.renderEncoder);
-
-        for (var cb = 0; cb < pStruct.callbacks.length; cb++) {
-          pStruct.callbacks[cb](model.renderEncoder);
-        }
-      }
-
+      publicAPI.clear();
       model.renderEncoder.end();
     }
   };
@@ -193,51 +163,23 @@ function vtkWebGPURenderer(publicAPI, model) {
     var background = model.renderable.getBackgroundByReference();
     model.clearFSQ.getUBO().setArray('BackgroundColor', background);
     model.clearFSQ.getUBO().sendIfNeeded(device);
-    model.clearFSQ.render(model.renderEncoder, device);
+    model.clearFSQ.prepareAndDraw(model.renderEncoder);
   };
 
   publicAPI.translucentPass = function (prepass) {
     if (prepass) {
-      // clear last pipelines
-      model.pipelineCallbacks = [];
       model.renderEncoder.begin(model._parent.getCommandEncoder());
     } else {
-      publicAPI.scissorAndViewport(model.renderEncoder); // loop over registered pipelines
-
-      for (var i = 0; i < model.pipelineCallbacks.length; i++) {
-        var pStruct = model.pipelineCallbacks[i];
-        var pl = pStruct.pipeline;
-        model.renderEncoder.setPipeline(pl);
-        publicAPI.bindUBO(model.renderEncoder);
-
-        for (var cb = 0; cb < pStruct.callbacks.length; cb++) {
-          pStruct.callbacks[cb](model.renderEncoder);
-        }
-      }
-
+      publicAPI.scissorAndViewport(model.renderEncoder);
       model.renderEncoder.end();
     }
   };
 
   publicAPI.volumeDepthRangePass = function (prepass) {
     if (prepass) {
-      // clear last pipelines
-      model.pipelineCallbacks = [];
       model.renderEncoder.begin(model._parent.getCommandEncoder());
     } else {
-      publicAPI.scissorAndViewport(model.renderEncoder); // loop over registered pipelines
-
-      for (var i = 0; i < model.pipelineCallbacks.length; i++) {
-        var pStruct = model.pipelineCallbacks[i];
-        var pl = pStruct.pipeline;
-        model.renderEncoder.setPipeline(pl);
-        publicAPI.bindUBO(model.renderEncoder);
-
-        for (var cb = 0; cb < pStruct.callbacks.length; cb++) {
-          pStruct.callbacks[cb](model.renderEncoder);
-        }
-      }
-
+      publicAPI.scissorAndViewport(model.renderEncoder);
       model.renderEncoder.end();
     }
   };

package/Rendering/WebGPU/ShaderDescription.js

@@ -51,15 +51,15 @@ function vtkWebGPUShaderDescription(publicAPI, model) {
 
         for (var i = 0; i < inputNames.length; i++) {
           if (inputInterpolations[i] !== undefined) {
-            inputStruct.push("  @location(".concat(i, ") @interpolate(").concat(inputInterpolations[i], ") ").concat(inputNames[i], " : ").concat(inputTypes[i], ";"));
+            inputStruct.push("  @location(".concat(i, ") @interpolate(").concat(inputInterpolations[i], ") ").concat(inputNames[i], " : ").concat(inputTypes[i], ","));
           } else {
-            inputStruct.push("  @location(".concat(i, ") ").concat(inputNames[i], " : ").concat(inputTypes[i], ";"));
+            inputStruct.push("  @location(".concat(i, ") ").concat(inputNames[i], " : ").concat(inputTypes[i], ","));
           }
         }
       }
 
       for (var _i = 0; _i < model.builtinInputNames.length; _i++) {
-        inputStruct.push("  ".concat(model.builtinInputNames[_i], " : ").concat(model.builtinInputTypes[_i], ";"));
+        inputStruct.push("  ".concat(model.builtinInputNames[_i], " : ").concat(model.builtinInputTypes[_i], ","));
       }
 
       if (inputStruct.length > 1) {
@@ -79,14 +79,14 @@ function vtkWebGPUShaderDescription(publicAPI, model) {
 
       for (var _i2 = 0; _i2 < model.outputNames.length; _i2++) {
         if (model.outputInterpolations[_i2] !== undefined) {
-          outputStruct.push("  @location(".concat(_i2, ") @interpolate(").concat(model.outputInterpolations[_i2], ") ").concat(model.outputNames[_i2], " : ").concat(model.outputTypes[_i2], ";"));
+          outputStruct.push("  @location(".concat(_i2, ") @interpolate(").concat(model.outputInterpolations[_i2], ") ").concat(model.outputNames[_i2], " : ").concat(model.outputTypes[_i2], ","));
         } else {
-          outputStruct.push("  @location(".concat(_i2, ") ").concat(model.outputNames[_i2], " : ").concat(model.outputTypes[_i2], ";"));
+          outputStruct.push("  @location(".concat(_i2, ") ").concat(model.outputNames[_i2], " : ").concat(model.outputTypes[_i2], ","));
         }
       }
 
       for (var _i3 = 0; _i3 < model.builtinOutputNames.length; _i3++) {
-        outputStruct.push("  ".concat(model.builtinOutputNames[_i3], " : ").concat(model.builtinOutputTypes[_i3], ";"));
+        outputStruct.push("  ".concat(model.builtinOutputNames[_i3], " : ").concat(model.builtinOutputTypes[_i3], ","));
       }
 
       outputStruct.push('};');

package/Rendering/WebGPU/{MapperHelper.js → SimpleMapper.js}

@@ -1,19 +1,20 @@
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import macro from '../../macros.js';
+import vtkViewNode from '../SceneGraph/ViewNode.js';
 import vtkWebGPUBindGroup from './BindGroup.js';
 import vtkWebGPUPipeline from './Pipeline.js';
 import vtkWebGPUShaderCache from './ShaderCache.js';
 import vtkWebGPUShaderDescription from './ShaderDescription.js';
 import vtkWebGPUVertexInput from './VertexInput.js';
 
-var vtkWebGPUMapperHelperVS = "\n//VTK::Renderer::Dec\n\n//VTK::Color::Dec\n\n//VTK::Normal::Dec\n\n//VTK::TCoord::Dec\n\n//VTK::Select::Dec\n\n//VTK::Mapper::Dec\n\n//VTK::IOStructs::Dec\n\n@stage(vertex)\nfn main(\n//VTK::IOStructs::Input\n)\n//VTK::IOStructs::Output\n{\n  var output : vertexOutput;\n\n  // var vertex: vec4<f32> = vertexBC;\n\n  //VTK::Color::Impl\n\n  //VTK::Normal::Impl\n\n  //VTK::TCoord::Impl\n\n  //VTK::Select::Impl\n\n  //VTK::Position::Impl\n\n  return output;\n}\n";
-var vtkWebGPUMapperHelperFS = "\n//VTK::Renderer::Dec\n\n//VTK::Color::Dec\n\n//VTK::Normal::Dec\n\n//VTK::TCoord::Dec\n\n//VTK::Select::Dec\n\n//VTK::RenderEncoder::Dec\n\n//VTK::Mapper::Dec\n\n//VTK::IOStructs::Dec\n\n@stage(fragment)\nfn main(\n//VTK::IOStructs::Input\n)\n//VTK::IOStructs::Output\n{\n  var output : fragmentOutput;\n\n  //VTK::Color::Impl\n\n  //VTK::Normal::Impl\n\n  //VTK::Light::Impl\n\n  //VTK::TCoord::Impl\n\n  //VTK::Select::Impl\n\n  // var computedColor:vec4<f32> = vec4<f32>(1.0,0.5,0.5,1.0);\n\n  //VTK::RenderEncoder::Impl\n  return output;\n}\n"; // ----------------------------------------------------------------------------
-// vtkWebGPUMapperHelper methods
+var vtkWebGPUSimpleMapperVS = "\n//VTK::Renderer::Dec\n\n//VTK::Color::Dec\n\n//VTK::Normal::Dec\n\n//VTK::TCoord::Dec\n\n//VTK::Select::Dec\n\n//VTK::Mapper::Dec\n\n//VTK::IOStructs::Dec\n\n@stage(vertex)\nfn main(\n//VTK::IOStructs::Input\n)\n//VTK::IOStructs::Output\n{\n  var output : vertexOutput;\n\n  // var vertex: vec4<f32> = vertexBC;\n\n  //VTK::Color::Impl\n\n  //VTK::Normal::Impl\n\n  //VTK::TCoord::Impl\n\n  //VTK::Select::Impl\n\n  //VTK::Position::Impl\n\n  return output;\n}\n";
+var vtkWebGPUSimpleMapperFS = "\n//VTK::Renderer::Dec\n\n//VTK::Color::Dec\n\n//VTK::Normal::Dec\n\n//VTK::TCoord::Dec\n\n//VTK::Select::Dec\n\n//VTK::RenderEncoder::Dec\n\n//VTK::Mapper::Dec\n\n//VTK::IOStructs::Dec\n\n@stage(fragment)\nfn main(\n//VTK::IOStructs::Input\n)\n//VTK::IOStructs::Output\n{\n  var output : fragmentOutput;\n\n  //VTK::Color::Impl\n\n  //VTK::Normal::Impl\n\n  //VTK::Light::Impl\n\n  //VTK::TCoord::Impl\n\n  //VTK::Select::Impl\n\n  // var computedColor:vec4<f32> = vec4<f32>(1.0,0.5,0.5,1.0);\n\n  //VTK::RenderEncoder::Impl\n  return output;\n}\n"; // ----------------------------------------------------------------------------
+// vtkWebGPUSimpleMapper methods
 // ----------------------------------------------------------------------------
 
-function vtkWebGPUMapperHelper(publicAPI, model) {
+function vtkWebGPUSimpleMapper(publicAPI, model) {
   // Set our className
-  model.classHierarchy.push('vtkWebGPUMapperHelper');
+  model.classHierarchy.push('vtkWebGPUSimpleMapper');
 
   publicAPI.generateShaderDescriptions = function (hash, pipeline, vertexInput) {
     // create the shader descriptions
@@ -126,32 +127,59 @@ function vtkWebGPUMapperHelper(publicAPI, model) {
     }
 
     model.textureViews.push(view);
+  }; // do everything required for this mapper to be rerady to draw
+  // but do not bind or do the actual draw commands as the pipeline
+  // is not neccessarily bound yet
+
+
+  publicAPI.prepareToDraw = function (renderEncoder) {
+    model.renderEncoder = renderEncoder; // do anything needed to get our input data up to date
+
+    publicAPI.updateInput(); // make sure buffers are created and up to date
+
+    publicAPI.updateBuffers(); // update bindings and bind groups/layouts
+    // does not acutally bind them, that is done in draw(...)
+
+    publicAPI.updateBindings(); // update the pipeline, includes computing the hash, and if needed
+    // creating the pipeline, shader code etc
+
+    publicAPI.updatePipeline();
   };
 
-  publicAPI.renderForPipeline = function (renderEncoder) {
-    var pipeline = renderEncoder.getBoundPipeline(); // bind the mapper bind group
+  publicAPI.updateInput = function () {};
 
-    renderEncoder.activateBindGroup(model.bindGroup); // bind the vertex input
+  publicAPI.updateBuffers = function () {};
 
-    pipeline.bindVertexInput(renderEncoder, model.vertexInput);
-    renderEncoder.draw(model.numberOfVertices, model.numberOfInstances, 0, 0);
+  publicAPI.updateBindings = function () {
+    // bindings can change without a pipeline change
+    // as long as their layout remains the same.
+    // That is why this is done even when the pipeline
+    // hash doesn't change.
+    model.bindGroup.setBindables(publicAPI.getBindables());
   };
 
-  publicAPI.registerToDraw = function () {
-    if (model.pipeline) {
-      model.WebGPURenderer.registerPipelineCallback(model.pipeline, publicAPI.renderForPipeline);
-    }
+  publicAPI.computePipelineHash = function () {};
+
+  publicAPI.registerDrawCallback = function (encoder) {
+    encoder.registerDrawCallback(model.pipeline, publicAPI.draw);
   };
 
-  publicAPI.render = function (renderEncoder, device) {
-    publicAPI.build(renderEncoder, device);
-    renderEncoder.setPipeline(model.pipeline);
+  publicAPI.prepareAndDraw = function (encoder) {
+    publicAPI.prepareToDraw(encoder);
+    encoder.setPipeline(model.pipeline);
+    publicAPI.draw(encoder);
+  }; // do the rest of the calls required to draw this mapper
+  // at this point the command encouder and pipeline are
+  // created and bound
 
-    if (model.WebGPURenderer) {
-      model.WebGPURenderer.bindUBO(renderEncoder);
-    }
 
-    publicAPI.renderForPipeline(renderEncoder);
+  publicAPI.draw = function (renderEncoder) {
+    var pipeline = renderEncoder.getBoundPipeline(); // bind the mapper bind group
+
+    renderEncoder.activateBindGroup(model.bindGroup); // bind the vertex input
+
+    pipeline.bindVertexInput(renderEncoder, model.vertexInput);
+    renderEncoder.draw(model.numberOfVertices, model.numberOfInstances, 0, 0);
   };
 
   publicAPI.getBindables = function () {
@@ -178,27 +206,25 @@ function vtkWebGPUMapperHelper(publicAPI, model) {
     return bindables;
   };
 
-  publicAPI.build = function (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
+  publicAPI.updatePipeline = function () {
+    publicAPI.computePipelineHash();
+    model.pipeline = model.device.getPipeline(model.pipelineHash); // build the pipeline if needed
 
     if (!model.pipeline) {
       model.pipeline = vtkWebGPUPipeline.newInstance();
-      model.pipeline.setDevice(device);
+      model.pipeline.setDevice(model.device);
 
       if (model.WebGPURenderer) {
         model.pipeline.addBindGroupLayout(model.WebGPURenderer.getBindGroup());
+        model.pipeline.addDrawCallback(model.WebGPURenderer.bindUBO);
       }
 
       model.pipeline.addBindGroupLayout(model.bindGroup);
       publicAPI.generateShaderDescriptions(model.pipelineHash, model.pipeline, model.vertexInput);
       model.pipeline.setTopology(model.topology);
-      model.pipeline.setRenderEncoder(renderEncoder);
+      model.pipeline.setRenderEncoder(model.renderEncoder);
       model.pipeline.setVertexState(model.vertexInput.getVertexInputInformation());
-      device.createPipeline(model.pipelineHash, model.pipeline);
+      model.device.createPipeline(model.pipelineHash, model.pipeline);
     }
   };
 } // ----------------------------------------------------------------------------
@@ -227,28 +253,28 @@ function extend(publicAPI, model) {
   var initialValues = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   Object.assign(model, DEFAULT_VALUES, initialValues); // Inheritance
 
-  macro.obj(publicAPI, model);
+  vtkViewNode.extend(publicAPI, model, initialValues);
   model.textureViews = [];
   model.vertexInput = vtkWebGPUVertexInput.newInstance();
   model.bindGroup = vtkWebGPUBindGroup.newInstance({
     label: 'mapperBG'
   });
   model.additionalBindables = [];
-  model.fragmentShaderTemplate = model.fragmentShaderTemplate || vtkWebGPUMapperHelperFS;
-  model.vertexShaderTemplate = model.vertexShaderTemplate || vtkWebGPUMapperHelperVS;
+  model.fragmentShaderTemplate = model.fragmentShaderTemplate || vtkWebGPUSimpleMapperFS;
+  model.vertexShaderTemplate = model.vertexShaderTemplate || vtkWebGPUSimpleMapperVS;
   model.shaderReplacements = new Map(); // Build VTK API
 
-  macro.get(publicAPI, model, ['vertexInput']);
+  macro.get(publicAPI, model, ['pipeline', 'vertexInput']);
   macro.setGet(publicAPI, model, ['additionalBindables', 'device', 'fragmentShaderTemplate', 'interpolate', 'numberOfInstances', 'numberOfVertices', 'pipelineHash', 'shaderReplacements', 'SSBO', 'textureViews', 'topology', 'UBO', 'vertexShaderTemplate', 'WebGPURenderer']); // Object methods
 
-  vtkWebGPUMapperHelper(publicAPI, model);
+  vtkWebGPUSimpleMapper(publicAPI, model);
 } // ----------------------------------------------------------------------------
 
-var newInstance = macro.newInstance(extend, 'vtkWebGPUMapperHelper'); // ----------------------------------------------------------------------------
+var newInstance = macro.newInstance(extend, 'vtkWebGPUSimpleMapper'); // ----------------------------------------------------------------------------
 
-var vtkWebGPUMapperHelper$1 = {
+var vtkWebGPUSimpleMapper$1 = {
   newInstance: newInstance,
   extend: extend
 };
 
-export { vtkWebGPUMapperHelper$1 as default, extend, newInstance };
+export { vtkWebGPUSimpleMapper$1 as default, extend, newInstance };

package/Rendering/WebGPU/SphereMapper.js

@@ -1,12 +1,11 @@
 import { newInstance as newInstance$1, vtkErrorMacro as vtkErrorMacro$1 } from '../../macros.js';
 import { r as radiansFromDegrees } from '../../Common/Core/Math/index.js';
-import vtkWebGPUPolyDataMapper from './PolyDataMapper.js';
+import vtkWebGPUCellArrayMapper from './CellArrayMapper.js';
 import vtkWebGPUBufferManager from './BufferManager.js';
 import vtkWebGPUShaderCache from './ShaderCache.js';
 import { registerOverride } from './ViewNodeFactory.js';
 
-var BufferUsage = vtkWebGPUBufferManager.BufferUsage,
-    PrimitiveTypes = vtkWebGPUBufferManager.PrimitiveTypes;
+var BufferUsage = vtkWebGPUBufferManager.BufferUsage;
 var vtkErrorMacro = vtkErrorMacro$1;
 var vtkWebGPUSphereMapperVS = "\n//VTK::Renderer::Dec\n\n//VTK::Mapper::Dec\n\n//VTK::Color::Dec\n\n//VTK::IOStructs::Dec\n\n@stage(vertex)\nfn main(\n//VTK::IOStructs::Input\n)\n//VTK::IOStructs::Output\n{\n  var output : vertexOutput;\n\n  var vertexVC: vec4<f32> = rendererUBO.SCVCMatrix * mapperUBO.BCSCMatrix * vec4<f32>(vertexBC.x, vertexBC.y, vertexBC.z, 1.0);\n\n  //VTK::Color::Impl\n\n  // compute the projected vertex position\n  output.centerVC = vertexVC.xyz;\n  output.radiusVC = length(offsetMC)*0.5;\n\n  // make the triangle face the camera\n  if (rendererUBO.cameraParallel == 0u)\n    {\n    var dir: vec3<f32> = normalize(-vertexVC.xyz);\n    var base2: vec3<f32> = normalize(cross(dir,vec3<f32>(1.0,0.0,0.0)));\n    var base1: vec3<f32> = cross(base2,dir);\n    dir = vertexVC.xyz + offsetMC.x*base1 + offsetMC.y*base2;\n    vertexVC = vec4<f32>(dir, 1.0);\n    }\n  else\n    {\n    // add in the offset\n    var tmp2: vec2<f32> = vertexVC.xy + offsetMC;\n    vertexVC = vec4<f32>(tmp2, vertexVC.zw);\n    }\n\n  output.vertexVC = vertexVC.xyz;\n\n  //VTK::Position::Impl\n\n  return output;\n}\n"; // ----------------------------------------------------------------------------
 // vtkWebGPUSphereMapper methods
@@ -15,6 +14,21 @@ var vtkWebGPUSphereMapperVS = "\n//VTK::Renderer::Dec\n\n//VTK::Mapper::Dec\n\n/
 function vtkWebGPUSphereMapper(publicAPI, model) {
   // Set our className
   model.classHierarchy.push('vtkWebGPUSphereMapper');
+  var cellMapperBuildPass = publicAPI.buildPass;
+
+  publicAPI.buildPass = function (prepass) {
+    if (prepass) {
+      if (!model.renderable.getStatic()) {
+        model.renderable.update();
+      }
+
+      var poly = model.renderable.getInputData();
+      publicAPI.setCellArray(poly.getVerts());
+      publicAPI.setCurrentInput(poly);
+    }
+
+    cellMapperBuildPass(prepass);
+  };
 
   publicAPI.replaceShaderNormal = function (hash, pipeline, vertexInput) {
     var vDesc = pipeline.getShaderDescription('vertex');
@@ -40,32 +54,26 @@ function vtkWebGPUSphereMapper(publicAPI, model) {
   // or vertex input changes/ bind groups/ etc
 
 
-  publicAPI.computePipelineHash = function (vertexInput) {
-    var pipelineHash = 'spm';
+  publicAPI.computePipelineHash = function () {
+    model.pipelineHash = 'spm';
 
-    if (vertexInput.hasAttribute("colorVI")) {
-      pipelineHash += "c";
+    if (model.vertexInput.hasAttribute("colorVI")) {
+      model.pipelineHash += "c";
     }
 
-    pipelineHash += model.renderEncoder.getPipelineHash();
-    return pipelineHash;
-  }; // was originally buildIBOs() but not using IBOs right now
-
+    model.pipelineHash += model.renderEncoder.getPipelineHash();
+  };
 
-  publicAPI.buildPrimitives = function () {
+  publicAPI.updateBuffers = function () {
     var poly = model.currentInput;
-    var device = model.WebGPURenderWindow.getDevice();
-    model.renderable.mapScalars(poly, 1.0); // handle triangles
-
-    var i = PrimitiveTypes.Triangles;
+    model.renderable.mapScalars(poly, 1.0);
     var points = poly.getPoints();
     var numPoints = points.getNumberOfPoints();
-    var pointArray = points.getData();
-    var primHelper = model.primitives[i]; // default to one instance and computed number of verts
+    var pointArray = points.getData(); // default to one instance and computed number of verts
 
-    primHelper.setNumberOfInstances(1);
-    primHelper.setNumberOfVertices(3 * numPoints);
-    var vertexInput = model.primitives[i].getVertexInput();
+    publicAPI.setNumberOfInstances(1);
+    publicAPI.setNumberOfVertices(3 * numPoints);
+    var vertexInput = model.vertexInput;
     var buffRequest = {
       owner: points,
       hash: 'spm',
@@ -74,7 +82,7 @@ function vtkWebGPUSphereMapper(publicAPI, model) {
       format: 'float32x3'
     };
 
-    if (!device.getBufferManager().hasBuffer(buffRequest)) {
+    if (!model.device.getBufferManager().hasBuffer(buffRequest)) {
       // xyz v1 v2 v3
       var tmpVBO = new Float32Array(3 * numPoints * 3);
       var pointIdx = 0;
@@ -94,7 +102,7 @@ function vtkWebGPUSphereMapper(publicAPI, model) {
       }
 
       buffRequest.nativeArray = tmpVBO;
-      var buff = device.getBufferManager().getBuffer(buffRequest);
+      var buff = model.device.getBufferManager().getBuffer(buffRequest);
       vertexInput.addBuffer(buff, ['vertexBC']);
     } // compute offset VBO
 
@@ -117,7 +125,7 @@ function vtkWebGPUSphereMapper(publicAPI, model) {
         format: 'float32x2'
       };
 
-      if (!device.getBufferManager().hasBuffer(buffRequest)) {
+      if (!model.device.getBufferManager().hasBuffer(buffRequest)) {
         var _tmpVBO = new Float32Array(3 * numPoints * 2);
 
         var cos30 = Math.cos(radiansFromDegrees(30.0));
@@ -140,15 +148,14 @@ function vtkWebGPUSphereMapper(publicAPI, model) {
 
         buffRequest.nativeArray = _tmpVBO;
 
-        var _buff = device.getBufferManager().getBuffer(buffRequest);
+        var _buff = model.device.getBufferManager().getBuffer(buffRequest);
 
         vertexInput.addBuffer(_buff, ['offsetMC']);
       }
 
       model._lastRadius = defaultRadius;
-    }
+    } // deal with colors but only if modified
 
-    model.renderable.mapScalars(poly, 1.0); // deal with colors but only if modified
 
     var haveColors = false;
 
@@ -164,7 +171,7 @@ function vtkWebGPUSphereMapper(publicAPI, model) {
           format: 'unorm8x4'
         };
 
-        if (!device.getBufferManager().hasBuffer(buffRequest)) {
+        if (!model.device.getBufferManager().hasBuffer(buffRequest)) {
           var colorComponents = c.getNumberOfComponents();
 
           if (colorComponents !== 4) {
@@ -189,7 +196,7 @@ function vtkWebGPUSphereMapper(publicAPI, model) {
 
           buffRequest.nativeArray = _tmpVBO2;
 
-          var _buff2 = device.getBufferManager().getBuffer(buffRequest);
+          var _buff2 = model.device.getBufferManager().getBuffer(buffRequest);
 
           vertexInput.addBuffer(_buff2, ['colorVI']);
         }
@@ -202,11 +209,8 @@ function vtkWebGPUSphereMapper(publicAPI, model) {
       vertexInput.removeBufferIfPresent('colorVI');
     }
 
-    primHelper.setPipelineHash(publicAPI.computePipelineHash(vertexInput));
-    primHelper.setWebGPURenderer(model.WebGPURenderer);
-    primHelper.setTopology('triangle-list');
-    primHelper.build(model.renderEncoder, device);
-    primHelper.registerToDraw();
+    publicAPI.setTopology('triangle-list');
+    publicAPI.updateUBO();
   };
 } // ----------------------------------------------------------------------------
 // Object factory
@@ -219,11 +223,11 @@ function extend(publicAPI, model) {
   var initialValues = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   Object.assign(model, DEFAULT_VALUES, initialValues); // Inheritance
 
-  vtkWebGPUPolyDataMapper.extend(publicAPI, model, initialValues);
-  model.primitives[PrimitiveTypes.Triangles].setVertexShaderTemplate(vtkWebGPUSphereMapperVS); // Object methods
+  vtkWebGPUCellArrayMapper.extend(publicAPI, model, initialValues);
+  publicAPI.setVertexShaderTemplate(vtkWebGPUSphereMapperVS); // Object methods
 
   vtkWebGPUSphereMapper(publicAPI, model);
-  var sr = model.primitives[PrimitiveTypes.Triangles].getShaderReplacements();
+  var sr = model.shaderReplacements;
   sr.set('replaceShaderPosition', publicAPI.replaceShaderPosition);
   sr.set('replaceShaderNormal', publicAPI.replaceShaderNormal);
 } // ----------------------------------------------------------------------------