Deck.gl update

 - squashed the commits into one

Author: nilscb

python/package-lock.json

@@ -28,8 +28,8 @@
         "validate": "npm run typecheck && npm run lint"
     },
     "dependencies": {
-        "@deck.gl/core": "^9.0.36",
-        "@deck.gl/react": "^9.0.36",
+        "@deck.gl/core": "^9.1.0",
+        "@deck.gl/react": "^9.1.0",
         "@emerson-eps/color-tables": "^0.4.85",
         "@equinor/eds-core-react": "0.33.0",
         "@equinor/eds-icons": "^0.19.1",

python/package.json

@@ -135,5 +135,8 @@
     },
     "workspaces": [
         "packages/*"
-    ]
+    ],
+    "dependencies": {
+        "@deck.gl-community/editable-layers": "^9.1.0-beta.4"
+    }
 }

typescript/package-lock.json

@@ -33,16 +33,16 @@
     "author": "Equinor <[email protected]>",
     "license": "MPL-2.0",
     "dependencies": {
-        "@deck.gl-community/editable-layers": "9.0.3",
-        "@deck.gl/aggregation-layers": "9.0.40",
-        "@deck.gl/core": "9.0.40",
-        "@deck.gl/extensions": "9.0.40",
-        "@deck.gl/geo-layers": "9.0.40",
-        "@deck.gl/json": "9.0.40",
-        "@deck.gl/layers": "9.0.40",
-        "@deck.gl/mesh-layers": "9.0.40",
-        "@deck.gl/react": "9.0.40",
-        "@emerson-eps/color-tables": "^0.4.92",
+        "@deck.gl-community/editable-layers": "^9.1.0-beta.4",
+        "@deck.gl/aggregation-layers": "^9.1.0",
+        "@deck.gl/core": "^9.1.0",
+        "@deck.gl/extensions": "^9.1.0",
+        "@deck.gl/geo-layers": "^9.1.0",
+        "@deck.gl/json": "^9.1.0",
+        "@deck.gl/layers": "^9.1.0",
+        "@deck.gl/mesh-layers": "^9.1.0",
+        "@deck.gl/react": "^9.1.0",
+        "@emerson-eps/color-tables": "^0.4.85",
         "@equinor/eds-core-react": "^0.36.0",
         "@equinor/eds-icons": "^0.21.0",
         "@turf/simplify": "^7.1.0",
@@ -53,6 +53,7 @@
         "d3": "^7.8.2",
         "d3-color": "^3.1.0",
         "d3-format": "^3.1.0",
+        "deck.gl": "^9.1.8",
         "gl-matrix": "^3.4.3",
         "lodash": "^4.17.21",
         "math.gl": "^4.0.1",

typescript/package.json

@@ -668,19 +668,26 @@ const Map: React.FC<MapProps> = ({
             layers.push(dummy_layer);
         }
 
-        const m = getModelMatrixScale(zScale);
-
         return layers.map((item) => {
             if (item?.constructor.name === NorthArrow3DLayer.name) {
                 return item;
             }
 
+            let m: Matrix4;
+            if ((item as Layer).props.modelMatrix) {
+                m = (item as Layer).props.modelMatrix as Matrix4;
+                m[10] *= zScale;
+            } else {
+                m = getModelMatrixScale(zScale);
+            }
+
             return (item as Layer).clone({
                 // Inject "dispatchBoundingBox" function into layer for it to report back its respective bounding box.
                 // eslint-disable-next-line
                 // @ts-ignore
                 reportBoundingBox: dispatchBoundingBox,
-                // Set "modelLayer" matrix to reflect correct z scaling.
+
+                // Modify "modelMatrix" to reflect correct z scaling.
                 modelMatrix: m,
             });
         });

typescript/packages/subsurface-viewer/package.json

@@ -3,7 +3,6 @@ import { LayerExtension } from "@deck.gl/core";
 import type { ShaderModule } from "@luma.gl/shadertools";
 import type { Layer } from "@deck.gl/core";
 import { project32, project } from "@deck.gl/core";
-import { glsl } from "@luma.gl/shadertools";
 
 const defaultProps = {
     sideViewIds: [],
@@ -13,7 +12,7 @@ type SideProjectionExtensionProps = {
     sideViewIds?: string[];
 };
 
-const shaderFunction = glsl`
+const shaderFunction = /*glsl*/ `
 uniform float side_view;
 
 vec3 transform(vec3 clip_position) {
@@ -37,10 +36,10 @@ const shaderModuleVs: ShaderModule = {
 };
 
 const injectionVs = {
-    "vs:#decl": glsl`
+    "vs:#decl": /*glsl*/ `
   vec3 new_position;
 `,
-    "vs:DECKGL_FILTER_GL_POSITION": glsl`
+    "vs:DECKGL_FILTER_GL_POSITION": /*glsl*/ `
   new_position = transform(position.xyz);
   position.xyz = new_position;
 `,

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

@@ -1,5 +1,5 @@
 const fragmentShader = `#version 300 es
-#define SHADER_NAME graph-layer-fragment-shader
+#define SHADER_NAME axes-fragment-shader
 
 precision highp float;
 

typescript/packages/subsurface-viewer/src/extensions/side-projection-extension.ts

@@ -1,5 +1,5 @@
 const gridVertex = `#version 300 es
-#define SHADER_NAME graph-layer-axis-vertex-shader
+#define SHADER_NAME axes-grid-vertex-shader
 
 precision highp float;
 

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

@@ -1,6 +1,6 @@
 import type {
     Color,
-    LayerContext,
+    LayerProps,
     UpdateParameters,
     Viewport,
 } from "@deck.gl/core";
@@ -14,7 +14,10 @@ import { load } from "@loaders.gl/core";
 import { ImageLoader } from "@loaders.gl/images";
 import type { UniformValue } from "@luma.gl/core";
 import { Geometry, Model } from "@luma.gl/engine";
+import type { ShaderModule } from "@luma.gl/shadertools";
+
 import { vec4 } from "gl-matrix";
+
 import type { ExtendedLayerProps, Position3D } from "../utils/layerTools";
 import fontAtlasPng from "./font-atlas.png";
 import labelFragmentShader from "./label-fragment.glsl";
@@ -153,7 +156,7 @@ export default class Axes2DLayer extends Layer<Axes2DLayerProps> {
         oldProps,
         context,
         changeFlags,
-    }: UpdateParameters<this>): boolean {
+    }: UpdateParameters<Layer<Axes2DLayerProps>>): boolean {
         return (
             super.shouldUpdateState({
                 props,
@@ -514,13 +517,8 @@ export default class Axes2DLayer extends Layer<Axes2DLayerProps> {
         return labels;
     }
 
-    draw({
-        context,
-    }: {
-        moduleParameters: unknown;
-        uniforms: unknown;
-        context: LayerContext;
-    }): void {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    draw(opts: any): void {
         const is_orthographic =
             this.context.viewport.constructor === OrthographicViewport;
         if (
@@ -539,14 +537,14 @@ export default class Axes2DLayer extends Layer<Axes2DLayerProps> {
         }
 
         // background
-        models[n - 1].draw(context.renderPass);
+        models[n - 1].draw(opts.context.renderPass);
 
         // lines
-        models[n - 2].draw(context.renderPass);
+        models[n - 2].draw(opts.context.renderPass);
 
         // labels
         for (let i = 0; i < n - 2; i++) {
-            models[i].draw(context.renderPass);
+            models[i].draw(opts.context.renderPass);
         }
 
         return;
@@ -681,7 +679,6 @@ export default class Axes2DLayer extends Layer<Axes2DLayerProps> {
             id: `${this.props.id}-lines`,
             vs: lineVertexShader,
             fs: lineFragmentShader,
-            uniforms: { uColor: lineColor, uClipZ: -1 },
             geometry: new Geometry({
                 topology: "line-list",
                 attributes: {
@@ -690,9 +687,15 @@ export default class Axes2DLayer extends Layer<Axes2DLayerProps> {
                 vertexCount: tick_and_axes_lines.length / 3,
             }),
 
-            modules: [project32],
+            modules: [project32, linesUniforms],
             isInstanced: false,
         });
+        lineModel.shaderInputs.setProps({
+            lines: {
+                uColor: lineColor,
+                uClipZ: -1,
+            },
+        });
 
         //-- Background model --
         // Color on axes background.
@@ -709,7 +712,7 @@ export default class Axes2DLayer extends Layer<Axes2DLayerProps> {
             id: `${this.props.id}-background`,
             vs: lineVertexShader,
             fs: lineFragmentShader,
-            uniforms: { uColor: bColor, uClipZ: -0.9 },
+            //uniforms: { uColor: bColor, uClipZ: -0.9 },
             geometry: new Geometry({
                 topology: "triangle-list",
                 attributes: {
@@ -718,9 +721,15 @@ export default class Axes2DLayer extends Layer<Axes2DLayerProps> {
                 vertexCount: background_lines.length / 3,
             }),
 
-            modules: [project32],
+            modules: [project32, linesUniforms],
             isInstanced: false,
         });
+        backgroundModel.shaderInputs.setProps({
+            lines: {
+                uColor: bColor,
+                uClipZ: -0.9,
+            },
+        });
 
         //-- Labels model--
         const labelModels: Model[] = [];
@@ -836,10 +845,10 @@ export default class Axes2DLayer extends Layer<Axes2DLayerProps> {
                 id: `${this.props.id}-${label}`,
                 vs: labelVertexShader,
                 fs: labelFragmentShader,
-                uniforms: {
-                    uAxisColor: lineColor,
-                    uBackGroundColor: bColor,
-                },
+                // uniforms: {
+                //     uAxisColor: lineColor,
+                //     uBackGroundColor: bColor,
+                // },
                 bindings: {
                     // @ts-ignore
                     fontTexture,
@@ -856,14 +865,24 @@ export default class Axes2DLayer extends Layer<Axes2DLayerProps> {
                     vertexCount: positions.length / 3,
                 }),
                 bufferLayout: this.getAttributeManager()!.getBufferLayouts(),
-                modules: [project32],
+                modules: [project32, axesUniforms],
                 isInstanced: false,
             });
+            model.shaderInputs.setProps({
+                axes: {
+                    uAxisColor: lineColor,
+                    uBackGroundColor: bColor,
+                },
+            });
 
             labelModels.push(model);
         }
 
-        return { labelModels: labelModels, lineModel: lineModel, backgroundModel: backgroundModel };
+        return {
+            labelModels: labelModels,
+            lineModel: lineModel,
+            backgroundModel: backgroundModel,
+        };
     }
 }
 
@@ -955,3 +974,52 @@ function GetPixelsScale(labelFontSizePt: number): number {
     const px = Math.max(0, (8 / 9) * labelFontSizePt);
     return px;
 }
+
+const linesUniformsBlock = /*glsl*/ `\
+uniform linesUniforms {
+   vec4 uColor;
+   float uClipZ;
+} lines;
+`;
+
+type LinesUniformsType = {
+    uColor: [number, number, number, number];
+    uClipZ: number;
+};
+
+// NOTE: this must exactly the same name than in the uniform block
+const linesUniforms = {
+    name: "lines",
+    vs: linesUniformsBlock,
+    fs: linesUniformsBlock,
+    uniformTypes: {
+        uColor: "vec4<f32>",
+        uClipZ: "f32",
+    },
+} as const satisfies ShaderModule<LayerProps, LinesUniformsType>;
+
+
+
+const axesUniformsBlock = /*glsl*/ `\
+uniform axesUniforms {
+   vec4 uAxisColor;
+   vec4 uBackGroundColor;
+} axes;
+`;
+
+type AxesUniformsType = {
+    uAxisColor: [number, number, number, number],
+    uBackGroundColor: [number, number, number, number],
+};
+
+// NOTE: this must exactly the same name than in the uniform block
+const axesUniforms = {
+    name: "axes",
+    vs: axesUniformsBlock,
+    fs: axesUniformsBlock,
+    uniformTypes: {
+        uAxisColor: "vec4<f32>",
+        uBackGroundColor: "vec4<f32>",
+    },
+} as const satisfies ShaderModule<LayerProps, AxesUniformsType>;
+

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

@@ -1,15 +1,15 @@
 export default `\
 #version 300 es
-#define SHADER_NAME axes2d-layer-fragment-shader
+#define SHADER_NAME axes2d-label-fragment-shader
 
 precision highp float;
 
 out vec4 fragColor;
 
 uniform sampler2D fontTexture;
 
-uniform vec4 uAxisColor;
-uniform vec4 uBackGroundColor;
+// uniform vec4 uAxisColor;
+// uniform vec4 uBackGroundColor;
 
 in vec2 _vTexCoord;
 
@@ -19,13 +19,13 @@ void main(void) {
   float x = 1.0 - (color.r + color.g + color.b) / 3.0;  // intensity of text color
   x = smoothstep(0.0, 0.2, x);  
 
-  float text_r = uAxisColor.r;
-  float text_g = uAxisColor.g;
-  float text_b = uAxisColor.b;
+  float text_r = axes.uAxisColor.r;
+  float text_g = axes.uAxisColor.g;
+  float text_b = axes.uAxisColor.b;
 
-  float bg_r = uBackGroundColor.r;
-  float bg_g = uBackGroundColor.g;
-  float bg_b = uBackGroundColor.b;
+  float bg_r = axes.uBackGroundColor.r;
+  float bg_g = axes.uBackGroundColor.g;
+  float bg_b = axes.uBackGroundColor.b;
   
   float r = x * text_r + (1.0 - x) * bg_r;
   float g = x * text_g + (1.0 - x) * bg_g;

typescript/packages/subsurface-viewer/src/layers/axes2d/axes2DLayer.ts

@@ -1,6 +1,6 @@
 export default `\
 #version 300 es
-#define SHADER_NAME axes2d-layer-vertex-shader
+#define SHADER_NAME axes2d-label-vertex-shader
 
 precision highp float;