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

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

@@ -5,29 +5,33 @@ precision highp float;
 
 in vec3 cameraPosition;
 in vec4 position_commonspace;
-in float property;
+flat in float property;
+in float property_interpolated;
 
 flat in vec3 normal;
 flat in int vertexIndex;
 
 uniform sampler2D colormap;
 
+uniform float valueRangeMin;
+uniform float valueRangeMax;
 uniform float colorMapRangeMin;
 uniform float colorMapRangeMax;
 
 uniform bool  isColoringDiscrete;
 uniform float colorMapSize;
+uniform highp int coloringMode;
 
 uniform vec3 colorMapClampColor;
 uniform bool isClampColor;
 uniform bool isColorMapClampColorTransparent;
 
-// Calculate color from propertyValue using continuous colormap.
 vec4 getContinuousPropertyColor (float propertyValue) {
 
    vec4 color = vec4(1.0, 1.0, 1.0, 1.0);
+
    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);
@@ -53,7 +57,7 @@ vec4 getDiscretePropertyColor (float propertyValue) {
 
    vec4 color = vec4(1.0, 1.0, 1.0, 1.0);
    float tolerance = (1.0 / colorMapSize) * 0.5;
-     
+
    if (propertyValue < colorMapRangeMin - tolerance || propertyValue > colorMapRangeMax + tolerance) {
       // Out of range. Use clampcolor.
       if (isClampColor) {
@@ -90,8 +94,12 @@ void main(void) {
       gl_FragColor = encodeVertexIndexToRGB(vertexIndex);      
       return;
    }
-      
-   vec4 color = getPropertyColor(property);
+   
+   // Property values other than X,Y or Z are passed as "flat" i.e. constant over faces.
+   float propertyValue = coloringMode == 0 ? property : property_interpolated;
+   propertyValue = clamp(propertyValue, valueRangeMin, valueRangeMax);
+
+   vec4 color = getPropertyColor(propertyValue);
    
    // Use two sided phong lighting. This has no effect if "material" property is not set.
    vec3 lightColor = getPhongLightColor(color.rgb, cameraPosition, position_commonspace.xyz, normal);

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/grid3d/vertex.glsl.ts

@@ -12,7 +12,8 @@ uniform int coloringMode;
 // Outputs to fragment shader
 out vec3 cameraPosition;
 out vec4 position_commonspace;
-out float property;
+flat out float property;
+out float property_interpolated;
 
 flat out vec3 normal;
 flat out int vertexIndex;
@@ -37,9 +38,9 @@ void main(void) {
 
    switch(coloringMode) {
       case 0: property = properties; break;
-      case 1: property = position.x; break;
-      case 2: property = position.y; break;
-      case 3: property = position.z; break;
+      case 1: property_interpolated = position.x; break;
+      case 2: property_interpolated = position.y; break;
+      case 3: property_interpolated = position.z; break;
       default: property = properties; break;
    }
 

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",