@webviz/subsurface-viewer 0.0.1-alpha.1

package/src/layers/triangle/triangleLayer.stories.tsx

@@ -0,0 +1,191 @@
+import React from "react";
+import SubsurfaceViewer from "../../SubsurfaceViewer";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import * as SurfacePoints from "./test_data/surfacePoints";
+import * as SurfaceTriangles from "./test_data/surfaceTriangles";
+
+export default {
+    component: SubsurfaceViewer,
+    title: "SubsurfaceViewer / Triangle Layer",
+} as ComponentMeta<typeof SubsurfaceViewer>;
+
+const defaultParameters = {
+    docs: {
+        inlineStories: false,
+        iframeHeight: 500,
+    },
+};
+
+const northArrowLayer = {
+    "@@type": "NorthArrow3DLayer",
+    id: "north-arrow-layer",
+};
+
+// Small example using triangleLayer.
+const triangleLayer = {
+    "@@type": "TriangleLayer",
+    id: "triangle-layer",
+
+    /*eslint-disable */
+    pointsData:   [  0,  0,  5,  // Vertex 1, x, y, z
+                    10,  0,  5,  // Vertex 2, x, y, z
+                    10, 10,  5,  // ...
+                     0, 10,  0,
+                     5, -5, 10,
+                    11, -4,  6,
+                    11,  0,  7,
+                    17,  0,  8
+                    ],
+
+
+    triangleData: [2, 1, 0,   // Indexs' to first triangle.
+                   3, 2, 0,   // ... 
+                   1, 4, 0,  
+                   6, 7, 5],
+
+
+    color: [100, 100, 255],      // Surface color.
+    gridLines: true,             // If true will draw lines around triangles.
+    material: true,              // If true will use triangle normals for shading.
+    smoothShading: true,         // If true will use vertex calculated mean normals for shading.
+    ZIncreasingDownwards: true,
+    //contours: [0, 1],          // If used will display contour lines.
+    /*eslint-enable */
+};
+
+const axesLayer = {
+    "@@type": "AxesLayer",
+    id: "axes_small",
+    bounds: [-10, -10, 0, 20, 10, 10],
+};
+
+export const SmallTriangleLayer: ComponentStory<typeof SubsurfaceViewer> = (
+    args
+) => {
+    return <SubsurfaceViewer {...args} />;
+};
+
+SmallTriangleLayer.args = {
+    id: "map",
+    layers: [axesLayer, triangleLayer, northArrowLayer],
+    bounds: [-10, -10, 17, 10],
+    views: {
+        layout: [1, 1],
+        viewports: [
+            {
+                id: "view_1",
+                show3D: true,
+            },
+        ],
+    },
+};
+
+SmallTriangleLayer.parameters = {
+    docs: {
+        ...defaultParameters.docs,
+        description: {
+            story: "Both mesh and property data given as native javascript arrays (as opposed to URL).",
+        },
+    },
+};
+
+const flipOrientation = (triangles: number[]) => {
+    const res: number[] = [];
+    for (let i = 0; i < triangles.length; i += 3) {
+        res.push(triangles[i]);
+        res.push(triangles[i + 2]);
+        res.push(triangles[i + 1]);
+    }
+    return res;
+};
+
+const shiftPointsByZ = (points: number[], shift: number) => {
+    const res: number[] = [];
+    for (let i = 0; i < points.length; i += 3) {
+        res.push(points[i]);
+        res.push(points[i + 1]);
+        res.push(points[i + 2] + shift);
+    }
+    return res;
+};
+
+const upperSurfaceLayer = {
+    "@@type": "TriangleLayer",
+    id: "upper_surface_layer",
+
+    /*eslint-disable */
+    pointsData:  SurfacePoints.default,
+    triangleData: SurfaceTriangles.default,
+
+    color: [100, 100, 255],      // Surface color.
+    gridLines: true,             // If true will draw lines around triangles.
+    material: {
+        ambient: 0.35,
+        diffuse: 0.6,
+        shininess: 100,
+        specularColor: [255, 255, 255]
+    },              // If true will use triangle normals for shading.
+    smoothShading: true,         // If true will use vertex calculated mean normals for shading.
+    ZIncreasingDownwards: true,    
+    debug: true
+    /*eslint-enable */
+};
+
+const lowerSurfaceLayer = {
+    "@@type": "TriangleLayer",
+    id: "lowers_surface_layer",
+
+    /*eslint-disable */
+    pointsData:  shiftPointsByZ(SurfacePoints.default, 1000),
+    triangleData: flipOrientation(SurfaceTriangles.default),
+
+    color: [100, 255, 100],      // Surface color.
+    gridLines: true,             // If true will draw lines around triangles.
+    material: {
+        ambient: 0.35,
+        diffuse: 0.6,
+        shininess: 100,
+        specularColor: [255, 255, 255]
+    },              // If true will use triangle normals for shading.
+    smoothShading: true,         // If true will use vertex calculated mean normals for shading.
+    ZIncreasingDownwards: true,    
+    debug: true
+    /*eslint-enable */
+};
+
+const surfaceAxesLayer = {
+    "@@type": "AxesLayer",
+    id: "mandaros_axes_small",
+    bounds: [-2000, -2000, 1500, 2500, 2000, 3000],
+};
+
+export const TwoSideLighting: ComponentStory<typeof SubsurfaceViewer> = (
+    args
+) => {
+    return <SubsurfaceViewer {...args} />;
+};
+
+TwoSideLighting.args = {
+    id: "map",
+    layers: [surfaceAxesLayer, upperSurfaceLayer, lowerSurfaceLayer],
+    bounds: [-2000, -2000, 2500, 2000],
+    views: {
+        layout: [1, 1],
+        viewports: [
+            {
+                id: "view_1",
+                show3D: true,
+            },
+        ],
+    },
+};
+
+TwoSideLighting.parameters = {
+    docs: {
+        ...defaultParameters.docs,
+        description: {
+            story: "Both mesh and property data given as native javascript arrays (as opposed to URL).",
+        },
+    },
+};

