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

package/src/src/viewer/scene/marker/SpriteMarker.js

@@ -0,0 +1,356 @@
+import {Mesh} from "../mesh/Mesh.js";
+import {ReadableGeometry} from "../geometry/ReadableGeometry.js";
+import {PhongMaterial, Texture} from "../materials/index.js";
+import {math} from "../math/math.js";
+import {Marker} from "./Marker.js";
+
+/**
+ * A {@link Marker} with a billboarded and textured quad attached to it.
+ *
+ * * Extends {@link Marker}
+ * * Keeps the quad oriented towards the viewpoint
+ * * Auto-fits the quad to the texture
+ * * Has a world-space position
+ * * Can be configured to hide the quad whenever the position is occluded by some other object
+ *
+ * ## Usage
+ *
+ * [[Run this example](/examples/#markers_SpriteMarker)]
+ *
+ * ```` javascript
+ * import {Viewer, SpriteMarker } from "./https://cdn.jsdelivr.net/npm/@xeokit/xeokit-sdk/dist/xeokit-sdk.es.min.js";
+ *
+ * const viewer = new Viewer({
+ *        canvasId: "myCanvas",
+ *      transparent: true
+ *  });
+ *
+ * viewer.scene.camera.eye = [0, 0, 25];
+ * viewer.scene.camera.look = [0, 0, 0];
+ * viewer.scene.camera.up = [0, 1, 0];
+ *
+ * new SpriteMarker(viewer.scene, {
+ *      worldPos: [-10, 0, 0],
+ *      src: "../assets/textures/diffuse/uvGrid2_512x1024.jpg",
+ *      size: 5,
+ *      occludable: false
+ *  });
+ *
+ * new SpriteMarker(viewer.scene, {
+ *      worldPos: [+10, 0, 0],
+ *      src: "../assets/textures/diffuse/uvGrid2_1024x512.jpg",
+ *      size: 4,
+ *      occludable: false
+ *  });
+ *````
+ */
+class SpriteMarker extends Marker {
+
+    /**
+     * @constructor
+     * @param {Component} owner Owner component. When destroyed, the owner will destroy this SpriteMarker as well.
+     * @param {*} [cfg] Configs
+     * @param {String} [cfg.id] Optional ID for this SpriteMarker, unique among all components in the parent scene, generated automatically when omitted.
+     * @param {Entity} [cfg.entity] Entity to associate this Marker with. When the SpriteMarker has an Entity, then {@link Marker#visible} will always be ````false```` if {@link Entity#visible} is false.
+     * @param {Boolean} [cfg.occludable=false] Indicates whether or not this Marker is hidden (ie. {@link Marker#visible} is ````false```` whenever occluded by {@link Entity}s in the {@link Scene}.
+     * @param {Number[]} [cfg.worldPos=[0,0,0]] World-space 3D Marker position.
+     * @param {String} [cfg.src=null] Path to image file to load into this SpriteMarker. See the {@link SpriteMarker#src} property for more info.
+     * @param {HTMLImageElement} [cfg.image=null] HTML Image object to load into this SpriteMarker. See the {@link SpriteMarker#image} property for more info.
+     * @param {Boolean} [cfg.flipY=false] Flips this SpriteMarker's texture image along its vertical axis when true.
+     * @param  {String} [cfg.encoding="linear"] Texture encoding format.  See the {@link Texture#encoding} property for more info.
+     */
+    constructor(owner, cfg = {}) {
+
+        super(owner, {
+            entity: cfg.entity,
+            occludable: cfg.occludable,
+            worldPos: cfg.worldPos
+        });
+
+        this._occluded = false;
+        this._visible = true;
+        this._src = null;
+        this._image = null;
+        this._pos = math.vec3();
+        this._origin = math.vec3();
+        this._rtcPos = math.vec3();
+        this._dir = math.vec3();
+        this._size = 1.0;
+        this._imageSize = math.vec2();
+
+        this._texture = new Texture(this, {
+            src: cfg.src
+        });
+
+        this._geometry = new ReadableGeometry(this, {
+            primitive: "triangles",
+            positions: [3, 3, 0, -3, 3, 0, -3, -3, 0, 3, -3, 0],
+            normals: [-1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0],
+            uv: [1, -1, 0, -1, 0, 0, 1, 0],
+            indices: [0, 1, 2, 0, 2, 3] // Ensure these will be front-faces
+        });
+
+        this._mesh = new Mesh(this, {
+            geometry: this._geometry,
+            material: new PhongMaterial(this, {
+                ambient: [0.9, 0.3, 0.9],
+                shininess: 30,
+                diffuseMap: this._texture,
+                backfaces: true
+            }),
+            scale: [1, 1, 1], // Note: by design, scale does not work with billboard
+            position: cfg.worldPos,
+            rotation: [90, 0, 0],
+            billboard: "spherical",
+            occluder: false // Don't occlude SpriteMarkers or Annotations
+        });
+
+        this.visible = true;
+        this.collidable = cfg.collidable;
+        this.clippable = cfg.clippable;
+        this.pickable = cfg.pickable;
+        this.opacity = cfg.opacity;
+        this.size = cfg.size;
+
+        if (cfg.image) {
+            this.image = cfg.image;
+        } else {
+            this.src = cfg.src;
+        }
+    }
+
+    _setVisible(visible) { // Called by VisibilityTester and this._entity.on("destroyed"..)
+        this._occluded = (!visible);
+        this._mesh.visible = this._visible && (!this._occluded);
+        super._setVisible(visible);
+    }
+
+    /**
+     * Sets if this ````SpriteMarker```` is visible or not.
+     *
+     * Default value is ````true````.
+     *
+     * @param {Boolean} visible Set ````true```` to make this ````SpriteMarker```` visible.
+     */
+    set visible(visible) {
+        this._visible = (visible === null || visible === undefined) ? true : visible;
+        this._mesh.visible = this._visible && (!this._occluded);
+    }
+
+    /**
+     * Gets if this ````SpriteMarker```` is visible or not.
+     *
+     * Default value is ````true````.
+     *
+     * @returns {Boolean} Returns ````true```` if visible.
+     */
+    get visible() {
+        return this._visible;
+    }
+
+    /**
+     * Sets an ````HTMLImageElement```` to source the image from.
+     *
+     * Sets {@link Texture#src} null.
+     *
+     * @type {HTMLImageElement}
+     */
+    set image(image) {
+        this._image = image;
+        if (this._image) {
+            this._imageSize[0] = this._image.width;
+            this._imageSize[1] = this._image.height;
+            this._updatePlaneSizeFromImage();
+            this._src = null;
+            this._texture.image = this._image;
+        }
+    }
+
+    /**
+     * Gets the ````HTMLImageElement```` the ````SpriteMarker````'s image is sourced from, if set.
+     *
+     * Returns null if not set.
+     *
+     * @type {HTMLImageElement}
+     */
+    get image() {
+        return this._image;
+    }
+
+    /**
+     * Sets an image file path that the ````SpriteMarker````'s image is sourced from.
+     *
+     * Accepted file types are PNG and JPEG.
+     *
+     * Sets {@link Texture#image} null.
+     *
+     * @type {String}
+     */
+    set src(src) {
+        this._src = src;
+        if (this._src) {
+            this._image = null;
+            const image = new Image();
+            image.onload = () => {
+                this._texture.image = image;
+                this._imageSize[0] = image.width;
+                this._imageSize[1] = image.height;
+                this._updatePlaneSizeFromImage();
+            };
+            image.src = this._src;
+        }
+    }
+
+    /**
+     * Gets the image file path that the ````SpriteMarker````'s image is sourced from, if set.
+     *
+     * Returns null if not set.
+     *
+     * @type {String}
+     */
+    get src() {
+        return this._src;
+    }
+
+    /**
+     * Sets the World-space size of the longest edge of the ````SpriteMarker````.
+     *
+     * Note that ````SpriteMarker```` sets its aspect ratio to match its image. If we set a value of ````1000````, and
+     * the image has size ````400x300````, then the ````SpriteMarker```` will then have size ````1000 x 750````.
+     *
+     * Default value is ````1.0````.
+     *
+     * @param {Number} size New World-space size of the ````SpriteMarker````.
+     */
+    set size(size) {
+        this._size = (size === undefined || size === null) ? 1.0 : size;
+        if (this._image) {
+            this._updatePlaneSizeFromImage()
+        }
+    }
+
+    /**
+     * Gets the World-space size of the longest edge of the ````SpriteMarker````.
+     *
+     * Returns {Number} World-space size of the ````SpriteMarker````.
+     */
+    get size() {
+        return this._size;
+    }
+
+    /**
+     * Sets if this ````SpriteMarker```` is included in boundary calculations.
+     *
+     * Default is ````true````.
+     *
+     * @type {Boolean}
+     */
+    set collidable(value) {
+        this._mesh.collidable = (value !== false);
+    }
+
+    /**
+     * Gets if this ````SpriteMarker```` is included in boundary calculations.
+     *
+     * Default is ````true````.
+     *
+     * @type {Boolean}
+     */
+    get collidable() {
+        return this._mesh.collidable;
+    }
+
+    /**
+     * Sets if this ````SpriteMarker```` is clippable.
+     *
+     * Clipping is done by the {@link SectionPlane}s in {@link Scene#sectionPlanes}.
+     *
+     * Default is ````true````.
+     *
+     * @type {Boolean}
+     */
+    set clippable(value) {
+        this._mesh.clippable = (value !== false);
+    }
+
+    /**
+     * Gets if this ````SpriteMarker````  is clippable.
+     *
+     * Clipping is done by the {@link SectionPlane}s in {@link Scene#sectionPlanes}.
+     *
+     * Default is ````true````.
+     *
+     * @type {Boolean}
+     */
+    get clippable() {
+        return this._mesh.clippable;
+    }
+
+    /**
+     * Sets if this ````SpriteMarker```` is pickable.
+     *
+     * Default is ````true````.
+     *
+     * @type {Boolean}
+     */
+    set pickable(value) {
+        this._mesh.pickable = (value !== false);
+    }
+
+    /**
+     * Gets if this ````SpriteMarker````  is pickable.
+     *
+     * Default is ````true````.
+     *
+     * @type {Boolean}
+     */
+    get pickable() {
+        return this._mesh.pickable;
+    }
+
+    /**
+     * Sets the opacity factor for this ````SpriteMarker````.
+     *
+     * This is a factor in range ````[0..1]```` which multiplies by the rendered fragment alphas.
+     *
+     * @type {Number}
+     */
+    set opacity(opacity) {
+        this._mesh.opacity = opacity;
+    }
+
+    /**
+     * Gets this ````SpriteMarker````'s opacity factor.
+     *
+     * This is a factor in range ````[0..1]```` which multiplies by the rendered fragment alphas.
+     *
+     * @type {Number}
+     */
+    get opacity() {
+        return this._mesh.opacity;
+    }
+
+    _updatePlaneSizeFromImage() {
+        const halfSize = this._size * 0.5;
+        const width = this._imageSize[0];
+        const height = this._imageSize[1];
+        const aspect = height / width;
+        if (width > height) {
+            this._geometry.positions = [
+                halfSize, halfSize * aspect, 0,
+                -halfSize, halfSize * aspect, 0,
+                -halfSize, -halfSize * aspect, 0,
+                halfSize, -halfSize * aspect, 0
+            ];
+        } else {
+            this._geometry.positions = [
+                halfSize / aspect, halfSize, 0,
+                -halfSize / aspect, halfSize, 0,
+                -halfSize / aspect, -halfSize, 0,
+                halfSize / aspect, -halfSize, 0
+            ];
+        }
+    }
+}
+
+export {SpriteMarker};

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

