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

package/src/src/viewer/scene/lights/AmbientLight.js

@@ -1,175 +0,0 @@
-import {math} from '../math/math.js';
-import {Light} from './Light.js';
-
-/**
- * @desc An ambient light source of fixed color and intensity that illuminates all {@link Mesh}es equally.
- *
- * * {@link AmbientLight#color} multiplies by {@link PhongMaterial#ambient} at each position of each {@link ReadableGeometry} surface.
- * * {@link AmbientLight#color} multiplies by {@link LambertMaterial#color} uniformly across each triangle of each {@link ReadableGeometry} (ie. flat shaded).
- * * {@link AmbientLight}s, {@link DirLight}s and {@link PointLight}s are registered by their {@link Component#id} on {@link Scene#lights}.
- *
- * ## Usage
- *
- * In the example below we'll destroy the {@link Scene}'s default light sources then create an AmbientLight and a couple of {@link @DirLight}s:
- *
- * [[Run this example](/examples/#lights_AmbientLight)]
- *
- * ````javascript
- * import {Viewer, Mesh, buildTorusGeometry,
- * ReadableGeometry, PhongMaterial, Texture, AmbientLight} from "xeokit-sdk.es.js";
- *
- * // Create a Viewer and arrange the camera
- *
- * const viewer = new Viewer({
- *     canvasId: "myCanvas"
- * });
- *
- * viewer.scene.camera.eye = [0, 0, 5];
- * viewer.scene.camera.look = [0, 0, 0];
- * viewer.scene.camera.up = [0, 1, 0];
- *
- * // Replace the Scene's default lights with a single custom AmbientLight
- *
- * viewer.scene.clearLights();
- *
- * new AmbientLight(viewer.scene, {
- *      color: [0.0, 0.3, 0.7],
- *      intensity: 1.0
- * });
- *
- * new DirLight(viewer.scene, {
- *      id: "keyLight",
- *      dir: [0.8, -0.6, -0.8],
- *      color: [1.0, 0.3, 0.3],
- *      intensity: 1.0,
- *      space: "view"
- * });
- *
- * new DirLight(viewer.scene, {
- *      id: "fillLight",
- *      dir: [-0.8, -0.4, -0.4],
- *      color: [0.3, 1.0, 0.3],
- *      intensity: 1.0,
- *      space: "view"
- * });
- *
- * new DirLight(viewer.scene, {
- *      id: "rimLight",
- *      dir: [0.2, -0.8, 0.8],
- *      color: [0.6, 0.6, 0.6],
- *      intensity: 1.0,
- *      space: "view"
- * });
- *
- * // Create a mesh with torus shape and PhongMaterial
- *
- * new Mesh(viewer.scene, {
- *      geometry: new ReadableGeometry(viewer.scene, buildSphereGeometry({
- *          center: [0, 0, 0],
- *          radius: 1.5,
- *          tube: 0.5,
- *          radialSegments: 32,
- *          tubeSegments: 24,
- *          arc: Math.PI * 2.0
- *      }),
- *      material: new PhongMaterial(viewer.scene, {
- *          ambient: [1.0, 1.0, 1.0],
- *          shininess: 30,
- *          diffuseMap: new Texture(viewer.scene, {
- *              src: "textures/diffuse/uvGrid2.jpg"
- *          })
- *      })
- * });
- *
- * // Adjust the color of our AmbientLight
- *
- * var ambientLight = viewer.scene.lights["myAmbientLight"];
- * ambientLight.color = [1.0, 0.8, 0.8];
- *````
- */
-class AmbientLight extends Light {
-
-    /**
-     @private
-     */
-    get type() {
-        return "AmbientLight";
-    }
-
-    /**
-     * @param {Component} owner Owner component. When destroyed, the owner will destroy this AmbientLight as well.
-     * @param {*} [cfg] AmbientLight configuration
-     * @param {String} [cfg.id] Optional ID, unique among all components in the parent {@link Scene}, generated automatically when omitted.
-     * @param {Number[]} [cfg.color=[0.7, 0.7, 0.8]]  The color of this AmbientLight.
-     * @param {Number} [cfg.intensity=[1.0]]  The intensity of this AmbientLight, as a factor in range ````[0..1]````.
-     */
-    constructor(owner, cfg = {}) {
-        super(owner, cfg);
-        this._state = {
-            type: "ambient",
-            color: math.vec3([0.7, 0.7, 0.7]),
-            intensity: 1.0
-        };
-        this.color = cfg.color;
-        this.intensity = cfg.intensity;
-        this.scene._lightCreated(this);
-    }
-
-    /**
-     * Sets the RGB color of this AmbientLight.
-     *
-     * Default value is ````[0.7, 0.7, 0.8]````.
-     *
-     * @param {Number[]} color The AmbientLight's RGB color.
-     */
-    set color(color) {
-        this._state.color.set(color || [0.7, 0.7, 0.8]);
-        this.glRedraw();
-    }
-
-    /**
-     * Gets the RGB color of this AmbientLight.
-     *
-     * Default value is ````[0.7, 0.7, 0.8]````.
-     *
-     * @returns {Number[]} The AmbientLight's RGB color.
-     */
-    get color() {
-        return this._state.color;
-    }
-
-    /**
-     * Sets the intensity of this AmbientLight.
-     *
-     * Default value is ````1.0```` for maximum intensity.
-     *
-     * @param {Number} intensity The AmbientLight's intensity.
-     */
-    set intensity(intensity) {
-        this._state.intensity = intensity !== undefined ? intensity : 1.0;
-        this.glRedraw();
-    }
-
-    /**
-     * Gets the intensity of this AmbientLight.
-     *
-     * Default value is ````1.0```` for maximum intensity.
-     *
-     * @returns {Number} The AmbientLight's intensity.
-     */
-    get intensity() {
-        return this._state.intensity;
-    }
-
-    /**
-     * Destroys this AmbientLight.
-     */
-    destroy() {
-
-        super.destroy();
-
-        this.scene._lightDestroyed(this);
-    }
-}
-
-export {AmbientLight};