package/src/layers/triangle/triangleLayer.ts

@@ -0,0 +1,273 @@
+import { CompositeLayer, UpdateParameters } from "@deck.gl/core/typed";
+import PrivateTriangleLayer, { Material } from "./privateTriangleLayer";
+import { ExtendedLayerProps } from "../utils/layerTools";
+import { isEqual } from "lodash";
+import { makeFullMesh } from "./webworker";
+import React from "react";
+
+export type Params = {
+    vertexArray: Float32Array;
+    indexArray: Uint32Array;
+    smoothShading: boolean;
+    displayNormals: boolean;
+};
+
+async function loadData(
+    pointsData: string | number[],
+    triangleData: string | number[],
+    ZIncreasingDownwards: boolean
+) {
+    // Keep
+    //const t0 = performance.now();
+
+    //-- Vertexes --
+    let vertexArray: Float32Array = new Float32Array();
+    if (Array.isArray(pointsData)) {
+        // Input data is native javascript array.
+        vertexArray = new Float32Array(pointsData);
+    } else {
+        // Input data is an URL.
+        const response_mesh = await fetch(pointsData);
+        if (!response_mesh.ok) {
+            console.error("Could not load vertex data");
+        }
+
+        const blob_mesh = await response_mesh.blob();
+
+        // Load as binary array of floats.
+        const buffer = await blob_mesh.arrayBuffer();
+        vertexArray = new Float32Array(buffer);
+    }
+
+    if (ZIncreasingDownwards) {
+        for (let i = 0; i < pointsData.length / 3; i++) {
+            vertexArray[3 * i + 2] *= -1;
+        }
+    }
+
+    //-- Triangle indexes --
+    let indexArray: Uint32Array = new Uint32Array();
+    if (Array.isArray(triangleData)) {
+        // Input data is native javascript array.
+        indexArray = new Uint32Array(triangleData);
+    } else {
+        // Input data is an URL.
+        const response_mesh = await fetch(triangleData);
+        if (!response_mesh.ok) {
+            console.error("Could not load triangle index data");
+        }
+
+        const blob_mesh = await response_mesh.blob();
+
+        // Load as binary array of floats.
+        const buffer = await blob_mesh.arrayBuffer();
+        indexArray = new Uint32Array(buffer);
+    }
+
+    //const t1 = performance.now();
+    // Keep this.
+    //console.log(`Task loading took ${(t1 - t0) * 0.001}  seconds.`);
+
+    return Promise.all([vertexArray, indexArray]);
+}
+
+export interface TriangleLayerProps<D> extends ExtendedLayerProps<D> {
+    /** Triangle vertexes.
+     * Either an URL or an array of numbers.
+     */
+    pointsData: string | number[];
+
+    triangleData: string | number[];
+
+    color: [number, number, number];
+
+    /**  Contourlines reference point and interval.
+     */
+    contours: [number, number];
+
+    /** Enable lines around triangles.
+     *  default: false.
+     */
+    gridLines: boolean;
+
+    /**  Surface material properties.
+     * material: true  = default material, coloring depends on surface orientation and lighting.
+     *           false = no material,  coloring is independent on surface orientation and lighting.
+     *           or full spec:
+     *      material: {
+     *           ambient: 0.35,
+     *           diffuse: 0.6,
+     *           shininess: 32,
+     *           specularColor: [255, 255, 255],
+     *       }
+     * Default value: true.
+     */
+    material: Material;
+
+    /**  Will calculate normals for each vertex and enable phong shading.
+     * If not set the shader will calculate constant normal for each triangle.
+     * Only has effect if "material" is not set to false.
+     */
+    smoothShading: boolean;
+
+    /** Enable/disable depth testing when rendering layer. Default true.
+     */
+    depthTest: boolean;
+
+    /**  If true means that input z values are interpreted as depths.
+     * For example depth of z = 1000 corresponds to -1000 on the z axis. Default true.
+     */
+    ZIncreasingDownwards: boolean;
+
+    /** If true will display normals on all vertex's
+     */
+    debug: boolean;
+
+    // Non public properties:
+    setReportedBoundingBox?: React.Dispatch<
+        React.SetStateAction<[number, number, number, number, number, number]>
+    >;
+}
+
+const defaultProps = {
+    "@@type": "TriangleLayer",
+    name: "TriangleLayer",
+    id: "triangle-layer",
+    pickable: true,
+    visible: true,
+    contours: [-1.0, -1.0],
+    color: [100, 100, 255],
+    gridLines: false,
+    smoothShading: true,
+    material: true,
+    depthTest: true,
+    ZIncreasingDownwards: true,
+    debug: false,
+};
+
+export default class TriangleLayer extends CompositeLayer<
+    TriangleLayerProps<unknown>
+> {
+    rebuildData(reportBoundingBox: boolean): void {
+        const pointsData = this.props.pointsData;
+        const triangleData = this.props.triangleData;
+
+        const p = loadData(
+            pointsData,
+            triangleData,
+            this.props.ZIncreasingDownwards
+        );
+
+        p.then(([vertexArray, indexArray]) => {
+            // Using inline web worker for calculating the triangle mesh from
+            // loaded input data so not to halt the GUI thread.
+            const blob = new Blob(
+                ["self.onmessage = ", makeFullMesh.toString()],
+                { type: "text/javascript" }
+            );
+            const url = URL.createObjectURL(blob);
+            const webWorker = new Worker(url);
+
+            const webworkerParams: Params = {
+                vertexArray,
+                indexArray,
+                smoothShading: this.props.smoothShading,
+                displayNormals: this.props.debug,
+            };
+
+            webWorker.postMessage(webworkerParams);
+            webWorker.onmessage = (e) => {
+                const [geometryTriangles, geometryLines] = e.data;
+
+                this.setState({
+                    geometryTriangles,
+                    geometryLines,
+                });
+
+                if (
+                    typeof this.props.setReportedBoundingBox !== "undefined" &&
+                    reportBoundingBox
+                ) {
+                    let xmax = -99999999;
+                    let xmin = 99999999;
+
+                    let ymax = -99999999;
+                    let ymin = 99999999;
+
+                    let zmax = -99999999;
+                    let zmin = 99999999;
+
+                    for (let i = 0; i < vertexArray.length / 3; i++) {
+                        xmax = vertexArray[3 * i + 0] > xmax ? vertexArray[3 * i + 0] : xmax; //eslint-disable-line
+                        xmin = vertexArray[3 * i + 0] < xmin ? vertexArray[3 * i + 0] : xmin; //eslint-disable-line
+
+                        ymax = vertexArray[3 * i + 1] > ymax ? vertexArray[3 * i + 1] : ymax; //eslint-disable-line
+                        ymin = vertexArray[3 * i + 1] < ymin ? vertexArray[3 * i + 1] : ymin; //eslint-disable-line
+
+                        zmax = vertexArray[3 * i + 2] > zmax ? vertexArray[3 * i + 2] : zmax; //eslint-disable-line
+                        zmin = vertexArray[3 * i + 2] < zmin ? vertexArray[3 * i + 2] : zmin; //eslint-disable-line
+                    }
+
+                    if (this.props.ZIncreasingDownwards) {
+                        const tmp = zmin;
+                        zmin = zmax;
+                        zmax = tmp;
+                    }
+
+                    this.props.setReportedBoundingBox([
+                        xmin,
+                        ymin,
+                        zmin,
+                        xmax,
+                        ymax,
+                        zmax,
+                    ]);
+                }
+
+                webWorker.terminate();
+            };
+        });
+    }
+
+    initializeState(): void {
+        const reportBoundingBox = true;
+        this.rebuildData(reportBoundingBox);
+    }
+
+    updateState({ props, oldProps }: UpdateParameters<TriangleLayer>): void {
+        const needs_reload =
+            !isEqual(props.debug, oldProps.debug) ||
+            !isEqual(props.pointsData, oldProps.pointsData) ||
+            !isEqual(props.triangleData, oldProps.triangleData) ||
+            !isEqual(props.ZIncreasingDownwards, oldProps.ZIncreasingDownwards);
+
+        if (needs_reload) {
+            const reportBoundingBox = false;
+            this.rebuildData(reportBoundingBox);
+        }
+    }
+
+    renderLayers(): [PrivateTriangleLayer?] {
+        if (Object.keys(this.state).length === 0) {
+            return [];
+        }
+
+        const layer = new PrivateTriangleLayer(
+            this.getSubLayerProps({
+                geometryTriangles: this.state["geometryTriangles"],
+                geometryLines: this.state["geometryLines"],
+                pickable: this.props.pickable,
+                contours: this.props.contours,
+                gridLines: this.props.gridLines,
+                color: this.props.color,
+                material: this.props.material,
+                smoothShading: this.props.smoothShading,
+                depthTest: this.props.depthTest,
+            })
+        );
+        return [layer];
+    }
+}
+
+TriangleLayer.layerName = "TriangleLayer";
+TriangleLayer.defaultProps = defaultProps;

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

