feat(WebGPU): add attribute id support to hardware selection

daker · daker · commit 52ef7963f714 · 2026-05-04T11:43:12.000+02:00
diff --git a/Sources/Rendering/WebGPU/BufferManager/index.js b/Sources/Rendering/WebGPU/BufferManager/index.js
@@ -317,7 +317,13 @@ function vtkWebGPUBufferManager(publicAPI, model) {
       buffer.setStrideInBytes(
         vtkWebGPUTypes.getByteStrideFromBufferFormat(req.format)
       );
-      buffer.setArrayInformation([{ offset: 0, format: req.format }]);
+      buffer.setArrayInformation([
+        {
+          offset: 0,
+          format: req.format,
+          interpolation: req.interpolation,
+        },
+      ]);
     }
 
     buffer.setSourceTime(req.time);
diff --git a/Sources/Rendering/WebGPU/CellArrayMapper/index.js b/Sources/Rendering/WebGPU/CellArrayMapper/index.js
@@ -425,12 +425,26 @@ function vtkWebGPUCellArrayMapper(publicAPI, model) {
     }
   };
 
+  publicAPI.isEdgePrimitive = () =>
+    model.primitiveType === PrimitiveTypes.TriangleEdges ||
+    model.primitiveType === PrimitiveTypes.TriangleStripEdges;
+
+  publicAPI.shouldSkipPass = () =>
+    publicAPI.isEdgePrimitive() && (model.depthOnlyPass || model.selectionPass);
+
   // Renders myself
   publicAPI.renderForPass = (renderEncoder, depthOnly = false) => {
     model.depthOnlyPass = depthOnly;
+    model.selectionPass = renderEncoder?.getPipelineHash?.() === 'sel';
+    if (publicAPI.shouldSkipPass()) {
+      model.depthOnlyPass = false;
+      model.selectionPass = false;
+      return;
+    }
     publicAPI.prepareToDraw(renderEncoder);
     model.renderEncoder.registerDrawCallback(model.pipeline, publicAPI.draw);
     model.depthOnlyPass = false;
+    model.selectionPass = false;
   };
 
   publicAPI.translucentPass = (prepass) => {
@@ -458,8 +472,10 @@ function vtkWebGPUCellArrayMapper(publicAPI, model) {
     const ppty = actor.getProperty();
     const clippingPlanesMTime = model.renderable.getClippingPlanesMTime();
     const backfaceProperty = actor.getBackfaceProperty?.() ?? ppty;
+    const selector = model.WebGPURenderer?.getSelector?.();
     const utime = model.UBO.getSendTime();
     if (
+      !selector &&
       publicAPI.getMTime() <= utime &&
       ppty.getMTime() <= utime &&
       backfaceProperty.getMTime() <= utime &&
@@ -573,7 +589,13 @@ function vtkWebGPUCellArrayMapper(publicAPI, model) {
       'Opacity',
       edgeLikeRepresentation ? ppty.getEdgeOpacity() : ppty.getOpacity()
     );
-    model.UBO.setValue('PropID', model.WebGPUActor.getPropID());
+    const runtimePropID = model.WebGPUActor.getPropID();
+    model.UBO.setValue(
+      'PropID',
+      selector?.getPropIDForSelection
+        ? selector.getPropIDForSelection(runtimePropID, actor) + 1
+        : runtimePropID
+    );
     const cp = publicAPI.getCoincidentParameters();
     model.UBO.setValue('CoincidentFactor', cp.factor);
     model.UBO.setValue('CoincidentOffset', cp.offset);
@@ -1210,12 +1232,40 @@ function vtkWebGPUCellArrayMapper(publicAPI, model) {
 
   publicAPI.replaceShaderSelect = (hash, pipeline, vertexInput) => {
     if (hash.includes('sel')) {
+      const selectBuffer = vertexInput.getBuffer('selectId');
+      if (selectBuffer) {
+        const vDesc = pipeline.getShaderDescription('vertex');
+        vDesc.addOutput(
+          'u32',
+          'attributeID',
+          selectBuffer.getArrayInformation()[0].interpolation
+        );
+        vDesc.addOutput(
+          'u32',
+          'compositeID',
+          selectBuffer.getArrayInformation()[0].interpolation
+        );
+        let code = vDesc.getCode();
+        code = vtkWebGPUShaderCache.substitute(code, '//VTK::Select::Impl', [
+          '  output.compositeID = 1u;',
+          '  output.attributeID = selectId + 1u;',
+        ]).result;
+        vDesc.setCode(code);
+      }
+
       const fDesc = pipeline.getShaderDescription('fragment');
       let code = fDesc.getCode();
-      // by default there are no composites, so just 0
-      code = vtkWebGPUShaderCache.substitute(code, '//VTK::Select::Impl', [
-        '  var compositeID: u32 = 0u;',
-      ]).result;
+      const selectImpl = selectBuffer
+        ? [
+            '  var compositeID: u32 = input.compositeID;',
+            '  var attributeID: u32 = input.attributeID;',
+          ]
+        : ['  var compositeID: u32 = 0u;', '  var attributeID: u32 = 0u;'];
+      code = vtkWebGPUShaderCache.substitute(
+        code,
+        '//VTK::Select::Impl',
+        selectImpl
+      ).result;
       fDesc.setCode(code);
     }
   };
@@ -1451,6 +1501,43 @@ function vtkWebGPUCellArrayMapper(publicAPI, model) {
     } else {
       vertexInput.removeBufferIfPresent('tcoord');
     }
+
+    // --- Selection IDs ---
+    const selector = model.WebGPURenderer?.getSelector?.();
+    if (selector && !edges && indexBuffer) {
+      let selectIds = null;
+      if (
+        selector.getFieldAssociation() ===
+        FieldAssociations.FIELD_ASSOCIATION_POINTS
+      ) {
+        selectIds = indexBuffer.getFlatIdToPointId();
+      } else if (
+        selector.getFieldAssociation() ===
+        FieldAssociations.FIELD_ASSOCIATION_CELLS
+      ) {
+        selectIds = indexBuffer.getFlatIdToCellId();
+      }
+
+      if (selectIds) {
+        vertexInput.addBuffer(
+          device.getBufferManager().getBuffer({
+            hash: `sel${selector.getFieldAssociation()}I${indexBuffer.getMTime()}`,
+            usage: BufferUsage.RawVertex,
+            format: 'uint32',
+            interpolation: 'flat',
+            nativeArray:
+              selectIds instanceof Uint32Array
+                ? selectIds
+                : Uint32Array.from(selectIds),
+          }),
+          ['selectId']
+        );
+      } else {
+        vertexInput.removeBufferIfPresent('selectId');
+      }
+    } else {
+      vertexInput.removeBufferIfPresent('selectId');
+    }
   };
 
   publicAPI.updateTextures = () => {
@@ -1573,6 +1660,9 @@ function vtkWebGPUCellArrayMapper(publicAPI, model) {
     if (model.depthOnlyPass) {
       pipelineHash += 'd';
     }
+    if (model.selectionPass) {
+      pipelineHash += 's';
+    }
 
     if (
       model.primitiveType === PrimitiveTypes.TriangleEdges ||
@@ -1651,6 +1741,7 @@ function vtkWebGPUCellArrayMapper(publicAPI, model) {
 
 const DEFAULT_VALUES = {
   depthOnlyPass: false,
+  selectionPass: false,
   is2D: false,
   cellArray: null,
   currentInput: null,
diff --git a/Sources/Rendering/WebGPU/Glyph3DMapper/index.js b/Sources/Rendering/WebGPU/Glyph3DMapper/index.js
@@ -86,17 +86,20 @@ function vtkWebGPUGlyph3DCellArrayMapper(publicAPI, model) {
   publicAPI.replaceShaderSelect = (hash, pipeline, vertexInput) => {
     if (hash.includes('sel')) {
       const vDesc = pipeline.getShaderDescription('vertex');
+      vDesc.addOutput('u32', 'attributeID', 'flat');
       vDesc.addOutput('u32', 'compositeID', 'flat');
       let code = vDesc.getCode();
       code = vtkWebGPUShaderCache.substitute(code, '//VTK::Select::Impl', [
-        '  output.compositeID = input.instanceIndex;',
+        '  output.compositeID = input.instanceIndex + 1u;',
+        '  output.attributeID = input.instanceIndex + 1u;',
       ]).result;
       vDesc.setCode(code);
 
       const fDesc = pipeline.getShaderDescription('fragment');
       code = fDesc.getCode();
       code = vtkWebGPUShaderCache.substitute(code, '//VTK::Select::Impl', [
         'var compositeID: u32 = input.compositeID;',
+        'var attributeID: u32 = input.attributeID;',
       ]).result;
       fDesc.setCode(code);
     }
diff --git a/Sources/Rendering/WebGPU/HardwareSelectionPass/index.js b/Sources/Rendering/WebGPU/HardwareSelectionPass/index.js
@@ -87,10 +87,22 @@ function vtkWebGPUHardwareSelectionPass(publicAPI, model) {
       const fDesc = pipeline.getShaderDescription('fragment');
       fDesc.addOutput('vec4<u32>', 'outColor');
       let code = fDesc.getCode();
+      code = vtkWebGPUShaderCache.substitute(code, '//VTK::Select::Impl', [
+        '  var compositeID: u32 = 0u;',
+        '  var attributeID: u32 = compositeID;',
+      ]).result;
       code = vtkWebGPUShaderCache.substitute(
         code,
         '//VTK::RenderEncoder::Impl',
-        ['output.outColor = vec4<u32>(mapperUBO.PropID, compositeID, 0u, 0u);']
+        [
+      // Selection buffer layout: [propID, compositeID, attributeID, unused]
+      // propID and compositeID are already encoded with a +1 offset by the
+      // mappers (0 = no data). attributeID is offset here (+1u) so that
+      // a buffer value of 0 unambiguously means "no attribute data written",
+      // since attributeID === 0 is a valid attribute index. The reader
+      // (HardwareSelector) subtracts 1 when decoding.
+          'output.outColor = vec4<u32>(mapperUBO.PropID, compositeID, attributeID + 1u, 0u);',
+        ]
       ).result;
       fDesc.setCode(code);
     });
diff --git a/Sources/Rendering/WebGPU/HardwareSelector/index.js b/Sources/Rendering/WebGPU/HardwareSelector/index.js
@@ -46,14 +46,15 @@ function getPixelInformationWithData(
       0
     );
 
-    if (actorid <= 0) {
+    if (actorid <= 0 || actorid - 1 >= (buffdata.props?.length ?? 0)) {
       // the pixel did not hit any actor.
       return null;
     }
 
     const info = {};
 
-    info.propID = actorid;
+    info.propID = actorid - 1;
+    info.prop = buffdata.props?.[info.propID];
 
     let compositeID = convert(
       inDisplayPosition[0],
@@ -64,7 +65,21 @@ function getPixelInformationWithData(
     if (compositeID < 0 || compositeID > 0xffffff) {
       compositeID = 0;
     }
-    info.compositeID = compositeID;
+    info.compositeID = compositeID - 1;
+    // attributeID is stored with a +1 offset in the selection buffer so that
+    // 0 means "no data" while 0 remains a valid decoded attribute index.
+    // A buffer value < 1 means no attribute was written, fall back to compositeID.
+    // After fallback, subtract 1 to recover the original 0 based index.
+    let attributeID = convert(
+      inDisplayPosition[0],
+      inDisplayPosition[1],
+      buffdata,
+      2
+    );
+    if (attributeID < 1) {
+      attributeID = compositeID;
+    }
+    info.attributeID = attributeID - 1;
 
     if (buffdata.captureZValues) {
       const offset =
@@ -179,9 +194,9 @@ function convertSelection(fieldassociation, dataMap, buffdata) {
         vtkErrorMacro('Unknown field association');
     }
     child.getProperties().propID = value.info.propID;
-    const wprop = buffdata.webGPURenderer.getPropFromID(value.info.propID);
-    child.getProperties().prop = wprop.getRenderable();
+    child.getProperties().prop = value.info.prop;
     child.getProperties().compositeID = value.info.compositeID;
+    child.getProperties().attributeID = value.info.attributeID;
     child.getProperties().pixelCount = value.pixelCount;
     if (buffdata.captureZValues) {
       child.getProperties().displayPosition = [
@@ -260,6 +275,17 @@ function vtkWebGPUHardwareSelector(publicAPI, model) {
   // Set our className
   model.classHierarchy.push('vtkWebGPUHardwareSelector');
 
+  publicAPI.getPropIDForSelection = (runtimePropID, prop = null) => {
+    if (model._selectionPropMap.has(runtimePropID)) {
+      return model._selectionPropMap.get(runtimePropID);
+    }
+
+    const selectionPropID = model._selectionProps.length;
+    model._selectionPropMap.set(runtimePropID, selectionPropID);
+    model._selectionProps.push(prop);
+    return selectionPropID;
+  };
+
   //----------------------------------------------------------------------------
   publicAPI.endSelection = () => {
     model.WebGPURenderer.setSelector(null);
@@ -296,12 +322,19 @@ function vtkWebGPUHardwareSelector(publicAPI, model) {
     // Initialize renderer for selection.
     // change the renderer's background to black, which will indicate a miss
     const originalSuppress = webGPURenderer.getSuppressClear();
+    const originalSelector = webGPURenderer.getSelector();
+    model._selectionPropMap.clear();
+    model._selectionProps = [];
     webGPURenderer.setSuppressClear(true);
-
-    model._selectionPass.traverse(model._WebGPURenderWindow, webGPURenderer);
-
-    // restore original background
-    webGPURenderer.setSuppressClear(originalSuppress);
+    webGPURenderer.setSelector(publicAPI);
+
+    try {
+      model._selectionPass.traverse(model._WebGPURenderWindow, webGPURenderer);
+    } finally {
+      // restore original renderer state
+      webGPURenderer.setSelector(originalSelector);
+      webGPURenderer.setSuppressClear(originalSuppress);
+    }
 
     const device = model._WebGPURenderWindow.getDevice();
     const texture = model._selectionPass.getColorTexture();
@@ -315,6 +348,7 @@ function vtkWebGPUHardwareSelector(publicAPI, model) {
       area: [0, 0, texture.getWidth() - 1, texture.getHeight() - 1],
       captureZValues: model.captureZValues,
       fieldAssociation: model.fieldAssociation,
+      props: [...model._selectionProps],
       renderer,
       webGPURenderer,
       webGPURenderWindow: model._WebGPURenderWindow,
@@ -419,6 +453,8 @@ function vtkWebGPUHardwareSelector(publicAPI, model) {
 
 const DEFAULT_VALUES = {
   // WebGPURenderWindow: null,
+  _selectionPropMap: null,
+  _selectionProps: null,
 };
 
 // ----------------------------------------------------------------------------
@@ -430,6 +466,8 @@ export function extend(publicAPI, model, initialValues = {}) {
   vtkHardwareSelector.extend(publicAPI, model, initialValues);
 
   model._selectionPass = vtkWebGPUHardwareSelectionPass.newInstance();
+  model._selectionPropMap = new Map();
+  model._selectionProps = [];
 
   macro.setGet(publicAPI, model, ['_WebGPURenderWindow']);
   macro.moveToProtected(publicAPI, model, ['WebGPURenderWindow']);
