@webviz/subsurface-viewer 0.0.1-alpha.1

package/src/layers/grid3d/fragment.fs.glsl.ts

@@ -0,0 +1,109 @@
+const fsShader = `#version 300 es
+#define SHADER_NAME terrainmap-shader
+
+precision highp float;
+
+in vec2 vTexCoord;
+in vec3 cameraPosition;
+//in vec3 normals_commonspace;
+in vec4 position_commonspace;
+in vec4 vColor;
+
+flat in int vertex_indexs_;
+
+out vec4 fragColor;
+
+in vec3 worldPos;
+in float property;
+
+uniform sampler2D colormap;
+
+uniform float valueRangeMin;
+uniform float valueRangeMax;
+uniform float colorMapRangeMin;
+uniform float colorMapRangeMax;
+
+uniform vec3 colorMapClampColor;
+uniform bool isClampColor;
+uniform bool isColorMapClampColorTransparent;
+
+
+
+void main(void) {
+   geometry.uv = vTexCoord;
+
+   vec3 normal = vec3(0.0, 0.0, 1.0);
+   bool nomals_available = false;
+   if (!nomals_available) {
+      normal = normalize(cross(dFdx(position_commonspace.xyz), dFdy(position_commonspace.xyz)));
+   } 
+   // else {
+   //    normal = normals_commonspace;
+   // }
+
+   // // Discard transparent pixels. KEEP
+   // if (!picking_uActive && isnan(propertyValue)) {
+   //    discard;
+   //    return;
+   // }
+   
+   //Picking pass.
+   if (picking_uActive) {
+      // Express triangle index in 255 system.
+      float r = 0.0;
+      float g = 0.0;
+      float b = 0.0;
+  
+      int idx = vertex_indexs_;
+  
+      if (idx >= (256 * 256) - 1) {
+         r = floor(float(idx) / (256.0 * 256.0));
+         idx -= int(r * (256.0 * 256.0));
+      }
+  
+      if (idx >= 256 - 1) {
+         g = floor(float(idx) / 256.0);
+         idx -= int(g * 256.0);
+      }
+  
+      b = float(idx);
+  
+      fragColor = vec4(r / 255.0, g / 255.0, b / 255.0,  1.0);
+      return;
+   }
+
+   // Calculate color from propertyValue using colormap.
+   vec4 color = vec4(1.0, 1.0, 1.0,  1.0);;
+   float propertyValue = property;
+   float x = (propertyValue - colorMapRangeMin) / (colorMapRangeMax - colorMapRangeMin);
+   if (x < 0.0 || x > 1.0) {
+      // Out of range. Use clampcolor.
+      if (isClampColor) {
+         color = vec4(colorMapClampColor.rgb, 1.0);
+
+      }
+      else if (isColorMapClampColorTransparent) {
+         discard;
+         return;
+      }
+      else {
+         // Use min/max color to clamp.
+         x = max(0.0, x);
+         x = min(1.0, x);
+
+         color = texture2D(colormap, vec2(x, 0.5));
+      }
+   }
+   else {
+      color = texture2D(colormap, vec2(x, 0.5));
+   }
+
+   // Use normal lighting. This has no effect if "material" property is not set.
+   vec3 lightColor = lighting_getLightColor(color.rgb, cameraPosition, position_commonspace.xyz, normal);
+   fragColor = vec4(lightColor, 1.0);
+
+   DECKGL_FILTER_COLOR(fragColor, geometry);
+}
+`;
+
+export default fsShader;

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

@@ -0,0 +1,21 @@
+const fragmentShader = `\
+#version 300 es
+#define SHADER_NAME graph-layer-fragment-shader
+
+precision highp float;
+
+out vec4 fragColor;
+
+void main(void) {
+  
+  // Picking pass.
+  if (picking_uActive) {
+    discard;
+    return;
+  }
+
+  fragColor = vec4(0.0, 0.0, 0.0, 1.0);
+}
+`;
+
+export default fragmentShader;

package/src/layers/grid3d/grid3dLayer.stories.tsx