@@ -0,0 +1,35 @@
+const vsShader = `\
+#version 300 es
+#define SHADER_NAME vertex-shader
+
+precision highp float;
+
+// Primitive attributes
+in vec3 positions;
+in float properties;
+in vec3 normals;
+
+// Outputs to fragment shader
+//out vec2 vTexCoord;
+out vec3 cameraPosition;
+out vec3 normals_commonspace;
+out vec4 position_commonspace;
+out vec3 worldPos;
+out float property;
+
+
+void main(void) {
+   cameraPosition = project_uCameraPosition;
+
+   worldPos = positions;
+
+   normals_commonspace = normals;
+
+   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/triangle/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/triangle/webworker.ts

@@ -0,0 +1,165 @@
+import { GeometryTriangles, GeometryLines } from "./privateTriangleLayer";
+import { Params } from "./triangleLayer";
+
+type Vec = [number, number, number];
+
+export function makeFullMesh(e: { data: Params }): void {
+    const params = e.data;
+
+    const t0 = performance.now();
+
+    function crossProduct(a: Vec, b: Vec): Vec {
+        const c = [
+            a[1] * b[2] - a[2] * b[1],
+            a[2] * b[0] - a[0] * b[2],
+            a[0] * b[1] - a[1] * b[0],
+        ];
+        return c as Vec;
+    }
+
+    function normalize(a: Vec): void {
+        const L = Math.sqrt(a[0] * a[0] + a[1] * a[1] + a[2] * a[2]);
+        a[0] /= L;
+        a[1] /= L;
+        a[2] /= L;
+    }
+
+    const line_positions: number[] = [];
+
+    const vertexArray = params.vertexArray;
+    const indexArray = params.indexArray;
+
+    const ntriangles = indexArray.length / 3;
+    const nvertices = vertexArray.length / 3;
+    const trianglesNormals = Array(ntriangles * 3).fill(0);
+    const vertexsNormals = Array(vertexArray.length).fill(0);
+
+    // Generate lines around each triangle and one normal for each triangle.
+    for (let t_no = 0; t_no < ntriangles; t_no++) {
+        let indx = indexArray[3 * t_no + 0];
+        const x0 = vertexArray[3 * indx + 0];
+        const y0 = vertexArray[3 * indx + 1];
+        const z0 = vertexArray[3 * indx + 2];
+
+        indx = indexArray[3 * t_no + 1];
+        const x1 = vertexArray[3 * indx + 0];
+        const y1 = vertexArray[3 * indx + 1];
+        const z1 = vertexArray[3 * indx + 2];
+
+        indx = indexArray[3 * t_no + 2];
+        const x2 = vertexArray[3 * indx + 0];
+        const y2 = vertexArray[3 * indx + 1];
+        const z2 = vertexArray[3 * indx + 2];
+
+        // Triangle lines.
+        line_positions.push(x0, y0, z0);
+        line_positions.push(x1, y1, z1);
+
+        line_positions.push(x0, y0, z0);
+        line_positions.push(x2, y2, z2);
+
+        line_positions.push(x1, y1, z1);
+        line_positions.push(x2, y2, z2);
+
+        // Normal.
+        const v1 = [x2 - x0, y2 - y0, z2 - z0] as Vec;
+        const v2 = [x2 - x1, y2 - y1, z2 - z1] as Vec;
+        const normal = crossProduct(v2, v1);
+
+        trianglesNormals[3 * t_no + 0] = normal[0];
+        trianglesNormals[3 * t_no + 1] = normal[1];
+        trianglesNormals[3 * t_no + 2] = normal[2];
+    }
+
+    // For each vertex keep a list of which triangles it is part of.
+    const vertexTrianglesArray = Array(vertexArray.length / 3);
+    for (let i = 0; i < vertexTrianglesArray.length; i++) {
+        vertexTrianglesArray[i] = new Array(0);
+    }
+
+    for (let t_no = 0; t_no < ntriangles; t_no++) {
+        const v1_idx = indexArray[3 * t_no + 0];
+        vertexTrianglesArray[v1_idx].push(t_no);
+
+        const v2_idx = indexArray[3 * t_no + 1];
+        vertexTrianglesArray[v2_idx].push(t_no);
+
+        const v3_idx = indexArray[3 * t_no + 2];
+        vertexTrianglesArray[v3_idx].push(t_no);
+    }
+
+    // The normal for each vertex is the mean of the normals belonging to the triangles that
+    // share this vertex.
+    for (let vertex_no = 0; vertex_no < nvertices; vertex_no++) {
+        const n_triangles = vertexTrianglesArray[vertex_no].length; // No triangles this vertex is part of. Will be at leat 1.
+        const t0 = vertexTrianglesArray[vertex_no][0]; // first triangle
+        const normal_mean = [
+            trianglesNormals[3 * t0 + 0],
+            trianglesNormals[3 * t0 + 1],
+            trianglesNormals[3 * t0 + 2],
+        ];
+        // possible rest of triangles
+        for (let t_no = 1; t_no < n_triangles; t_no++) {
+            const t = vertexTrianglesArray[vertex_no][t_no];
+            const normal = [
+                trianglesNormals[3 * t + 0],
+                trianglesNormals[3 * t + 1],
+                trianglesNormals[3 * t + 2],
+            ];
+
+            normal_mean[0] += normal[0];
+            normal_mean[1] += normal[1];
+            normal_mean[2] += normal[2];
+        }
+
+        normalize(normal_mean as Vec);
+
+        vertexsNormals[3 * vertex_no + 0] = normal_mean[0];
+        vertexsNormals[3 * vertex_no + 1] = normal_mean[1];
+        vertexsNormals[3 * vertex_no + 2] = normal_mean[2];
+
+        // Debug. Verify normal calculations by displaying normals.
+        const isDebug = params.displayNormals;
+        if (isDebug) {
+            const x0 = vertexArray[3 * vertex_no + 0];
+            const y0 = vertexArray[3 * vertex_no + 1];
+            const z0 = vertexArray[3 * vertex_no + 2];
+
+            const scale = 50;
+            const x1 = x0 + normal_mean[0] * scale;
+            const y1 = y0 + normal_mean[1] * scale;
+            const z1 = z0 + normal_mean[2] * scale;
+
+            line_positions.push(x0, y0, z0);
+            line_positions.push(x1, y1, z1);
+        }
+    }
+
+    const geometryTriangles: GeometryTriangles = {
+        drawMode: 4, // corresponds to GL.TRIANGLES,
+        attributes: {
+            positions: { value: new Float32Array(vertexArray), size: 3 },
+            normals: { value: new Float32Array(vertexsNormals), size: 3 },
+            vertex_indexs: { value: new Int32Array(indexArray), size: 1 },
+        },
+        vertexCount: indexArray.length,
+        indices: { value: new Uint32Array(indexArray), size: 1 },
+    };
+
+    const geometryLines: GeometryLines = {
+        drawMode: 1, // corresponds to GL.LINES,
+        attributes: {
+            positions: { value: new Float32Array(line_positions), size: 3 },
+        },
+        vertexCount: line_positions.length / 3,
+    };
+
+    const t1 = performance.now();
+    console.debug(`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([geometryTriangles, geometryLines]);
+}

package/src/layers/utils/glsl.d.ts

@@ -0,0 +1,4 @@
+declare module "*.glsl" {
+    const value: string;
+    export default value;
+}