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

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

@@ -0,0 +1,77 @@
+import {CubeTexture} from './CubeTexture.js';
+
+/**
+ * @desc A **LightMap** specifies a cube texture light map.
+ *
+ * ## Usage
+ *
+ * ````javascript
+ * import {Viewer, Mesh, buildSphereGeometry,
+ *      ReadableGeometry, MetallicMaterial, LightMap} 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];
+ *
+ * new LightMap(viewer.scene, {
+ *     src: [
+ *         "textures/light/Uffizi_Gallery/Uffizi_Gallery_Irradiance_PX.png",
+ *         "textures/light/Uffizi_Gallery/Uffizi_Gallery_Irradiance_NX.png",
+ *         "textures/light/Uffizi_Gallery/Uffizi_Gallery_Irradiance_PY.png",
+ *         "textures/light/Uffizi_Gallery/Uffizi_Gallery_Irradiance_NY.png",
+ *         "textures/light/Uffizi_Gallery/Uffizi_Gallery_Irradiance_PZ.png",
+ *         "textures/light/Uffizi_Gallery/Uffizi_Gallery_Irradiance_NZ.png"
+ *     ]
+ * });
+ *
+ * // Create a sphere and ground plane
+ *
+ * new Mesh(viewer.scene, {
+ *      geometry: new ReadableGeometry(viewer.scene, buildSphereGeometry({
+ *          radius: 2.0
+ *      }),
+ *      new MetallicMaterial(viewer.scene, {
+ *          baseColor: [1, 1, 1],
+ *          metallic: 1.0,
+ *          roughness: 1.0
+ *      })
+ * });
+ * ````
+ */
+class LightMap extends CubeTexture {
+
+    /**
+     @private
+     */
+    get type() {
+        return "LightMap";
+    }
+
+    /**
+     * @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 LightMap, unique among all components in the parent scene, generated automatically when omitted.
+     * @param {String:Object} [cfg.meta] Optional map of user-defined metadata to attach to this LightMap.
+     * @param {String[]} [cfg.src=null] Paths to six image files to load into this LightMap.
+     * @param {Boolean} [cfg.flipY=false] Flips this LightMap'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);
+        this.scene._lightMapCreated(this);
+    }
+
+    destroy() {
+        super.destroy();
+        this.scene._lightMapDestroyed(this);
+    }
+}
+
+export {LightMap};

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

@@ -0,0 +1,395 @@
+import {Light} from './Light.js';
+import {RenderState} from '../webgl/RenderState.js';
+import {RenderBuffer} from '../webgl/RenderBuffer.js';
+import {math} from '../math/math.js';
+
+/**
+ * A positional light source that originates from a single point and spreads outward in all directions, with optional attenuation over distance.
+ *
+ * * Has a position in {@link PointLight#pos}, but no direction.
+ * * Defined in either *World* or *View* coordinate space. When in World-space, {@link PointLight#pos} is relative to
+ * the World coordinate system, and will appear to move as the {@link Camera} moves. When in View-space,
+ * {@link PointLight#pos} is relative to the View coordinate system, and will behave as if fixed to the viewer's head.
+ * * Has {@link PointLight#constantAttenuation}, {@link PointLight#linearAttenuation} and {@link PointLight#quadraticAttenuation}
+ * factors, which indicate how intensity attenuates over distance.
+ * * {@link AmbientLight}s, {@link PointLight}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 World-space PointLights.
+ *
+ * [[Run this example](/examples/#lights_PointLight_world)]
+ *
+ * ````javascript
+ * import {Viewer, Mesh, buildSphereGeometry, buildPlaneGeometry,
+ *      ReadableGeometry, PhongMaterial, Texture, PointLight} 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 world-space PointLights
+ *
+ * viewer.scene.clearLights();
+ *
+ * new PointLight(viewer.scene,{
+ *      id: "keyLight",
+ *      pos: [-80, 60, 80],
+ *      color: [1.0, 0.3, 0.3],
+ *      intensity: 1.0,
+ *      space: "world"
+ * });
+ *
+ * new PointLight(viewer.scene,{
+ *      id: "fillLight",
+ *      pos: [80, 40, 40],
+ *      color: [0.3, 1.0, 0.3],
+ *      intensity: 1.0,
+ *      space: "world"
+ * });
+ *
+ * new PointLight(viewer.scene,{
+ *      id: "rimLight",
+ *      pos: [-20, 80, -80],
+ *      color: [0.6, 0.6, 0.6],
+ *      intensity: 1.0,
+ *      space: "world"
+ * });
+ *
+ * // Create a sphere and ground plane
+ *
+ * new Mesh(viewer.scene, {
+ *      geometry: new ReadableGeometry(viewer.scene, buildSphereGeometry({
+ *          radius: 1.3
+ *      }),
+ *      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 PointLight extends Light {
+
+    /**
+     @private
+     */
+    get type() {
+        return "PointLight";
+    }
+
+    /**
+     * @param {Component} owner Owner component. When destroyed, the owner will destroy this PointLight as well.
+     * @param {*} [cfg] The PointLight configuration
+     * @param {String} [cfg.id] Optional ID, unique among all components in the parent {@link Scene}, generated automatically when omitted.
+     * @param {Number[]} [cfg.pos=[ 1.0, 1.0, 1.0 ]] Position, in either World or View space, depending on the value of the **space** parameter.
+     * @param {Number[]} [cfg.color=[0.7, 0.7, 0.8 ]] Color of this PointLight.
+     * @param {Number} [cfg.intensity=1.0] Intensity of this PointLight, as a factor in range ````[0..1]````.
+     * @param {Number} [cfg.constantAttenuation=0] Constant attenuation factor.
+     * @param {Number} [cfg.linearAttenuation=0] Linear attenuation factor.
+     * @param {Number} [cfg.quadraticAttenuation=0]Quadratic attenuation factor.
+     * @param {String} [cfg.space="view"]The coordinate system this PointLight is defined in - "view" or "world".
+     * @param {Boolean} [cfg.castsShadow=false] Flag which indicates if this PointLight casts a castsShadow.
+     */
+    constructor(owner, cfg = {}) {
+
+        super(owner, cfg);
+
+        const self = this;
+
+        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: "point",
+            pos: math.vec3([1.0, 1.0, 1.0]),
+            color: math.vec3([0.7, 0.7, 0.8]),
+            intensity: 1.0, attenuation: [0.0, 0.0, 0.0],
+            space: cfg.space || "view",
+            castsShadow: false,
+
+            getShadowViewMatrix: () => {
+                if (self._shadowViewMatrixDirty) {
+                    if (!self._shadowViewMatrix) {
+                        self._shadowViewMatrix = math.identityMat4();
+                    }
+                    const eye = self._state.pos;
+                    const look = camera.look;
+                    const up = camera.up;
+                    math.lookAtMat4v(eye, look, up, self._shadowViewMatrix);
+                    self._shadowViewMatrixDirty = false;
+                }
+                return self._shadowViewMatrix;
+            },
+
+            getShadowProjMatrix: () => {
+                if (self._shadowProjMatrixDirty) { // TODO: Set when canvas resizes
+                    if (!self._shadowProjMatrix) {
+                        self._shadowProjMatrix = math.identityMat4();
+                    }
+                    const canvas = self.scene.canvas.canvas;
+                    math.perspectiveMat4(70 * (Math.PI / 180.0), canvas.clientWidth / canvas.clientHeight, 0.1, 500.0, self._shadowProjMatrix);
+                    self._shadowProjMatrixDirty = false;
+                }
+                return self._shadowProjMatrix;
+            },
+
+            getShadowRenderBuf: () => {
+                if (!self._shadowRenderBuf) {
+                    self._shadowRenderBuf = new RenderBuffer(self.scene.canvas.canvas, self.scene.canvas.gl, {size: [1024, 1024]}); // Super old mobile devices have a limit of 1024x1024 textures
+                }
+                return self._shadowRenderBuf;
+            }
+        });
+
+        this.pos = cfg.pos;
+        this.color = cfg.color;
+        this.intensity = cfg.intensity;
+        this.constantAttenuation = cfg.constantAttenuation;
+        this.linearAttenuation = cfg.linearAttenuation;
+        this.quadraticAttenuation = cfg.quadraticAttenuation;
+        this.castsShadow = cfg.castsShadow;
+
+        this.scene._lightCreated(this);
+    }
+
+    /**
+     * Sets the position of this PointLight.
+     *
+     * This will be either World- or View-space, depending on the value of {@link PointLight#space}.
+     *
+     * Default value is ````[1.0, 1.0, 1.0]````.
+     *
+     * @param {Number[]} pos The position.
+     */
+    set pos(pos) {
+        this._state.pos.set(pos || [1.0, 1.0, 1.0]);
+        this._shadowViewMatrixDirty = true;
+        this.glRedraw();
+    }
+
+    /**
+     * Gets the position of this PointLight.
+     *
+     * This will be either World- or View-space, depending on the value of {@link PointLight#space}.
+     *
+     * Default value is ````[1.0, 1.0, 1.0]````.
+     *
+     * @returns {Number[]} The position.
+     */
+    get pos() {
+        return this._state.pos;
+    }
+
+    /**
+     * Sets the RGB color of this PointLight.
+     *
+     * Default value is ````[0.7, 0.7, 0.8]````.
+     *
+     * @param {Number[]} color The PointLight'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 PointLight.
+     *
+     * Default value is ````[0.7, 0.7, 0.8]````.
+     *
+     * @returns {Number[]} The PointLight's RGB color.
+     */
+    get color() {
+        return this._state.color;
+    }
+
+    /**
+     * Sets the intensity of this PointLight.
+     *
+     * Default intensity is ````1.0```` for maximum intensity.
+     *
+     * @param {Number} intensity The PointLight's intensity
+     */
+    set intensity(intensity) {
+        intensity = intensity !== undefined ? intensity : 1.0;
+        this._state.intensity = intensity;
+        this.glRedraw();
+    }
+
+    /**
+     * Gets the intensity of this PointLight.
+     *
+     * Default value is ````1.0```` for maximum intensity.
+     *
+     * @returns {Number} The PointLight's intensity.
+     */
+    get intensity() {
+        return this._state.intensity;
+    }
+
+    /**
+     * Sets the constant attenuation factor for this PointLight.
+     *
+     * Default value is ````0````.
+     *
+     * @param {Number} value The constant attenuation factor.
+     */
+    set constantAttenuation(value) {
+        this._state.attenuation[0] = value || 0.0;
+        this.glRedraw();
+    }
+
+    /**
+     * Gets the constant attenuation factor for this PointLight.
+     *
+     * Default value is ````0````.
+     *
+     * @returns {Number} The constant attenuation factor.
+     */
+    get constantAttenuation() {
+        return this._state.attenuation[0];
+    }
+
+    /**
+     * Sets the linear attenuation factor for this PointLight.
+     *
+     * Default value is ````0````.
+     *
+     * @param {Number} value The linear attenuation factor.
+     */
+    set linearAttenuation(value) {
+        this._state.attenuation[1] = value || 0.0;
+        this.glRedraw();
+    }
+
+    /**
+     * Gets the linear attenuation factor for this PointLight.
+     *
+     * Default value is ````0````.
+     *
+     * @returns {Number} The linear attenuation factor.
+     */
+    get linearAttenuation() {
+        return this._state.attenuation[1];
+    }
+
+    /**
+     * Sets the quadratic attenuation factor for this PointLight.
+     *
+     * Default value is ````0````.
+     *
+     * @param {Number} value The quadratic attenuation factor.
+     */
+    set quadraticAttenuation(value) {
+        this._state.attenuation[2] = value || 0.0;
+        this.glRedraw();
+    }
+
+    /**
+     * Gets the quadratic attenuation factor for this PointLight.
+     *
+     * Default value is ````0````.
+     *
+     * @returns {Number} The quadratic attenuation factor.
+     */
+    get quadraticAttenuation() {
+        return this._state.attenuation[2];
+    }
+
+    /**
+     * Sets if this PointLight 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 PointLight casts a shadow.
+     *
+     * Default value is ````false````.
+     *
+     * @returns {Boolean} ````true```` if this PointLight casts shadows.
+     */
+    get castsShadow() {
+        return this._state.castsShadow;
+    }
+
+    /**
+     * Destroys this PointLight.
+     */
+    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 {PointLight};

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

