@xeokit/xeokit-sdk 2.4.0-alpha-81 → 2.4.0-alpha-83

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

@@ -0,0 +1,313 @@
+import {math} from "../math/math.js";
+import {createRTCViewMat} from "../math/rtcCoords.js";
+
+/**
+ * @desc Provides rendering context to {@link Drawable"}s as xeokit renders them for a frame.
+ *
+ * Also creates RTC viewing and picking matrices, caching and reusing matrices within each frame.
+ *
+ * @private
+ */
+class FrameContext {
+
+    constructor(scene) {
+
+        this._scene = scene;
+
+        this._matPool = [];
+        this._matPoolNextFreeIndex = 0;
+
+        this._rtcViewMats = {};
+        this._rtcPickViewMats = {};
+
+        this.reset();
+    }
+
+    /**
+     * Called by the renderer before each frame.
+     * @private
+     */
+    reset() {
+
+        this._matPoolNextFreeIndex = 0;
+        this._rtcViewMats = {};
+        this._rtcPickViewMats = {};
+
+        /**
+         * The WebGL rendering context.
+         * @type {WebGLRenderingContext}
+         */
+        this.gl = this._scene.canvas.gl;
+
+        /**
+         * ID of the last {@link WebGLProgram} that was bound during the current frame.
+         * @property lastProgramId
+         * @type {Number}
+         */
+        this.lastProgramId = null;
+
+        /**
+         * Whether to render a physically-based representation for triangle surfaces.
+         *
+         * When ````false````, we'll render them with a fast vertex-shaded Gouraud-shaded representation, which
+         * is great for zillions of objects.
+         *
+         * When ````true````, we'll render them at a better visual quality, using smooth, per-fragment shading
+         * and a more realistic lighting model.
+         *
+         * @property quality
+         * @default false
+         * @type {Boolean}
+         */
+        this.pbrEnabled = false;
+
+        /**
+         * Whether to render color textures for triangle surfaces.
+         *
+         * @property quality
+         * @default false
+         * @type {Boolean}
+         */
+        this.colorTextureEnabled = false;
+
+        /**
+         * Whether SAO is currently enabled during the current frame.
+         * @property withSAO
+         * @default false
+         * @type {Boolean}
+         */
+        this.withSAO = false;
+
+        /**
+         * Whether backfaces are currently enabled during the current frame.
+         * @property backfaces
+         * @default false
+         * @type {Boolean}
+         */
+        this.backfaces = false;
+
+        /**
+         * The vertex winding order for what we currently consider to be a backface during current
+         * frame: true == "cw", false == "ccw".
+         * @property frontFace
+         * @default true
+         * @type {Boolean}
+         */
+        this.frontface = true;
+
+        /**
+         * The next available texture unit to bind a {@link Texture} to.
+         * @defauilt 0
+         * @property textureUnit
+         * @type {number}
+         */
+        this.textureUnit = 0;
+
+        /**
+         * Performance statistic that counts how many times the renderer has called ````gl.drawElements()```` has been
+         * called so far within the current frame.
+         * @default 0
+         * @property drawElements
+         * @type {number}
+         */
+        this.drawElements = 0;
+
+        /**
+         * Performance statistic that counts how many times ````gl.drawArrays()```` has been called so far within
+         * the current frame.
+         * @default 0
+         * @property drawArrays
+         * @type {number}
+         */
+        this.drawArrays = 0;
+
+        /**
+         * Performance statistic that counts how many times ````gl.useProgram()```` has been called so far within
+         * the current frame.
+         * @default 0
+         * @property useProgram
+         * @type {number}
+         */
+        this.useProgram = 0;
+
+        /**
+         * Statistic that counts how many times ````gl.bindTexture()```` has been called so far within the current frame.
+         * @default 0
+         * @property bindTexture
+         * @type {number}
+         */
+        this.bindTexture = 0;
+
+        /**
+         * Counts how many times the renderer has called ````gl.bindArray()```` so far within the current frame.
+         * @defaulr 0
+         * @property bindArray
+         * @type {number}
+         */
+        this.bindArray = 0;
+
+        /**
+         * Indicates which pass the renderer is currently rendering.
+         *
+         * See {@link Scene/passes:property"}}Scene#passes{{/crossLink}}, which configures how many passes we render
+         * per frame, which typically set to ````2```` when rendering a stereo view.
+         *
+         * @property pass
+         * @type {number}
+         */
+        this.pass = 0;
+
+        /**
+         * The 4x4 viewing transform matrix the renderer is currently using when rendering castsShadows.
+         *
+         * This sets the viewpoint to look from the point of view of each {@link DirLight}
+         * or {@link PointLight} that casts a shadow.
+         *
+         * @property shadowViewMatrix
+         * @type {Number[]}
+         */
+        this.shadowViewMatrix = null;
+
+        /**
+         * The 4x4 viewing projection matrix the renderer is currently using when rendering shadows.
+         *
+         * @property shadowProjMatrix
+         * @type {Number[]}
+         */
+        this.shadowProjMatrix = null;
+
+        /**
+         * The 4x4 viewing transform matrix the renderer is currently using when rendering a ray-pick.
+         *
+         * This sets the viewpoint to look along the ray given to {@link Scene/pick:method"}}Scene#pick(){{/crossLink}}
+         * when picking with a ray.
+         *
+         * @property pickViewMatrix
+         * @type {Number[]}
+         */
+        this.pickViewMatrix = null;
+
+        /**
+         * The 4x4 orthographic projection transform matrix the renderer is currently using when rendering a ray-pick.
+         *
+         * @property pickProjMatrix
+         * @type {Number[]}
+         */
+        this.pickProjMatrix = null;
+
+        /**
+         * Distance to the near clipping plane when rendering depth fragments for GPU-accelerated 3D picking.
+         *
+         * @property pickZNear
+         * @type {Number|*}
+         */
+        this.pickZNear = 0.01;
+
+        /**
+         * Distance to the far clipping plane when rendering depth fragments for GPU-accelerated 3D picking.
+         *
+         * @property pickZFar
+         * @type {Number|*}
+         */
+        this.pickZFar = 5000;
+
+        /**
+         * Whether or not the renderer is currently picking invisible objects.
+         *
+         * @property pickInvisible
+         * @type {Number}
+         */
+        this.pickInvisible = false;
+
+        /**
+         * Used to draw only requested elements / indices.
+         *
+         * @property pickElementsCount
+         * @type {Number}
+         */
+        this.pickElementsCount = null;
+
+        /**
+         * Used to draw only requested elements / indices.
+         *
+         * @property pickElementsOffset
+         * @type {Number}
+         */
+        this.pickElementsOffset = null;
+
+        /** The current line width.
+         *
+         * @property lineWidth
+         * @type Number
+         */
+        this.lineWidth = 1;
+
+        /**
+         * Collects info from SceneModel.drawSnapInitDepthBuf and SceneModel.drawSnapDepths,
+         * which is then used in Renderer to determine snap-picking results.
+         *
+         * @type {{}}
+         */
+        this.snapPickLayerParams = {};
+
+        /**
+         * Collects info from SceneModel.drawSnapInitDepthBuf and SceneModel.drawSnapDepths,
+         * which is then used in Renderer to determine snap-picking results.
+         * @type {number}
+         */
+        this.snapPickLayerNumber = 0;
+
+        /**
+         * Collects info from SceneModel.drawSnapInitDepthBuf and SceneModel.drawSnapDepths,
+         * which is then used in Renderer to determine snap-picking results.
+         * @type {Number[]}
+         */
+        this.snapPickCoordinateScale = math.vec3();
+
+        /**
+         * Collects info from SceneModel.drawSnapInitDepthBuf and SceneModel.drawSnapDepths,
+         * which is then used in Renderer to determine snap-picking results.
+         * @type {Number[]}
+         */
+        this.snapPickOrigin = math.vec3();
+    }
+
+    /**
+     * Get View matrix for the given RTC center.
+     */
+    getRTCViewMatrix(originHash, origin) {
+        let rtcViewMat = this._rtcViewMats[originHash];
+        if (!rtcViewMat) {
+            rtcViewMat = this._getNewMat();
+            createRTCViewMat(this._scene.camera.viewMatrix, origin, rtcViewMat);
+            this._rtcViewMats[originHash] = rtcViewMat;
+        }
+        return rtcViewMat;
+    }
+
+    /**
+     * Get picking View RTC matrix for the given RTC center.
+     */
+    getRTCPickViewMatrix(originHash, origin) {
+        let rtcPickViewMat = this._rtcPickViewMats[originHash];
+        if (!rtcPickViewMat) {
+            rtcPickViewMat = this._getNewMat();
+            const pickViewMat = this.pickViewMatrix || this._scene.camera.viewMatrix;
+            createRTCViewMat(pickViewMat, origin, rtcPickViewMat);
+            this._rtcPickViewMats[originHash] = rtcPickViewMat;
+        }
+        return rtcPickViewMat;
+    }
+
+    _getNewMat() {
+        let mat = this._matPool[this._matPoolNextFreeIndex];
+        if (!mat) {
+            mat = math.mat4();
+            this._matPool[this._matPoolNextFreeIndex] = mat;
+        }
+        this._matPoolNextFreeIndex++;
+        return mat;
+    }
+}
+
+export {FrameContext};

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

