@xeokit/xeokit-sdk 2.5.2-beta-10 → 2.5.2-beta-13

package/src/src/viewer/scene/camera/CameraPath.js

@@ -0,0 +1,194 @@
+import {Component} from "../Component.js"
+import {SplineCurve} from "../paths/SplineCurve.js"
+import {math} from "../math/math.js";
+
+const tempVec3a = math.vec3();
+
+/**
+ * @desc Defines a sequence of frames along which a {@link CameraPathAnimation} can animate a {@link Camera}.
+ *
+ * See {@link CameraPathAnimation} for usage.
+ */
+class CameraPath extends Component {
+
+    /**
+     * Returns "CameraPath".
+     *
+     * @private
+     *
+     * @returns {string} "CameraPath"
+     */
+    get type() {
+        return "CameraPath"
+    }
+
+    /**
+     * @constructor
+     * @param {Component} [owner]  Owner component. When destroyed, the owner will destroy this CameraPath as well.
+     * @param [cfg] {*} Configuration
+     * @param {String} [cfg.id]  Optional ID, unique among all components in the parent {@link Scene}, generated automatically when omitted.
+     * @param {{t:Number, eye:Object, look:Object, up: Object}[]} [cfg.frames] Initial sequence of frames.
+     */
+    constructor(owner, cfg = {}) {
+
+        super(owner, cfg);
+
+        this._frames = [];
+
+        this._eyeCurve = new SplineCurve(this);
+        this._lookCurve = new SplineCurve(this);
+        this._upCurve = new SplineCurve(this);
+
+        if (cfg.frames) {
+            this.addFrames(cfg.frames);
+            this.smoothFrameTimes(1);
+        }
+    }
+
+    /**
+     * Gets the camera frames in this CameraPath.
+     *
+     * @returns {{t:Number, eye:Object, look:Object, up: Object}[]} The frames on this CameraPath.
+     */
+    get frames() {
+        return this._frames;
+    }
+
+    /**
+     * Gets the {@link SplineCurve} along which {@link Camera#eye} travels.
+     * @returns {SplineCurve} The SplineCurve for {@link Camera#eye}.
+     */
+    get eyeCurve() {
+        return this._eyeCurve;
+    }
+
+    /**
+     * Gets the {@link SplineCurve} along which {@link Camera#look} travels.
+     * @returns {SplineCurve} The SplineCurve for {@link Camera#look}.
+     */
+    get lookCurve() {
+        return this._lookCurve;
+    }
+
+    /**
+     * Gets the {@link SplineCurve} along which {@link Camera#up} travels.
+     * @returns {SplineCurve} The SplineCurve for {@link Camera#up}.
+     */
+    get upCurve() {
+        return this._upCurve;
+    }
+
+    /**
+     * Adds a frame to this CameraPath, given as the current position of the {@link Camera}.
+     *
+     * @param {Number} t Time instant for the new frame.
+     */
+    saveFrame(t) {
+        const camera = this.scene.camera;
+        this.addFrame(t, camera.eye, camera.look, camera.up);
+    }
+
+    /**
+     * Adds a frame to this CameraPath, specified as values for eye, look and up vectors at a given time instant.
+     *
+     * @param {Number} t Time instant for the new frame.
+     * @param {Number[]} eye A three-element vector specifying the eye position for the new frame.
+     * @param {Number[]} look A three-element vector specifying the look position for the new frame.
+     * @param {Number[]} up A three-element vector specifying the up vector for the new frame.
+     */
+    addFrame(t, eye, look, up) {
+        const frame = {
+            t: t,
+            eye: eye.slice(0),
+            look: look.slice(0),
+            up: up.slice(0)
+        };
+        this._frames.push(frame);
+        this._eyeCurve.points.push(frame.eye);
+        this._lookCurve.points.push(frame.look);
+        this._upCurve.points.push(frame.up);
+    }
+
+    /**
+     * Adds multiple frames to this CameraPath, each frame specified as a set of values for eye, look and up vectors at a given time instant.
+     *
+     * @param {{t:Number, eye:Object, look:Object, up: Object}[]} frames Frames to add to this CameraPath.
+     */
+    addFrames(frames) {
+        let frame;
+        for (let i = 0, len = frames.length; i < len; i++) {
+            frame = frames[i];
+            this.addFrame(frame.t || 0, frame.eye, frame.look, frame.up);
+        }
+    }
+
+    /**
+     * Sets the position of the {@link Camera} to a position interpolated within this CameraPath at the given time instant.
+     *
+     * @param {Number} t Time instant.
+     */
+    loadFrame(t) {
+
+        const camera = this.scene.camera;
+
+        t = t / (this._frames[this._frames.length - 1].t - this._frames[0].t);
+        t = t < 0.0 ? 0.0 : (t > 1.0 ? 1.0 : t);
+
+        camera.eye = this._eyeCurve.getPoint(t, tempVec3a);
+        camera.look = this._lookCurve.getPoint(t, tempVec3a);
+        camera.up = this._upCurve.getPoint(t, tempVec3a);
+    }
+
+    /**
+     * Gets eye, look and up vectors on this CameraPath at a given instant.
+     *
+     * @param {Number} t Time instant.
+     * @param {Number[]} eye The eye position to update.
+     * @param {Number[]} look The look position to update.
+     * @param {Number[]} up The up vector to update.
+     */
+    sampleFrame(t, eye, look, up) {
+        t = t < 0.0 ? 0.0 : (t > 1.0 ? 1.0 : t);
+        this._eyeCurve.getPoint(t, eye);
+        this._lookCurve.getPoint(t, look);
+        this._upCurve.getPoint(t, up);
+    }
+
+    /**
+     * Given a total duration (in seconds) for this CameraPath, recomputes the time instant at each frame so that,
+     * when animated by {@link CameraPathAnimation}, the {@link Camera} will move along the path at a constant rate.
+     *
+     * @param {Number} duration The total duration for this CameraPath.
+     */
+    smoothFrameTimes(duration) {
+        const numFrames = this._frames.length;
+        if (numFrames === 0) {
+            return;
+        }
+        const vec = math.vec3();
+        var totalLen = 0;
+        this._frames[0].t = 0;
+        const lens = [];
+        for (let i = 1, len = this._frames.length; i < len; i++) {
+            var lenVec = math.lenVec3(math.subVec3(this._frames[i].eye, this._frames[i - 1].eye, vec));
+            lens[i] = lenVec;
+            totalLen += lenVec;
+        }
+        for (let i = 1, len = this._frames.length; i < len; i++) {
+            const interFrameRate = (lens[i] / totalLen) * duration;
+            this._frames[i].t = this._frames[i-1].t + interFrameRate;
+        }
+    }
+
+    /**
+     * Removes all frames from this CameraPath.
+     */
+    clearFrames() {
+        this._frames = [];
+        this._eyeCurve.points = [];
+        this._lookCurve.points = [];
+        this._upCurve.points = [];
+    }
+}
+
+export {CameraPath}