@@ -0,0 +1,172 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import SubsurfaceViewer from "../../SubsurfaceViewer";
+
+export default {
+    component: SubsurfaceViewer,
+    title: "SubsurfaceViewer/Experimental Grid3D",
+} as ComponentMeta<typeof SubsurfaceViewer>;
+
+type NumberQuad = [number, number, number, number];
+
+const Template: ComponentStory<typeof SubsurfaceViewer> = (args) => (
+    <SubsurfaceViewer {...args} />
+);
+
+const defaultProps = {
+    bounds: [456150, 5925800, 467400, 5939500] as NumberQuad,
+    views: {
+        layout: [1, 1] as [number, number],
+        viewports: [
+            {
+                id: "view_1",
+                show3D: true,
+            },
+        ],
+    },
+};
+
+// Grid 3d story
+const grid3dLayer = {
+    "@@type": "Grid3DLayer",
+    id: "Grid3DLayer",
+    material: true,
+    colorMapName: "Rainbow",
+    ZIncreasingDownwards: false,
+};
+
+const axes = {
+    "@@type": "AxesLayer",
+    id: "axes-layer2",
+    bounds: [453150, 5925800, 0, 469400, 5939500, 2000],
+};
+const parameters = {
+    docs: {
+        description: {
+            story: "Simgrid.",
+        },
+        inlineStories: false,
+        iframeHeight: 500,
+    },
+};
+
+export const Simgrid = Template.bind({});
+Simgrid.args = {
+    ...defaultProps,
+    id: "grid-3d",
+    layers: [
+        axes,
+        {
+            ...grid3dLayer,
+            pointsData: "vtk-grid/Simgrid_points.json",
+            polysData: "vtk-grid/Simgrid_polys.json",
+            propertiesData: "vtk-grid/Simgrid_scalar.json",
+        },
+    ],
+};
+Simgrid.parameters = parameters;
+
+export const SimgridArrayInput = Template.bind({});
+SimgridArrayInput.args = {
+    ...defaultProps,
+    id: "grid-3darray",
+    layers: [
+        axes,
+        {
+            ...grid3dLayer,
+            pointsData: [
+                456063, 5935991, -1729, 456063, 5935991, -1731, 456138,
+                5935861.518843642, -1727.820068359375, 456138.5, 5935861.5,
+                -1726.3526611328125, 456193.90625, 5936066, -1730.7259521484375,
+                456193.8825946293, 5936065.981075703, -1732.200439453125,
+                456268.9375, 5935936.5, -1726.6915283203125,
+            ],
+            polysData: [4, 0, 1, 2, 3, 4, 0, 4, 5, 1, 4, 0, 3, 6, 4],
+            propertiesData: [0.2, 0.6, 0.8],
+        },
+    ],
+};
+SimgridArrayInput.parameters = parameters;
+
+export const Simgrid2x = Template.bind({});
+Simgrid2x.args = {
+    ...defaultProps,
+    id: "grid-3d",
+    layers: [
+        axes,
+        {
+            ...grid3dLayer,
+            pointsData: "vtk-grid/Simgrid2x_points.json",
+            polysData: "vtk-grid/Simgrid2x_polys.json",
+            propertiesData: "vtk-grid/Simgrid2x_scalar.json",
+        },
+    ],
+};
+Simgrid2x.parameters = parameters;
+
+export const Simgrid4x = Template.bind({});
+Simgrid4x.args = {
+    ...defaultProps,
+    id: "grid-3d",
+    layers: [
+        axes,
+        {
+            ...grid3dLayer,
+            pointsData: "vtk-grid/Simgrid4x_points.json",
+            polysData: "vtk-grid/Simgrid4x_polys.json",
+            propertiesData: "vtk-grid/Simgrid4x_scalar.json",
+        },
+    ],
+};
+Simgrid4x.parameters = parameters;
+
+export const Simgrid8xIJonly = Template.bind({});
+Simgrid8xIJonly.args = {
+    ...defaultProps,
+    id: "grid-3d",
+    layers: [
+        axes,
+        {
+            ...grid3dLayer,
+            pointsData: "vtk-grid/Simgrid8xIJonly_points.json",
+            polysData: "vtk-grid/Simgrid8xIJonly_polys.json",
+            propertiesData: "vtk-grid/Simgrid8xIJonly_scalar.json",
+        },
+    ],
+};
+Simgrid8xIJonly.parameters = parameters;
+
+// // Intersection story.
+// const intersection_axes = {
+//     "@@type": "AxesLayer",
+//     id: "axes-layer2",
+//     bounds: [463256, 5930542.5, -9060, 464465, 5932768, -7999],
+// };
+
+// const intersection = {
+//     "@@type": "Grid3DLayer",
+//     id: "Grid3DLayer",
+//     pointsData: "vtk-grid/intersection_points.json",
+//     polysData: "vtk-grid/intersection_polys.json",
+//     propertiesData: "vtk-grid/intersection_scalar.json",
+//     material: true,
+//     colorMapName: "Rainbow",
+//     scaleZ: 5,
+// };
+
+// export const Intersection = Template.bind({});
+// Intersection.args = {
+//     ...defaultProps,
+//     id: "grid-3d",
+//     layers: [intersection_axes, intersection],
+// };
+
+// Intersection.parameters = {
+//     docs: {
+//         description: {
+//             story: "3D grid intersection geometry using vtk polydata format.",
+//         },
+//         inlineStories: false,
+//         iframeHeight: 500,
+//     },
+// };

