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

equinor · Jul 3, 2024 · 6156de9 · 6156de9
1 parent 8dcb471
commit 6156de9
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 0 deletions.
diff --git a/example-data/ArtefactsMap/points.bin b/example-data/ArtefactsMap/points.bin
diff --git a/example-data/ArtefactsMap/properties.bin b/example-data/ArtefactsMap/properties.bin
diff --git a/typescript/packages/subsurface-viewer/src/layers/map/fragment.fs.glsl.ts b/typescript/packages/subsurface-viewer/src/layers/map/fragment.fs.glsl.ts
@@ -54,6 +54,14 @@ 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.
+   if (propertyValue < valueRangeMin ) {
+     propertyValue = valueRangeMin;
+   }
+   else if (propertyValue > valueRangeMax) {
+     propertyValue = valueRangeMax;
+   }
+
    float x = (propertyValue - colorMapRangeMin) / (colorMapRangeMax - colorMapRangeMin);
    if (x < 0.0 || x > 1.0) {
       // Out of range. Use clampcolor.

diff --git a/typescript/packages/subsurface-viewer/src/storybook/layers/MapLayer.stories.tsx b/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",