@@ -0,0 +1,339 @@
+/**
+ * @desc Pick result returned by {@link Scene#pick}.
+ *
+ */
+class PickResult {
+
+    /**
+     * @private
+     */
+    constructor() {
+
+        /**
+         * Picked entity.
+         * Null when no entity was picked.
+         * @property entity
+         * @type {Entity|*}
+         */
+        this.entity = null;
+
+        /**
+         * Type of primitive that was picked - usually "triangle".
+         * Null when no primitive was picked.
+         * @property primitive
+         * @type {String}
+         */
+        this.primitive = null;
+
+        /**
+         * Index of primitive that was picked.
+         * -1 when no entity was picked.
+         * @property primIndex
+         * @type {number}
+         */
+        this.primIndex = -1;
+
+        /**
+         * True when the picked surface position is full precision.
+         * When false, the picked surface position should be regarded as approximate.
+         * Full-precision surface picking is performed with the {@link Scene#pick} method's ````pickSurfacePrecision```` option.
+         * @property pickSurfacePrecision
+         * @type {Boolean}
+         */
+        this.pickSurfacePrecision = false;
+
+        /**
+         * True when picked from touch input, else false when from mouse input.
+         * @type {boolean}
+         */
+        this.touchInput = false;
+
+        /**
+         * True when snapped to the nearest vertex position.
+         * @type {boolean}
+         */
+        this.snappedToVertex = false;
+
+        /**
+         * True when snapped to the nearest edge.
+         * @type {boolean}
+         */
+        this.snappedToEdge = false;
+
+        this._canvasPos = new Int16Array([0, 0]);
+        this._origin = new Float64Array([0, 0, 0]);
+        this._direction = new Float64Array([0, 0, 0]);
+        this._indices = new Int32Array(3);
+        this._localPos = new Float64Array([0, 0, 0]);
+        this._worldPos = new Float64Array([0, 0, 0]);
+        this._viewPos = new Float64Array([0, 0, 0]);
+        this._bary = new Float64Array([0, 0, 0]);
+        this._worldNormal = new Float64Array([0, 0, 0]);
+        this._uv = new Float64Array([0, 0]);
+
+        this.reset();
+    }
+
+    /**
+     * Canvas coordinates when picking with a 2D pointer.
+     * @property canvasPos
+     * @type {Number[]}
+     */
+    get canvasPos() {
+        return this._gotCanvasPos ? this._canvasPos : null;
+    }
+
+    /**
+     * @private
+     * @param value
+     */
+    set canvasPos(value) {
+        if (value) {
+            this._canvasPos[0] = value[0];
+            this._canvasPos[1] = value[1];
+            this._gotCanvasPos = true;
+        } else {
+            this._gotCanvasPos = false;
+        }
+    }
+
+    /**
+     * World-space 3D ray origin when raypicked.
+     * @property origin
+     * @type {Number[]}
+     */
+    get origin() {
+        return this._gotOrigin ? this._origin : null;
+    }
+
+    /**
+     * @private
+     * @param value
+     */
+    set origin(value) {
+        if (value) {
+            this._origin[0] = value[0];
+            this._origin[1] = value[1];
+            this._origin[2] = value[2];
+            this._gotOrigin = true;
+        } else {
+            this._gotOrigin = false;
+        }
+    }
+
+    /**
+     * World-space 3D ray direction when raypicked.
+     * @property direction
+     * @type {Number[]}
+     */
+    get direction() {
+        return this._gotDirection ? this._direction : null;
+    }
+
+    /**
+     * @private
+     * @param value
+     */
+    set direction(value) {
+        if (value) {
+            this._direction[0] = value[0];
+            this._direction[1] = value[1];
+            this._direction[2] = value[2];
+            this._gotDirection = true;
+        } else {
+            this._gotDirection = false;
+        }
+    }
+    
+    /**
+     * Picked triangle's vertex indices.
+     * @property indices
+     * @type {Int32Array}
+     */
+    get indices() {
+        return this.entity && this._gotIndices ? this._indices : null;
+    }
+
+    /**
+     * @private
+     * @param value
+     */
+    set indices(value) {
+        if (value) {
+            this._indices[0] = value[0];
+            this._indices[1] = value[1];
+            this._indices[2] = value[2];
+            this._gotIndices = true;
+        } else {
+            this._gotIndices = false;
+        }
+    }
+
+    /**
+     * Picked Local-space point.
+     * @property localPos
+     * @type {Number[]}
+     */
+    get localPos() {
+        return this.entity && this._gotLocalPos ? this._localPos : null;
+    }
+
+    /**
+     * @private
+     * @param value
+     */
+    set localPos(value) {
+        if (value) {
+            this._localPos[0] = value[0];
+            this._localPos[1] = value[1];
+            this._localPos[2] = value[2];
+            this._gotLocalPos = true;
+        } else {
+            this._gotLocalPos = false;
+        }
+    }
+
+    /**
+     * Picked World-space point.
+     * @property worldPos
+     * @type {Number[]}
+     */
+    get worldPos() {
+        return this._gotWorldPos ? this._worldPos : null;
+    }
+
+    /**
+     * @private
+     * @param value
+     */
+    set worldPos(value) {
+        if (value) {
+            this._worldPos[0] = value[0];
+            this._worldPos[1] = value[1];
+            this._worldPos[2] = value[2];
+            this._gotWorldPos = true;
+        } else {
+            this._gotWorldPos = false;
+        }
+    }
+
+    /**
+     * Picked View-space point.
+     * @property viewPos
+     * @type {Number[]}
+     */
+    get viewPos() {
+        return this.entity && this._gotViewPos ? this._viewPos : null;
+    }
+
+    /**
+     * @private
+     * @param value
+     */
+    set viewPos(value) {
+        if (value) {
+            this._viewPos[0] = value[0];
+            this._viewPos[1] = value[1];
+            this._viewPos[2] = value[2];
+            this._gotViewPos = true;
+        } else {
+            this._gotViewPos = false;
+        }
+    }
+
+    /**
+     * Barycentric coordinate within picked triangle.
+     * @property bary
+     * @type {Number[]}
+     */
+    get bary() {
+        return this.entity && this._gotBary ? this._bary : null;
+    }
+
+    /**
+     * @private
+     * @param value
+     */
+    set bary(value) {
+        if (value) {
+            this._bary[0] = value[0];
+            this._bary[1] = value[1];
+            this._bary[2] = value[2];
+            this._gotBary = true;
+        } else {
+            this._gotBary = false;
+        }
+    }
+
+    /**
+     * Normal vector at picked position on surface.
+     * @property worldNormal
+     * @type {Number[]}
+     */
+    get worldNormal() {
+        return this.entity && this._gotWorldNormal ? this._worldNormal : null;
+    }
+
+    /**
+     * @private
+     * @param value
+     */
+    set worldNormal(value) {
+        if (value) {
+            this._worldNormal[0] = value[0];
+            this._worldNormal[1] = value[1];
+            this._worldNormal[2] = value[2];
+            this._gotWorldNormal = true;
+        } else {
+            this._gotWorldNormal = false;
+        }
+    }
+
+    /**
+     * UV coordinates at picked position on surface.
+     * @property uv
+     * @type {Number[]}
+     */
+    get uv() {
+        return this.entity && this._gotUV ? this._uv : null;
+    }
+
+    /**
+     * @private
+     * @param value
+     */
+    set uv(value) {
+        if (value) {
+            this._uv[0] = value[0];
+            this._uv[1] = value[1];
+            this._gotUV = true;
+        } else {
+            this._gotUV = false;
+        }
+    }
+
+    /**
+     * @private
+     */
+    reset() {
+        this.entity = null;
+        this.primIndex = -1;
+        this.primitive = null;
+        this.pickSurfacePrecision = false;
+        this._gotCanvasPos = false;
+        this._gotOrigin = false;
+        this._gotDirection = false;
+        this._gotIndices = false;
+        this._gotLocalPos = false;
+        this._gotWorldPos = false;
+        this._gotViewPos = false;
+        this._gotBary = false;
+        this._gotWorldNormal = false;
+        this._gotUV = false;
+        this.touchInput = false;
+        this.snappedToVertex = false;
+        this.snappedToEdge = false;
+    }
+}
+
+export {PickResult};

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