@@ -0,0 +1,79 @@
+import {CubeTexture} from './CubeTexture.js';
+
+/**
+ * @desc A reflection cube map.
+ *
+ * ## Usage
+ *
+ * ````javascript
+ * import {Viewer, Mesh, buildSphereGeometry,
+ *      ReadableGeometry, MetallicMaterial, ReflectionMap} 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];
+ *
+ * new ReflectionMap(viewer.scene, {
+ *     src: [
+ *         "textures/reflect/Uffizi_Gallery/Uffizi_Gallery_Radiance_PX.png",
+ *         "textures/reflect/Uffizi_Gallery/Uffizi_Gallery_Radiance_NX.png",
+ *         "textures/reflect/Uffizi_Gallery/Uffizi_Gallery_Radiance_PY.png",
+ *         "textures/reflect/Uffizi_Gallery/Uffizi_Gallery_Radiance_NY.png",
+ *         "textures/reflect/Uffizi_Gallery/Uffizi_Gallery_Radiance_PZ.png",
+ *         "textures/reflect/Uffizi_Gallery/Uffizi_Gallery_Radiance_NZ.png"
+ *     ]
+ * });
+ *
+ * // Create a sphere and ground plane
+ *
+ * new Mesh(viewer.scene, {
+ *      geometry: new ReadableGeometry(viewer.scene, buildSphereGeometry({
+ *          radius: 2.0
+ *      }),
+ *      new MetallicMaterial(viewer.scene, {
+ *          baseColor: [1, 1, 1],
+ *          metallic: 1.0,
+ *          roughness: 1.0
+ *      })
+ * });
+ * ````
+ */
+class ReflectionMap extends CubeTexture {
+
+    /**
+     @private
+     */
+    get type() {
+        return "ReflectionMap";
+    }
+
+    /**
+     * @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 ReflectionMap, 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 ReflectionMap.
+     * @param {Boolean} [cfg.flipY=false] Flips this ReflectionMap'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);
+        this.scene._lightsState.addReflectionMap(this._state);
+        this.scene._reflectionMapCreated(this);
+    }
+
+    /**
+     * Destroys this ReflectionMap.
+     */
+    destroy() {
+        super.destroy();
+        this.scene._reflectionMapDestroyed(this);
+    }
+}
+
+export {ReflectionMap};

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

