wip

Author: rubenthoms

frontend/src/modules/3DViewerNew/LayerFramework/visualization/makeSeismicFenceMeshLayer.ts

@@ -71,6 +71,7 @@ export enum Plane {
 export function makeSeismicFenceMeshLayerFunction(plane: Plane) {
     return function makeSeismicFenceMeshLayer({
         id,
+        name,
         data,
         colorScale,
         settings,
@@ -119,6 +120,7 @@ export function makeSeismicFenceMeshLayerFunction(plane: Plane) {
 
         return new SeismicFenceMeshLayer({
             id,
+            name,
             data: {
                 vertices,
                 indices,
@@ -127,6 +129,7 @@ export function makeSeismicFenceMeshLayerFunction(plane: Plane) {
             startPosition,
             colorMapFunction: makeColorMapFunctionFromColorScale(colorScale, data.value_min, data.value_max, false),
             boundingBox,
+            zIncreaseDownwards: true,
         });
     };
 }

frontend/src/modules/_shared/customDeckGlLayers/ExtendedSimpleMeshLayer/ExtendedSimpleMeshLayer.ts

@@ -0,0 +1,43 @@
+import { SimpleMeshLayer } from "@deck.gl/mesh-layers";
+
+export class ExtendedSimpleMeshLayer extends SimpleMeshLayer {
+    getShaders() {
+        return {
+            ...super.getShaders(),
+            inject: {
+                "vs:#decl": `
+    flat out int vertexIndex;`,
+                "vs:#main-end": `
+    vertexIndex = gl_VertexID;`,
+                "fs:#decl": `
+    flat in int vertexIndex;
+    
+    vec4 encodeVertexIndexToRGB (int vertexIndex) {
+        float r = 0.0;
+        float g = 0.0;
+        float b = 0.0;
+    
+        if (vertexIndex >= (256 * 256) - 1) {
+        r = floor(float(vertexIndex) / (256.0 * 256.0));
+        vertexIndex -= int(r * (256.0 * 256.0));
+        }
+    
+        if (vertexIndex >= 256 - 1) {
+        g = floor(float(vertexIndex) / 256.0);
+        vertexIndex -= int(g * 256.0);
+        }
+    
+        b = float(vertexIndex);
+    
+        return vec4(r / 255.0, g / 255.0, b / 255.0, 1.0);   
+    }
+    `,
+                "fs:#main-start": `
+    if (picking.isActive > 0.5 && !(picking.isAttribute > 0.5)) {
+        fragColor = encodeVertexIndexToRGB(vertexIndex);
+        return;
+    }`,
+            },
+        };
+    }
+}

frontend/src/modules/_shared/customDeckGlLayers/SeismicFenceMeshLayer.ts

@@ -9,9 +9,14 @@ import {
 import { PathLayer } from "@deck.gl/layers";
 import { Geometry } from "@luma.gl/engine";
 
-import { MeshLayer } from "./MeshLayer/MeshLayer";
+import { ExtendedSimpleMeshLayer } from "./ExtendedSimpleMeshLayer/ExtendedSimpleMeshLayer";
+
+export type SeismicFenceMeshLayerPickingInfo = {
+    properties?: { name: string; value: number }[];
+} & PickingInfo;
 
 export type SeismicFenceMeshLayerProps = {
+    name?: string;
     startPosition: [number, number, number];
     data: {
         vertices: Float32Array;
@@ -21,10 +26,7 @@ export type SeismicFenceMeshLayerProps = {
     boundingBox: number[][]; // [minX, minY, minZ, maxX, maxY, maxZ]
     colorMapFunction: (value: number) => [number, number, number];
     hoverable?: boolean;
-};
-
-export type SeismicFenceMeshLayerPickingInfo = PickingInfo & {
-    propertyValue: number;
+    zIncreaseDownwards?: boolean;
 };
 
 export class SeismicFenceMeshLayer extends CompositeLayer<SeismicFenceMeshLayerProps> {
@@ -70,9 +72,33 @@ export class SeismicFenceMeshLayer extends CompositeLayer<SeismicFenceMeshLayerP
         });
     }
 
-    getPickingInfo({ info }: GetPickingInfoParams): PickingInfo {
-        console.debug(info.color);
-        return info;
+    getPickingInfo({ info }: GetPickingInfoParams): SeismicFenceMeshLayerPickingInfo {
+        const { data, zIncreaseDownwards } = this.props;
+        if (!info.color) {
+            return info;
+        }
+
+        const r = info.color[0];
+        const g = info.color[1];
+        const b = info.color[2];
+
+        const vertexIndex = r * 256 * 256 + g * 256 + b;
+        const property = this.props.data.properties[vertexIndex];
+
+        if (property === undefined) {
+            return info;
+        }
+
+        const properties: { name: string; value: number }[] = [];
+        properties.push({ name: "Property", value: property });
+        if (info.coordinate?.length === 3) {
+            properties.push({ name: "Depth", value: (zIncreaseDownwards ? -1 : 1) * info.coordinate[2] });
+        }
+
+        return {
+            ...info,
+            properties,
+        };
     }
 
     onHover(pickingInfo: PickingInfo): boolean {
@@ -92,7 +118,7 @@ export class SeismicFenceMeshLayer extends CompositeLayer<SeismicFenceMeshLayerP
         const { geometry, isHovered } = this.state;
 
         const layers: Layer<any>[] = [
-            new MeshLayer({
+            new ExtendedSimpleMeshLayer({
                 id: "seismic-fence-mesh-layer",
                 data: [0],
                 mesh: geometry,