package/src/layers/grid3d/grid3dLayer.ts

@@ -0,0 +1,248 @@
+import { CompositeLayer, Color } from "@deck.gl/core/typed";
+import privateLayer, { Material } from "./privateLayer";
+import { ExtendedLayerProps, colorMapFunctionType } from "../utils/layerTools";
+import { makeFullMesh } from "./webworker";
+import { isEqual } from "lodash";
+import { load, JSONLoader } from "@loaders.gl/core";
+
+export type WebWorkerParams = {
+    points: number[];
+    polys: number[];
+    properties: number[];
+    isZIncreasingDownwards: boolean;
+};
+
+function GetBBox(
+    points: number[],
+    isZIncreasingDownwards: boolean
+): [number, number, number, number, number, number] {
+    let xmax = -99999999;
+    let ymax = -99999999;
+    let zmax = -99999999;
+
+    let xmin = 99999999;
+    let ymin = 99999999;
+    let zmin = 99999999;
+
+    const z_sign = isZIncreasingDownwards ? -1 : 1;
+
+    for (let i = 0; i < points.length / 3; i++) {
+        xmax = points[3 * i + 0] > xmax ? points[3 * i + 0] : xmax;
+        xmin = points[3 * i + 0] < xmin ? points[3 * i + 0] : xmin;
+
+        ymax = points[3 * i + 1] > ymax ? points[3 * i + 1] : ymax;
+        ymin = points[3 * i + 1] < ymin ? points[3 * i + 1] : ymin;
+
+        zmax = points[3 * i + 2] > zmax ? points[3 * i + 2] : zmax;
+        zmin = points[3 * i + 2] < zmin ? points[3 * i + 2] : zmin;
+    }
+    return [xmin, ymin, zmin * z_sign, xmax, ymax, zmax * z_sign];
+}
+
+async function load_data(
+    pointsData: string | number[],
+    polysData: string | number[],
+    propertiesData: string | number[]
+) {
+    const points = Array.isArray(pointsData)
+        ? pointsData
+        : await load(pointsData as string, JSONLoader);
+
+    const polys = Array.isArray(polysData)
+        ? polysData
+        : await load(polysData as string, JSONLoader);
+
+    const properties = Array.isArray(propertiesData)
+        ? propertiesData
+        : await load(propertiesData as string, JSONLoader);
+
+    return Promise.all([points, polys, properties]);
+}
+
+export interface Grid3DLayerProps<D> extends ExtendedLayerProps<D> {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    setReportedBoundingBox?: any;
+
+    /**  Url or native javascript array. Set of points.
+     * [x1, y1, z1, x2, y2, z2, ...]
+     */
+    pointsData: string | number[];
+
+    /**  Url or native javascript array.
+     * For each polygon ["number of points in poly", p1, , p2 ... ]
+     * Example One polygn ith 4 poitns and one with 3 points.
+     * [4, 3, 1, 9, 77, 3, 6, 44, 23]
+     */
+    polysData: string | number[];
+
+    /**  Url or native javascript array..
+     *  A scalar property for each polygon.
+     * [0.23, 0.11. 0.98, ...]
+     */
+    propertiesData: string | number[];
+
+    /**  Name of color map. E.g "PORO"
+     */
+    colorMapName: string;
+
+    /**  Use color map in this range.
+     */
+    colorMapRange?: [number, number];
+
+    /** Clamp colormap to this color at ends.
+     *   Given as array of three values (r,g,b) e.g: [255, 0, 0]
+     *   If not set or set to true, it will clamp to color map min and max values.
+     *   If set to false the clamp color will be completely transparent.
+     */
+    colorMapClampColor: Color | undefined | boolean;
+
+    /**  Optional function property.
+     * 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]
+     */
+    colorMapFunction?: colorMapFunctionType | false;
+
+    /** 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],
+     *       }
+     */
+    material: Material;
+
+    /** 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;
+}
+
+const defaultProps = {
+    "@@type": "Grid3DLayer",
+    name: "Grid 3D",
+    id: "grid-3d-layer",
+    visible: true,
+    material: true,
+    colorMapName: "",
+    propertyValueRange: [0.0, 1.0],
+    depthTest: true,
+    ZIncreasingDownwards: true,
+};
+
+export default class Grid3DLayer extends CompositeLayer<
+    Grid3DLayerProps<unknown>
+> {
+    rebuildData(reportBoundingBox: boolean): void {
+        const p = load_data(
+            this.props.pointsData,
+            this.props.polysData,
+            this.props.propertiesData
+        );
+
+        p.then(([points, polys, properties]) => {
+            const bbox = GetBBox(points, this.props.ZIncreasingDownwards);
+
+            // 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 = {
+                points,
+                polys,
+                properties,
+                isZIncreasingDownwards: this.props.ZIncreasingDownwards,
+            };
+
+            webWorker.postMessage(webworkerParams);
+            webWorker.onmessage = (e) => {
+                const [mesh, mesh_lines, propertyValueRange] = e.data;
+                const legend = {
+                    discrete: false,
+                    valueRange: this.props.colorMapRange ?? propertyValueRange,
+                    colorName: this.props.colorMapName,
+                    title: "MapLayer",
+                    colorMapFunction: this.props.colorMapFunction,
+                };
+
+                this.setState({
+                    mesh,
+                    mesh_lines,
+                    propertyValueRange,
+                    legend,
+                });
+
+                if (
+                    typeof this.props.setReportedBoundingBox !== "undefined" &&
+                    reportBoundingBox
+                ) {
+                    this.props.setReportedBoundingBox(bbox);
+                }
+
+                webWorker.terminate();
+            };
+        });
+    }
+
+    initializeState(): void {
+        const reportBoundingBox = true;
+        this.rebuildData(reportBoundingBox);
+    }
+
+    updateState({
+        props,
+        oldProps,
+    }: {
+        props: Grid3DLayerProps<unknown>;
+        oldProps: Grid3DLayerProps<unknown>;
+    }): void {
+        const needs_reload =
+            !isEqual(props.pointsData, oldProps.pointsData) ||
+            !isEqual(props.polysData, oldProps.polysData) ||
+            !isEqual(props.propertiesData, oldProps.propertiesData) ||
+            !isEqual(props.ZIncreasingDownwards, oldProps.ZIncreasingDownwards);
+
+        if (needs_reload) {
+            const reportBoundingBox = false;
+            this.rebuildData(reportBoundingBox);
+        }
+    }
+
+    renderLayers(): [privateLayer?] {
+        if (Object.keys(this.state).length === 0) {
+            return [];
+        }
+
+        const layer = new privateLayer(
+            this.getSubLayerProps({
+                mesh: this.state["mesh"],
+                meshLines: this.state["mesh_lines"],
+                pickable: true,
+                colorMapName: this.props.colorMapName,
+                colorMapRange: this.props.colorMapRange,
+                colorMapClampColor: this.props.colorMapClampColor,
+                colorMapFunction: this.props.colorMapFunction,
+                propertyValueRange: this.state["propertyValueRange"],
+                material: this.props.material,
+                depthTest: this.props.depthTest,
+            })
+        );
+        return [layer];
+    }
+}
+
+Grid3DLayer.layerName = "Grid3DLayer";
+Grid3DLayer.defaultProps = defaultProps as unknown as Grid3DLayerProps<unknown>;