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

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

@@ -0,0 +1,175 @@
+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

@@ -0,0 +1,156 @@
+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

@@ -0,0 +1,314 @@
+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

@@ -0,0 +1,29 @@
+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};