package/src/src/viewer/scene/camera/CameraPathAnimation.js

@@ -0,0 +1,326 @@
+import {Component} from "../Component.js"
+import {CameraFlightAnimation} from "./CameraFlightAnimation.js"
+
+
+/**
+ * @desc Animates the {@link Scene}'s's {@link Camera} along a {@link CameraPath}.
+ *
+ * ## Usage
+ *
+ * In the example below, we'll load a model using a {@link GLTFLoaderPlugin}, then animate a {@link Camera}
+ * through the frames in a {@link CameraPath}.
+ *
+ *  * [[Run this example](/examples/#camera_CameraPathAnimation)]
+ *
+ * ````Javascript
+ * import {Viewer, GLTFLoaderPlugin, CameraPath, CameraPathAnimation} from "xeokit-sdk.es.js";
+ *
+ * // Create a Viewer and arrange camera
+ *
+ * const viewer = new Viewer({
+ *     canvasId: "myCanvas",
+ *     transparent: true
+ * });
+ *
+ * viewer.camera.eye = [124.86756896972656, -93.50288391113281, 173.2632598876953];
+ * viewer.camera.look = [102.14186096191406, -90.24193572998047, 173.4224395751953];
+ * viewer.camera.up = [0.23516440391540527, 0.9719591736793518, -0.0016466031083837152];
+ *
+ * // Load model
+ *
+ * const gltfLoader = new GLTFLoaderPlugin(viewer);
+ *
+ * const model = gltfLoader.load({
+ *     id: "myModel",
+ *     src: "./models/gltf/modern_office/scene.gltf",
+ *     edges: true,
+ *     edgeThreshold: 20,
+ *     xrayed: false
+ * });
+ *
+ * // Create a CameraPath
+ *
+ * var cameraPath = new CameraPath(viewer.scene, {
+ *     frames: [
+ *         {
+ *             t:    0,
+ *             eye:  [124.86, -93.50, 173.26],
+ *             look: [102.14, -90.24, 173.42],
+ *             up:   [0.23, 0.97, -0.00]
+ *         },
+ *         {
+ *             t:    1,
+ *             eye:  [79.75, -85.98, 226.57],
+ *             look: [99.24, -84.11, 238.56],
+ *             up:   [-0.14, 0.98, -0.09]
+ *         },
+ *         // Rest of the frames omitted for brevity
+ *     ]
+ * });
+ *
+ * // Create a CameraPathAnimation to play our CameraPath
+ *
+ * var cameraPathAnimation = new CameraPathAnimation(viewer.scene, {
+ *     cameraPath: cameraPath,
+ *     playingRate: 0.2 // Playing 0.2 time units per second
+ * });
+ *
+ * // Once model loaded, start playing after a couple of seconds delay
+ *
+ * model.on("loaded", function () {
+ *     setTimeout(function () {
+ *         cameraPathAnimation.play(0); // Play from the beginning of the CameraPath
+ *     }, 2000);
+ * });
+ * ````
+ */
+class CameraPathAnimation extends Component {
+
+    /**
+     * Returns "CameraPathAnimation".
+     *
+     * @private
+     * @returns {string} "CameraPathAnimation"
+     */
+    get type() {
+        return "CameraPathAnimation"
+    }
+
+    /**
+     * @constructor
+     * @param {Component} [owner]  Owner component. When destroyed, the owner will destroy this CameraPathAnimation as well.
+     * @param {*} [cfg] Configuration
+     * @param {String} [cfg.id]  Optional ID, unique among all components in the parent {@link Scene}, generated automatically when omitted.
+     * @param {CameraPath} [cfg.eyeCurve] A {@link CameraPath} that defines the path of a {@link Camera}.
+     */
+    constructor(owner, cfg = {}) {
+
+        super(owner, cfg);
+
+        this._cameraFlightAnimation = new CameraFlightAnimation(this);
+        this._t = 0;
+        this.state = CameraPathAnimation.SCRUBBING;
+        this._playingFromT = 0;
+        this._playingToT = 0;
+        this._playingRate = cfg.playingRate || 1.0;
+        this._playingDir = 1.0;
+        this._lastTime = null;
+
+        this.cameraPath = cfg.cameraPath;
+
+        this._tick = this.scene.on("tick", this._updateT, this);
+    }
+
+    _updateT() {
+        const cameraPath = this._cameraPath;
+        if (!cameraPath) {
+            return;
+        }
+        const f = 0.002;
+        let numFrames;
+        let t;
+        const time = performance.now();
+        const elapsedSecs = (this._lastTime) ? (time - this._lastTime) * 0.001 : 0;
+        this._lastTime = time;
+        if (elapsedSecs === 0) {
+            return;
+        }
+        switch (this.state) {
+            case CameraPathAnimation.SCRUBBING:
+                return;
+            case CameraPathAnimation.PLAYING:
+                this._t += this._playingRate * elapsedSecs;
+                numFrames = this._cameraPath.frames.length;
+                if (numFrames === 0 || (this._playingDir < 0 && this._t <= 0) || (this._playingDir > 0 && this._t >= this._cameraPath.frames[numFrames - 1].t)) {
+                    this.state = CameraPathAnimation.SCRUBBING;
+                    this._t = this._cameraPath.frames[numFrames - 1].t;
+                    this.fire("stopped");
+                    return;
+                }
+                cameraPath.loadFrame(this._t);
+                break;
+            case CameraPathAnimation.PLAYING_TO:
+                t = this._t + (this._playingRate * elapsedSecs * this._playingDir);
+                if ((this._playingDir < 0 && t <= this._playingToT) || (this._playingDir > 0 && t >= this._playingToT)) {
+                    t = this._playingToT;
+                    this.state = CameraPathAnimation.SCRUBBING;
+                    this.fire("stopped");
+                }
+                this._t = t;
+                cameraPath.loadFrame(this._t);
+                break;
+        }
+    }
+
+    /*
+    * @private
+     */
+    _ease(t, b, c, d) {
+        t /= d;
+        return -c * t * (t - 2) + b;
+    }
+
+    /**
+     * Sets the {@link CameraPath} animated by this CameraPathAnimation.
+     *
+     @param {CameraPath} value The new CameraPath.
+     */
+    set cameraPath(value) {
+        this._cameraPath = value;
+    }
+
+    /**
+     * Gets the {@link CameraPath} animated by this CameraPathAnimation.
+     *
+     @returns {CameraPath} The CameraPath.
+     */
+    get cameraPath() {
+        return this._cameraPath;
+    }
+
+    /**
+     * Sets the rate at which the CameraPathAnimation animates the {@link Camera} along the {@link CameraPath}.
+     *
+     *  @param {Number} value The amount of progress per second.
+     */
+    set rate(value) {
+        this._playingRate = value;
+    }
+
+    /**
+     * Gets the rate at which the CameraPathAnimation animates the {@link Camera} along the {@link CameraPath}.
+     *
+     * @returns {*|number} The current playing rate.
+     */
+    get rate() {
+        return this._playingRate;
+    }
+
+    /**
+     * Begins animating the {@link Camera} along CameraPathAnimation's {@link CameraPath} from the beginning.
+     */
+    play() {
+        if (!this._cameraPath) {
+            return;
+        }
+        this._lastTime = null;
+        this.state = CameraPathAnimation.PLAYING;
+    }
+
+    /**
+     * Begins animating the {@link Camera} along CameraPathAnimation's {@link CameraPath} from the given time.
+     *
+     * @param {Number} t Time instant.
+     */
+    playToT(t) {
+        const cameraPath = this._cameraPath;
+        if (!cameraPath) {
+            return;
+        }
+        this._playingFromT = this._t;
+        this._playingToT = t;
+        this._playingDir = (this._playingToT - this._playingFromT) < 0 ? -1 : 1;
+        this._lastTime = null;
+        this.state = CameraPathAnimation.PLAYING_TO;
+    }
+
+    /**
+     * Animates the {@link Camera} along CameraPathAnimation's {@link CameraPath} to the given frame.
+     *
+     * @param {Number} frameIdx Index of the frame to play to.
+     */
+    playToFrame(frameIdx) {
+        const cameraPath = this._cameraPath;
+        if (!cameraPath) {
+            return;
+        }
+        const frame = cameraPath.frames[frameIdx];
+        if (!frame) {
+            this.error("playToFrame - frame index out of range: " + frameIdx);
+            return;
+        }
+        this.playToT(frame.t);
+    }
+
+    /**
+     * Flies the {@link Camera} directly to the given frame on the CameraPathAnimation's {@link CameraPath}.
+     *
+     * @param {Number} frameIdx Index of the frame to play to.
+     * @param {Function} [ok] Callback to fire when playing is complete.
+     */
+    flyToFrame(frameIdx, ok) {
+        const cameraPath = this._cameraPath;
+        if (!cameraPath) {
+            return;
+        }
+        const frame = cameraPath.frames[frameIdx];
+        if (!frame) {
+            this.error("flyToFrame - frame index out of range: " + frameIdx);
+            return;
+        }
+        this.state = CameraPathAnimation.SCRUBBING;
+        this._cameraFlightAnimation.flyTo(frame, ok);
+    }
+
+    /**
+     * Scrubs the {@link Camera} to the given time on the CameraPathAnimation's {@link CameraPath}.
+     *
+     * @param {Number} t Time instant.
+     */
+    scrubToT(t) {
+        const cameraPath = this._cameraPath;
+        if (!cameraPath) {
+            return;
+        }
+        const camera = this.scene.camera;
+        if (!camera) {
+            return;
+        }
+        this._t = t;
+        cameraPath.loadFrame(this._t);
+        this.state = CameraPathAnimation.SCRUBBING;
+    }
+
+    /**
+     * Scrubs the {@link Camera} to the given frame on the CameraPathAnimation's {@link CameraPath}.
+     *
+     * @param {Number} frameIdx Index of the frame to scrub to.
+     */
+    scrubToFrame(frameIdx) {
+        const cameraPath = this._cameraPath;
+        if (!cameraPath) {
+            return;
+        }
+        const camera = this.scene.camera;
+        if (!camera) {
+            return;
+        }
+        const frame = cameraPath.frames[frameIdx];
+        if (!frame) {
+            this.error("playToFrame - frame index out of range: " + frameIdx);
+            return;
+        }
+        cameraPath.loadFrame(this._t);
+        this.state = CameraPathAnimation.SCRUBBING;
+    }
+
+    /**
+     * Stops playing this CameraPathAnimation.
+     */
+    stop() {
+        this.state = CameraPathAnimation.SCRUBBING;
+        this.fire("stopped");
+    }
+
+    destroy() {
+        super.destroy();
+        this.scene.off(this._tick);
+    }
+}
+
+CameraPathAnimation.STOPPED = 0;
+CameraPathAnimation.SCRUBBING = 1;
+CameraPathAnimation.PLAYING = 2;
+CameraPathAnimation.PLAYING_TO = 3;
+
+export {CameraPathAnimation}

