feat(grid3d): constant color for coloring Grid3dLayer (#1688)

* feat(grid3d): constant color for coloring * fix: linter fixes --------- Co-authored-by: Leonid Polukhin <leonid.polukhin@aspentech.com>
equinor · Oct 5, 2023 · 718e8a0 · 718e8a0
1 parent 22c549c
commit 718e8a0
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 79 deletions.
diff --git a/typescript/packages/subsurface-viewer/src/layers/grid3d/grid3dLayer.ts b/typescript/packages/subsurface-viewer/src/layers/grid3d/grid3dLayer.ts
@@ -105,8 +105,10 @@ export interface Grid3DLayerProps extends ExtendedLayerProps {
      * If defined this function will override the color map.
      * Takes a value in the range [0,1] and returns a color.
      * E.g. (x) => [x * 255, x * 255, x * 255]
+     * May also be set as constant color:
+     * E.g. [255, 0, 0] for constant red cells.
      */
-    colorMapFunction?: colorMapFunctionType | false;
+    colorMapFunction?: colorMapFunctionType;
 
     /** Enable lines around cell faces.
      *  default: true.

diff --git a/typescript/packages/subsurface-viewer/src/layers/grid3d/privateLayer.ts b/typescript/packages/subsurface-viewer/src/layers/grid3d/privateLayer.ts
@@ -14,14 +14,14 @@ import type {
     ExtendedLayerProps,
     colorMapFunctionType,
 } from "../utils/layerTools";
+
+import { getImageData } from "../utils/layerTools";
+
 import vsShader from "./vertex.glsl";
 import fsShader from "./fragment.fs.glsl";
 import vsLineShader from "./vertex_lines.glsl";
 import fsLineShader from "./fragment_lines.glsl";
 
-import type { colorTablesArray } from "@emerson-eps/color-tables/";
-import { rgbValues } from "@emerson-eps/color-tables/";
-import { createDefaultContinuousColorScale } from "@emerson-eps/color-tables/dist/component/Utils/legendCommonFunction";
 import { Texture2D } from "@luma.gl/webgl";
 import GL from "@luma.gl/constants";
 
@@ -62,45 +62,13 @@ export type Material =
       }
     | boolean;
 
-function getImageData(
-    colorMapName: string,
-    colorTables: colorTablesArray,
-    colorMapFunction: colorMapFunctionType | false | undefined
-) {
-    const isColorMapFunctionDefined = typeof colorMapFunction === "function";
-    const isColorMapNameDefined = !!colorMapName;
-
-    const data = new Uint8Array(256 * 3);
-
-    const defaultColorMap = createDefaultContinuousColorScale;
-
-    let colorMap = colorMapFunction;
-    if (!isColorMapFunctionDefined) {
-        colorMap = isColorMapNameDefined
-            ? (value: number) => rgbValues(value, colorMapName, colorTables)
-            : defaultColorMap();
-    }
-
-    for (let i = 0; i < 256; i++) {
-        const value = i / 255.0;
-        const color = colorMap ? colorMap(value) : [0, 0, 0];
-        if (color) {
-            data[3 * i + 0] = color[0];
-            data[3 * i + 1] = color[1];
-            data[3 * i + 2] = color[2];
-        }
-    }
-
-    return data ? data : [0, 0, 0];
-}
-
 export interface privateLayerProps extends ExtendedLayerProps {
     mesh: MeshType;
     meshLines: MeshTypeLines;
     colorMapName: string;
     colorMapRange: [number, number];
     colorMapClampColor: Color | undefined | boolean;
-    colorMapFunction?: colorMapFunctionType | false;
+    colorMapFunction?: colorMapFunctionType;
     gridLines: boolean;
     propertyValueRange: [number, number];
     depthTest: boolean;

diff --git a/typescript/packages/subsurface-viewer/src/layers/map/privateMapLayer.ts b/typescript/packages/subsurface-viewer/src/layers/map/privateMapLayer.ts
@@ -14,14 +14,14 @@ import type {
     ExtendedLayerProps,
     colorMapFunctionType,
 } from "../utils/layerTools";
+
+import { getImageData } from "../utils/layerTools";
+
 import vsShader from "./vertex.glsl";
 import fsShader from "./fragment.fs.glsl";
 import vsLineShader from "./vertex_lines.glsl";
 import fsLineShader from "./fragment_lines.glsl";
 
-import type { colorTablesArray } from "@emerson-eps/color-tables/";
-import { rgbValues } from "@emerson-eps/color-tables/";
-import { createDefaultContinuousColorScale } from "@emerson-eps/color-tables/dist/component/Utils/legendCommonFunction";
 import { Texture2D } from "@luma.gl/webgl";
 import GL from "@luma.gl/constants";
 
@@ -61,45 +61,6 @@ export type Material =
           specularColor: [number, number, number];
       }
     | boolean;
-
-function getImageData(
-    colorMapName: string,
-    colorTables: colorTablesArray,
-    colorMapFunction: colorMapFunctionType | undefined
-) {
-    type funcType = (x: number) => Color;
-
-    const isColorMapFunctionDefined = typeof colorMapFunction !== "undefined";
-    const isColorMapNameDefined = !!colorMapName;
-
-    const defaultColorMap = createDefaultContinuousColorScale;
-    let colorMap = defaultColorMap() as unknown as funcType;
-
-    if (isColorMapFunctionDefined) {
-        colorMap =
-            typeof colorMapFunction === "function"
-                ? (colorMapFunction as funcType)
-                : ((() => colorMapFunction) as unknown as funcType);
-    } else if (isColorMapNameDefined) {
-        colorMap = (value: number) =>
-            rgbValues(value, colorMapName, colorTables);
-    }
-
-    const data = new Uint8Array(256 * 3);
-
-    for (let i = 0; i < 256; i++) {
-        const value = i / 255.0;
-        const color = colorMap ? colorMap(value) : [0, 0, 0];
-        if (color) {
-            data[3 * i + 0] = color[0];
-            data[3 * i + 1] = color[1];
-            data[3 * i + 2] = color[2];
-        }
-    }
-
-    return data ? data : [0, 0, 0];
-}
-
 export interface privateMapLayerProps extends ExtendedLayerProps {
     mesh: MeshType;
     meshLines: MeshTypeLines;

diff --git a/typescript/packages/subsurface-viewer/src/layers/utils/layerTools.ts b/typescript/packages/subsurface-viewer/src/layers/utils/layerTools.ts
@@ -1,5 +1,9 @@
 import type { PickingInfo } from "@deck.gl/core/typed";
 import type { Color } from "@deck.gl/core/typed";
+import type { colorTablesArray } from "@emerson-eps/color-tables/";
+import { rgbValues } from "@emerson-eps/color-tables/";
+import { createDefaultContinuousColorScale } from "@emerson-eps/color-tables/dist/component/Utils/legendCommonFunction";
+
 import type {
     Layer,
     LayersList,
@@ -180,3 +184,50 @@ export function defineBoundingBox(
     }
     return [minX, minY, minZ, maxX, maxY, maxZ];
 }
+
+/**
+ * Creates an array of 256 colors as RGB triplets in range [0, 1] using the color map or color map function.
+ * ColorMapFunction has priority.
+ * @param colorMapName Name of the color map in color tables.
+ * @param colorTables Color tables.
+ * @param colorMapFunction Either a function which returns a color
+ * or an array representing a constant color.
+ * @returns Array of 256 colors.
+ */
+export function getImageData(
+    colorMapName: string,
+    colorTables: colorTablesArray,
+    colorMapFunction: colorMapFunctionType | undefined
+) {
+    type funcType = (x: number) => Color;
+
+    const isColorMapFunctionDefined = typeof colorMapFunction !== "undefined";
+    const isColorMapNameDefined = !!colorMapName;
+
+    const defaultColorMap = createDefaultContinuousColorScale;
+    let colorMap = defaultColorMap() as unknown as funcType;
+
+    if (isColorMapFunctionDefined) {
+        colorMap =
+            typeof colorMapFunction === "function"
+                ? (colorMapFunction as funcType)
+                : ((() => colorMapFunction) as unknown as funcType);
+    } else if (isColorMapNameDefined) {
+        colorMap = (value: number) =>
+            rgbValues(value, colorMapName, colorTables);
+    }
+
+    const data = new Uint8Array(256 * 3);
+
+    for (let i = 0; i < 256; i++) {
+        const value = i / 255.0;
+        const color = colorMap ? colorMap(value) : [0, 0, 0];
+        if (color) {
+            data[3 * i + 0] = color[0];
+            data[3 * i + 1] = color[1];
+            data[3 * i + 2] = color[2];
+        }
+    }
+
+    return data ? data : [0, 0, 0];
+}