@webviz/subsurface-viewer 0.0.1-alpha.1 → 0.0.2-alpha.1

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

@@ -1,191 +0,0 @@
-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

@@ -1,273 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,165 +0,0 @@
-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

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