package/src/src/viewer/scene/camera/CustomProjection.js

@@ -0,0 +1,149 @@
+import {math} from '../math/math.js';
+import {Component} from '../Component.js';
+import {RenderState} from '../webgl/RenderState.js';
+
+/**
+ * @desc Defines a custom projection for a {@link Camera} as a custom 4x4 matrix..
+ *
+ * Located at {@link Camera#customProjection}.
+ */
+class CustomProjection extends Component {
+
+    /**
+     * @private
+     */
+    get type() {
+        return "CustomProjection";
+    }
+
+    /**
+     * @constructor
+     * @private
+     */
+    constructor(camera, cfg = {}) {
+
+        super(camera, cfg);
+
+        /**
+         * The Camera this CustomProjection belongs to.
+         *
+         * @property camera
+         * @type {Camera}
+         * @final
+         */
+        this.camera = camera;
+
+        this._state = new RenderState({
+            matrix: math.mat4(),
+            inverseMatrix: math.mat4(),
+            transposedMatrix: math.mat4()
+        });
+
+        this._inverseMatrixDirty = true;
+        this._transposedMatrixDirty = false;
+
+        this.matrix = cfg.matrix;
+    }
+
+    /**
+     * Sets the CustomProjection's projection transform matrix.
+     *
+     * Fires a "matrix" event on change.
+
+     * Default value is ````[1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]````.
+     *
+     * @param {Number[]} matrix New value for the CustomProjection's matrix.
+     */
+    set matrix(matrix) {
+        this._state.matrix.set(matrix || [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]);
+        this._inverseMatrixDirty = true;
+        this._transposedMatrixDirty = true;
+        this.glRedraw();
+        this.fire("matrix", this._state.matrix);
+    }
+
+    /**
+     * Gets the CustomProjection's projection transform matrix.
+     *
+     * Default value is ````[1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]````.
+     *
+     * @return {Number[]} New value for the CustomProjection's matrix.
+     */
+    get matrix() {
+        return this._state.matrix;
+    }
+
+    /**
+     * Gets the inverse of {@link CustomProjection#matrix}.
+     *
+     * @returns {Number[]} The inverse of {@link CustomProjection#matrix}.
+     */
+    get inverseMatrix() {
+        if (this._updateScheduled) {
+            this._doUpdate();
+        }
+        if (this._inverseMatrixDirty) {
+            math.inverseMat4(this._state.matrix, this._state.inverseMatrix);
+            this._inverseMatrixDirty = false;
+        }
+        return this._state.inverseMatrix;
+    }
+
+    /**
+     * Gets the transpose of {@link CustomProjection#matrix}.
+     *
+     * @returns {Number[]} The transpose of {@link CustomProjection#matrix}.
+     */
+    get transposedMatrix() {
+        if (this._updateScheduled) {
+            this._doUpdate();
+        }
+        if (this._transposedMatrixDirty) {
+            math.transposeMat4(this._state.matrix, this._state.transposedMatrix);
+            this._transposedMatrixDirty = false;
+        }
+        return this._state.transposedMatrix;
+    }
+
+    /**
+     * Un-projects the given Canvas-space coordinates, using this CustomProjection.
+     *
+     * @param {Number[]} canvasPos Inputs 2D Canvas-space coordinates.
+     * @param {Number} screenZ Inputs Screen-space Z coordinate.
+     * @param {Number[]} screenPos Outputs 3D Screen/Clip-space coordinates.
+     * @param {Number[]} viewPos Outputs un-projected 3D View-space coordinates.
+     * @param {Number[]} worldPos Outputs un-projected 3D World-space coordinates.
+     */
+    unproject(canvasPos, screenZ, screenPos, viewPos, worldPos) {
+
+        const canvas = this.scene.canvas.canvas;
+
+        const halfCanvasWidth = canvas.offsetWidth / 2.0;
+        const halfCanvasHeight = canvas.offsetHeight / 2.0;
+
+        screenPos[0] = (canvasPos[0] - halfCanvasWidth) / halfCanvasWidth;
+        screenPos[1] = (canvasPos[1] - halfCanvasHeight) / halfCanvasHeight;
+        screenPos[2] = screenZ;
+        screenPos[3] = 1.0;
+
+        math.mulMat4v4(this.inverseMatrix, screenPos, viewPos);
+        math.mulVec3Scalar(viewPos, 1.0 / viewPos[3]);
+
+        viewPos[3] = 1.0;
+        viewPos[1] *= -1;
+
+        math.mulMat4v4(this.camera.inverseViewMatrix, viewPos, worldPos);
+
+        return worldPos;
+    }
+
+    /** @private
+     *
+     */
+    destroy() {
+        super.destroy();
+        this._state.destroy();
+    }
+}
+
+export {CustomProjection};