feat: Well Markers Layer (#1818)

The layer can display markers of three flat shapes: circle, square and
triangle.
For every marker the following attributes can be defined:
- center position in 3D.
- azimuth,  rotation angle relative to north direction.
- inclination, rotation angle relative to vertical direction.
- size.
- fill color with transparency.
- outline color.

---------

Co-authored-by: leonid.polukhin <leonid.polukhin@aspentech.com>

typescript/packages/subsurface-viewer/src/layers/index.ts

@@ -7,6 +7,7 @@ export { default as Map3DLayer } from "./terrain/map3DLayer";
 export { default as DrawingLayer } from "./drawing/drawingLayer";
 export { default as Hillshading2DLayer } from "./hillshading2d/hillshading2dLayer";
 export { default as WellsLayer } from "./wells/wellsLayer";
+export { default as WellMarkersLayer } from "./well_markers/wellMarkersLayer";
 export { default as PieChartLayer } from "./piechart/pieChartLayer";
 export { default as FaultPolygonsLayer } from "./fault_polygons/faultPolygonsLayer";
 export { default as AxesLayer } from "./axes/axesLayer";
@@ -31,5 +32,6 @@ export type { NorthArrow3DLayerProps } from "./northarrow/northArrow3DLayer";
 export type { PieChartLayerProps } from "./piechart/pieChartLayer";
 export type { Map3DLayerProps } from "./terrain/map3DLayer";
 export type { WellsLayerProps } from "./wells/wellsLayer";
+export { default as WellMarkersLayerProps } from "./well_markers/wellMarkersLayer";
 export type { Grid3DLayerProps } from "./grid3d/grid3dLayer";
 export type { BoxSelectionLayerProps } from "./BoxSelectionLayer/boxSelectionLayer";

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

@@ -0,0 +1,13 @@
+export const fsShader = `#version 300 es
+#define SHADER_NAME well-markers-fragment-shader
+
+precision highp float;
+
+in vec4 color;
+
+void main(void) {
+
+   gl_FragColor = vec4(color.rgba * (1.0 / 255.0));
+   DECKGL_FILTER_COLOR(gl_FragColor, geometry);
+}
+`;

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

@@ -0,0 +1,55 @@
+export const vsShader = `#version 300 es
+#define SHADER_NAME well-markers-vertex-shader
+precision highp float;
+
+attribute vec3 positions;
+attribute vec3 instancePositions;
+attribute float instanceSizes;
+attribute float instanceAzimuths;
+attribute float instanceInclinations;
+attribute vec4 instanceColors;
+attribute vec4 instanceOutlineColors;
+
+attribute vec3 instancePickingColors;
+
+uniform int sizeUnits;
+uniform bool ZIncreasingDownwards;
+uniform bool useOutlineColor;
+
+
+out vec4 position_commonspace;
+out vec4 color;
+
+void main(void) {   
+
+   vec3 position = instancePositions;
+   position.z *= (ZIncreasingDownwards? -1.0 : 1.0);
+
+   geometry.worldPosition = position;
+   geometry.pickingColor  = instancePickingColors;
+
+   color = useOutlineColor ? instanceOutlineColors : instanceColors;
+
+   float sizeInPixels = project_size_to_pixel(instanceSizes, sizeUnits);
+   float projectedSize = project_pixel_size(sizeInPixels);
+
+   float sinA = sin (PI / 180.0 * instanceAzimuths);
+   float cosA = cos (PI / 180.0 * instanceAzimuths);
+
+   float sinI = sin (PI / 180.0 * instanceInclinations);
+   float cosI = cos (PI / 180.0 * instanceInclinations);
+
+   mat3 azimuthMatrix = mat3(vec3(cosA, sinA, 0.0), vec3(-sinA, cosA, 0.0), vec3(0.0, 0.0, 1.0));
+   mat3 inclMatrix    = mat3(vec3(1.0, 0.0, 0.0), vec3(0.0, cosI, sinI), vec3(0.0, -sinI, cosI));
+   mat3 sizeMatrix    = mat3(vec3(projectedSize, 0.0, 0.0), vec3(0.0, projectedSize, 0.0), vec3(0.0, 0.0, 1.0));
+   vec3 rotatedPos    = azimuthMatrix * inclMatrix * sizeMatrix *positions;
+
+   position_commonspace = vec4(project_position(rotatedPos + position), 0.0);
+   gl_Position = project_common_position_to_clipspace(position_commonspace);
+
+   vec4 dummyColor = vec4(0.0);
+
+   DECKGL_FILTER_GL_POSITION(gl_Position, geometry);
+   DECKGL_FILTER_COLOR(dummyColor, geometry);
+}
+`;

typescript/packages/subsurface-viewer/src/layers/well_markers/wellMarkersLayer.stories.tsx

@@ -0,0 +1,107 @@
+import React from "react";
+import { create, all } from "mathjs";
+
+import type { StoryFn, Meta } from "@storybook/react";
+import SubsurfaceViewer from "../../SubsurfaceViewer";
+
+import type { WellMarkerDataT } from "./wellMarkersLayer";
+
+export default {
+    component: SubsurfaceViewer,
+    title: "SubsurfaceViewer/Well Markers Layer",
+} as Meta<typeof SubsurfaceViewer>;
+
+const Template: StoryFn<typeof SubsurfaceViewer> = (args) => (
+    <SubsurfaceViewer {...args} />
+);
+
+const parameters = {
+    docs: {
+        description: {
+            story: "Well Markers Layer.",
+        },
+        inlineStories: false,
+        iframeHeight: 500,
+    },
+};
+
+const math = create(all, { randomSeed: "1984" });
+
+type TRandomNumberFunc = (max: number) => number;
+
+const randomFunc = ((): TRandomNumberFunc => {
+    if (math?.random) {
+        return (max: number) => {
+            const val = math.random?.(max);
+            return val ? val : 0.0;
+        };
+    }
+    return (max: number) => Math.random() * max;
+})();
+
+const generateMarkers = (): WellMarkerDataT[] => {
+    const N = 40;
+    const M = 40;
+
+    const dN = (2 * Math.PI) / N;
+    const dM = (5 * Math.PI) / M;
+
+    const res: WellMarkerDataT[] = [];
+
+    for (let i = 0; i < N; ++i) {
+        for (let j = 0; j < M; ++j) {
+            const x = -N / 2 + i;
+            const y = -M / 2 + j;
+            const az = dN * i;
+            const incl = dM * j;
+
+            const z = 5 * (Math.sin(incl) * Math.cos(az));
+            res.push({
+                position: [x, y, z],
+                azimuth: (az * 180.0) / Math.PI,
+                inclination: (Math.asin(Math.cos(incl)) * 180.0) / Math.PI,
+                color: [randomFunc(255), randomFunc(255), randomFunc(255), 100],
+                outlineColor: [0, 0, 100, 255],
+                size: 0.02 * Math.sqrt(x * x + y * y),
+            });
+        }
+    }
+    return res;
+};
+
+export const WellMarkers = Template.bind({});
+
+WellMarkers.args = {
+    bounds: [-25, -25, 50, 30],
+    views: {
+        layout: [1, 1] as [number, number],
+        viewports: [
+            {
+                id: "view_1",
+                show3D: true,
+            },
+        ],
+    },
+    id: "well-markers-tttt",
+    layers: [
+        {
+            "@@type": "AxesLayer",
+            id: "well-markers-axes",
+            bounds: [-25, -25, -25, 25, 25, 25],
+            ZIncreasingDownwards: false,
+        },
+        {
+            "@@type": "NorthArrow3DLayer",
+            id: "north-arrow-layer",
+        },
+        {
+            "@@type": "WellMarkersLayer",
+            id: "well-markers-1",
+            pickable: true,
+            shape: "circle",
+            sizeUnits: "common",
+            data: generateMarkers(),
+        },
+    ],
+};
+WellMarkers.parameters = parameters;