From 718e8a06204fc51c66677415a5bf31ef93860be7 Mon Sep 17 00:00:00 2001 From: LeonidPolukhin <117165489+LeonidPolukhin@users.noreply.github.com> Date: Thu, 5 Oct 2023 17:57:16 +0300 Subject: [PATCH] feat(grid3d): constant color for coloring Grid3dLayer (#1688) * feat(grid3d): constant color for coloring * fix: linter fixes --------- Co-authored-by: Leonid Polukhin --- .../src/layers/grid3d/grid3dLayer.ts | 4 +- .../src/layers/grid3d/privateLayer.ts | 40 ++------------- .../src/layers/map/privateMapLayer.ts | 45 ++-------------- .../src/layers/utils/layerTools.ts | 51 +++++++++++++++++++ 4 files changed, 61 insertions(+), 79 deletions(-) diff --git a/typescript/packages/subsurface-viewer/src/layers/grid3d/grid3dLayer.ts b/typescript/packages/subsurface-viewer/src/layers/grid3d/grid3dLayer.ts index 5fb7a401f..0b1a0ca94 100644 --- 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 index 5a8638fe2..3911d91f0 100644 --- 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 index 3fa0247a4..ede0bee1c 100644 --- 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 index 2389339b7..63aaca21a 100644 --- 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]; +}