fix: irrelevant X, Y, Z readout for map layer (#1731)

- fix incorrect X, Y and Z coordinates returned by the mouse event for the map layer #1654 
- performance: handle ZIncreasingDownwards by the shader for map layer #1724 

---------

Co-authored-by: t0oF-azpn <93762994+t0oF-azpn@users.noreply.github.com>

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

@@ -14,9 +14,7 @@ in vec3 normals_commonspace;
 in vec4 position_commonspace;
 in vec4 vColor;
 
-flat in int vertex_indexs_;
-
-out vec4 fragColor;
+flat in int vertexIndex;
 
 in vec3 worldPos;
 in float property;
@@ -48,27 +46,8 @@ void main(void) {
    }
 
    //Picking pass.
-   if (picking_uActive) {
-      // Express triangle index in 255 system.
-      float r = 0.0;
-      float g = 0.0;
-      float b = 0.0;
-  
-      int idx = vertex_indexs_;
-  
-      if (idx >= (256 * 256) - 1) {
-         r = floor(float(idx) / (256.0 * 256.0));
-         idx -= int(r * (256.0 * 256.0));
-      }
-  
-      if (idx >= 256 - 1) {
-         g = floor(float(idx) / 256.0);
-         idx -= int(g * 256.0);
-      }
-  
-      b = float(idx);
-  
-      fragColor = vec4(r / 255.0, g / 255.0, b / 255.0,  1.0);
+   if (picking_uActive && !picking_uAttribute) {
+      gl_FragColor = encodeVertexIndexToRGB(vertexIndex);
       return;
    }
 
@@ -116,9 +95,9 @@ void main(void) {
 
    // Use normal lighting. This has no effect if "material" property is not set.
    vec3 lightColor = lighting_getLightColor(color.rgb, cameraPosition, position_commonspace.xyz, normal);
-   fragColor = vec4(lightColor, 1.0);
+   gl_FragColor = vec4(lightColor, 1.0);
 
-   DECKGL_FILTER_COLOR(fragColor, geometry);
+   DECKGL_FILTER_COLOR(gl_FragColor, geometry);
 }
 `;
 

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

@@ -345,7 +345,6 @@ export default class MapLayer extends CompositeLayer<MapLayerProps> {
                 normals,
                 triangleIndices,
                 vertexProperties,
-                vertexIndices,
                 lineIndices,
                 meshZValueRange,
                 propertyValueRange,
@@ -357,7 +356,6 @@ export default class MapLayer extends CompositeLayer<MapLayerProps> {
                 normals,
                 triangleIndices,
                 vertexProperties,
-                vertexIndices,
                 lineIndices,
                 propertyValueRange,
             });
@@ -484,7 +482,6 @@ export default class MapLayer extends CompositeLayer<MapLayerProps> {
                 normals: this.state["normals"],
                 triangleIndices: this.state["triangleIndices"],
                 vertexProperties: this.state["vertexProperties"],
-                vertexIndices: this.state["vertexIndices"],
                 lineIndices: this.state["lineIndices"],
                 pickable: this.props.pickable,
                 modelMatrix: rotatingModelMatrix,
@@ -499,6 +496,7 @@ export default class MapLayer extends CompositeLayer<MapLayerProps> {
                 material: this.props.material,
                 smoothShading: this.props.smoothShading,
                 depthTest: this.props.depthTest,
+                ZIncreasingDownwards: this.props.ZIncreasingDownwards,
             })
         );
         return [layer];

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

@@ -5,7 +5,7 @@ import {
     picking,
     project,
 } from "@deck.gl/core/typed";
-import { localPhongLighting } from "../shader_modules";
+import { localPhongLighting, utilities } from "../shader_modules";
 import type { LayerPickInfo, PropertyDataType } from "../utils/layerTools";
 import { createPropertyData } from "../utils/layerTools";
 import { Model, Geometry } from "@luma.gl/engine";
@@ -57,6 +57,7 @@ export interface privateMapLayerProps extends ExtendedLayerProps {
     propertyValueRange: [number, number];
     smoothShading: boolean;
     depthTest: boolean;
+    ZIncreasingDownwards: boolean;
 }
 
 const defaultProps = {
@@ -69,6 +70,7 @@ const defaultProps = {
     propertyValueRange: [0.0, 1.0],
     meshValueRange: [0.0, 1.0],
     depthTest: true,
+    ZIncreasingDownwards: true,
 };
 
 // This is a private layer used only by the composite Map3DLayer
@@ -122,11 +124,10 @@ export default class privateMapLayer extends Layer<privateMapLayerProps> {
                         normals: { value: this.props.normals, size: 3 },
                     }),
                     properties: { value: this.props.vertexProperties, size: 1 },
-                    vertex_indexs: { value: this.props.vertexIndices, size: 1 },
                 },
                 indices: { value: this.props.triangleIndices, size: 1 },
             }),
-            modules: [project, picking, localPhongLighting],
+            modules: [project, picking, localPhongLighting, utilities],
             isInstanced: false, // This only works when set to false.
         });
 
@@ -261,9 +262,12 @@ export default class privateMapLayer extends Layer<privateMapLayerProps> {
 
         const vertexIndex = 256 * 256 * r + 256 * g + b;
 
-        const vertexs = this.props.positions;
-        const depth = -vertexs[3 * vertexIndex + 2];
-        layer_properties.push(createPropertyData("Depth", depth));
+        if (info.coordinate?.[2]) {
+            const depth = this.props.ZIncreasingDownwards
+                ? -info.coordinate[2]
+                : info.coordinate[2];
+            layer_properties.push(createPropertyData("Depth", depth));
+        }
 
         const properties = this.props.vertexProperties;
         const property = properties[vertexIndex];

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

@@ -183,9 +183,6 @@ export function makeFullMesh(params: Params) {
     const vertexProperties = new Float32Array(
         isCellCenteredProperties ? nCells * 6 : nNodes
     );
-    const vertexIndices = new Int32Array(
-        isCellCenteredProperties ? nCells * 6 : nNodes
-    );
     let nLineIndices = 0;
     if (gridLines) {
         nLineIndices = isCellCenteredProperties
@@ -225,8 +222,6 @@ export function makeFullMesh(params: Params) {
                 }
 
                 vertexProperties[i] = propertyValue;
-                vertexIndices[i] = i;
-
                 i++;
             }
         }
@@ -521,7 +516,6 @@ export function makeFullMesh(params: Params) {
         normals,
         triangleIndices,
         vertexProperties,
-        vertexIndices,
         lineIndices,
         meshZValueRange,
         propertyValueRange,

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

@@ -10,10 +10,6 @@ in float properties;
 in vec3 normals;
 in vec3 colors;
 
-in int vertex_indexs;
-flat out int vertex_indexs_;
-
-
 // Outputs to fragment shader
 out vec2 vTexCoord;
 out vec3 cameraPosition;
@@ -22,23 +18,30 @@ out vec4 position_commonspace;
 out vec4 vColor;
 out vec3 worldPos;
 out float property;
+flat out int vertexIndex;
 
 
 void main(void) {
+   geometry.pickingColor = vec3(1.0, 1.0, 0.0);
+   vertexIndex = gl_VertexID;
+
    cameraPosition = project_uCameraPosition;
 
    worldPos = positions;
 
    normals_commonspace = normals;
 
-   vertex_indexs_ = vertex_indexs;
-
    vColor = vec4(colors.rgb, 1.0);
 
    property = properties;
 
    position_commonspace = vec4(project_position(positions), 0.0);
    gl_Position = project_common_position_to_clipspace(position_commonspace);
+
+   DECKGL_FILTER_GL_POSITION(gl_Position, geometry);
+
+   vec4 color = vec4(0.0);
+   DECKGL_FILTER_COLOR(color, geometry);
 }
 `;