fix: [NGRM] - Strange artefacts in 2D maps #2134

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

@@ -12,6 +12,8 @@ flat in int vertexIndex;
 
 uniform sampler2D colormap;
 
+uniform float valueRangeMin;
+uniform float valueRangeMax;
 uniform float colorMapRangeMin;
 uniform float colorMapRangeMax;
 
@@ -26,8 +28,12 @@ uniform bool isColorMapClampColorTransparent;
 vec4 getContinuousPropertyColor (float propertyValue) {
 
    vec4 color = vec4(1.0, 1.0, 1.0, 1.0);
+
+   // This may happen due to GPU interpolation precision causing color artifacts.
+   propertyValue = clamp(propertyValue, valueRangeMin, valueRangeMax);
+
    float x = (propertyValue - colorMapRangeMin) / (colorMapRangeMax - colorMapRangeMin);
-   if (x < 0.0 - 1e-4 || x > 1.0 + 1e-4) {
+   if (x < 0.0 || x > 1.0) {
       // Out of range. Use clampcolor.
       if (isClampColor) {
          color = vec4(colorMapClampColor.rgb, 1.0);

typescript/packages/subsurface-viewer/src/layers/grid3d/privateGrid3dLayer.ts

@@ -70,6 +70,8 @@ const defaultProps = {
 
 interface IPropertyUniforms {
     colormap: Texture2D;
+    valueRangeMin: number;
+    valueRangeMax: number;
     colorMapRangeMin: number;
     colorMapRangeMax: number;
     colorMapClampColor: Color | undefined | boolean | number[];
@@ -362,6 +364,8 @@ export default class PrivateLayer extends Layer<PrivateLayerProps> {
 
         return {
             colormap,
+            valueRangeMin,
+            valueRangeMax,
             colorMapRangeMin,
             colorMapRangeMax,
             colorMapClampColor,

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

@@ -54,6 +54,9 @@ void main(void) {
    vec4 color = vec4(1.0, 1.0, 1.0,  1.0);;
    float propertyValue = property;
 
+   // This may happen due to GPU interpolation precision causing color artifacts.
+   propertyValue = clamp(propertyValue, valueRangeMin, valueRangeMax);
+
    float x = (propertyValue - colorMapRangeMin) / (colorMapRangeMax - colorMapRangeMin);
    if (x < 0.0 || x > 1.0) {
       // Out of range. Use clampcolor.

typescript/packages/subsurface-viewer/src/storybook/layers/MapLayer.stories.tsx

@@ -72,6 +72,26 @@ const smallLayer = {
     colorMapClampColor: [255, 0, 0],
 };
 
+const artefactsMapLayer = {
+    "@@type": "MapLayer",
+    id: "artefacts-map-layer",
+    meshData: "ArtefactsMap/points.bin",
+    frame: {
+        origin: [1134, 9317.966796875],
+        count: [81, 92],
+        increment: [101.04595712679287, -100.58940471369598],
+
+        rotDeg: 0.10652954894901544,
+    },
+    propertiesData: "ArtefactsMap/properties.bin",
+    gridLines: false,
+    material: false,
+    // black to white colors.
+    colorMapFunction: [0, 0, 0],
+    colorMapRange: [-0.01, 33], // actual range is [0, 34.764503479003906]
+    colorMapClampColor: [0, 255, 0],
+};
+
 // This layer has as many property values as depth values hence each cell will be interpolated in color.
 const nodeCenteredPropertiesLayer = {
     "@@type": "MapLayer",
@@ -322,6 +342,12 @@ const axes_small = {
     bounds: [459790, 5929776, 0, 460590, 5930626, 30],
 };
 
+const axes_artefact_map = {
+    "@@type": "AxesLayer",
+    id: "axes_artefact_map",
+    bounds: [0, 0, 0, 10000, 10000, 30],
+};
+
 export const SmallMap: StoryObj<typeof SubsurfaceViewer> = {
     args: {
         id: "map",
@@ -339,6 +365,23 @@ export const SmallMap: StoryObj<typeof SubsurfaceViewer> = {
     },
 };
 
+export const MapWithArtefacts: StoryObj<typeof SubsurfaceViewer> = {
+    args: {
+        id: "artefacts-map",
+        layers: [axes_artefact_map, artefactsMapLayer],
+        bounds: [0, 0, 10000, 10000] as BoundingBox2D,
+        views: default3DViews,
+    },
+    parameters: {
+        docs: {
+            ...defaultStoryParameters.docs,
+            description: {
+                story: "Map with color artefacts.",
+            },
+        },
+    },
+};
+
 const axes_lite = {
     "@@type": "AxesLayer",
     id: "axes_small",