@@ -0,0 +1,138 @@
+/**
+ A **Shadow** defines a shadow cast by a {@link DirLight} or a {@link SpotLight}.
+
+ Work in progress!
+
+ ## Overview
+
+ * Shadows are attached to {@link DirLight} and {@link SpotLight} components.
+
+ TODO
+
+ ## Examples
+
+ TODO
+
+ ## Usage
+
+ ```` javascript
+ var mesh = new xeokit.Mesh(scene, {
+
+        lights: new xeokit.Lights({
+            lights: [
+
+                new xeokit.SpotLight({
+                    pos: [0, 100, 100],
+                    dir: [0, -1, 0],
+                    color: [0.5, 0.7, 0.5],
+                    intensity: 1
+                    constantAttenuation: 0,
+                    linearAttenuation: 0,
+                    quadraticAttenuation: 0,
+                    space: "view",
+
+                    shadow: new xeokit.Shadow({
+                        resolution: [1000, 1000],
+                        intensity: 0.7,
+                        sampling: "stratified" // "stratified" | "poisson" | "basic"
+                    });
+                })
+            ]
+        }),
+ ,
+        material: new xeokit.PhongMaterial({
+            diffuse: [0.5, 0.5, 0.0]
+        }),
+
+        geometry: new xeokit.BoxGeometry()
+  });
+ ````
+
+ @class Shadow
+ @module xeokit
+ @submodule lighting
+ @constructor
+ @extends Component
+ @param {Component} owner Owner component. When destroyed, the owner will destroy this component as well.
+ @param {*} [cfg] The Shadow configuration
+ @param {String} [cfg.id] Optional ID, unique among all components in the parent {@link Scene}, generated automatically when omitted.
+ @param {String:Object} [cfg.meta] Optional map of user-defined metadata to attach to this Shadow.
+ @param [cfg.resolution=[1000,1000]] {Uint16Array} Resolution of the texture map for this Shadow.
+ @param [cfg.intensity=1.0] {Number} Intensity of this Shadow.
+ */
+import {Component} from '../Component.js';
+import {math} from '../math/math.js';
+
+class Shadow extends Component {
+
+    /**
+     @private
+     */
+    get type() {
+        return "Shadow";
+    }
+
+    constructor(owner, cfg={}) {
+
+        super(owner, cfg);
+
+        this._state = {
+            resolution: math.vec3([1000, 1000]),
+            intensity: 1.0
+        };
+
+        this.resolution = cfg.resolution;
+        this.intensity = cfg.intensity;
+    }
+
+    /**
+     The resolution of the texture map for this Shadow.
+
+     This will be either World- or View-space, depending on the value of {@link Shadow/space}.
+
+     Fires a {@link Shadow/resolution:event} event on change.
+
+     @property resolution
+     @default [1000, 1000]
+     @type Uint16Array
+     */
+    set resolution(value) {
+
+        this._state.resolution.set(value || [1000.0, 1000.0]);
+
+        this.glRedraw();
+    }
+
+    get resolution() {
+        return this._state.resolution;
+    }
+
+    /**
+     The intensity of this Shadow.
+
+     Fires a {@link Shadow/intensity:event} event on change.
+
+     @property intensity
+     @default 1.0
+     @type {Number}
+     */
+    set intensity(value) {
+
+        value = value !== undefined ? value : 1.0;
+
+        this._state.intensity = value;
+
+        this.glRedraw();
+    }
+
+    get intensity() {
+        return this._state.intensity;
+    }
+
+    destroy() {
+        super.destroy();
+        //this._state.destroy();
+    }
+}
+
+export {Shadow};

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

@@ -0,0 +1,5 @@
+export * from "./AmbientLight.js";
+export * from "./DirLight.js";
+export * from "./PointLight.js";
+export * from "./ReflectionMap.js";
+export * from "./LightMap.js";