North arrow3 d get model (equinor#939)

* Works but jumps. Composite layer

* Before cleanup

* Cleaned up.

* Typecheck & lint.

* Removed file that should not be there.

react/src/demo/example-data/deckgl-map.json

@@ -135,6 +135,10 @@
         "@@type": "PieChartLayer",
         "data": "https://raw.githubusercontent.com/equinor/webviz-subsurface-components/master/react/src/demo/example-data/piechart.json"
       },
+      {
+        "@@type": "NorthArrow3DLayer",
+        "visible": true
+      },
       {
         "@@type": "DrawingLayer"
       }

react/src/lib/components/DeckGLMap/components/Map.tsx

@@ -615,6 +615,7 @@ function getViews(views: ViewsType | undefined): Record<string, unknown>[] {
     const deckgl_views = [];
     // if props for multiple viewport are not proper, return 2d view
     const far = 9999.9;
+    const near = 0.0001;
     if (!views || !views.viewports || !views.layout) {
         deckgl_views.push({
             "@@type": "OrthographicView",
@@ -626,6 +627,7 @@ function getViews(views: ViewsType | undefined): Record<string, unknown>[] {
             height: "100%",
             flipY: false,
             far,
+            near,
         });
     } else {
         let yPos = 0;
@@ -660,6 +662,7 @@ function getViews(views: ViewsType | undefined): Record<string, unknown>[] {
                     height: 99.5 / nY + "%",
                     flipY: false,
                     far,
+                    near,
                 });
                 xPos = xPos + 99.5 / nX;
             }

react/src/lib/components/DeckGLMap/layers/index.ts

@@ -9,3 +9,4 @@ export { default as GridLayer } from "./grid/gridLayer";
 export { default as FaultPolygonsLayer } from "./fault_polygons/faultPolygonsLayer";
 export { default as AxesLayer } from "./axes/axesLayer";
 export { default as SelectableGeoJsonLayer } from "./selectable_geojson/selectableGeoJsonLayer";
+export { default as NorthArrow3DLayer } from "./northarrow/northArrow3DLayer";

react/src/lib/components/DeckGLMap/layers/layersDefaultProps.ts

@@ -130,6 +130,12 @@ export const layersDefaultProps: Record<string, unknown> = {
         id: "axes-layer",
         visible: true,
     },
+    NorthArrow3DLayer: {
+        "@@type": "NorthArrow3DLayer",
+        name: "NorthArrow3D",
+        id: "north-arrow-layer",
+        visible: true,
+    },
     DrawingLayer: {
         "@@type": "DrawingLayer",
         name: "Drawing",

react/src/lib/components/DeckGLMap/layers/northarrow/axes-fragment.glsl.js

@@ -0,0 +1,12 @@
+export default `\
+#version 300 es
+#define SHADER_NAME graph-layer-fragment-shader
+
+precision highp float;
+
+out vec4 fragColor;
+
+void main(void) {
+  fragColor = vec4(0.0, 0.0, 0.0,   1.0);
+}
+`;

react/src/lib/components/DeckGLMap/layers/northarrow/grid-vertex.glsl.js

@@ -0,0 +1,13 @@
+export default `\
+#version 300 es
+#define SHADER_NAME graph-layer-axis-vertex-shader
+
+precision highp float;
+
+in  vec3 positions;
+
+void main(void) {
+   vec3 position_commonspace = project_position(positions);
+   gl_Position = project_common_position_to_clipspace(vec4(position_commonspace, 0.0));
+}
+`;

react/src/lib/components/DeckGLMap/layers/northarrow/northArrow3DLayer.ts

@@ -0,0 +1,172 @@
+import { Layer } from "@deck.gl/core";
+import GL from "@luma.gl/constants";
+import { Model, Geometry } from "@luma.gl/core";
+import { LayerProps } from "@deck.gl/core/lib/layer";
+import fragmentShader from "./axes-fragment.glsl";
+import gridVertex from "./grid-vertex.glsl";
+import { project } from "deck.gl";
+import { DeckGLLayerContext } from "../../components/Map";
+import { UpdateStateInfo } from "@deck.gl/core/lib/layer";
+import { Vector3 } from "@math.gl/core";
+
+export type NorthArrow3DLayerProps<D> = LayerProps<D>;
+
+export default class NorthArrow3DLayer extends Layer<
+    unknown,
+    NorthArrow3DLayerProps<unknown>
+> {
+    initializeState(context: DeckGLLayerContext): void {
+        const { gl } = context;
+        this.setState(this._getModels(gl));
+    }
+
+    shouldUpdateState(): boolean | string | null {
+        return true;
+    }
+
+    updateState({
+        context,
+    }: UpdateStateInfo<NorthArrow3DLayerProps<unknown>>): void {
+        if (context.gl) {
+            this.setState(this._getModels(context.gl));
+        }
+    }
+
+    // Signature from the base class, eslint doesn't like the any type.
+    // eslint-disable-next-line
+    draw({ moduleParameters, uniforms, context }: any): void {
+        const { gl } = context;
+        gl.disable(gl.DEPTH_TEST);
+        super.draw({ moduleParameters, uniforms, context });
+        gl.enable(gl.DEPTH_TEST);
+    }
+
+    //eslint-disable-next-line
+    _getModels(gl: any) {
+        const model_lines = GetArrowLines();
+
+        const cam_pos = new Vector3(this.context.viewport.getCameraPosition());
+        const center = new Vector3(this.unproject([100, 100]));
+
+        const dir = new Vector3([
+            center[0] - cam_pos[0],
+            center[1] - cam_pos[1],
+            center[2] - cam_pos[2],
+        ]);
+        dir.normalize();
+        dir.scale(1000.0);
+
+        // pos: World coordinate for north arrow. Will be fixed realative to camera.
+        const pos = new Vector3([
+            cam_pos[0] + dir[0],
+            cam_pos[1] + dir[1],
+            cam_pos[2] + dir[2],
+        ]);
+
+        const lines: number[] = [];
+
+        const scale = 10;
+        for (let i = 0; i < model_lines.length / 3; i = i + 1) {
+            const x = model_lines[i * 3 + 0] * scale + pos[0];
+            const y = model_lines[i * 3 + 1] * scale + pos[1];
+            const z = model_lines[i * 3 + 2] * scale + pos[2];
+            lines.push(x, y, z);
+        }
+
+        const grids = new Model(gl, {
+            id: `${this.props.id}-grids`,
+            vs: gridVertex,
+            fs: fragmentShader,
+            geometry: new Geometry({
+                drawMode: GL.LINES,
+                attributes: {
+                    positions: new Float32Array(lines),
+                },
+                vertexCount: lines.length / 3,
+            }),
+
+            modules: [project],
+            isInstanced: false, // This only works when set to false.
+        });
+
+        return {
+            model: grids,
+            models: [grids].filter(Boolean),
+            modelsByName: { grids },
+        };
+    }
+}
+
+//-- Local functions. --------------------------------------
+
+function GetArrowLines(): number[] {
+    const lines: number[][] = [];
+
+    let z = 0.5;
+    lines.push([-1, -2, z]);
+    lines.push([-1, 2, z]);
+
+    lines.push([-1, 2, z]);
+    lines.push([-1.5, 2, z]);
+
+    lines.push([-1.5, 2, z]);
+    lines.push([0, 4, z]);
+
+    lines.push([0, 4, z]);
+    lines.push([1.5, 2, z]);
+
+    lines.push([1.5, 2, z]);
+    lines.push([1, 2, z]);
+
+    lines.push([1, 2, z]);
+    lines.push([1, -2, z]);
+
+    lines.push([1, -2, z]);
+    lines.push([-1, -2, z]);
+
+    z = -0.5;
+    lines.push([-1, -2, z]);
+    lines.push([-1, 2, z]);
+
+    lines.push([-1, 2, z]);
+    lines.push([-1.5, 2, z]);
+
+    lines.push([-1.5, 2, z]);
+    lines.push([0, 4, z]);
+
+    lines.push([0, 4, z]);
+    lines.push([1.5, 2, z]);
+
+    lines.push([1.5, 2, z]);
+    lines.push([1, 2, z]);
+
+    lines.push([1, 2, z]);
+    lines.push([1, -2, z]);
+
+    lines.push([1, -2, z]);
+    lines.push([-1, -2, z]);
+
+    // stolper
+    lines.push([-1, -2, -0.5]);
+    lines.push([-1, -2, 0.5]);
+
+    lines.push([-1, 2, -0.5]);
+    lines.push([-1, 2, 0.5]);
+
+    lines.push([-1.5, 2, -0.5]);
+    lines.push([-1.5, 2, 0.5]);
+
+    lines.push([0, 4, -0.5]);
+    lines.push([0, 4, 0.5]);
+
+    lines.push([1.5, 2, -0.5]);
+    lines.push([1.5, 2, 0.5]);
+
+    lines.push([1, 2, -0.5]);
+    lines.push([1, 2, 0.5]);
+
+    lines.push([1, -2, -0.5]);
+    lines.push([1, -2, 0.5]);
+
+    return lines.flat();
+}

react/src/lib/components/DeckGLMap/redux/types.ts

@@ -90,6 +90,7 @@ export const LayerIcons = {
     FaultPolygonsLayer: "fault",
     DrawingLayer: "brush",
     AxesLayer: "brush",
+    NorthArrow3D: "brush",
 };
 
 export type LayerType = keyof typeof LayerIcons;

react/src/lib/components/DeckGLMap/storybook/DeckGLMap.stories.jsx

@@ -392,12 +392,18 @@ MapClampColor.parameters = {
 const axes = {
     "@@type": "AxesLayer",
     id: "axes-layer",
+    //bounds: [-1000, -1000, -1000, 1000, 1000, 1000],
     bounds: [432205, 6475078, -3500, 437720, 6481113, 0],
 };
+const north_arrow_layer = {
+    "@@type": "NorthArrow3DLayer",
+    id: "north-arrow-layer",
+};
+
 export const Axes = MinimalTemplate.bind({});
 Axes.args = {
     id: "axes",
-    layers: [meshMapLayer, axes],
+    layers: [axes, meshMapLayer, north_arrow_layer],
     bounds: [432150, 6475800, 439400, 6481500],
     views: {
         layout: [1, 1],