performance: Apply flag "ZIncreasingDownwards" in vertex shaders for …

…relevant layers. #1724 (#1737)

typescript/packages/subsurface-viewer/src/layers/triangle/fragment.fs.glsl.ts

@@ -14,52 +14,18 @@ in vec4 position_commonspace;
 in vec3 worldPos;
 in float property;
 
-out vec4 fragColor;
-
 uniform sampler2D colormap;
 uniform vec4 uColor;
 uniform bool smoothShading;
 
 void main(void) {
-   //geometry.uv = vTexCoord;
-
    vec3 normal = normals_commonspace;
 
    if (!smoothShading) {
       normal = normalize(cross(dFdx(position_commonspace.xyz), dFdy(position_commonspace.xyz)));
    } 
-   
-   //Picking pass.
-   if (picking_uActive) {
-      // Readout is surface height (z value).
-      float range = 10000.0;  // May represent depths in range 0 - 10000 meter.
-
-      // Express in 255 system.
-      float depth = abs(worldPos.z);
-      float depthScaled = (256.0 * 256.0 * 256.0) * (depth / range); // scaled to within max range in 256 system.
-
-      float r = 0.0;
-      float g = 0.0;
-      float b = 0.0;
-
-      if (depthScaled >= (256.0 * 256.0) - 1.0) {
-         r = floor(depthScaled / (256.0 * 256.0));
-         depthScaled -= r * (256.0 * 256.0);
-      }
-
-      if (depthScaled >= 256.0 - 1.0) {
-         g = floor(depthScaled / 256.0);
-         depthScaled -= g * 256.0;
-      }
-
-      b = floor(depthScaled);
-
-      fragColor = vec4(r / 255.0, g / 255.0, b / 255.0,  1.0);
-      return;
-   }
 
    vec4 color = uColor;
-
    bool is_contours = contourReferencePoint != -1.0 && contourInterval != -1.0;
    if (is_contours) {
       // Contours are made of either depths or properties.
@@ -76,9 +42,8 @@ void main(void) {
 
    // Use normal lighting. This has no effect if "material" property is not set.
    vec3 lightColor = getPhongLightColor(color.rgb, cameraPosition, position_commonspace.xyz, normal);
-   fragColor = vec4(lightColor, 1.0);
-
-   DECKGL_FILTER_COLOR(fragColor, geometry);
+   gl_FragColor = vec4(lightColor, 1.0);
+   DECKGL_FILTER_COLOR(gl_FragColor, geometry);
 }
 `;
 

typescript/packages/subsurface-viewer/src/layers/triangle/privateTriangleLayer.ts

@@ -58,6 +58,7 @@ export interface PrivateTriangleLayerProps extends ExtendedLayerProps {
     color: [number, number, number];
     smoothShading: boolean;
     depthTest: boolean;
+    ZIncreasingDownwards: boolean;
 }
 
 const defaultProps = {
@@ -68,6 +69,7 @@ const defaultProps = {
     color: [100, 100, 255],
     coordinateSystem: COORDINATE_SYSTEM.CARTESIAN,
     depthTest: true,
+    ZIncreasingDownwards: true,
 };
 
 // This is a private layer used only by the composite TriangleLayer
@@ -159,12 +161,18 @@ export default class PrivateTriangleLayer extends Layer<PrivateTriangleLayerProp
                 contourInterval,
                 smoothShading,
                 uColor,
+                ZIncreasingDownwards: this.props.ZIncreasingDownwards,
             })
             .draw();
         gl.disable(GL.POLYGON_OFFSET_FILL);
 
         if (this.props.gridLines) {
-            lineModel.draw();
+            lineModel
+                .setUniforms({
+                    ...uniforms,
+                    ZIncreasingDownwards: this.props.ZIncreasingDownwards,
+                })
+                .draw();
         }
 
         if (!this.props.depthTest) {
@@ -186,16 +194,12 @@ export default class PrivateTriangleLayer extends Layer<PrivateTriangleLayerProp
         }
 
         const layer_properties: PropertyDataType[] = [];
-
-        // Note these colors are in the  0-255 range.
-        const r = info.color[0] * 256 * 256;
-        const g = info.color[1] * 256;
-        const b = info.color[2] * 1;
-
-        const depthRange = 10000;
-        const depth = depthRange * ((r + g + b) / (256 * 256 * 256));
-
-        layer_properties.push(createPropertyData("Depth", depth));
+        if (typeof info.coordinate?.[2] !== "undefined") {
+            const depth = this.props.ZIncreasingDownwards
+                ? -info.coordinate[2]
+                : info.coordinate[2];
+            layer_properties.push(createPropertyData("Depth", depth));
+        }
 
         return {
             ...info,

typescript/packages/subsurface-viewer/src/layers/triangle/triangleLayer.ts

@@ -16,8 +16,7 @@ export type Params = {
 
 async function loadData(
     pointsData: string | number[],
-    triangleData: string | number[],
-    ZIncreasingDownwards: boolean
+    triangleData: string | number[]
 ) {
     // Keep
     //const t0 = performance.now();
@@ -41,12 +40,6 @@ async function loadData(
         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)) {
@@ -163,11 +156,7 @@ export default class TriangleLayer extends CompositeLayer<TriangleLayerProps> {
         const pointsData = this.props.pointsData;
         const triangleData = this.props.triangleData;
 
-        const p = loadData(
-            pointsData,
-            triangleData,
-            this.props.ZIncreasingDownwards
-        );
+        const p = loadData(pointsData, triangleData);
 
         p.then(([vertexArray, indexArray]) => {
             // Using inline web worker for calculating the triangle mesh from
@@ -289,6 +278,7 @@ export default class TriangleLayer extends CompositeLayer<TriangleLayerProps> {
                 material: this.props.material,
                 smoothShading: this.props.smoothShading,
                 depthTest: this.props.depthTest,
+                ZIncreasingDownwards: this.props.ZIncreasingDownwards,
             })
         );
         return [layer];

typescript/packages/subsurface-viewer/src/layers/triangle/vertex.glsl.ts

@@ -10,25 +10,37 @@ 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;
 
+uniform bool ZIncreasingDownwards;
+
+const vec3 pickingColor = vec3(1.0, 1.0, 0.0);
 
 void main(void) {
+   geometry.pickingColor = pickingColor;
+
    cameraPosition = project_uCameraPosition;
 
-   worldPos = positions;
+   vec3 position = positions;
+   position[2] *= ZIncreasingDownwards ? -1.0 : 1.0;
+
+   worldPos = position;
 
    normals_commonspace = normals;
 
    property = properties;
 
-   position_commonspace = vec4(project_position(positions), 0.0);
+   position_commonspace = vec4(project_position(position), 0.0);
    gl_Position = project_common_position_to_clipspace(position_commonspace);
+
+   DECKGL_FILTER_GL_POSITION(gl_Position, geometry);
+
+   vec4 color = vec4(0.0);
+   DECKGL_FILTER_COLOR(color, geometry);
 }
 `;
 

typescript/packages/subsurface-viewer/src/layers/triangle/vertex_lines.glsl.ts

@@ -8,8 +8,13 @@ in vec3 positions;
 
 out vec4 position_commonspace;
 
+uniform bool ZIncreasingDownwards;
+
 void main(void) {
-   vec3 position_commonspace = project_position(positions);
+   vec3 position = positions;
+   position[2] *= ZIncreasingDownwards ? -1.0 : 1.0;
+
+   vec3 position_commonspace = project_position(position);
    gl_Position = project_common_position_to_clipspace(vec4(position_commonspace, 0.0));
 }
 `;