package/src/src/viewer/scene/lights/CubeTexture.js

@@ -1,156 +0,0 @@
-import {Component} from '../Component.js';
-import {RenderState} from '../webgl/RenderState.js';
-import {Texture2D} from '../webgl/Texture2D.js';
-import {stats} from '../stats.js';
-import {ClampToEdgeWrapping, LinearEncoding, LinearFilter, LinearMipmapLinearFilter, sRGBEncoding} from "../constants/constants.js";
-
-function ensureImageSizePowerOfTwo(image) {
-    if (!isPowerOfTwo(image.width) || !isPowerOfTwo(image.height)) {
-        const canvas = document.createElement("canvas");
-        canvas.width = nextHighestPowerOfTwo(image.width);
-        canvas.height = nextHighestPowerOfTwo(image.height);
-        const ctx = canvas.getContext("2d");
-        ctx.drawImage(image,
-            0, 0, image.width, image.height,
-            0, 0, canvas.width, canvas.height);
-        image = canvas;
-    }
-    return image;
-}
-
-function isPowerOfTwo(x) {
-    return (x & (x - 1)) === 0;
-}
-
-function nextHighestPowerOfTwo(x) {
-    --x;
-    for (let i = 1; i < 32; i <<= 1) {
-        x = x | x >> i;
-    }
-    return x + 1;
-}
-
-/**
- * @desc A cube texture map.
- */
-class CubeTexture extends Component {
-
-    /**
-     @private
-     */
-    get type() {
-        return "CubeTexture";
-    }
-
-    /**
-     * @constructor
-     * @param {Component} owner Owner component. When destroyed, the owner will destroy this component as well.
-     * @param {*} [cfg] Configs
-     * @param {String} [cfg.id] Optional ID for this CubeTexture, unique among all components in the parent scene, generated automatically when omitted.
-     * @param {String[]} [cfg.src=null]  Paths to six image files to load into this CubeTexture.
-     * @param {Boolean} [cfg.flipY=false] Flips this CubeTexture's source data along its vertical axis when true.
-     * @param {Number} [cfg.encoding=LinearEncoding] Encoding format. Supported values are {@link LinearEncoding} and {@link sRGBEncoding}.
-     */
-    constructor(owner, cfg = {}) {
-
-        super(owner, cfg);
-
-        const gl = this.scene.canvas.gl;
-
-        this._state = new RenderState({
-            texture: new Texture2D({gl, target: gl.TEXTURE_CUBE_MAP}),
-            flipY: this._checkFlipY(cfg.minFilter),
-            encoding: this._checkEncoding(cfg.encoding),
-            minFilter: LinearMipmapLinearFilter,
-            magFilter: LinearFilter,
-            wrapS: ClampToEdgeWrapping,
-            wrapT: ClampToEdgeWrapping,
-            mipmaps: true
-        });
-
-        this._src = cfg.src;
-        this._images = [];
-
-        this._loadSrc(cfg.src);
-
-        stats.memory.textures++;
-    }
-
-    _checkFlipY(value) {
-        return !!value;
-    }
-
-    _checkEncoding(value) {
-        value = value || LinearEncoding;
-        if (value !== LinearEncoding && value !== sRGBEncoding) {
-            this.error("Unsupported value for 'encoding' - supported values are LinearEncoding and sRGBEncoding. Defaulting to LinearEncoding.");
-            value = LinearEncoding;
-        }
-        return value;
-    }
-
-    _webglContextRestored() {
-        const gl = this.scene.canvas.gl;
-        this._state.texture = null;
-        // if (this._images.length > 0) {
-        //     this._state.texture = new xeokit.renderer.Texture2D(gl, gl.TEXTURE_CUBE_MAP);
-        //     this._state.texture.setImage(this._images, this._state);
-        //     this._state.texture.setProps(this._state);
-        // } else
-        if (this._src) {
-            this._loadSrc(this._src);
-        }
-    }
-
-    _loadSrc(src) {
-        const self = this;
-        const gl = this.scene.canvas.gl;
-        this._images = [];
-        let loadFailed = false;
-        let numLoaded = 0;
-        for (let i = 0; i < src.length; i++) {
-            const image = new Image();
-            image.onload = (function () {
-                let _image = image;
-                const index = i;
-                return function () {
-                    if (loadFailed) {
-                        return;
-                    }
-                    _image = ensureImageSizePowerOfTwo(_image);
-                    self._images[index] = _image;
-                    numLoaded++;
-                    if (numLoaded === 6) {
-                        let texture = self._state.texture;
-                        if (!texture) {
-                            texture = new Texture2D({gl, target: gl.TEXTURE_CUBE_MAP});
-                            self._state.texture = texture;
-                        }
-                        texture.setImage(self._images, self._state);
-                        self.fire("loaded", self._src, false);
-                        self.glRedraw();
-                    }
-                };
-            })();
-            image.onerror = function () {
-                loadFailed = true;
-            };
-            image.src = src[i];
-        }
-    }
-
-    /**
-     * Destroys this CubeTexture
-     *
-     */
-    destroy() {
-        super.destroy();
-        if (this._state.texture) {
-            this._state.texture.destroy();
-        }
-        stats.memory.textures--;
-        this._state.destroy();
-    }
-}
-
-export {CubeTexture};

