@xeokit/xeokit-sdk 2.6.86-beta.0 → 2.6.87-renderers-refactor-v3

package/src/viewer/scene/webgl/occlusion/OcclusionTester.js

@@ -1,10 +1,9 @@
 import {math} from '../../math/math.js';
-import {Program} from "./../Program.js";
+import {createProgramVariablesState} from "../WebGLRenderer.js";
 import {OcclusionLayer} from "./OcclusionLayer.js";
-import {createRTCViewMat, getPlaneRTCPos} from "../../math/rtcCoords.js";
+import {createRTCViewMat} from "../../math/rtcCoords.js";
 
-const TEST_MODE = false;
-const MARKER_COLOR = math.vec3([1.0, 0.0, 0.0]);
+const MARKER_COLOR = math.vec3([ 255, 0, 0 ]);
 const POINT_SIZE = 20;
 
 const tempVec3a = math.vec3();
@@ -13,39 +12,46 @@ const tempVec3a = math.vec3();
  * Manages occlusion testing. Private member of a Renderer.
  * @private
  */
-class OcclusionTester {
+export class OcclusionTester {
 
-    constructor(scene, renderBufferManager) {
+    constructor(scene) {
 
         this._scene = scene;
 
-        this._renderBufferManager = renderBufferManager;
-
         this._occlusionLayers = {};
         this._occlusionLayersList = [];
         this._occlusionLayersListDirty = false;
 
-        this._shaderSource = null;
-        this._program = null;
-
-        this._shaderSourceHash = null;
-
-        this._shaderSourceDirty = true;         // Need to build shader source code ?
-        this._programDirty = false;             // Need to build shader program ?
+        this._drawable = null;
 
         this._markersToOcclusionLayersMap = {};
 
-        this._onCameraViewMatrix = scene.camera.on("viewMatrix", () => {
-            this._occlusionTestListDirty = true;
-        });
+        const camera = scene.camera;
+        const markOcclusionTestListDirty = () => { this._occlusionTestListDirty = true; };
+        this._onCameraViewMatrix = camera.on("viewMatrix",   markOcclusionTestListDirty);
+        this._onCameraProjMatrix = camera.on("projMatrix",   markOcclusionTestListDirty);
+        this._onCanvasBoundary = scene.canvas.on("boundary", markOcclusionTestListDirty);
+    }
 
-        this._onCameraProjMatrix = scene.camera.on("projMatrix", () => {
-            this._occlusionTestListDirty = true;
-        });
+    _addMarker(marker, originHash) {
+        if (! this._occlusionLayers[originHash]) {
+            this._occlusionLayers[originHash] = new OcclusionLayer(marker.origin);
+            this._occlusionLayersListDirty = true;
+        }
+        const occlusionLayer = this._occlusionLayers[originHash];
+        occlusionLayer.addMarker(marker);
+        this._markersToOcclusionLayersMap[marker.id] = occlusionLayer;
+    }
 
-        this._onCanvasBoundary = scene.canvas.on("boundary", () => {
-            this._occlusionTestListDirty = true;
-        });
+    _removeMarker(occlusionLayer, marker) {
+        if (occlusionLayer.numMarkers === 1) {
+            occlusionLayer.destroy();
+            delete this._occlusionLayers[occlusionLayer.originHash];
+            this._occlusionLayersListDirty = true;
+        } else {
+            occlusionLayer.removeMarker(marker);
+        }
+        delete this._markersToOcclusionLayersMap[marker.id];
     }
 
     /**
@@ -54,14 +60,7 @@ class OcclusionTester {
      */
     addMarker(marker) {
         const originHash = marker.origin.join();
-        let occlusionLayer = this._occlusionLayers[originHash];
-        if (!occlusionLayer) {
-            occlusionLayer = new OcclusionLayer(this._scene, marker.origin);
-            this._occlusionLayers[occlusionLayer.originHash] = occlusionLayer;
-            this._occlusionLayersListDirty = true;
-        }
-        occlusionLayer.addMarker(marker);
-        this._markersToOcclusionLayersMap[marker.id] = occlusionLayer;
+        this._addMarker(marker, originHash);
         this._occlusionTestListDirty = true;
     }
 
@@ -71,28 +70,14 @@ class OcclusionTester {
      */
     markerWorldPosUpdated(marker) {
         const occlusionLayer = this._markersToOcclusionLayersMap[marker.id];
-        if (!occlusionLayer) {
-            return;
-        }
-        const originHash = marker.origin.join();
-        if (originHash !== occlusionLayer.originHash) {
-            if (occlusionLayer.numMarkers === 1) {
-                occlusionLayer.destroy();
-                delete this._occlusionLayers[occlusionLayer.originHash];
-                this._occlusionLayersListDirty = true;
+        if (occlusionLayer) {
+            const originHash = marker.origin.join();
+            if (originHash !== occlusionLayer.originHash) {
+                this._removeMarker(occlusionLayer, marker);
+                this._addMarker(marker, originHash);
             } else {
-                occlusionLayer.removeMarker(marker);
-            }
-            let newOcclusionLayer = this._occlusionLayers[originHash];
-            if (!newOcclusionLayer) {
-                newOcclusionLayer = new OcclusionLayer(this._scene, marker.origin);
-                this._occlusionLayers[originHash] = newOcclusionLayer;
-                this._occlusionLayersListDirty = true;
+                occlusionLayer.markerWorldPosUpdated(marker);
             }
-            newOcclusionLayer.addMarker(marker);
-            this._markersToOcclusionLayersMap[marker.id] = newOcclusionLayer;
-        } else {
-            occlusionLayer.markerWorldPosUpdated(marker);
         }
     }
 
@@ -102,18 +87,10 @@ class OcclusionTester {
      */
     removeMarker(marker) {
         const originHash = marker.origin.join();
-        let occlusionLayer = this._occlusionLayers[originHash];
-        if (!occlusionLayer) {
-            return;
-        }
-        if (occlusionLayer.numMarkers === 1) {
-            occlusionLayer.destroy();
-            delete this._occlusionLayers[occlusionLayer.originHash];
-            this._occlusionLayersListDirty = true;
-        } else {
-            occlusionLayer.removeMarker(marker);
+        const occlusionLayer = this._occlusionLayers[originHash];
+        if (occlusionLayer) {
+            this._removeMarker(occlusionLayer, marker);
         }
-        delete this._markersToOcclusionLayersMap[marker.id];
     }
 
     /**
@@ -126,32 +103,125 @@ class OcclusionTester {
     }
 
     /**
-     * Binds the render buffer. After calling this, the caller then renders object silhouettes to the render buffer,
-     * then calls drawMarkers() and doOcclusionTest().
+     * Draws {@link Marker}s to the render buffer.
      */
-    bindRenderBuf() {
-
-        const shaderSourceHash = [this._scene.canvas.canvas.id, this._scene._sectionPlanesState.getHash()].join(";");
+    drawMarkers() {
 
-        if (shaderSourceHash !== this._shaderSourceHash) {
-            this._shaderSourceHash = shaderSourceHash;
-            this._shaderSourceDirty = true;
-        }
+        const scene = this._scene;
+        const canvas = scene.canvas;
+        const gl = canvas.gl;
+        const sectionPlanesState = scene._sectionPlanesState;
+        const shaderSourceHash = [canvas.canvas.id, sectionPlanesState.getHash()].join(";");
 
-        if (this._shaderSourceDirty) {
-            this._buildShaderSource();
-            this._shaderSourceDirty = false;
-            this._programDirty = true;
-        }
+        if ((! this._drawable) || (shaderSourceHash !== this._drawable.shaderSourceHash)) {
+            if (this._drawable) {
+                this._drawable.destroy();
+            }
 
-        if (this._programDirty) {
-            this._buildProgram();
-            this._programDirty = false;
-            this._occlusionTestListDirty = true;
+            const programVariablesState = createProgramVariablesState();
+
+            const programVariables = programVariablesState.programVariables;
+            const viewMatrix = programVariables.createUniform("mat4",  "viewMatrix");
+            const projMatrix = programVariables.createUniform("mat4",  "projMatrix");
+            const position   = programVariables.createAttribute("vec3", "position");
+            const outColor   = programVariables.createOutput("vec4", "outColor");
+            const clipPos    = "clipPos";
+
+            const [program, errors] = programVariablesState.buildProgram(
+                gl,
+                "OcclusionTester",
+                {
+                    sectionPlanesState: sectionPlanesState,
+                    getLogDepth: scene.logarithmicDepthBufferEnabled && (vFragDepth => vFragDepth),
+                    clippableTest: () => "true",
+                    getVertexData: () => {
+                        const src = [ ];
+                        src.push(`vec4 worldPosition = vec4(${position}, 1.0);`);
+                        src.push(`vec4 ${clipPos} = ${projMatrix} * ${viewMatrix} * worldPosition;`);
+                        if ((! scene.logarithmicDepthBufferEnabled) && (scene.markerZOffset < 0.000)) {
+                            src.push(`${clipPos}.z += ${scene.markerZOffset};`);
+                        }
+                        return src;
+                    },
+                    worldPositionAttribute: "worldPosition",
+                    getPointSize: () => "20.0",
+                    clipPos: clipPos,
+                    appendFragmentOutputs: (src) => src.push(`${outColor} = vec4(1.0, 0.0, 0.0, 1.0);`)
+                });
+
+            if (errors) {
+                console.error(errors.join("\n"));
+                throw errors.join("\n");
+            } else {
+                this._occlusionTestListDirty = true;
+                this._drawable = {
+                    shaderSourceHash: shaderSourceHash,
+                    destroy: () => program.destroy(),
+                    drawCall: () => {
+                        const camera = scene.camera;
+                        const project = camera.project;
+
+                        program.bind();
+
+                        projMatrix.setInputValue(project.matrix);
+
+                        const boundary = canvas.boundary;
+                        const canvasWidth = boundary[2];
+                        const canvasHeight = boundary[3];
+                        const near = camera.perspective.near; // Assume near enough to ortho near
+                        const markerInView = marker => {
+                            const viewPos = marker.viewPos;
+                            const canvasPos = marker.canvasPos;
+                            const canvasX = canvasPos[0];
+                            const canvasY = canvasPos[1];
+                            return (viewPos[2] <= -near) && (canvasX >= -10) && (canvasY >= -10) && (canvasX <= canvasWidth + 10) && (canvasY <= canvasHeight + 10);
+                        };
+
+                        this._occlusionLayersList.forEach(occlusionLayer => {
+                            occlusionLayer.update(gl, markerInView);
+
+                            const culled = sectionPlanesState.sectionPlanes.some((sectionPlane, i) => {
+                                const intersect = sectionPlane.active ? math.planeAABB3Intersect(sectionPlane.dir, sectionPlane.dist, occlusionLayer.aabb) : 1;
+                                const outside = (intersect === -1);
+                                occlusionLayer.sectionPlanesActive[i] = (intersect === 0); // if outside, then sectionPlanesActive won't be even tested
+                                return outside;
+                            });
+
+                            if (! culled) {
+                                const origin = occlusionLayer.origin;
+
+                                viewMatrix.setInputValue(createRTCViewMat(camera.viewMatrix, origin));
+
+                                program.inputSetters.setUniforms(
+                                    null,
+                                    {
+                                        view: { far: project.far },
+                                        mesh: {
+                                            origin: origin,
+                                            renderFlags: { sectionPlanesActivePerLayer: occlusionLayer.sectionPlanesActive }
+                                        }
+                                    });
+
+                                position.setInputValue(occlusionLayer.positionsBuf);
+
+                                const indicesBuf = occlusionLayer.indicesBuf;
+                                indicesBuf.bind();
+                                gl.drawElements(gl.POINTS, indicesBuf.numItems, indicesBuf.itemType, 0);
+                            }
+                        });
+                    }
+                };
+            }
         }
 
         if (this._occlusionLayersListDirty) {
-            this._buildOcclusionLayersList();
+            let numOcclusionLayers = 0;
+            for (let originHash in this._occlusionLayers) {
+                if (this._occlusionLayers.hasOwnProperty(originHash)) {
+                    this._occlusionLayersList[numOcclusionLayers++] = this._occlusionLayers[originHash];
+                }
+            }
+            this._occlusionLayersList.length = numOcclusionLayers;
             this._occlusionLayersListDirty = false;
         }
 
@@ -163,264 +233,33 @@ class OcclusionTester {
             this._occlusionTestListDirty = false;
         }
 
-        if (!TEST_MODE) {
-            this._readPixelBuf = this._renderBufferManager.getRenderBuffer("occlusionReadPix");
-            this._readPixelBuf.bind();
-            this._readPixelBuf.clear();
-        }
-    }
-
-    _buildOcclusionLayersList() {
-        let numOcclusionLayers = 0;
-        for (let originHash in this._occlusionLayers) {
-            if (this._occlusionLayers.hasOwnProperty(originHash)) {
-                this._occlusionLayersList[numOcclusionLayers++] = this._occlusionLayers[originHash];
-            }
-        }
-        this._occlusionLayersList.length = numOcclusionLayers;
-    }
-
-    _buildShaderSource() {
-        this._shaderSource = {
-            vertex: this._buildVertexShaderSource(),
-            fragment: this._buildFragmentShaderSource()
-        };
-    }
-
-    _buildVertexShaderSource() {
-        const scene = this._scene;
-        const clipping = scene._sectionPlanesState.sectionPlanes.length > 0;
-        const src = [];
-        src.push("#version 300 es");
-        src.push("// OcclusionTester vertex shader");
-        
-        src.push("in vec3 position;");
-        src.push("uniform mat4 modelMatrix;");
-        src.push("uniform mat4 viewMatrix;");
-        src.push("uniform mat4 projMatrix;");
-        if (scene.logarithmicDepthBufferEnabled) {
-            src.push("uniform float logDepthBufFC;");
-            src.push("out float vFragDepth;");
-        }
-        if (clipping) {
-            src.push("out vec4 vWorldPosition;");
-        }
-        src.push("void main(void) {");
-        src.push("vec4 worldPosition = vec4(position, 1.0); ");
-        src.push("   vec4 viewPosition = viewMatrix * worldPosition;");
-        if (clipping) {
-            src.push("   vWorldPosition = worldPosition;");
-        }
-        src.push("   vec4 clipPos = projMatrix * viewPosition;");
-        src.push("   gl_PointSize = " + POINT_SIZE + ".0;");
-        if (scene.logarithmicDepthBufferEnabled) {
-           src.push("vFragDepth = 1.0 + clipPos.w;");
-        } else {
-            if (scene.markerZOffset < 0.000) {
-                src.push("clipPos.z += " + scene.markerZOffset + ";");
-            }
-        }
-        src.push("   gl_Position = clipPos;");
-        src.push("}");
-        return src;
-    }
-
-    _buildFragmentShaderSource() {
-        const scene = this._scene;
-        const sectionPlanesState = scene._sectionPlanesState;
-        const clipping = sectionPlanesState.sectionPlanes.length > 0;
-        const src = [];
-        src.push("#version 300 es");
-        src.push("// OcclusionTester fragment shader");
-        
-        src.push("#ifdef GL_FRAGMENT_PRECISION_HIGH");
-        src.push("precision highp float;");
-        src.push("precision highp int;");
-        src.push("#else");
-        src.push("precision mediump float;");
-        src.push("precision mediump int;");
-        src.push("#endif");
-        if (scene.logarithmicDepthBufferEnabled) {
-            src.push("uniform float logDepthBufFC;");
-            src.push("in float vFragDepth;");
-        }
-        if (clipping) {
-            src.push("in vec4 vWorldPosition;");
-            for (let i = 0; i < sectionPlanesState.sectionPlanes.length; i++) {
-                src.push("uniform bool sectionPlaneActive" + i + ";");
-                src.push("uniform vec3 sectionPlanePos" + i + ";");
-                src.push("uniform vec3 sectionPlaneDir" + i + ";");
-            }
-        }
-        src.push("out vec4 outColor;");
-        src.push("void main(void) {");
-        if (clipping) {
-            src.push("  float dist = 0.0;");
-            for (var i = 0; i < sectionPlanesState.sectionPlanes.length; i++) {
-                src.push("if (sectionPlaneActive" + i + ") {");
-                src.push("   dist += clamp(dot(-sectionPlaneDir" + i + ".xyz, vWorldPosition.xyz - sectionPlanePos" + i + ".xyz), 0.0, 1000.0);");
-                src.push("}");
-            }
-            src.push("  if (dist > 0.0) { discard; }");
-        }
-        if (scene.logarithmicDepthBufferEnabled) {
-            src.push("gl_FragDepth = log2( vFragDepth ) * logDepthBufFC * 0.5;");
-        }
-        src.push("   outColor = vec4(1.0, 0.0, 0.0, 1.0); ");
-        src.push("}");
-        return src;
-    }
-
-    _buildProgram() {
-        if (this._program) {
-            this._program.destroy();
-        }
-        const scene = this._scene;
-        const gl = scene.canvas.gl;
-        const sectionPlanesState = scene._sectionPlanesState;
-        this._program = new Program(gl, this._shaderSource);
-        if (this._program.errors) {
-            this.errors = this._program.errors;
-            return;
-        }
-        const program = this._program;
-        this._uViewMatrix = program.getLocation("viewMatrix");
-        this._uProjMatrix = program.getLocation("projMatrix");
-        this._uSectionPlanes = [];
-        const sectionPlanes = sectionPlanesState.sectionPlanes;
-        for (let i = 0, len = sectionPlanes.length; i < len; i++) {
-            this._uSectionPlanes.push({
-                active: program.getLocation("sectionPlaneActive" + i),
-                pos: program.getLocation("sectionPlanePos" + i),
-                dir: program.getLocation("sectionPlaneDir" + i)
-            });
-        }
-        this._aPosition = program.getAttribute("position");
-        if (scene.logarithmicDepthBufferEnabled) {
-            this._uLogDepthBufFC = program.getLocation("logDepthBufFC");
-        }
-    }
-
-    /**
-     * Draws {@link Marker}s to the render buffer.
-     */
-    drawMarkers() {
-
-        const scene = this._scene;
-        const gl = scene.canvas.gl;
-        const program = this._program;
-        const sectionPlanesState = scene._sectionPlanesState;
-        const camera = scene.camera;
-        const project = scene.camera.project;
-
-        program.bind();
-
-        gl.uniformMatrix4fv(this._uProjMatrix, false, camera._project._state.matrix);
-
-        if (scene.logarithmicDepthBufferEnabled) {
-            const logDepthBufFC = 2.0 / (Math.log(project.far + 1.0) / Math.LN2);
-            gl.uniform1f(this._uLogDepthBufFC, logDepthBufFC);
-        }
-
-        for (let i = 0, len = this._occlusionLayersList.length; i < len; i++) {
-
-            const occlusionLayer = this._occlusionLayersList[i];
-
-            occlusionLayer.update();
-
-            if (occlusionLayer.culledBySectionPlanes) {
-                continue;
-            }
-
-            const origin = occlusionLayer.origin;
-
-            gl.uniformMatrix4fv(this._uViewMatrix, false, createRTCViewMat(camera.viewMatrix, origin));
-
-            const numSectionPlanes = sectionPlanesState.sectionPlanes.length;
-            if (numSectionPlanes > 0) {
-                const sectionPlanes = sectionPlanesState.sectionPlanes;
-                for (let sectionPlaneIndex = 0; sectionPlaneIndex < numSectionPlanes; sectionPlaneIndex++) {
-                    const sectionPlaneUniforms = this._uSectionPlanes[sectionPlaneIndex];
-                    if (sectionPlaneUniforms) {
-                        const active = occlusionLayer.sectionPlanesActive[sectionPlaneIndex];
-                        gl.uniform1i(sectionPlaneUniforms.active, active ? 1 : 0);
-                        if (active) {
-                            const sectionPlane = sectionPlanes[sectionPlaneIndex];
-                            gl.uniform3fv(sectionPlaneUniforms.pos, getPlaneRTCPos(sectionPlane.dist, sectionPlane.dir, origin, tempVec3a));
-                            gl.uniform3fv(sectionPlaneUniforms.dir, sectionPlane.dir);
-                        }
-                    }
-                }
-            }
-
-            this._aPosition.bindArrayBuffer(occlusionLayer.positionsBuf);
-
-            const indicesBuf = occlusionLayer.indicesBuf;
-            indicesBuf.bind();
-            gl.drawElements(gl.POINTS, indicesBuf.numItems, indicesBuf.itemType, 0);
-        }
+        this._drawable.drawCall();
     }
 
     /**
      * Sets visibilities of {@link Marker}s according to whether or not they are obscured by anything in the render buffer.
      */
-    doOcclusionTest() {
-
-        if (!TEST_MODE) {
-
-            const resolutionScale = this._scene.canvas.resolutionScale;
-
-            const markerR = MARKER_COLOR[0] * 255;
-            const markerG = MARKER_COLOR[1] * 255;
-            const markerB = MARKER_COLOR[2] * 255;
-
-            for (let i = 0, len = this._occlusionLayersList.length; i < len; i++) {
-
-                const occlusionLayer = this._occlusionLayersList[i];
-
-                for (let i = 0; i < occlusionLayer.lenOcclusionTestList; i++) {
-
-                    const marker = occlusionLayer.occlusionTestList[i];
-                    const j = i * 2;
-                    const color = this._readPixelBuf.read(Math.round(occlusionLayer.pixels[j] * resolutionScale), Math.round(occlusionLayer.pixels[j + 1] * resolutionScale));
-                    const visible = (color[0] === markerR) && (color[1] === markerG) && (color[2] === markerB);
-
-                    marker._setVisible(visible);
-                }
+    doOcclusionTest(readColorPixel) {
+        this._occlusionLayersList.forEach(occlusionLayer => {
+            for (let i = 0; i < occlusionLayer.lenOcclusionTestList; i++) {
+                const j = i * 2;
+                const color = readColorPixel(occlusionLayer.pixels[j], occlusionLayer.pixels[j + 1]);
+                occlusionLayer.occlusionTestList[i]._setVisible(math.compareVec3(MARKER_COLOR, color));
             }
-        }
-    }
-
-    /**
-     * Unbinds render buffer.
-     */
-    unbindRenderBuf() {
-        if (!TEST_MODE) {
-            this._readPixelBuf.unbind();
-        }
+        });
     }
 
     /**
      * Destroys this OcclusionTester.
      */
     destroy() {
-        if (this.destroyed) {
-            return;
-        }
-        for (let i = 0, len = this._occlusionLayersList.length; i < len; i++) {
-            const occlusionLayer = this._occlusionLayersList[i];
-            occlusionLayer.destroy();
+        if (! this.destroyed) {
+            this._occlusionLayersList.forEach(layer => layer.destroy());
+            this._drawable && this._drawable.destroy();
+            this._scene.camera.off(this._onCameraViewMatrix);
+            this._scene.camera.off(this._onCameraProjMatrix);
+            this._scene.canvas.off(this._onCanvasBoundary);
+            this.destroyed = true;
         }
-
-        if (this._program) {
-            this._program.destroy();
-        }
-
-        this._scene.camera.off(this._onCameraViewMatrix);
-        this._scene.camera.off(this._onCameraProjMatrix);
-        this._scene.canvas.off(this._onCanvasBoundary);
-        this.destroyed = true;
     }
 }
-
-export {OcclusionTester};

package/src/viewer/utils/os.js

@@ -6,6 +6,15 @@ const os = {
 
         return isIphone && isSafari;
     },
+    isIphoneOrIpadSafari() {
+        const userAgent = window.navigator.userAgent;
+        const isIphoneOrIpad = /iPhone|iPad/i.test(userAgent) || (
+            // iPad detection: Check for touch support and macOS-like user agent
+            /Macintosh/i.test(userAgent) && navigator.maxTouchPoints && navigator.maxTouchPoints > 2
+        );
+        const isSafari = /Safari/i.test(userAgent) && !/Chrome/i.test(userAgent);
+        return isIphoneOrIpad && isSafari;
+    },
     isTouchDevice() {
         return (
             'ontouchstart' in window || //works for most devices

package/dist/xeokit-sdk.es5.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"xeokit-sdk.es5.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/xeokit-sdk.min.es5.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"xeokit-sdk.min.es5.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}