@@ -0,0 +1,2 @@
+export * from "./Marker.js";
+export * from "./SpriteMarker.js";

package/src/src/viewer/scene/materials/EdgeMaterial.js

@@ -0,0 +1,359 @@
+import {Material} from './Material.js';
+import {RenderState} from '../webgl/RenderState.js';
+
+const PRESETS = {
+    "default": {
+        edgeColor: [0.0, 0.0, 0.0],
+        edgeAlpha: 1.0,
+        edgeWidth: 1
+    },
+    "defaultWhiteBG": {
+        edgeColor: [0.2, 0.2, 0.2],
+        edgeAlpha: 1.0,
+        edgeWidth: 1
+    },
+    "defaultLightBG": {
+        edgeColor: [0.2, 0.2, 0.2],
+        edgeAlpha: 1.0,
+        edgeWidth: 1
+    },
+    "defaultDarkBG": {
+        edgeColor: [0.5, 0.5, 0.5],
+        edgeAlpha: 1.0,
+        edgeWidth: 1
+    }
+};
+
+/**
+ * @desc Configures the appearance of {@link Entity}s when their edges are emphasised.
+ *
+ * * Emphasise edges of an {@link Entity} by setting {@link Entity#edges} ````true````.
+ * * When {@link Entity}s are within the subtree of a root {@link Entity}, then setting {@link Entity#edges} on the root
+ * will collectively set that property on all sub-{@link Entity}s.
+ * * EdgeMaterial provides several presets. Select a preset by setting {@link EdgeMaterial#preset} to the ID of a preset in {@link EdgeMaterial#presets}.
+ * * By default, a {@link Mesh} uses the default EdgeMaterial in {@link Scene#edgeMaterial}, but you can assign each {@link Mesh#edgeMaterial} to a custom EdgeMaterial if required.
+ *
+ * ## Usage
+ *
+ * In the example below, we'll create a {@link Mesh} with its own EdgeMaterial and set {@link Mesh#edges} ````true```` to emphasise its edges.
+ *
+ * Recall that {@link Mesh} is a concrete subtype of the abstract {@link Entity} base class.
+ *
+ * [[Run this example](/examples/#materials_EdgeMaterial)]
+ *
+ * ````javascript
+ * import {Viewer, Mesh, buildSphereGeometry,
+ *      ReadableGeometry, PhongMaterial, EdgeMaterial} from "xeokit-sdk.es.js";
+ *
+ * const viewer = new Viewer({
+ *      canvasId: "myCanvas",
+ *      transparent: true
+ * });
+ *
+ * viewer.scene.camera.eye = [0, 0, 5];
+ * viewer.scene.camera.look = [0, 0, 0];
+ * viewer.scene.camera.up = [0, 1, 0];
+ *
+ * new Mesh(viewer.scene, {
+ *
+ *      geometry: new ReadableGeometry(viewer.scene, buildSphereGeometry({
+ *          radius: 1.5,
+ *          heightSegments: 24,
+ *          widthSegments: 16,
+ *          edgeThreshold: 2 // Default is 10
+ *      })),
+ *
+ *      material: new PhongMaterial(viewer.scene, {
+ *          diffuse: [0.4, 0.4, 1.0],
+ *          ambient: [0.9, 0.3, 0.9],
+ *          shininess: 30,
+ *          alpha: 0.5,
+ *          alphaMode: "blend"
+ *      }),
+ *
+ *      edgeMaterial: new EdgeMaterial(viewer.scene, {
+ *          edgeColor: [0.0, 0.0, 1.0]
+ *          edgeAlpha: 1.0,
+ *          edgeWidth: 2
+ *      }),
+ *
+ *      edges: true
+ * });
+ * ````
+ *
+ * Note the ````edgeThreshold```` configuration for the {@link ReadableGeometry} on our {@link Mesh}.  EdgeMaterial configures
+ * a wireframe representation of the {@link ReadableGeometry}, which will have inner edges (those edges between
+ * adjacent co-planar triangles) removed for visual clarity. The ````edgeThreshold```` indicates that, for
+ * this particular {@link ReadableGeometry}, an inner edge is one where the angle between the surface normals of adjacent triangles
+ * is not greater than ````5```` degrees. That's set to ````2```` by default, but we can override it to tweak the effect
+ * as needed for particular Geometries.
+ *
+ * Here's the example again, this time implicitly defaulting to the {@link Scene#edgeMaterial}. We'll also modify that EdgeMaterial
+ * to customize the effect.
+ *
+ * ````javascript
+ * new Mesh({
+ *     geometry: new ReadableGeometry(viewer.scene, buildSphereGeometry({
+ *          radius: 1.5,
+ *          heightSegments: 24,
+ *          widthSegments: 16,
+ *          edgeThreshold: 2 // Default is 10
+ *      })),
+ *     material: new PhongMaterial(viewer.scene, {
+ *         diffuse: [0.2, 0.2, 1.0]
+ *     }),
+ *     edges: true
+ * });
+ *
+ * var edgeMaterial = viewer.scene.edgeMaterial;
+ *
+ * edgeMaterial.edgeColor = [0.2, 1.0, 0.2];
+ * edgeMaterial.edgeAlpha = 1.0;
+ * edgeMaterial.edgeWidth = 2;
+ * ````
+ *
+ *  ## Presets
+ *
+ * Let's switch the {@link Scene#edgeMaterial} to one of the presets in {@link EdgeMaterial#presets}:
+ *
+ * ````javascript
+ * viewer.edgeMaterial.preset = EdgeMaterial.presets["sepia"];
+ * ````
+ *
+ * We can also create an EdgeMaterial from a preset, while overriding properties of the preset as required:
+ *
+ * ````javascript
+ * var myEdgeMaterial = new EdgeMaterial(viewer.scene, {
+ *      preset: "sepia",
+ *      edgeColor = [1.0, 0.5, 0.5]
+ * });
+ * ````
+ */
+class EdgeMaterial extends Material {
+
+    /**
+     @private
+     */
+    get type() {
+        return "EdgeMaterial";
+    }
+
+    /**
+     * Gets available EdgeMaterial presets.
+     *
+     * @type {Object}
+     */
+    get presets() {
+        return PRESETS;
+    };
+
+    /**
+     * @constructor
+     * @param {Component} owner Owner component. When destroyed, the owner will destroy this component as well.
+     * @param {*} [cfg] The EdgeMaterial configuration
+     * @param {String} [cfg.id] Optional ID, unique among all components in the parent {@link Scene}, generated automatically when omitted.
+     * @param {Number[]} [cfg.edgeColor=[0.2,0.2,0.2]] RGB edge color.
+     * @param {Number} [cfg.edgeAlpha=1.0] Edge transparency. A value of ````0.0```` indicates fully transparent, ````1.0```` is fully opaque.
+     * @param {Number} [cfg.edgeWidth=1] Edge width in pixels.
+     * @param {String} [cfg.preset] Selects a preset EdgeMaterial configuration - see {@link EdgeMaterial#presets}.
+     */
+    constructor(owner, cfg = {}) {
+
+        super(owner, cfg);
+
+        this._state = new RenderState({
+            type: "EdgeMaterial",
+            edges: null,
+            edgeColor: null,
+            edgeAlpha: null,
+            edgeWidth: null
+        });
+
+        this._preset = "default";
+
+        if (cfg.preset) { // Apply preset then override with configs where provided
+            this.preset = cfg.preset;
+            if (cfg.edgeColor) {
+                this.edgeColor = cfg.edgeColor;
+            }
+            if (cfg.edgeAlpha !== undefined) {
+                this.edgeAlpha = cfg.edgeAlpha;
+            }
+            if (cfg.edgeWidth !== undefined) {
+                this.edgeWidth = cfg.edgeWidth;
+            }
+        } else {
+            this.edgeColor = cfg.edgeColor;
+            this.edgeAlpha = cfg.edgeAlpha;
+            this.edgeWidth = cfg.edgeWidth;
+        }
+        this.edges = (cfg.edges !== false);
+    }
+
+
+    /**
+     * Sets if edges are visible.
+     *
+     * Default is ````true````.
+     *
+     * @type {Boolean}
+     */
+    set edges(value) {
+        value = value !== false;
+        if (this._state.edges === value) {
+            return;
+        }
+        this._state.edges = value;
+        this.glRedraw();
+    }
+
+    /**
+     * Gets if edges are visible.
+     *
+     * Default is ````true````.
+     *
+     * @type {Boolean}
+     */
+    get edges() {
+        return this._state.edges;
+    }
+
+    /**
+     * Sets RGB edge color.
+     *
+     * Default value is ````[0.2, 0.2, 0.2]````.
+     *
+     * @type {Number[]}
+     */
+    set edgeColor(value) {
+        let edgeColor = this._state.edgeColor;
+        if (!edgeColor) {
+            edgeColor = this._state.edgeColor = new Float32Array(3);
+        } else if (value && edgeColor[0] === value[0] && edgeColor[1] === value[1] && edgeColor[2] === value[2]) {
+            return;
+        }
+        if (value) {
+            edgeColor[0] = value[0];
+            edgeColor[1] = value[1];
+            edgeColor[2] = value[2];
+        } else {
+            edgeColor[0] = 0.2;
+            edgeColor[1] = 0.2;
+            edgeColor[2] = 0.2;
+        }
+        this.glRedraw();
+    }
+
+    /**
+     * Gets RGB edge color.
+     *
+     * Default value is ````[0.2, 0.2, 0.2]````.
+     *
+     * @type {Number[]}
+     */
+    get edgeColor() {
+        return this._state.edgeColor;
+    }
+
+    /**
+     * Sets edge transparency.
+     *
+     * A value of ````0.0```` indicates fully transparent, ````1.0```` is fully opaque.
+     *
+     * Default value is ````1.0````.
+     *
+     * @type {Number}
+     */
+    set edgeAlpha(value) {
+        value = (value !== undefined && value !== null) ? value : 1.0;
+        if (this._state.edgeAlpha === value) {
+            return;
+        }
+        this._state.edgeAlpha = value;
+        this.glRedraw();
+    }
+
+    /**
+     * Gets edge transparency.
+     *
+     * A value of ````0.0```` indicates fully transparent, ````1.0```` is fully opaque.
+     *
+     * Default value is ````1.0````.
+     *
+     * @type {Number}
+     */
+    get edgeAlpha() {
+        return this._state.edgeAlpha;
+    }
+
+    /**
+     * Sets edge width.
+     *
+     * This is not supported by WebGL implementations based on DirectX [2019].
+     *
+     * Default value is ````1.0```` pixels.
+     *
+     * @type {Number}
+     */
+    set edgeWidth(value) {
+        this._state.edgeWidth = value || 1.0;
+        this.glRedraw();
+    }
+
+    /**
+     * Gets edge width.
+     *
+     * This is not supported by WebGL implementations based on DirectX [2019].
+     *
+     * Default value is ````1.0```` pixels.
+     *
+     * @type {Number}
+     */
+    get edgeWidth() {
+        return this._state.edgeWidth;
+    }
+
+    /**
+     * Selects a preset EdgeMaterial configuration.
+     *
+     * Default value is ````"default"````.
+     *
+     * @type {String}
+     */
+    set preset(value) {
+        value = value || "default";
+        if (this._preset === value) {
+            return;
+        }
+        const preset = PRESETS[value];
+        if (!preset) {
+            this.error("unsupported preset: '" + value + "' - supported values are " + Object.keys(PRESETS).join(", "));
+            return;
+        }
+        this.edgeColor = preset.edgeColor;
+        this.edgeAlpha = preset.edgeAlpha;
+        this.edgeWidth = preset.edgeWidth;
+        this._preset = value;
+    }
+
+    /**
+     * The current preset EdgeMaterial configuration.
+     *
+     * Default value is ````"default"````.
+     *
+     * @type {String}
+     */
+    get preset() {
+        return this._preset;
+    }
+
+    /**
+     * Destroys this EdgeMaterial.
+     */
+    destroy() {
+        super.destroy();
+        this._state.destroy();
+    }
+}
+
+export {EdgeMaterial};