package/src/src/viewer/scene/lights/DirLight.js

@@ -1,314 +0,0 @@
-import {Light} from './Light.js';
-import {RenderState} from '../webgl/RenderState.js';
-import {RenderBuffer} from '../webgl/RenderBuffer.js';
-import {math} from '../math/math.js';
-
-/**
- * @desc A directional light source that illuminates all {@link Mesh}es equally from a given direction.
- *
- * * Has an emission direction vector in {@link DirLight#dir}, but no position.
- * * Defined in either *World* or *View* coordinate space. When in World-space, {@link DirLight#dir} is relative to the
- * World coordinate system, and will appear to move as the {@link Camera} moves. When in View-space, {@link DirLight#dir} is
- * relative to the View coordinate system, and will behave as if fixed to the viewer's head.
- * * {@link AmbientLight}s, {@link DirLight}s and {@link PointLight}s are registered by their {@link Component#id} on {@link Scene#lights}.
- *
- * ## Usage
- *
- * In the example below we'll replace the {@link Scene}'s default light sources with three View-space DirLights.
- *
- * [[Run this example](/examples/#lights_DirLight_view)]
- *
- * ````javascript
- * import {Viewer, Mesh, buildSphereGeometry,
- *      buildPlaneGeometry, ReadableGeometry,
- *      PhongMaterial, Texture, DirLight} from "xeokit-sdk.es.js";
- *
- * // Create a Viewer and arrange the camera
- *
- * const viewer = new Viewer({
- *      canvasId: "myCanvas"
- * });
- *
- * viewer.scene.camera.eye = [0, 0, 5];
- * viewer.scene.camera.look = [0, 0, 0];
- * viewer.scene.camera.up = [0, 1, 0];
- *
- * // Replace the Scene's default lights with three custom view-space DirLights
- *
- * viewer.scene.clearLights();
- *
- * new DirLight(viewer.scene, {
- *      id: "keyLight",
- *      dir: [0.8, -0.6, -0.8],
- *      color: [1.0, 0.3, 0.3],
- *      intensity: 1.0,
- *      space: "view"
- * });
- *
- * new DirLight(viewer.scene, {
- *      id: "fillLight",
- *      dir: [-0.8, -0.4, -0.4],
- *      color: [0.3, 1.0, 0.3],
- *      intensity: 1.0,
- *      space: "view"
- * });
- *
- * new DirLight(viewer.scene, {
- *      id: "rimLight",
- *      dir: [0.2, -0.8, 0.8],
- *      color: [0.6, 0.6, 0.6],
- *      intensity: 1.0,
- *      space: "view"
- * });
- *
- *
- * // Create a sphere and ground plane
- *
- * new Mesh(viewer.scene, {
- *      geometry: new ReadableGeometry(viewer.scene, buildSphereGeometry({
- *          radius: 2.0
- *      }),
- *      material: new PhongMaterial(viewer.scene, {
- *          diffuse: [0.7, 0.7, 0.7],
- *          specular: [1.0, 1.0, 1.0],
- *          emissive: [0, 0, 0],
- *          alpha: 1.0,
- *          ambient: [1, 1, 0],
- *          diffuseMap: new Texture(viewer.scene, {
- *              src: "textures/diffuse/uvGrid2.jpg"
- *          })
- *      })
- *  });
- *
- * new Mesh(viewer.scene, {
- *      geometry: buildPlaneGeometry(ReadableGeometry, viewer.scene, {
- *          xSize: 30,
- *          zSize: 30
- *      }),
- *      material: new PhongMaterial(viewer.scene, {
- *          diffuseMap: new Texture(viewer.scene, {
- *              src: "textures/diffuse/uvGrid2.jpg"
- *          }),
- *          backfaces: true
- *      }),
- *      position: [0, -2.1, 0]
- * });
- * ````
- */
-class DirLight extends Light {
-
-    /**
-     @private
-     */
-    get type() {
-        return "DirLight";
-    }
-
-    /**
-     * @param {Component} owner Owner component. When destroyed, the owner will destroy this DirLight as well.
-     * @param {*} [cfg] The DirLight configuration
-     * @param {String} [cfg.id] Optional ID, unique among all components in the parent {@link Scene}, generated automatically when omitted.
-     * @param {Number[]} [cfg.dir=[1.0, 1.0, 1.0]]  A unit vector indicating the direction that the light is shining,  given in either World or View space, depending on the value of the ````space```` parameter.
-     * @param {Number[]} [cfg.color=[0.7, 0.7, 0.8 ]] The color of this DirLight.
-     * @param {Number} [cfg.intensity=1.0] The intensity of this DirLight, as a factor in range ````[0..1]````.
-     * @param {String} [cfg.space="view"] The coordinate system the DirLight is defined in - ````"view"```` or ````"space"````.
-     * @param {Boolean} [cfg.castsShadow=false] Flag which indicates if this DirLight casts a castsShadow.
-     */
-    constructor(owner, cfg = {}) {
-
-        super(owner, cfg);
-
-        this._shadowRenderBuf = null;
-        this._shadowViewMatrix = null;
-        this._shadowProjMatrix = null;
-        this._shadowViewMatrixDirty = true;
-        this._shadowProjMatrixDirty = true;
-
-        const camera = this.scene.camera;
-        const canvas = this.scene.canvas;
-
-        this._onCameraViewMatrix = camera.on("viewMatrix", () => {
-            this._shadowViewMatrixDirty = true;
-        });
-
-        this._onCameraProjMatrix = camera.on("projMatrix", () => {
-            this._shadowProjMatrixDirty = true;
-        });
-
-        this._onCanvasBoundary = canvas.on("boundary", () => {
-            this._shadowProjMatrixDirty = true;
-        });
-
-        this._state = new RenderState({
-
-            type: "dir",
-            dir: math.vec3([1.0, 1.0, 1.0]),
-            color: math.vec3([0.7, 0.7, 0.8]),
-            intensity: 1.0,
-            space: cfg.space || "view",
-            castsShadow: false,
-
-            getShadowViewMatrix: () => {
-                if (this._shadowViewMatrixDirty) {
-                    if (!this._shadowViewMatrix) {
-                        this._shadowViewMatrix = math.identityMat4();
-                    }
-                    const camera = this.scene.camera;
-                    const dir = this._state.dir;
-                    const look = camera.look;
-                    const eye = [look[0] - dir[0], look[1] - dir[1], look[2] - dir[2]];
-                    const up = [0, 1, 0];
-                    math.lookAtMat4v(eye, look, up, this._shadowViewMatrix);
-                    this._shadowViewMatrixDirty = false;
-                }
-                return this._shadowViewMatrix;
-            },
-
-            getShadowProjMatrix: () => {
-                if (this._shadowProjMatrixDirty) { // TODO: Set when canvas resizes
-                    if (!this._shadowProjMatrix) {
-                        this._shadowProjMatrix = math.identityMat4();
-                    }
-                    math.orthoMat4c(-40, 40, -40, 40, -40.0, 80, this._shadowProjMatrix);  // left, right, bottom, top, near, far, dest
-                    this._shadowProjMatrixDirty = false;
-                }
-                return this._shadowProjMatrix;
-            },
-
-            getShadowRenderBuf: () => {
-                if (!this._shadowRenderBuf) {
-                    this._shadowRenderBuf = new RenderBuffer(this.scene.canvas.canvas, this.scene.canvas.gl, {size: [1024, 1024]}); // Super old mobile devices have a limit of 1024x1024 textures
-                }
-                return this._shadowRenderBuf;
-            }
-        });
-
-        this.dir = cfg.dir;
-        this.color = cfg.color;
-        this.intensity = cfg.intensity;
-        this.castsShadow = cfg.castsShadow;
-
-        this.scene._lightCreated(this);
-    }
-
-    /**
-     * Sets the direction in which the DirLight is shining.
-     *
-     * Default value is ````[1.0, 1.0, 1.0]````.
-     *
-     * @param {Number[]} value The direction vector.
-     */
-    set dir(value) {
-        this._state.dir.set(value || [1.0, 1.0, 1.0]);
-        this._shadowViewMatrixDirty = true;
-        this.glRedraw();
-    }
-
-    /**
-     * Gets the direction in which the DirLight is shining.
-     *
-     * Default value is ````[1.0, 1.0, 1.0]````.
-     *
-     * @returns {Number[]} The direction vector.
-     */
-    get dir() {
-        return this._state.dir;
-    }
-
-    /**
-     * Sets the RGB color of this DirLight.
-     *
-     * Default value is ````[0.7, 0.7, 0.8]````.
-     *
-     * @param {Number[]} color The DirLight's RGB color.
-     */
-    set color(color) {
-        this._state.color.set(color || [0.7, 0.7, 0.8]);
-        this.glRedraw();
-    }
-
-    /**
-     * Gets the RGB color of this DirLight.
-     *
-     * Default value is ````[0.7, 0.7, 0.8]````.
-     *
-     * @returns {Number[]} The DirLight's RGB color.
-     */
-    get color() {
-        return this._state.color;
-    }
-
-    /**
-     * Sets the intensity of this DirLight.
-     *
-     * Default intensity is ````1.0```` for maximum intensity.
-     *
-     * @param {Number} intensity The DirLight's intensity
-     */
-    set intensity(intensity) {
-        intensity = intensity !== undefined ? intensity : 1.0;
-        this._state.intensity = intensity;
-        this.glRedraw();
-    }
-
-    /**
-     * Gets the intensity of this DirLight.
-     *
-     * Default value is ````1.0```` for maximum intensity.
-     *
-     * @returns {Number} The DirLight's intensity.
-     */
-    get intensity() {
-        return this._state.intensity;
-    }
-
-    /**
-     * Sets if this DirLight casts a shadow.
-     *
-     * Default value is ````false````.
-     *
-     * @param {Boolean} castsShadow Set ````true```` to cast shadows.
-     */
-    set castsShadow(castsShadow) {
-        castsShadow = !!castsShadow;
-        if (this._state.castsShadow === castsShadow) {
-            return;
-        }
-        this._state.castsShadow = castsShadow;
-        this._shadowViewMatrixDirty = true;
-        this.glRedraw();
-    }
-
-    /**
-     * Gets if this DirLight casts a shadow.
-     *
-     * Default value is ````false````.
-     *
-     * @returns {Boolean} ````true```` if this DirLight casts shadows.
-     */
-    get castsShadow() {
-        return this._state.castsShadow;
-    }
-
-    /**
-     * Destroys this DirLight.
-     */
-    destroy() {
-
-        const camera = this.scene.camera;
-        const canvas = this.scene.canvas;
-        camera.off(this._onCameraViewMatrix);
-        camera.off(this._onCameraProjMatrix);
-        canvas.off(this._onCanvasBoundary);
-
-        super.destroy();
-        this._state.destroy();
-        if (this._shadowRenderBuf) {
-            this._shadowRenderBuf.destroy();
-        }
-        this.scene._lightDestroyed(this);
-        this.glRedraw();
-    }
-}
-
-export {DirLight};

package/src/src/viewer/scene/lights/Light.js

@@ -1,29 +0,0 @@
-import {Component} from '../Component.js';
-
-/**
- * @desc A dynamic light source within a {@link Scene}.
- *
- * These are registered by {@link Light#id} in {@link Scene#lights}.
- */
-class Light extends Component {
-
-    /**
-     @private
-     */
-    get type() {
-        return "Light";
-    }
-
-    /**
-     * @private
-     */
-    get isLight() {
-        return true;
-    }
-
-    constructor(owner, cfg = {}) {
-        super(owner, cfg);
-    }
-}
-
-export {Light};