fix: "SubsurfaceViewer: pickingRadius not working with overlapping la…

typescript/packages/subsurface-viewer/src/components/Map.tsx

@@ -463,7 +463,7 @@ const Map: React.FC<MapProps> = ({
     scale = { visible: true, cssStyle: { top: 10, left: 10 } },
     coords,
     showReadout = coords?.visible ?? true,
-    pickingDepth = coords?.pickDepth ?? 2,
+    pickingDepth = coords?.pickDepth ?? 5,
     coordinateUnit = "m",
     colorTables = defaultColorTables,
     setEditedData,

typescript/packages/subsurface-viewer/src/layers/map/map.fs.glsl.ts

@@ -15,7 +15,6 @@ uniform sampler2D colormap;
 
 out vec4 fragColor;
 
-
 void main(void) { 
    geometry.uv = vTexCoord;
 
@@ -25,12 +24,6 @@ void main(void) {
       normal = normalize(cross(dFdx(position_commonspace.xyz), dFdy(position_commonspace.xyz)));
    }
 
-   //Picking pass.
-   if (picking.isActive > 0.5 && !(picking.isAttribute > 0.5)) {
-      fragColor = encodeIndexToRGB(vertexIndex);
-      return;
-   }
-
    vec4 color = vec4(1.0, 1.0, 1.0, 1.0);
    float propertyValue = property;
 
@@ -78,5 +71,7 @@ void main(void) {
 
    fragColor = vec4(lightColor, vColor.a);
    DECKGL_FILTER_COLOR(fragColor, geometry);
+
+   fragColor = picking_filterPickingColor(fragColor);
 }
 `;

typescript/packages/subsurface-viewer/src/layers/map/map.vs.glsl.ts

@@ -7,6 +7,7 @@ in vec3 positions;
 in float properties;
 in vec3 normals;
 in vec3 colors;
+in vec3 pickingColors;
 
 // Outputs to fragment shader
 out vec2 vTexCoord;
@@ -19,7 +20,7 @@ out float property;
 flat out int vertexIndex;
 
 void main(void) {
-   geometry.pickingColor = vec3(1.0, 1.0, 0.0);
+   geometry.pickingColor = pickingColors;
    vertexIndex = gl_VertexID;
 
    vec3 position = positions;

typescript/packages/subsurface-viewer/src/layers/map/privateMapLayer.ts

@@ -4,18 +4,17 @@ import type {
     PickingInfo,
     UpdateParameters,
     LayerContext,
+    Attribute,
 } from "@deck.gl/core";
 import { COORDINATE_SYSTEM, Layer, project32, picking } from "@deck.gl/core";
-
 import type { Device, Texture, UniformValue } from "@luma.gl/core";
 import type { ShaderModule } from "@luma.gl/shadertools";
 import { lighting } from "@luma.gl/shadertools";
 import { Model, Geometry } from "@luma.gl/engine";
-
 import { phongMaterial } from "../shader_modules/phong-lighting/phong-material";
 import { precisionForTests } from "../shader_modules/test-precision/precisionForTests";
 import { decodeIndexFromRGB, utilities } from "../shader_modules";
-
+import { encodeIndexToRGB } from "../shader_modules/utilities";
 import type {
     DeckGLLayerContext,
     ExtendedLayerProps,
@@ -27,9 +26,7 @@ import {
     type ColormapFunctionType,
     getImageData,
 } from "../utils/colormapTools";
-
 import type { RGBColor } from "../../utils";
-
 import fs from "./map.fs.glsl";
 import vs from "./map.vs.glsl";
 import fsLineShader from "./line.fs.glsl";
@@ -57,7 +54,6 @@ export interface PrivateMapLayerProps extends ExtendedLayerProps {
 }
 
 const defaultProps = {
-    data: ["dummy"],
     contours: [-1, -1],
     isContoursDepth: true,
     gridLines: false,
@@ -90,13 +86,37 @@ export default class PrivateMapLayer extends Layer<PrivateMapLayerProps> {
         });
     }
 
+    calculatePickingColors(attribute: Attribute) {
+        const n = this.props.positions.length / 3;
+        const arr = new Uint8Array(n * 3);
+
+        for (let i = 0; i < arr.length / 3; i++) {
+            const pickingColor = encodeIndexToRGB(i);
+            arr[i * 3 + 0] = pickingColor[0];
+            arr[i * 3 + 1] = pickingColor[1];
+            arr[i * 3 + 2] = pickingColor[2];
+        }
+        attribute.value = arr;
+        return;
+    }
+
     initializeState(context: DeckGLLayerContext): void {
         const gl = context.device;
         const [mesh_model, mesh_lines_model] = this._getModels(gl);
         this.setState({
             models: [mesh_model, mesh_lines_model],
             isLoaded: false,
         });
+
+        this.getAttributeManager()!.remove(["instancePickingColors"]);
+
+        this.getAttributeManager()!.add({
+            pickingColors: {
+                size: 3,
+                type: "uint8",
+                update: this.calculatePickingColors,
+            },
+        });
     }
 
     shouldUpdateState({
@@ -285,10 +305,38 @@ export default class PrivateMapLayer extends Layer<PrivateMapLayerProps> {
         }
     }
 
-    decodePickingColor(): number {
+    nullPickingColor() {
+        return [0, 0, 0];
+    }
+
+    decodePickingColor(/*color: Uint8Array*/): number {
         return 0;
     }
 
+    // Disable picking by setting all picking colors to null color.
+    // Used in multipicking to prevent recurring picks of the same layer.
+    _disablePickingIndex(/*objectIndex: number*/) {
+        const { pickingColors, instancePickingColors } =
+            this.getAttributeManager()!.attributes;
+        const colors = pickingColors || instancePickingColors;
+        if (!colors) {
+            return;
+        }
+
+        const pickingColor = this.nullPickingColor();
+
+        const n = this.props.positions.length / 3;
+        const arr = new Uint8Array(n * 3);
+
+        for (let i = 0; i < arr.length / 3; i++) {
+            arr[i * 3 + 0] = pickingColor[0];
+            arr[i * 3 + 1] = pickingColor[1];
+            arr[i * 3 + 2] = pickingColor[2];
+        }
+
+        colors.buffer.write(arr, 0);
+    }
+
     getPickingInfo({ info }: { info: PickingInfo }): LayerPickInfo {
         if (!info.color) {
             return info;
@@ -297,7 +345,6 @@ export default class PrivateMapLayer extends Layer<PrivateMapLayerProps> {
         const layer_properties: PropertyDataType[] = [];
 
         // Note these colors are in the  0-255 range.
-
         const [r, g, b] = info.color;
         const vertexIndex = decodeIndexFromRGB([r, g, b]);
 
@@ -316,8 +363,11 @@ export default class PrivateMapLayer extends Layer<PrivateMapLayerProps> {
 
         const properties = this.props.vertexProperties;
         const property = properties[vertexIndex];
-        layer_properties.push(createPropertyData("Property", property));
+        if (Number.isNaN(property)) {
+            return info;
+        }
 
+        layer_properties.push(createPropertyData("Property", property));
         return {
             ...info,
             properties: layer_properties,