fix: [NGRM] When zoomed in text labels on 3D axes shrinks. #2510

typescript/packages/subsurface-viewer/src/extensions/fixed-size-extension.ts

@@ -0,0 +1,38 @@
+import { LayerExtension } from "@deck.gl/core";
+
+/**
+ * The `FixedSizeExtension` class is a custom Deck.gl layer extension that modifies the size of rendered objects
+ * based on their clip-space position. This extension can be used to ensure that objects maintain a fixed size
+ * relative to the viewport, regardless of their depth in the scene.
+ *
+ * @extends LayerExtension
+ *
+ * @remarks
+ * The `getShaders` method injects a custom shader snippet into the vertex shader stage of Deck.gl's rendering pipeline.
+ * Specifically, it modifies the `size` variable by scaling it with `gl_Position.w`, which represents the depth
+ * component in clip space.
+ *
+ * @example
+ * ```typescript
+ * import { FixedSizeExtension } from './fixed-size-extension';
+ * import { TextLayer } from '@deck.gl/layers';
+ *
+ * const layer = new TextLayer({
+ *   data,
+ *   getPosition: d => d.coordinates,
+ *   getText: d => d.label,
+ *   getSize: d => d.size,
+ *   extensions: [new FixedSizeExtension()],
+ * });
+ * ```
+ * @note See this discussion for more details: https://github.com/visgl/deck.gl/issues/7992
+ */
+export class FixedSizeExtension extends LayerExtension {
+    getShaders() {
+        return {
+            inject: {
+                "vs:DECKGL_FILTER_SIZE": "size *= gl_Position.w;",
+            },
+        };
+    }
+}

typescript/packages/subsurface-viewer/src/layers/axes/axesLayer.ts

@@ -18,6 +18,7 @@ import type {
 import type { ExtendedLayerProps, Position3D } from "../utils/layerTools";
 import BoxLayer from "./boxLayer";
 import { ticks } from "d3-array";
+import { FixedSizeExtension } from "../../extensions/fixed-size-extension";
 
 export interface AxesLayerProps extends ExtendedLayerProps {
     /**
@@ -27,7 +28,11 @@ export interface AxesLayerProps extends ExtendedLayerProps {
      */
     bounds: BoundingBox3D;
     labelColor?: Color;
-    labelFontSize?: number;
+    /**
+     * Font size for tick labels, specified in pixels. Axis labels are +7 pixels relative to this size.
+     * @default 12
+     */
+    labelFontSize: number;
     fontFamily?: string;
     axisColor?: Color;
     /** If true means that input z values are interpreted as depths.
@@ -46,6 +51,7 @@ const defaultProps = {
     id: "axes-layer",
     visible: true,
     ZIncreasingDownwards: true,
+    labelFontSize: 12,
 };
 
 type TextLayerData = {
@@ -222,6 +228,7 @@ export default class AxesLayer extends CompositeLayer<AxesLayerProps> {
                     this.getBaseLine(d, is_orthographic),
                 coordinateSystem: COORDINATE_SYSTEM.CARTESIAN,
                 getColor: this.props.labelColor || [0, 0, 0, 255],
+                extensions: [new FixedSizeExtension()],
             })
         );
 
@@ -256,7 +263,7 @@ function maketextLayerData(
     tick_lines: number[],
     tick_labels: string[],
     bounds: BoundingBox3D,
-    labelFontSize?: number
+    labelFontSize: number
 ): [TextLayerData] {
     const x_min = bounds[0];
     const x_max = bounds[3];
@@ -273,29 +280,28 @@ function maketextLayerData(
 
     const offset = ((dx + dy + dz) / 3.0) * 0.1;
 
+    const axisAnnotationData = {
+        label: "X",
+        from: [0.0, 0.0, 0.0],
+        to: [x_max + offset, y_min, z_min],
+        size: labelFontSize + 7,
+    };
+
     const data = [
+        axisAnnotationData,
         {
-            label: "X",
-            from: [0.0, 0.0, 0.0],
-            to: [x_max + offset, y_min, z_min],
-            size: labelFontSize ?? 26,
-        },
-        {
+            ...axisAnnotationData,
             label: "Y",
-            from: [0.0, 0.0, 0.0],
             to: [x_min, y_max + offset, z_min],
-            size: labelFontSize ?? 26,
         },
     ];
 
     if (!is_orthographic) {
-        const z_axis_annotaion = {
+        data.push({
+            ...axisAnnotationData,
             label: "Z",
-            from: [0.0, 0.0, 0.0],
             to: [x_min, y_min, z_max + offset],
-            size: labelFontSize ?? 26,
-        };
-        data.push(z_axis_annotaion);
+        });
     }
 
     for (let i = 0; i < tick_lines.length / 6; i++) {
@@ -315,7 +321,7 @@ function maketextLayerData(
             label: label,
             from: from,
             to: to,
-            size: labelFontSize ?? 11,
+            size: labelFontSize,
         });
     }
 

typescript/packages/subsurface-viewer/src/layers/wells/layers/wellLabelLayer.ts

@@ -9,6 +9,7 @@ import type { WellFeature } from "../types";
 import { getTrajectory } from "../utils/trajectory";
 import type { MergedTextLayerProps } from "./mergedTextLayer";
 import { MergedTextLayer } from "./mergedTextLayer";
+import { FixedSizeExtension } from "../../../extensions/fixed-size-extension";
 
 type WellLabelLayerData = WellFeature;
 
@@ -97,6 +98,9 @@ const DEFAULT_PROPS: DefaultProps<WellLabelLayerProps> = {
             enter: ([r, g, b]: Color) => [r, g, b, 0],
         },
     },
+
+    // Ensure labels honor pixel size in screen space
+    extensions: [new FixedSizeExtension()],
 };
 
 const getCumulativeDistance = (well_xyz: Position[]): number[] => {