@webviz/subsurface-viewer 0.0.1-alpha.1

package/src/layers/grid3d/privateLayer.ts

@@ -0,0 +1,292 @@
+import {
+    COORDINATE_SYSTEM,
+    Layer,
+    picking,
+    project,
+    phongLighting,
+    PickingInfo,
+    UpdateParameters,
+    Color,
+} from "@deck.gl/core/typed";
+import {
+    createPropertyData,
+    LayerPickInfo,
+    PropertyDataType,
+} from "../utils/layerTools";
+import { Model, Geometry } from "@luma.gl/engine";
+import { DeckGLLayerContext } from "../../components/Map";
+import { ExtendedLayerProps, colorMapFunctionType } 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 { colorTablesArray, 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";
+
+const DEFAULT_TEXTURE_PARAMETERS = {
+    [GL.TEXTURE_MIN_FILTER]: GL.LINEAR_MIPMAP_LINEAR,
+    [GL.TEXTURE_MAG_FILTER]: GL.LINEAR,
+    [GL.TEXTURE_WRAP_S]: GL.CLAMP_TO_EDGE,
+    [GL.TEXTURE_WRAP_T]: GL.CLAMP_TO_EDGE,
+};
+
+export type MeshType = {
+    drawMode?: number;
+    attributes: {
+        positions: { value: Float32Array; size: number };
+        TEXCOORD_0?: { value: Float32Array; size: number };
+        normals?: { value: Float32Array; size: number };
+        properties: { value: Float32Array; size: number };
+        vertex_indexs: { value: Int32Array; size: number };
+    };
+    vertexCount: number;
+    indices: { value: Uint32Array; size: number };
+};
+
+export type MeshTypeLines = {
+    drawMode: number;
+    attributes: {
+        positions: { value: Float32Array; size: number };
+    };
+    vertexCount: number;
+};
+
+export type Material =
+    | {
+          ambient: number;
+          diffuse: number;
+          shininess: number;
+          specularColor: [number, number, number];
+      }
+    | 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;
+
+    const colorMap = isColorMapFunctionDefined
+        ? colorMapFunction
+        : 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<D> extends ExtendedLayerProps<D> {
+    mesh: MeshType;
+    meshLines: MeshTypeLines;
+    colorMapName: string;
+    colorMapRange: [number, number];
+    colorMapClampColor: Color | undefined | boolean;
+    colorMapFunction?: colorMapFunctionType | false;
+    propertyValueRange: [number, number];
+    depthTest: boolean;
+}
+
+const defaultProps = {
+    colorMapName: "",
+    coordinateSystem: COORDINATE_SYSTEM.CARTESIAN,
+    propertyValueRange: [0.0, 1.0],
+    depthTest: true,
+};
+
+// This is a private layer used only by the composite Map3DLayer
+export default class privateLayer extends Layer<privateLayerProps<unknown>> {
+    initializeState(context: DeckGLLayerContext): void {
+        const { gl } = context;
+        const [model_mesh, mesh_lines_model] = this._getModels(gl);
+        this.setState({ models: [model_mesh, mesh_lines_model] });
+    }
+
+    shouldUpdateState({
+        props,
+        oldProps,
+        context,
+        changeFlags,
+    }: UpdateParameters<this>): boolean {
+        return (
+            super.shouldUpdateState({
+                props,
+                oldProps,
+                context,
+                changeFlags,
+            }) || changeFlags.propsOrDataChanged
+        );
+    }
+
+    updateState({ context }: UpdateParameters<this>): void {
+        this.initializeState(context as DeckGLLayerContext);
+    }
+
+    //eslint-disable-next-line
+    _getModels(gl: any) {
+        // MESH MODEL
+        const mesh_model = new Model(gl, {
+            id: `${this.props.id}-mesh`,
+            vs: vsShader,
+            fs: fsShader,
+            geometry: new Geometry({
+                drawMode: this.props.mesh.drawMode,
+                attributes: {
+                    positions: this.props.mesh.attributes.positions,
+                    properties: this.props.mesh.attributes.properties,
+                    vertex_indexs: this.props.mesh.attributes.vertex_indexs,
+                },
+                vertexCount: this.props.mesh.vertexCount,
+                indices: this.props.mesh.indices,
+            }),
+            modules: [project, picking, phongLighting],
+            isInstanced: false, // This only works when set to false.
+        });
+
+        // MESH LINES
+        const mesh_lines_model = new Model(gl, {
+            id: `${this.props.id}-lines`,
+            vs: vsLineShader,
+            fs: fsLineShader,
+            geometry: new Geometry(this.props.meshLines),
+            modules: [project, picking],
+            isInstanced: false,
+        });
+
+        return [mesh_model, mesh_lines_model];
+    }
+
+    // Signature from the base class, eslint doesn't like the any type.
+    // eslint-disable-next-line
+    draw(args: any): void {
+        if (!this.state["models"]) {
+            return;
+        }
+
+        const { uniforms, context } = args;
+        const { gl } = context;
+
+        const [model_mesh, mesh_lines_model] = this.state["models"];
+
+        const valueRangeMin = this.props.propertyValueRange?.[0] ?? 0.0;
+        const valueRangeMax = this.props.propertyValueRange?.[1] ?? 1.0;
+
+        // If specified color map will extend from colorMapRangeMin to colorMapRangeMax.
+        // Otherwise it will extend from valueRangeMin to valueRangeMax.
+        const colorMapRangeMin = this.props.colorMapRange?.[0] ?? valueRangeMin;
+        const colorMapRangeMax = this.props.colorMapRange?.[1] ?? valueRangeMax;
+
+        const isClampColor: boolean =
+            this.props.colorMapClampColor !== undefined &&
+            this.props.colorMapClampColor !== true &&
+            this.props.colorMapClampColor !== false;
+        let colorMapClampColor = isClampColor
+            ? this.props.colorMapClampColor
+            : [0, 0, 0];
+
+        // Normalize to [0,1] range.
+        colorMapClampColor = (colorMapClampColor as Color).map(
+            (x) => (x ?? 0) / 255
+        );
+
+        const isColorMapClampColorTransparent: boolean =
+            (this.props.colorMapClampColor as boolean) === false;
+
+        gl.enable(gl.POLYGON_OFFSET_FILL);
+        gl.polygonOffset(1, 1);
+
+        if (!this.props.depthTest) {
+            gl.disable(gl.DEPTH_TEST);
+        }
+
+        model_mesh
+            .setUniforms({
+                ...uniforms,
+                colormap: new Texture2D(context.gl, {
+                    width: 256,
+                    height: 1,
+                    format: GL.RGB,
+                    data: getImageData(
+                        this.props.colorMapName,
+                        (this.context as DeckGLLayerContext).userData
+                            .colorTables,
+                        this.props.colorMapFunction
+                    ),
+                    parameters: DEFAULT_TEXTURE_PARAMETERS,
+                }),
+                valueRangeMin,
+                valueRangeMax,
+                colorMapRangeMin,
+                colorMapRangeMax,
+                colorMapClampColor,
+                isColorMapClampColorTransparent,
+                isClampColor,
+            })
+            .draw();
+        gl.disable(gl.POLYGON_OFFSET_FILL);
+
+        // Draw lines.
+        mesh_lines_model.draw();
+
+        if (!this.props.depthTest) {
+            gl.enable(gl.DEPTH_TEST);
+        }
+    }
+
+    decodePickingColor(): number {
+        return this.nullPickingColor() as unknown as number;
+    }
+
+    encodePickingColor(): number[] {
+        return this.nullPickingColor();
+    }
+
+    getPickingInfo({ info }: { info: PickingInfo }): LayerPickInfo {
+        if (!info.color) {
+            return info;
+        }
+
+        const layer_properties: PropertyDataType[] = [];
+
+        // Note these colors are in the 0-255 range.
+        const r = info.color[0];
+        const g = info.color[1];
+        const b = info.color[2];
+
+        const vertexIndex = 256 * 256 * r + 256 * g + b;
+
+        const vertexs = this.props.mesh.attributes.positions.value;
+        const depth = -vertexs[3 * vertexIndex + 2];
+        layer_properties.push(createPropertyData("Depth", depth));
+
+        const properties = this.props.mesh.attributes.properties.value;
+        const property = properties[vertexIndex];
+        layer_properties.push(createPropertyData("Property", property));
+
+        return {
+            ...info,
+            properties: layer_properties,
+        };
+    }
+}
+
+privateLayer.layerName = "privateLayer";
+privateLayer.defaultProps = defaultProps;

package/src/layers/grid3d/vertex.glsl.ts

@@ -0,0 +1,43 @@
+const vsShader = `\
+#version 300 es
+#define SHADER_NAME vertex-shader
+
+precision highp float;
+
+// Primitive attributes
+in vec3 positions;
+in float properties;
+//in vec3 normals;
+in vec3 colors;
+
+in int vertex_indexs;
+flat out int vertex_indexs_;
+
+
+// Outputs to fragment shader
+out vec2 vTexCoord;
+out vec3 cameraPosition;
+// out vec3 normals_commonspace;
+out vec4 position_commonspace;
+out vec4 vColor;
+out vec3 worldPos;
+out float property;
+
+
+void main(void) {
+   cameraPosition = project_uCameraPosition;
+
+   worldPos = positions;
+
+   vertex_indexs_ = vertex_indexs;
+
+   vColor = vec4(colors.rgb, 1.0);
+
+   property = properties;
+
+   position_commonspace = vec4(project_position(positions), 0.0);
+   gl_Position = project_common_position_to_clipspace(position_commonspace);
+}
+`;
+
+export default vsShader;

package/src/layers/grid3d/vertex_lines.glsl.ts

@@ -0,0 +1,15 @@
+export default `\
+#version 300 es
+#define SHADER_NAME vertex-lines-shader
+
+precision highp float;
+
+in vec3 positions;
+
+out vec4 position_commonspace;
+
+void main(void) {
+   vec3 position_commonspace = project_position(positions);
+   gl_Position = project_common_position_to_clipspace(vec4(position_commonspace, 0.0));
+}
+`;

package/src/layers/grid3d/webworker.ts

@@ -0,0 +1,173 @@
+import { MeshType, MeshTypeLines } from "./privateLayer";
+import { WebWorkerParams } from "./grid3dLayer";
+
+export function makeFullMesh(e: { data: WebWorkerParams }): void {
+    // Keep
+    const t0 = performance.now();
+
+    const params = e.data;
+
+    const points = params.points;
+    const polys = params.polys;
+    const properties = params.properties;
+    const isZIncreasingDownwards = params.isZIncreasingDownwards;
+
+    const positions: number[] = [];
+    const indices: number[] = [];
+    const vertexProperties: number[] = [];
+    const line_positions: number[] = [];
+
+    let propertyValueRangeMin = +99999999;
+    let propertyValueRangeMax = -99999999;
+
+    const z_sign = isZIncreasingDownwards ? -1 : 1;
+
+    let pn = 0;
+    let indice = 0;
+    let i = 0;
+    while (i < polys.length) {
+        const n = polys[i];
+        const propertyValue = properties[pn++];
+
+        if (propertyValue !== null) {
+            // For some reason propertyValue happens to be null.
+            propertyValueRangeMin =
+                propertyValue < propertyValueRangeMin
+                    ? propertyValue
+                    : propertyValueRangeMin;
+            propertyValueRangeMax =
+                propertyValue > propertyValueRangeMax
+                    ? propertyValue
+                    : propertyValueRangeMax;
+        }
+
+        // Lines.
+        for (let j = i + 1; j < i + n; j++) {
+            const i1 = polys[j];
+            const i2 = polys[j + 1];
+
+            const x0 = points[3 * i1 + 0];
+            const y0 = points[3 * i1 + 1];
+            const z0 = points[3 * i1 + 2] * z_sign;
+
+            const x1 = points[3 * i2 + 0];
+            const y1 = points[3 * i2 + 1];
+            const z1 = points[3 * i2 + 2] * z_sign;
+
+            line_positions.push(x0, y0, z0);
+            line_positions.push(x1, y1, z1);
+        }
+
+        // Triangles.
+        if (n == 4) {
+            const i1 = polys[i + 1];
+            const i2 = polys[i + 2];
+            const i3 = polys[i + 3];
+            const i4 = polys[i + 4];
+
+            const x1 = points[3 * i1 + 0];
+            const y1 = points[3 * i1 + 1];
+            const z1 = points[3 * i1 + 2] * z_sign;
+
+            const x2 = points[3 * i2 + 0];
+            const y2 = points[3 * i2 + 1];
+            const z2 = points[3 * i2 + 2] * z_sign;
+
+            const x3 = points[3 * i3 + 0];
+            const y3 = points[3 * i3 + 1];
+            const z3 = points[3 * i3 + 2] * z_sign;
+
+            const x4 = points[3 * i4 + 0];
+            const y4 = points[3 * i4 + 1];
+            const z4 = points[3 * i4 + 2] * z_sign;
+
+            // t1
+            indices.push(indice++, indice++, indice++);
+
+            positions.push(x1, y1, z1);
+            positions.push(x2, y2, z2);
+            positions.push(x3, y3, z3);
+
+            vertexProperties.push(propertyValue);
+            vertexProperties.push(propertyValue);
+            vertexProperties.push(propertyValue);
+
+            // t2
+            indices.push(indice++, indice++, indice++);
+
+            positions.push(x1, y1, z1);
+            positions.push(x3, y3, z3);
+            positions.push(x4, y4, z4);
+
+            vertexProperties.push(propertyValue);
+            vertexProperties.push(propertyValue);
+            vertexProperties.push(propertyValue);
+        } else if (n == 3) {
+            // Refactor this n == 3 && n == 4.
+            const i1 = polys[i + 1];
+            const i2 = polys[i + 2];
+            const i3 = polys[i + 3];
+
+            const x1 = points[3 * i1 + 0];
+            const y1 = points[3 * i1 + 1];
+            const z1 = points[3 * i1 + 2] * z_sign;
+
+            const x2 = points[3 * i2 + 0];
+            const y2 = points[3 * i2 + 1];
+            const z2 = points[3 * i2 + 2] * z_sign;
+
+            const x3 = points[3 * i3 + 0];
+            const y3 = points[3 * i3 + 1];
+            const z3 = points[3 * i3 + 2] * z_sign;
+
+            // t1
+            indices.push(indice++, indice++, indice++);
+
+            positions.push(x1, y1, z1);
+            positions.push(x2, y2, z2);
+            positions.push(x3, y3, z3);
+
+            vertexProperties.push(propertyValue);
+            vertexProperties.push(propertyValue);
+            vertexProperties.push(propertyValue);
+        } else {
+            console.error("Only triangles or four corners are expected.");
+        }
+
+        i = i + n + 1;
+    }
+    console.log("Number of polygons: ", pn);
+
+    const mesh: MeshType = {
+        drawMode: 4, // corresponds to GL.TRIANGLES,
+        attributes: {
+            positions: { value: new Float32Array(positions), size: 3 },
+            properties: { value: new Float32Array(vertexProperties), size: 1 },
+            vertex_indexs: { value: new Int32Array(indices), size: 1 },
+        },
+        vertexCount: indices.length,
+        indices: { value: new Uint32Array(indices), size: 1 },
+    };
+
+    const mesh_lines: MeshTypeLines = {
+        drawMode: 1, // corresponds to GL.LINES,
+        attributes: {
+            positions: { value: new Float32Array(line_positions), size: 3 },
+        },
+        vertexCount: line_positions.length / 3,
+    };
+
+    const t1 = performance.now();
+    //Keep this.
+    console.log(`Task makeMesh took ${(t1 - t0) * 0.001}  seconds.`);
+
+    // Note: typescript gives this error "error TS2554: Expected 2-3 arguments, but got 1."
+    // Disabling this for now as the second argument should be optional.
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    postMessage([
+        mesh,
+        mesh_lines,
+        [propertyValueRangeMin, propertyValueRangeMax],
+    ]);
+}

package/src/layers/hillshading2d/hillshading2d.fs.glsl.ts

@@ -0,0 +1,62 @@
+const fsHillshading = `#define SHADER_NAME hillshading2d-shader
+
+#ifdef GL_ES
+precision highp float;
+#endif
+
+varying vec2 vTexCoord;
+
+uniform sampler2D bitmapTexture; // Property map
+uniform vec2 bitmapResolution;
+
+uniform float valueRangeSize;
+
+uniform vec3 lightDirection;
+uniform float ambientLightIntensity;
+uniform float diffuseLightIntensity;
+uniform float opacity;
+
+// Compute the normal value for every pixel, based on the current value and two values aroud it.
+vec3 normal(float val) {
+  vec2 dr = 1.0 / bitmapResolution;
+  float p0 = valueRangeSize * val;
+  float px = valueRangeSize * decode_rgb2float(texture2D(bitmapTexture, vTexCoord + vec2(1.0, 0.0) / bitmapResolution).rgb);
+  float py = valueRangeSize * decode_rgb2float(texture2D(bitmapTexture, vTexCoord + vec2(0.0, 1.0) / bitmapResolution).rgb);
+  vec3 dx = vec3(1.0, 0.0, px - p0);
+  vec3 dy = vec3(0.0, 1.0, py - p0);
+
+  return normalize(cross(dx, dy));
+}
+
+// Compute how much a pixel is in the shadow based on its normal and where the light comes from.
+float shadow(vec3 normal) {
+  float diffuse = diffuseLightIntensity * dot(normal, normalize(lightDirection));
+  return clamp(ambientLightIntensity + diffuse, 0.0, 1.0);
+}
+
+void main(void) {
+  vec4 bitmapColor = texture2D(bitmapTexture, vTexCoord);
+
+  // If it's a picking pass, we just return the raw property map value.
+  if (picking_uActive) {
+    gl_FragColor = bitmapColor;
+    return;
+  }
+
+  // Decode the RGB value into a float. See decoder.fs.glsl for more details.
+  float val = decode_rgb2float(bitmapColor.rgb);
+  // Compute the shadow value, how dark a pixel will be, 1 is in complete shadow, 0 is in complete light.
+  float shadow = shadow(normal(val));
+
+  // The final pixel is black, with the opacity based on the shadow value,
+  // opacity 0 if pixel is completely in the light, opacity 1 if pixel is completely in the shadow.
+  // The property map opacity (some portions of the property map can be transparent) and
+  // the user provided image-wide opacity value are also taken into account.
+  gl_FragColor = vec4(vec3(0.0), (1.0-shadow) * bitmapColor.a * opacity);
+
+  geometry.uv = vTexCoord;
+  DECKGL_FILTER_COLOR(gl_FragColor, geometry);
+}
+`;
+
+export default fsHillshading;