@xeokit/xeokit-sdk 2.4.0-alpha-89 → 2.4.0-alpha-90

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xeokit/xeokit-sdk",
-  "version": "2.4.0-alpha-89",
+  "version": "2.4.0-alpha-90",
   "description": "Web Programming Toolkit for 3D/2D BIM and AEC Graphics",
   "module": "./dist/xeokit-sdk.es.js",
   "main": "./dist/xeokit-sdk.cjs.js",

package/src/viewer/scene/mesh/pick/PickMeshRenderer.js

@@ -152,6 +152,8 @@ PickMeshRenderer.prototype.drawMesh = function (frameCtx, mesh) {
     const r = pickID & 0xFF;
     gl.uniform4f(this._uPickColor, r / 255, g / 255, b / 255, a / 255);
 
+    gl.uniform2fv(this._uPickClipPos, frameCtx.pickClipPos);
+
     if (geometryState.indicesBuf) {
         gl.drawElements(geometryState.primitive, geometryState.indicesBuf.numItems, geometryState.indicesBuf.itemType, 0);
         frameCtx.drawElements++;
@@ -185,6 +187,7 @@ PickMeshRenderer.prototype._allocate = function (mesh) {
     this._aPosition = program.getAttribute("position");
     this._uClippable = program.getLocation("clippable");
     this._uPickColor = program.getLocation("pickColor");
+    this._uPickClipPos = program.getLocation("pickClipPos");
     this._uOffset = program.getLocation("offset");
     if (scene.logarithmicDepthBufferEnabled ) {
         this._uLogDepthBufFC = program.getLocation("logDepthBufFC");

package/src/viewer/scene/mesh/pick/PickMeshShaderSource.js

@@ -2,8 +2,6 @@
  * @author xeolabs / https://github.com/xeolabs
  */
 
-import {WEBGL_INFO} from "../../webglInfo.js";
-
 /**
  * @private
  */
@@ -58,6 +56,16 @@ function buildVertex(mesh) {
         src.push("   mat[2][2] =1.0;");
         src.push("}");
     }
+
+    src.push("uniform vec2 pickClipPos;");
+
+    src.push("vec4 remapClipPos(vec4 clipPos) {");
+    src.push("    clipPos.xy /= clipPos.w;")
+    src.push("    clipPos.xy -= pickClipPos;");
+    src.push("    clipPos.xy *= clipPos.w;")
+    src.push("    return clipPos;")
+    src.push("}");
+
     src.push("void main(void) {");
     src.push("vec4 localPosition = vec4(position, 1.0); ");
     if (quantizedGeometry) {
@@ -84,7 +92,7 @@ function buildVertex(mesh) {
         src.push("vFragDepth = 1.0 + clipPos.w;");
         src.push("isPerspective = float (isPerspectiveMatrix(projMatrix));");
     }
-    src.push("gl_Position = clipPos;");
+    src.push("gl_Position = remapClipPos(clipPos);");
     src.push("}");
     return src;
 }

package/src/viewer/scene/mesh/pick/PickTriangleRenderer.js

@@ -142,6 +142,9 @@ PickTriangleRenderer.prototype.drawMesh = function (frameCtx, mesh) {
     } else {
         this._aPosition.bindArrayBuffer(positionsBuf);
     }
+
+    gl.uniform2fv(this._uPickClipPos, frameCtx.pickClipPos);
+
     pickColorsBuf.bind();
     gl.enableVertexAttribArray(this._aColor.location);
     gl.vertexAttribPointer(this._aColor.location, pickColorsBuf.itemSize, pickColorsBuf.itemType, true, 0, 0); // Normalize
@@ -173,6 +176,7 @@ PickTriangleRenderer.prototype._allocate = function (mesh) {
     }
     this._aPosition = program.getAttribute("position");
     this._aColor = program.getAttribute("color");
+    this._uPickClipPos = program.getLocation("pickClipPos");
     this._uClippable = program.getLocation("clippable");
     this._uOffset = program.getLocation("offset");
     if (scene.logarithmicDepthBufferEnabled ) {

package/src/viewer/scene/mesh/pick/PickTriangleShaderSource.js

@@ -1,7 +1,6 @@
 /**
  * @private
  */
-import {WEBGL_INFO} from "../../webglInfo.js";
 
 class PickTriangleShaderSource {
     constructor(mesh) {
@@ -14,8 +13,6 @@ function buildVertex(mesh) {
     const scene = mesh.scene;
     const clipping = scene._sectionPlanesState.sectionPlanes.length > 0;
     const quantizedGeometry = !!mesh._geometry._state.compressGeometry;
-    const billboard = mesh._state.billboard;
-    const stationary = mesh._state.stationary;
     const src = [];
     src.push('#version 300 es');
     src.push("// Surface picking vertex shader");
@@ -37,6 +34,16 @@ function buildVertex(mesh) {
         src.push("}");
         src.push("out float isPerspective;");
     }
+
+    src.push("uniform vec2 pickClipPos;");
+
+    src.push("vec4 remapClipPos(vec4 clipPos) {");
+    src.push("    clipPos.xy /= clipPos.w;")
+    src.push("    clipPos.xy -= pickClipPos;");
+    src.push("    clipPos.xy *= clipPos.w;")
+    src.push("    return clipPos;")
+    src.push("}");
+
     src.push("out vec4 vColor;");
     if (quantizedGeometry) {
         src.push("uniform mat4 positionsDecodeMatrix;");
@@ -58,7 +65,7 @@ function buildVertex(mesh) {
         src.push("vFragDepth = 1.0 + clipPos.w;");
         src.push("isPerspective = float (isPerspectiveMatrix(projMatrix));");
     }
-    src.push("gl_Position = clipPos;");
+    src.push("gl_Position = remapClipPos(clipPos);");
     src.push("}");
     return src;
 }

package/src/viewer/scene/model/dtx/triangles/renderers/TrianglesDataTexturePickDepthRenderer.js

@@ -21,7 +21,7 @@ export class TrianglesDataTexturePickDepthRenderer {
 
     getValid() {
         return this._hash === this._getHash();
-    };
+    }
 
     _getHash() {
         return this._scene._sectionPlanesState.getHash();
@@ -95,6 +95,7 @@ export class TrianglesDataTexturePickDepthRenderer {
         gl.uniform3fv(this._uCameraEyeRtc, rtcCameraEye);
         gl.uniform1i(this._uRenderPass, renderPass);
         gl.uniform1i(this._uPickInvisible, frameCtx.pickInvisible);
+        gl.uniform2fv(this._uPickClipPos, frameCtx.pickClipPos);
         gl.uniform1f(this._uPickZNear, frameCtx.pickZNear);
         gl.uniform1f(this._uPickZFar, frameCtx.pickZFar);
         gl.uniformMatrix4fv(this._uWorldMatrix, false, rotationMatrixConjugate);
@@ -169,6 +170,7 @@ export class TrianglesDataTexturePickDepthRenderer {
         const program = this._program;
         this._uRenderPass = program.getLocation("renderPass");
         this._uPickInvisible = program.getLocation("pickInvisible");
+        this._uPickClipPos = program.getLocation("pickClipPos");
         this._uWorldMatrix = program.getLocation("worldMatrix");
         this._uViewMatrix = program.getLocation("viewMatrix");
         this._uProjMatrix = program.getLocation("projMatrix");
@@ -258,6 +260,15 @@ export class TrianglesDataTexturePickDepthRenderer {
             src.push("out float isPerspective;");
         }
 
+        src.push("uniform vec2 pickClipPos;");
+
+        src.push("vec4 remapClipPos(vec4 clipPos) {");
+        src.push("    clipPos.xy /= clipPos.w;")
+        src.push("    clipPos.xy -= pickClipPos;");
+        src.push("    clipPos.xy *= clipPos.w;")
+        src.push("    return clipPos;")
+        src.push("}");
+
         src.push("bool isPerspectiveMatrix(mat4 m) {");
         src.push("    return (m[2][3] == - 1.0);");
         src.push("}");
@@ -364,7 +375,7 @@ export class TrianglesDataTexturePickDepthRenderer {
             src.push("vFragDepth = 1.0 + clipPos.w;");
             src.push("isPerspective = float (isPerspectiveMatrix(projMatrix));");
         }
-        src.push("gl_Position = clipPos;");
+        src.push("gl_Position = remapClipPos(clipPos);");
         src.push("  }");
         src.push("}");
         return src;

package/src/viewer/scene/model/dtx/triangles/renderers/TrianglesDataTexturePickMeshRenderer.js

@@ -20,7 +20,7 @@ export class TrianglesDataTexturePickMeshRenderer {
 
     getValid() {
         return this._hash === this._getHash();
-    };
+    }
 
     _getHash() {
         return this._scene._sectionPlanesState.getHash();
@@ -81,6 +81,7 @@ export class TrianglesDataTexturePickMeshRenderer {
             rtcViewMatrix = camera.viewMatrix;
             rtcCameraEye = camera.eye;
         }
+        gl.uniform2fv(this._uPickClipPos, frameCtx.pickClipPos);
         gl.uniformMatrix4fv(this._uSceneModelWorldMatrix, false, rotationMatrixConjugate);
         gl.uniformMatrix4fv(this._uViewMatrix, false, rtcViewMatrix);
         gl.uniformMatrix4fv(this._uProjMatrix, false, camera.projMatrix);
@@ -154,6 +155,7 @@ export class TrianglesDataTexturePickMeshRenderer {
         const program = this._program;
         this._uRenderPass = program.getLocation("renderPass");
         this._uPickInvisible = program.getLocation("pickInvisible");
+        this._uPickClipPos = program.getLocation("pickClipPos");
         this._uSceneModelWorldMatrix = program.getLocation("sceneModelWorldMatrix");
         this._uViewMatrix = program.getLocation("viewMatrix");
         this._uProjMatrix = program.getLocation("projMatrix");
@@ -251,6 +253,15 @@ export class TrianglesDataTexturePickMeshRenderer {
             src.push("out float isPerspective;");
         }
 
+        src.push("uniform vec2 pickClipPos;");
+
+        src.push("vec4 remapClipPos(vec4 clipPos) {");
+        src.push("    clipPos.xy /= clipPos.w;")
+        src.push("    clipPos.xy -= pickClipPos;");
+        src.push("    clipPos.xy *= clipPos.w;")
+        src.push("    return clipPos;")
+        src.push("}");
+
         src.push("bool isPerspectiveMatrix(mat4 m) {");
         src.push("    return (m[2][3] == - 1.0);");
         src.push("}");
@@ -361,7 +372,7 @@ export class TrianglesDataTexturePickMeshRenderer {
             src.push("vFragDepth = 1.0 + clipPos.w;");
             src.push("isPerspective = float (isPerspectiveMatrix(projMatrix));");
         }
-        src.push("gl_Position = clipPos;");
+        src.push("gl_Position = remapClipPos(clipPos);");
         src.push("  }");
         src.push("}");
         return src;

package/src/viewer/scene/model/dtx/triangles/renderers/TrianglesDataTexturePickNormalsFlatRenderer.js

@@ -17,7 +17,7 @@ export class TrianglesDataTexturePickNormalsFlatRenderer {
 
     getValid() {
         return this._hash === this._getHash();
-    };
+    }
 
     _getHash() {
         return this._scene._sectionPlanesState.getHash();
@@ -90,6 +90,7 @@ export class TrianglesDataTexturePickNormalsFlatRenderer {
 
         gl.uniform1i(this._uRenderPass, renderPass);
         gl.uniform1i(this._uPickInvisible, frameCtx.pickInvisible);
+        gl.uniform2fv(this._uPickClipPos, frameCtx.pickClipPos);
 
         gl.uniformMatrix4fv(this._uWorldMatrix, false, model.worldMatrix);
 
@@ -258,6 +259,7 @@ export class TrianglesDataTexturePickNormalsFlatRenderer {
 
         this._uRenderPass = program.getLocation("renderPass");
         this._uPickInvisible = program.getLocation("pickInvisible");
+        this._uPickClipPos = program.getLocation("pickClipPos");
         this._uPositionsDecodeMatrix = program.getLocation("positionsDecodeMatrix");
         this._uWorldMatrix = program.getLocation("worldMatrix");
         this._uViewMatrix = program.getLocation("viewMatrix");
@@ -347,6 +349,16 @@ export class TrianglesDataTexturePickNormalsFlatRenderer {
             src.push("}");
             src.push("out float isPerspective;");
         }
+
+        src.push("uniform vec2 pickClipPos;");
+
+        src.push("vec4 remapClipPos(vec4 clipPos) {");
+        src.push("    clipPos.xy /= clipPos.w;")
+        src.push("    clipPos.xy -= pickClipPos;");
+        src.push("    clipPos.xy *= clipPos.w;")
+        src.push("    return clipPos;")
+        src.push("}");
+
         src.push("out vec4 vWorldPosition;");
         if (clipping) {
             src.push("out int vFlags2;");
@@ -425,7 +437,7 @@ export class TrianglesDataTexturePickNormalsFlatRenderer {
             src.push("vFragDepth = 1.0 + clipPos.w;");
             src.push("isPerspective = float (isPerspectiveMatrix(projMatrix));");
         }
-        src.push("gl_Position = clipPos;");
+        src.push("gl_Position = remapClipPos(clipPos);");
         src.push("  }");
         src.push("}");
         return src;

package/src/viewer/scene/model/dtx/triangles/renderers/TrianglesDataTexturePickNormalsRenderer.js

@@ -17,7 +17,7 @@ export class TrianglesDataTexturePickNormalsRenderer {
 
     getValid() {
         return this._hash === this._getHash();
-    };
+    }
 
     _getHash() {
         return this._scene._sectionPlanesState.getHash();
@@ -75,6 +75,7 @@ export class TrianglesDataTexturePickNormalsRenderer {
         gl.uniform3fv(this._uCameraEyeRtc, originCameraEye);
 
         gl.uniform1i(this._uPickInvisible, frameCtx.pickInvisible);
+        gl.uniform2fv(this._uPickClipPos, frameCtx.pickClipPos);
 
         if (scene.logarithmicDepthBufferEnabled) {
             const logDepthBufFC = 2.0 / (Math.log(camera.project.far + 1.0) / Math.LN2);  // TODO: Far should be from projection matrix?
@@ -157,6 +158,7 @@ export class TrianglesDataTexturePickNormalsRenderer {
 
         this._uRenderPass = program.getLocation("renderPass");
         this._uPickInvisible = program.getLocation("pickInvisible");
+        this._uPickClipPos = program.getLocation("pickClipPos");
 
         this._uSectionPlanes = [];
 
@@ -241,6 +243,15 @@ export class TrianglesDataTexturePickNormalsRenderer {
             src.push("out float isPerspective;");
         }
 
+        src.push("uniform vec2 pickClipPos;");
+
+        src.push("vec4 remapClipPos(vec4 clipPos) {");
+        src.push("    clipPos.xy /= clipPos.w;")
+        src.push("    clipPos.xy -= pickClipPos;");
+        src.push("    clipPos.xy *= clipPos.w;")
+        src.push("    return clipPos;")
+        src.push("}");
+
         src.push("bool isPerspectiveMatrix(mat4 m) {");
         src.push("    return (m[2][3] == - 1.0);");
         src.push("}");
@@ -355,7 +366,7 @@ export class TrianglesDataTexturePickNormalsRenderer {
             src.push("      vWorldPosition = worldPosition;");
             src.push("      vFlags2 = flags2.w;");
         }
-        src.push("gl_Position = clipPos;");
+        src.push("gl_Position = remapClipPos(clipPos);");
         src.push("}");
 
         src.push("}");

package/src/viewer/scene/model/vbo/VBOSceneModelRenderers.js

@@ -10,7 +10,6 @@ const edgesDefaultColor = new Float32Array([0, 0, 0, 1]);
 
 const tempVec4 = math.vec4();
 const tempVec3a = math.vec3();
-const tempVec3b = math.vec3();
 const tempVec3c = math.vec3();
 const tempMat4a = math.mat4();
 
@@ -83,6 +82,18 @@ class VBOSceneModelRenderer {
         return src;
     }
 
+    _addRemapClipPosLines(src) {
+        src.push("uniform vec2 pickClipPos;");
+
+        src.push("vec4 remapClipPos(vec4 clipPos) {");
+        src.push("    clipPos.xy /= clipPos.w;")
+        src.push("    clipPos.xy -= pickClipPos;");
+        src.push("    clipPos.xy *= clipPos.w;")
+        src.push("    return clipPos;")
+        src.push("}");
+        return src;
+    }
+
     getValid() {
         return this._hash === this._getHash();
     }
@@ -216,6 +227,7 @@ class VBOSceneModelRenderer {
         this._aPickColor = program.getAttribute("pickColor");
         this._uPickZNear = program.getLocation("pickZNear");
         this._uPickZFar = program.getLocation("pickZFar");
+        this._uPickClipPos = program.getLocation("pickClipPos");
 
         this._uColorMap = "uColorMap";
         this._uMetallicRoughMap = "uMetallicRoughMap";
@@ -256,7 +268,6 @@ class VBOSceneModelRenderer {
         const program = this._program;
         const lightsState = scene._lightsState;
         const lights = lightsState.lights;
-        const project = scene.camera.project;
 
         program.bind();
 
@@ -283,43 +294,6 @@ class VBOSceneModelRenderer {
                 gl.uniform3fv(this._uLightDir[i], light.dir);
             }
         }
-
-        if (this._withSAO) {
-            const sao = scene.sao;
-            const saoEnabled = sao.possible;
-            if (saoEnabled) {
-                const viewportWidth = gl.drawingBufferWidth;
-                const viewportHeight = gl.drawingBufferHeight;
-                tempVec4[0] = viewportWidth;
-                tempVec4[1] = viewportHeight;
-                tempVec4[2] = sao.blendCutoff;
-                tempVec4[3] = sao.blendFactor;
-                gl.uniform4fv(this._uSAOParams, tempVec4);
-                this._program.bindTexture(this._uOcclusionTexture, frameCtx.occlusionTexture, 0);
-            }
-        }
-
-        if (scene.logarithmicDepthBufferEnabled) {
-            const logDepthBufFC = 2.0 / (Math.log(project.far + 1.0) / Math.LN2);
-            gl.uniform1f(this._uLogDepthBufFC, logDepthBufFC);
-        }
-
-        if (this._uGammaFactor) {
-            gl.uniform1f(this._uGammaFactor, scene.gammaFactor);
-        }
-
-        if (this._uPickInvisible) {
-            gl.uniform1i(this._uPickInvisible, frameCtx.pickInvisible);
-        }
-
-
-        if (this._uShadowViewMatrix) {
-            gl.uniformMatrix4fv(this._uShadowViewMatrix, false, frameCtx.shadowViewMatrix);
-        }
-
-        if (this._uShadowProjMatrix) {
-            gl.uniformMatrix4fv(this._uShadowProjMatrix, false, frameCtx.shadowProjMatrix);
-        }
     }
 
     _makeVAO(state) {
@@ -516,6 +490,10 @@ class VBOSceneModelRenderer {
             gl.uniform1f(this._uPickZFar, frameCtx.pickZFar);
         }
 
+        if (this._uPickClipPos) {
+            gl.uniform2fv(this._uPickClipPos, frameCtx.pickClipPos);
+        }
+
         if (this._uPositionsDecodeMatrix) {
             gl.uniformMatrix4fv(this._uPositionsDecodeMatrix, false, state.positionsDecodeMatrix);
         }

package/src/viewer/scene/model/vbo/pointsBatching/renderers/PointsBatchingPickDepthRenderer.js

@@ -27,6 +27,8 @@ class PointsBatchingPickDepthRenderer extends VBOSceneModelPointBatchingRenderer
 
         this._addMatricesUniformBlockLines(src);
 
+        this._addRemapClipPosLines(src);
+
         src.push("uniform float pointSize;");
         if (pointsMaterial.perspectivePoints) {
             src.push("uniform float nearPlaneHeight;");
@@ -65,7 +67,7 @@ class PointsBatchingPickDepthRenderer extends VBOSceneModelPointBatchingRenderer
         if (scene.logarithmicDepthBufferEnabled) {
            src.push("vFragDepth = 1.0 + clipPos.w;");
         }
-        src.push("gl_Position = clipPos;");
+        src.push("gl_Position = remapClipPos(clipPos);");
         if (pointsMaterial.perspectivePoints) {
             src.push("gl_PointSize = (nearPlaneHeight * pointSize) / clipPos.w;");
             src.push("gl_PointSize = max(gl_PointSize, " + Math.floor(pointsMaterial.minPerspectivePointSize) + ".0);");

package/src/viewer/scene/model/vbo/pointsBatching/renderers/PointsBatchingPickMeshRenderer.js

@@ -30,6 +30,8 @@ class PointsBatchingPickMeshRenderer extends VBOSceneModelPointBatchingRenderer
 
         this._addMatricesUniformBlockLines(src);
 
+        this._addRemapClipPosLines(src);
+
         src.push("uniform float pointSize;");
         if (pointsMaterial.perspectivePoints) {
             src.push("uniform float nearPlaneHeight;");
@@ -71,7 +73,7 @@ class PointsBatchingPickMeshRenderer extends VBOSceneModelPointBatchingRenderer
         if (scene.logarithmicDepthBufferEnabled) {
            src.push("vFragDepth = 1.0 + clipPos.w;");
         }
-        src.push("gl_Position = clipPos;");
+        src.push("gl_Position = remapClipPos(clipPos);");
         if (pointsMaterial.perspectivePoints) {
             src.push("gl_PointSize = (nearPlaneHeight * pointSize) / clipPos.w;");
             src.push("gl_PointSize = max(gl_PointSize, " + Math.floor(pointsMaterial.minPerspectivePointSize) + ".0);");

package/src/viewer/scene/model/vbo/pointsInstancing/renderers/PointsInstancingPickDepthRenderer.js

@@ -35,6 +35,8 @@ class PointsInstancingPickDepthRenderer extends VBOSceneModelPointInstancingRend
 
         this._addMatricesUniformBlockLines(src);
 
+        this._addRemapClipPosLines(src);
+
         src.push("uniform float pointSize;");
         if (pointsMaterial.perspectivePoints) {
             src.push("uniform float nearPlaneHeight;");
@@ -74,10 +76,11 @@ class PointsInstancingPickDepthRenderer extends VBOSceneModelPointInstancingRend
         }
         src.push("  vViewPosition = viewPosition;");
         src.push("vec4 clipPos = projMatrix * viewPosition;");
+        src.push("gl_Position = remapClipPos(clipPos);");
         if (scene.logarithmicDepthBufferEnabled) {
            src.push("vFragDepth = 1.0 + clipPos.w;");
         }
-        src.push("gl_Position = clipPos;");
+        src.push("gl_Position = remapClipPos(clipPos);");
         if (pointsMaterial.perspectivePoints) {
             src.push("gl_PointSize = (nearPlaneHeight * pointSize) / clipPos.w;");
             src.push("gl_PointSize = max(gl_PointSize, " + Math.floor(pointsMaterial.minPerspectivePointSize) + ".0);");

package/src/viewer/scene/model/vbo/pointsInstancing/renderers/PointsInstancingPickMeshRenderer.js

@@ -32,6 +32,8 @@ class PointsInstancingPickMeshRenderer extends VBOSceneModelPointInstancingRende
 
         this._addMatricesUniformBlockLines(src);
 
+        this._addRemapClipPosLines(src);
+
         src.push("uniform float pointSize;");
         if (pointsMaterial.perspectivePoints) {
             src.push("uniform float nearPlaneHeight;");
@@ -73,6 +75,7 @@ class PointsInstancingPickMeshRenderer extends VBOSceneModelPointInstancingRende
             src.push("  vFlags = flags;");
         }
         src.push("vec4 clipPos = projMatrix * viewPosition;");
+        src.push("gl_Position = remapClipPos(clipPos);");
         if (scene.logarithmicDepthBufferEnabled) {
            src.push("vFragDepth = 1.0 + clipPos.w;");
         }

package/src/viewer/scene/model/vbo/trianglesBatching/renderers/TrianglesBatchingPickDepthRenderer.js

@@ -40,6 +40,9 @@ class TrianglesBatchingPickDepthRenderer extends VBOSceneModelTriangleBatchingRe
             src.push("out vec4 vWorldPosition;");
             src.push("out float vFlags;");
         }
+
+        this._addRemapClipPosLines(src);
+
         src.push("out vec4 vViewPosition;");
         src.push("void main(void) {");
 
@@ -65,7 +68,7 @@ class TrianglesBatchingPickDepthRenderer extends VBOSceneModelTriangleBatchingRe
            src.push("vFragDepth = 1.0 + clipPos.w;");
             src.push("isPerspective = float (isPerspectiveMatrix(projMatrix));");
         }
-        src.push("gl_Position = clipPos;");
+        src.push("gl_Position = remapClipPos(clipPos);");
         src.push("  }");
         src.push("}");
         return src;

package/src/viewer/scene/model/vbo/trianglesBatching/renderers/TrianglesBatchingPickMeshRenderer.js

@@ -41,6 +41,8 @@ class TrianglesBatchingPickMeshRenderer extends VBOSceneModelTriangleBatchingRen
             src.push("out float vFlags;");
         }
 
+        this._addRemapClipPosLines(src);
+
         src.push("out vec4 vPickColor;");
 
         src.push("void main(void) {");
@@ -68,7 +70,7 @@ class TrianglesBatchingPickMeshRenderer extends VBOSceneModelTriangleBatchingRen
            src.push("vFragDepth = 1.0 + clipPos.w;");
             src.push("isPerspective = float (isPerspectiveMatrix(projMatrix));");
         }
-        src.push("gl_Position = clipPos;");
+        src.push("gl_Position = remapClipPos(clipPos);");
         src.push("  }");
         src.push("}");
         return src;

package/src/viewer/scene/model/vbo/trianglesBatching/renderers/TrianglesBatchingPickNormalsFlatRenderer.js

@@ -23,6 +23,8 @@ class TrianglesBatchingPickNormalsFlatRenderer extends VBOSceneModelTriangleBatc
 
         this._addMatricesUniformBlockLines(src);
 
+        this._addRemapClipPosLines(src);
+
         if (scene.logarithmicDepthBufferEnabled) {
             src.push("uniform float logDepthBufFC;");
             src.push("out float vFragDepth;");
@@ -56,7 +58,7 @@ class TrianglesBatchingPickNormalsFlatRenderer extends VBOSceneModelTriangleBatc
            src.push("vFragDepth = 1.0 + clipPos.w;");
             src.push("isPerspective = float (isPerspectiveMatrix(projMatrix));");
         }
-        src.push("gl_Position = clipPos;");
+        src.push("gl_Position = remapClipPos(clipPos);");
         src.push("  }");
         src.push("}");
         return src;

package/src/viewer/scene/model/vbo/trianglesBatching/renderers/TrianglesBatchingPickNormalsRenderer.js

@@ -24,6 +24,8 @@ class TrianglesBatchingPickNormalsRenderer extends VBOSceneModelTriangleBatching
 
         this._addMatricesUniformBlockLines(src);
 
+        this._addRemapClipPosLines(src);
+
         if (scene.logarithmicDepthBufferEnabled) {
             src.push("uniform float logDepthBufFC;");
             src.push("out float vFragDepth;");
@@ -68,7 +70,7 @@ class TrianglesBatchingPickNormalsRenderer extends VBOSceneModelTriangleBatching
            src.push("vFragDepth = 1.0 + clipPos.w;");
             src.push("isPerspective = float (isPerspectiveMatrix(projMatrix));");
         }
-        src.push("gl_Position = clipPos;");
+        src.push("gl_Position = remapClipPos(clipPos);");
         src.push("  }");
         src.push("}");
         return src;

package/src/viewer/scene/model/vbo/trianglesInstancing/renderers/TrianglesInstancingPickDepthRenderer.js

@@ -30,6 +30,8 @@ class TrianglesInstancingPickDepthRenderer extends VBOSceneModelTriangleInstanci
 
         this._addMatricesUniformBlockLines(src);
 
+        this._addRemapClipPosLines(src);
+
         if (scene.logarithmicDepthBufferEnabled) {
             src.push("uniform float logDepthBufFC;");
             src.push("out float vFragDepth;");
@@ -72,7 +74,7 @@ class TrianglesInstancingPickDepthRenderer extends VBOSceneModelTriangleInstanci
             src.push("vFragDepth = 1.0 + clipPos.w;");
             src.push("isPerspective = float (isPerspectiveMatrix(projMatrix));");
         }
-        src.push("gl_Position = clipPos;");
+        src.push("gl_Position = remapClipPos(clipPos);");
         src.push("}");
         src.push("}");
         return src;

package/src/viewer/scene/model/vbo/trianglesInstancing/renderers/TrianglesInstancingPickMeshRenderer.js

@@ -29,6 +29,8 @@ class TrianglesInstancingPickMeshRenderer extends VBOSceneModelTriangleInstancin
 
         this._addMatricesUniformBlockLines(src);
 
+        this._addRemapClipPosLines(src);
+
         if (scene.logarithmicDepthBufferEnabled) {
             src.push("uniform float logDepthBufFC;");
             src.push("out float vFragDepth;");
@@ -73,7 +75,7 @@ class TrianglesInstancingPickMeshRenderer extends VBOSceneModelTriangleInstancin
            src.push("vFragDepth = 1.0 + clipPos.w;");
             src.push("isPerspective = float (isPerspectiveMatrix(projMatrix));");
         }
-        src.push("gl_Position = clipPos;");
+        src.push("gl_Position = remapClipPos(clipPos);");
         src.push("}");
         src.push("}");
         return src;

package/src/viewer/scene/model/vbo/trianglesInstancing/renderers/TrianglesInstancingPickNormalsFlatRenderer.js

@@ -27,6 +27,8 @@ class TrianglesInstancingPickNormalsFlatRenderer extends VBOSceneModelTriangleIn
 
         this._addMatricesUniformBlockLines(src);
 
+        this._addRemapClipPosLines(src);
+
         if (scene.logarithmicDepthBufferEnabled) {
             src.push("uniform float logDepthBufFC;");
             src.push("out float vFragDepth;");
@@ -65,7 +67,7 @@ class TrianglesInstancingPickNormalsFlatRenderer extends VBOSceneModelTriangleIn
             src.push("vFlags = flags;");
         }
 
-        src.push("gl_Position = clipPos;");
+        src.push("gl_Position = remapClipPos(clipPos);");
         src.push("}");
         src.push("}");
         return src;

package/src/viewer/scene/model/vbo/trianglesInstancing/renderers/TrianglesInstancingPickNormalsRenderer.js

@@ -31,6 +31,8 @@ class TrianglesInstancingPickNormalsRenderer extends VBOSceneModelTriangleInstan
 
         this._addMatricesUniformBlockLines(src);
 
+        this._addRemapClipPosLines(src);
+
         if (scene.logarithmicDepthBufferEnabled) {
             src.push("uniform float logDepthBufFC;");
             src.push("out float vFragDepth;");
@@ -79,7 +81,7 @@ class TrianglesInstancingPickNormalsRenderer extends VBOSceneModelTriangleInstan
            src.push("vFragDepth = 1.0 + clipPos.w;");
             src.push("isPerspective = float (isPerspectiveMatrix(projMatrix));");
         }
-        src.push("gl_Position = clipPos;");
+        src.push("gl_Position = remapClipPos(clipPos);");
         src.push("}");
         src.push("}");
         return src;

package/src/viewer/scene/webgl/RenderBuffer.js

@@ -167,7 +167,7 @@ class RenderBuffer {
 
     read(pickX, pickY, glFormat = null, glType = null, arrayType = Uint8Array, arrayMultiplier = 4) {
         const x = pickX;
-        const y = (this.buffer.height || this.gl.drawingBufferHeight) - pickY;
+        const y = this.buffer.height ? (this.buffer.height - pickY - 1) : (this.gl.drawingBufferHeight - pickY);
         const pix = new arrayType(arrayMultiplier);
         const gl = this.gl;
         gl.readPixels(x, y, 1, 1, glFormat || gl.RGBA, glType || gl.UNSIGNED_BYTE, pix, 0);