fix: "SubsurfaceViewer: colorAbove/colorBelow/colorNaN possibly not working? #2479"

Author: nilscb

example-data/deckgl-map.json

@@ -39,6 +39,7 @@
           437720,
           6481113
         ],
+        "hillshading": true,
         "colorMapName": "Rainbow",
         "valueRange": [
           2782,
@@ -49,21 +50,6 @@
           3513
         ]
       },
-      {
-        "@@type": "Hillshading2DLayer",
-        "bounds": [
-          432205,
-          6475078,
-          437720,
-          6481113
-        ],
-        "valueRange": [
-          2782,
-          3513
-        ],
-        "rotDeg": 0,
-        "image": "@@#resources.depthMap"
-      },
       {
         "@@type": "WellsLayer",
         "data": "@@#resources.wellsData",

typescript/packages/subsurface-viewer/src/layers/colormap/colormap.fs.glsl.ts

@@ -10,6 +10,30 @@ out vec4 fragColor;
 uniform sampler2D bitmapTexture; // Property map
 uniform sampler2D colormap;
 
+// Compute the normal value for every pixel, based on the current value and two values aroud it.
+vec3 normal(float val) {
+  vec2 dr = 1.0 / map.bitmapResolution;
+
+  float valueRangeSize = map.valueRangeMax - map.valueRangeMin;
+  float p0 = valueRangeSize * val;
+
+  float px = valueRangeSize * decode_rgb2float(texture(bitmapTexture, vTexCoord + vec2(1.0, 0.0) / map.bitmapResolution).rgb);
+  float py = valueRangeSize * decode_rgb2float(texture(bitmapTexture, vTexCoord + vec2(0.0, 1.0) / map.bitmapResolution).rgb);
+  vec3 dx = vec3(1.0, 0.0, px - p0);
+  vec3 dy = vec3(0.0, 1.0, py - p0);
+
+  return normalize(cross(dx, dy));
+}
+
+// Compute how much a pixel is in the shadow based on its normal and where the light comes from.
+float shadow(vec3 normal) {
+  vec3 lightDirection = vec3(1.0, 1.0, 1.0);
+  float ambientLightIntensity = 0.5;
+  float diffuseLightIntensity = 0.5;
+  float diffuse = diffuseLightIntensity * dot(normal, normalize(lightDirection));
+  return clamp(ambientLightIntensity + diffuse, 0.0, 1.0);
+}
+
 void main(void) {
   vec4 bitmapColor = texture(bitmapTexture, vTexCoord);
 
@@ -20,18 +44,52 @@ void main(void) {
   }
 
   // Decode the RGB value into a float. See decoder.fs.glsl for more details.
-  float val = decode_rgb2float(bitmapColor.rgb);
-  // The resulting val will be in [0, 1] interval, so we can use it directly as a texture coord
-  // to sample from the colormap.
-  // 0 => Leftmost color in the colormap, 1 => rightmost color, linearly interpolated in between.
-  vec4 color = texture(colormap, vec2(val, 0.5));
-
-  // The final pixel opacity is the combination of the user provided image-wide opacity,
-  // the colormap opacity at the sampled pixel and the property map opacity of the sampled pixel.
-  fragColor = vec4(color.rgb, color.a * bitmapColor.a * layer.opacity);
-
-  // Support for existing functionality that comes from the BitmapLayer, such as desaturate, tintColor etc.
-  // See https://deck.gl/docs/api-reference/layers/bitmap-layer#render-options for more details.
+  float val = decode_rgb2float(bitmapColor.rgb); // The resulting val will be in [0, 1] interval.
+  float property = val * (map.valueRangeMax - map.valueRangeMin) + map.valueRangeMin;
+
+  // Compute the color from the colormap.
+  vec4 color = vec4(1.0, 1.0, 1.0, 1.0);
+  float x = (property - map.colorMapRangeMin) / (map.colorMapRangeMax - map.colorMapRangeMin);
+   if (x < 0.0 || x > 1.0) {
+      // Out of range. Use clampcolor.
+      if (map.isClampColor) {
+         color = vec4(map.colorMapClampColor.rgb, 1.0);
+      }
+      else if (map.isColorMapClampColorTransparent) {
+         discard;
+         return;
+      }
+      else {
+         // Use min/max color to clamp.
+         x = max(0.0, x);
+         x = min(1.0, x);
+
+         color = texture(colormap, vec2(x, 0.5));
+      }
+   }
+   else {
+      color = texture(colormap, vec2(x, 0.5));
+   }
+   fragColor = vec4(color.rgb, color.a * bitmapColor.a * layer.opacity);
+
+
+  // Hillshading.
+  if (map.hillshading) {
+    // Compute the shadow value, how dark a pixel will be, 1 is in complete shadow, 0 is in complete light.
+    float shadow = shadow(normal(val));
+    fragColor = vec4(fragColor.rgb * shadow, fragColor.a);
+  }
+
+
+  // Contour lines.
+  if (map.contours) {
+      float x = (property - map.contourReferencePoint) / map.contourInterval;  
+      float f  = fract(x);
+      float df = fwidth(x);
+      float c = smoothstep(df * 1.0, df * 2.0, f); // smootstep from/to no of pixels distance from contour line.  // keep: 
+      fragColor = fragColor * vec4(c, c, c, 1.0);
+  }
+
   geometry.uv = vTexCoord;
   DECKGL_FILTER_COLOR(fragColor, geometry);
 }

typescript/packages/subsurface-viewer/src/layers/colormap/colormapLayer.ts

@@ -2,13 +2,8 @@ import type { LayerProps, PickingInfo } from "@deck.gl/core";
 import { project32 } from "@deck.gl/core";
 import type { BitmapLayerPickingInfo, BitmapLayerProps } from "@deck.gl/layers";
 import { BitmapLayer } from "@deck.gl/layers";
-
-import type { ShaderModule } from "@luma.gl/shadertools";
-import type { Model } from "@luma.gl/engine";
-
-import type { colorTablesArray } from "@emerson-eps/color-tables/";
-import { getRgbData } from "@emerson-eps/color-tables";
-
+import type { Color, LayerProps, PickingInfo } from "@deck.gl/core";
+import { project32 } from "@deck.gl/core";
 import type {
     ColorMapFunctionType,
     LayerPickInfo,
@@ -20,16 +15,17 @@ import { decodeRGB, type ValueDecoder } from "../utils/propertyMapTools";
 import fsColormap from "./colormap.fs.glsl";
 import type { DeckGLLayerContext } from "../../components/Map";
 import type { ContinuousLegendDataType } from "../../components/ColorLegend";
+import type { ShaderModule } from "@luma.gl/shadertools";
+import type { Model } from "@luma.gl/engine";
+import type { Texture } from "@luma.gl/core";
 
 function getImageData(
     colorMapName: string,
     colorTables: colorTablesArray,
     colorMapFunction?: ColorMapFunctionType
 ) {
     const isColorMapFunctionDefined = typeof colorMapFunction !== "undefined";
-
     const data = new Uint8Array(256 * 3);
-
     for (let i = 0; i < 256; i++) {
         const value = i / 255.0;
         const rgb = isColorMapFunctionDefined
@@ -93,6 +89,25 @@ export interface ColormapLayerProps
     // Rotates image around bounds upper left corner counterclockwise in degrees.
     rotDeg: number;
 
+    // If true, draw contour lines.  Default false.
+    contours: boolean;
+
+    // If true, apply hillshading. Default false.
+    hillshading: boolean;
+
+    // Contour reference height. Default 0.
+    contourReferencePoint: number;
+
+    // Height between contour lines. Default 50.
+    contourInterval: number;
+
+    /**  Clamp colormap to this color at ends.
+     * Given as array of three values (r,g,b) e.g: [255, 0, 0]
+     * If not set or set to true, it will clamp to color map min and max values.
+     * If set to false the clamp color will be completely transparent.
+     */
+    colorMapClampColor: Color | undefined | boolean;
+
     // Non public properties:
     reportBoundingBox?: React.Dispatch<ReportBoundingBoxAction>;
 }
@@ -114,13 +129,13 @@ const defaultProps = {
     },
     rotDeg: 0,
     colorMapName: "Rainbow",
+    contours: false,
+    hillshading: false,
+    contourReferencePoint: 0,
+    contourInterval: 50, // 50 meter by default
 };
 
 export default class ColormapLayer extends BitmapLayer<ColormapLayerProps> {
-    initializeState(): void {
-        super.initializeState();
-    }
-
     setShaderModuleProps(
         ...props: Parameters<Model["shaderInputs"]["setProps"]>
     ): void {
@@ -161,7 +176,7 @@ export default class ColormapLayer extends BitmapLayer<ColormapLayerProps> {
         const valueRangeMin = this.props.valueRange[0] ?? 0.0;
         const valueRangeMax = this.props.valueRange[1] ?? 1.0;
 
-        // If specified color map will extend from colorMapRangeMin to colorMapRangeMax.
+        // If specified, color map will extend from colorMapRangeMin to colorMapRangeMax.
         // Otherwise it will extend from valueRangeMin to valueRangeMax.
         const colorMapRangeMin = this.props.colorMapRange?.[0] ?? valueRangeMin;
         const colorMapRangeMax = this.props.colorMapRange?.[1] ?? valueRangeMax;
@@ -179,13 +194,48 @@ export default class ColormapLayer extends BitmapLayer<ColormapLayerProps> {
 
         this.state.model?.setBindings({ colormap });
 
+        const bitmapResolution = this.props.image
+            ? [
+                  (this.props.image as Texture).width,
+                  (this.props.image as Texture).height,
+              ]
+            : [1, 1];
+
+        const contours = this.props.contours;
+        const hillshading = this.props.hillshading;
+
+        const contourReferencePoint = this.props.contourReferencePoint;
+        const contourInterval = this.props.contourInterval;
+
+        const isClampColor: boolean =
+            this.props.colorMapClampColor !== undefined &&
+            this.props.colorMapClampColor !== true &&
+            this.props.colorMapClampColor !== false;
+        let colorMapClampColor = isClampColor
+            ? this.props.colorMapClampColor
+            : [0, 0, 0];
+
+        colorMapClampColor = (colorMapClampColor as Color).map(
+            (x) => (x ?? 0) / 255
+        );
+
+        const isColorMapClampColorTransparent: boolean =
+            (this.props.colorMapClampColor as boolean) === false;
+
         super.setShaderModuleProps({
             map: {
                 valueRangeMin,
                 valueRangeMax,
                 colorMapRangeMin,
                 colorMapRangeMax,
-
+                contours,
+                hillshading,
+                bitmapResolution,
+                contourReferencePoint,
+                contourInterval,
+                isClampColor,
+                colorMapClampColor,
+                isColorMapClampColorTransparent,
                 rgbScaler: this.props.valueDecoder.rgbScaler,
                 floatScaler: this.props.valueDecoder.floatScaler,
                 offset: this.props.valueDecoder.offset,
@@ -220,6 +270,10 @@ export default class ColormapLayer extends BitmapLayer<ColormapLayerProps> {
         // We just need to decode that RGB color into a property float value.
         const val = decodeRGB(info.color, mergedDecoder, this.props.valueRange);
 
+        if (info.coordinate) {
+            info.coordinate[2] = NaN; // disable z value in 2D map;
+        }
+
         return {
             ...info,
             // Picking color doesn't represent object index in this layer.
@@ -258,7 +312,14 @@ uniform mapUniforms {
     float valueRangeMax;
     float colorMapRangeMin;
     float colorMapRangeMax;
-
+    vec2 bitmapResolution;
+    bool contours;
+    bool hillshading;
+    float contourReferencePoint;
+    float contourInterval;
+    bool isClampColor;
+    vec3 colorMapClampColor;
+    bool isColorMapClampColorTransparent;
     vec3 rgbScaler;    // r, g and b multipliers
     float floatScaler; // value multiplier
     float offset;      // translation of the r, g, b sum
@@ -274,13 +335,7 @@ float decode_rgb2float(vec3 rgb) {
     value = floor(value / map.step + 0.5) * map.step;
   }
 
-  // If colorMapRangeMin/Max specified, color map will span this interval.
-  float x  = value * (map.valueRangeMax - map.valueRangeMin) + map.valueRangeMin;
-  x = (x - map.colorMapRangeMin) / (map.colorMapRangeMax - map.colorMapRangeMin);
-  x = max(0.0, x);
-  x = min(1.0, x);
-
-  return x;
+  return value;
 }
 `;
 
@@ -289,7 +344,14 @@ type Map2DUniformsType = {
     valueRangeMax: number;
     colorMapRangeMin: number;
     colorMapRangeMax: number;
-
+    bitmapResolution: [number, number];
+    contours: boolean;
+    hillshading: boolean;
+    contourReferencePoint: number;
+    contourInterval: number;
+    isClampColor: boolean;
+    colorMapClampColor: [number, number, number];
+    isColorMapClampColorTransparent: boolean;
     rgbScaler: [number, number, number];
     floatScaler: number;
     offset: number;
@@ -306,7 +368,14 @@ const map2DUniforms = {
         valueRangeMax: "f32",
         colorMapRangeMin: "f32",
         colorMapRangeMax: "f32",
-
+        bitmapResolution: "vec2<f32>",
+        contours: "u32",
+        hillshading: "u32",
+        contourReferencePoint: "f32",
+        contourInterval: "f32",
+        isClampColor: "u32",
+        colorMapClampColor: "vec3<f32>",
+        isColorMapClampColorTransparent: "u32",
         rgbScaler: "vec3<f32>",
         floatScaler: "f32",
         offset: "f32",