fix: Deck gl update (#2508)

Update Deck.gl to latest version.

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.11",
+        "@deck.gl/react": "^9.1.11",
         "@emerson-eps/color-tables": "^0.4.85",
         "@equinor/eds-core-react": "0.33.0",
         "@equinor/eds-icons": "^0.19.1",

python/package.json

@@ -33,15 +33,15 @@
     "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",
+        "@deck.gl-community/editable-layers": "^9.1.0-beta.4",
+        "@deck.gl/aggregation-layers": "^9.1.11",
+        "@deck.gl/core": "^9.1.11",
+        "@deck.gl/extensions": "^9.1.11",
+        "@deck.gl/geo-layers": "^9.1.11",
+        "@deck.gl/json": "^9.1.11",
+        "@deck.gl/layers": "^9.1.11",
+        "@deck.gl/mesh-layers": "^9.1.11",
+        "@deck.gl/react": "^9.1.11",
         "@emerson-eps/color-tables": "^0.4.92",
         "@equinor/eds-core-react": "^0.36.0",
         "@equinor/eds-icons": "^0.21.0",
@@ -55,7 +55,7 @@
         "d3-format": "^3.1.0",
         "gl-matrix": "^3.4.3",
         "lodash": "^4.17.21",
-        "math.gl": "^4.0.1",
+        "math.gl": "^4.1.0",
         "mathjs": "^13.2.0",
         "merge-refs": "^1.2.2",
         "static-kdtree": "^1.0.2",

typescript/package-lock.json

@@ -1,9 +1,8 @@
 import { LayerExtension } from "@deck.gl/core";
 
 import type { ShaderModule } from "@luma.gl/shadertools";
-import type { Layer } from "@deck.gl/core";
+import type { Layer, LayerProps } from "@deck.gl/core";
 import { project32, project } from "@deck.gl/core";
-import { glsl } from "@luma.gl/shadertools";
 
 const defaultProps = {
     sideViewIds: [],
@@ -13,34 +12,11 @@ type SideProjectionExtensionProps = {
     sideViewIds?: string[];
 };
 
-const shaderFunction = glsl`
-uniform float side_view;
-
-vec3 transform(vec3 clip_position) {
-    if (side_view < 1.0) {
-        return clip_position;
-    }
-    vec3 world_position = geometry.worldPosition.xyz;
-    vec4 transformed = vec4(world_position.x, world_position.z, 0.0, 1.0);
-
-    vec4 commonspace = project_position(transformed);
-
-    vec4 clipspace = project_common_position_to_clipspace(commonspace);
-
-    return clipspace.xyz;
-}
-`;
-
-const shaderModuleVs: ShaderModule = {
-    name: "unfold-vs",
-    vs: shaderFunction,
-};
-
 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;
 `,
@@ -52,23 +28,48 @@ export class SideProjectionExtension extends LayerExtension {
 
     getShaders(this: Layer<SideProjectionExtensionProps>) {
         return {
-            modules: [shaderModuleVs, project, project32],
+            modules: [project, project32, gridUniforms],
             inject: injectionVs,
         };
     }
 
-    draw(
-        this: Layer<Required<SideProjectionExtensionProps>>,
-        {
-            uniforms,
-        }: {
-            uniforms: {
-                side_view: unknown;
-            };
-        }
-    ): void {
+    draw(this: Layer<Required<SideProjectionExtensionProps>>) {
         const { sideViewIds } = this.props;
         const isSideView = sideViewIds.includes(this.context.viewport.id);
-        uniforms.side_view = isSideView ? 1.0 : 0.0;
+        this.setShaderModuleProps({
+            side: {
+                side_view: isSideView,
+            },
+        });
+    }
+}
+
+// local shader module for the uniforms
+const uniformsBlock = /*glsl*/ `\
+uniform sideUniforms {
+    float side_view;
+} side;
+
+vec3 transform(vec3 clip_position) {
+    if (side.side_view < 1.0) {
+        return clip_position;
     }
+    vec3 world_position = geometry.worldPosition.xyz;
+    vec4 transformed = vec4(world_position.x, world_position.z, 0.0, 1.0);
+    vec4 commonspace = project_position(transformed);
+    vec4 clipspace = project_common_position_to_clipspace(commonspace);
+    return clipspace.xyz;
 }
+`;
+
+type uniformsType = {
+    side_view: number;
+};
+
+const gridUniforms = {
+    name: "side",
+    vs: uniformsBlock,
+    uniformTypes: {
+        side_view: "f32",
+    },
+} as const satisfies ShaderModule<LayerProps, uniformsType>;

typescript/packages/subsurface-viewer/package.json

@@ -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";
@@ -12,9 +12,12 @@ import {
 } from "@deck.gl/core";
 import { load } from "@loaders.gl/core";
 import { ImageLoader } from "@loaders.gl/images";
-import type { UniformValue } from "@luma.gl/core";
+import type { RenderPass, 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,7 @@ export default class Axes2DLayer extends Layer<Axes2DLayerProps> {
         return labels;
     }
 
-    draw({
-        context,
-    }: {
-        moduleParameters: unknown;
-        uniforms: unknown;
-        context: LayerContext;
-    }): void {
+    draw(opts: { context: { renderPass: RenderPass } }): void {
         const is_orthographic =
             this.context.viewport.constructor === OrthographicViewport;
         if (
@@ -539,14 +536,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 +678,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 +686,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 +711,6 @@ export default class Axes2DLayer extends Layer<Axes2DLayerProps> {
             id: `${this.props.id}-background`,
             vs: lineVertexShader,
             fs: lineFragmentShader,
-            uniforms: { uColor: bColor, uClipZ: -0.9 },
             geometry: new Geometry({
                 topology: "triangle-list",
                 attributes: {
@@ -718,9 +719,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 +843,6 @@ export default class Axes2DLayer extends Layer<Axes2DLayerProps> {
                 id: `${this.props.id}-${label}`,
                 vs: labelVertexShader,
                 fs: labelFragmentShader,
-                uniforms: {
-                    uAxisColor: lineColor,
-                    uBackGroundColor: bColor,
-                },
                 bindings: {
                     // @ts-ignore
                     fontTexture,
@@ -856,14 +859,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 +968,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>;
+