@@ -0,0 +1,69 @@
+/**
+ * @desc A pickable {@link Scene} element.
+ *
+ * @interface
+ * @abstract
+ * @private
+ */
+class Pickable {
+
+    /**
+     * Called by xeokit to get if it's possible to pick a triangle on the surface of this Drawable.
+     */
+    canPickTriangle() {
+    }
+
+    /**
+     * Picks a triangle on this Pickable.
+     */
+    drawPickTriangles(renderFlags, frameCtx) {
+    }
+
+    /**
+     * Given a {@link PickResult} that contains a {@link PickResult#primIndex}, which indicates that a primitive was picked on the Pickable, then add more information to the PickResult about the picked position on the surface of the Pickable.
+     *
+     * Architecturally, this delegates collection of that Pickable-specific info to the Pickable, allowing it to provide whatever info it's able to.
+     *
+     * @param {PickResult} pickResult The PickResult to augment with pick intersection information specific to this Mesh.
+     * @param [pickResult.primIndex] Index of the primitive that was picked on this Mesh.
+     * @param [pickResult.canvasPos] Canvas coordinates, provided when picking through the Canvas.
+     * @param [pickResult.origin] World-space 3D ray origin, when ray picking.
+     * @param [pickResult.direction] World-space 3D ray direction, provided when ray picking.
+     */
+    pickTriangleSurface(pickResult) {
+    }
+
+    /**
+     * Called by xeokit to get if it's possible to pick a 3D point on the surface of this Pickable.
+     * Returns false if canPickTriangle returns true, and vice-versa.
+     */
+    canPickWorldPos() {
+    }
+
+    /**
+     * Renders color-encoded fragment depths of this Pickable.
+     * @param frameCtx
+     */
+    drawPickDepths(renderFlags, frameCtx) {
+    }
+
+    /**
+     * Delegates an {@link Entity} as representing what was actually picked in place of this Pickable.
+     * @returns {PerformanceNode}
+     */
+    delegatePickedEntity() {
+        return this.parent;
+    }
+
+    /**
+     * 3D origin of the Pickable's vertex positions, if they are in relative-to-center (RTC) coordinates.
+     *
+     * When this is defined, then the positions are RTC, which means that they are relative to this position.
+     *
+     * @type {Float64Array}
+     */
+    get origin() {
+    }
+}
+
+export {Pickable};