csyjk 1.2.2 → 2.2.2

package/src/lib/gltf/assets/yjkkit-sdk/src/viewer/scene/mesh/Mesh.js

@@ -1,2165 +0,0 @@
-/**
- Fired when this Mesh is picked via a call to {@link Scene/pick:method"}}Scene#pick(){{/crossLink}}.
-
- The event parameters will be the hit result returned by the {@link Scene/pick:method"}}Scene#pick(){{/crossLink}} method.
- @event picked
- */
-import {math} from '../math/math.js';
-import {Component} from '../Component.js';
-import {RenderState} from '../webgl/RenderState.js';
-import {DrawRenderer} from "./draw/DrawRenderer.js";
-import {EmphasisFillRenderer} from "./emphasis/EmphasisFillRenderer.js";
-import {EmphasisEdgesRenderer} from "./emphasis/EmphasisEdgesRenderer.js";
-import {PickMeshRenderer} from "./pick/PickMeshRenderer.js";
-import {PickTriangleRenderer} from "./pick/PickTriangleRenderer.js";
-import {OcclusionRenderer} from "./occlusion/OcclusionRenderer.js";
-import {ShadowRenderer} from "./shadow/ShadowRenderer.js";
-
-import {geometryCompressionUtils} from '../math/geometryCompressionUtils.js';
-import {RenderFlags} from "../webgl/RenderFlags.js";
-
-const obb = math.OBB3();
-const angleAxis = math.vec4();
-const q1 = math.vec4();
-const q2 = math.vec4();
-const xAxis = math.vec3([1, 0, 0]);
-const yAxis = math.vec3([0, 1, 0]);
-const zAxis = math.vec3([0, 0, 1]);
-
-const veca = math.vec3(3);
-const vecb = math.vec3(3);
-
-const identityMat = math.identityMat4();
-
-/**
- * @desc An {@link Entity} that is a drawable element, with a {@link Geometry} and a {@link Material}, that can be
- * connected into a scene graph using {@link Node}s.
- *
- * ## Usage
- *
- * The example below is the same as the one given for {@link Node}, since the two classes work together.  In this example,
- * we'll create a scene graph in which a root {@link Node} represents a group and the Meshes are leaves.
- *
- * Since {@link Node} implements {@link Entity}, we can designate the root {@link Node} as a model, causing it to be registered by its
- * ID in {@link Scene#models}.
- *
- * Since Mesh also implements {@link Entity}, we can designate the leaf Meshes as objects, causing them to
- * be registered by their IDs in {@link Scene#objects}.
- *
- * We can then find those {@link Entity} types in {@link Scene#models} and {@link Scene#objects}.
- *
- * We can also update properties of our object-Meshes via calls to {@link Scene#setObjectsHighlighted} etc.
- *
- * [[Run this example](http://yjkkit.github.io/yjkkit-sdk/examples/#sceneRepresentation_SceneGraph)]
- *
- * ````javascript
- * import {Viewer, Mesh, Node, PhongMaterial, buildBoxGeometry, ReadableGeometry} from "yjkkit-sdk.es.js";
- *
- * const viewer = new Viewer({
- *     canvasId: "myCanvas"
- * });
- *
- * viewer.scene.camera.eye = [-21.80, 4.01, 6.56];
- * viewer.scene.camera.look = [0, -5.75, 0];
- * viewer.scene.camera.up = [0.37, 0.91, -0.11];
- *
- * const boxGeometry = new ReadableGeometry(viewer.scene, buildBoxGeometry({
- *      xSize: 1,
- *      ySize: 1,
- *      zSize: 1
- * }));
- *
- * new Node(viewer.scene, {
- *      id: "table",
- *      isModel: true, // <---------- Node represents a model, so is registered by ID in viewer.scene.models
- *      rotation: [0, 50, 0],
- *      position: [0, 0, 0],
- *      scale: [1, 1, 1],
- *
- *      children: [
- *
- *          new Mesh(viewer.scene, { // Red table leg
- *              id: "redLeg",
- *              isObject: true, // <------ Node represents an object, so is registered by ID in viewer.scene.objects
- *              position: [-4, -6, -4],
- *              scale: [1, 3, 1],
- *              rotation: [0, 0, 0],
- *              material: new PhongMaterial(viewer.scene, {
- *                  diffuse: [1, 0.3, 0.3]
- *              }),
- *              geometry: boxGeometry
- *          }),
- *
- *          new Mesh(viewer.scene, { // Green table leg
- *              id: "greenLeg",
- *              isObject: true, // <------ Node represents an object, so is registered by ID in viewer.scene.objects
- *              position: [4, -6, -4],
- *              scale: [1, 3, 1],
- *              rotation: [0, 0, 0],
- *              material: new PhongMaterial(viewer.scene, {
- *                  diffuse: [0.3, 1.0, 0.3]
- *              }),
- *              geometry: boxGeometry
- *          }),
- *
- *          new Mesh(viewer.scene, {// Blue table leg
- *              id: "blueLeg",
- *              isObject: true, // <------ Node represents an object, so is registered by ID in viewer.scene.objects
- *              position: [4, -6, 4],
- *              scale: [1, 3, 1],
- *              rotation: [0, 0, 0],
- *              material: new PhongMaterial(viewer.scene, {
- *                  diffuse: [0.3, 0.3, 1.0]
- *              }),
- *              geometry: boxGeometry
- *          }),
- *
- *          new Mesh(viewer.scene, {  // Yellow table leg
- *              id: "yellowLeg",
- *              isObject: true, // <------ Node represents an object, so is registered by ID in viewer.scene.objects
- *              position: [-4, -6, 4],
- *              scale: [1, 3, 1],
- *              rotation: [0, 0, 0],
- *              material: new PhongMaterial(viewer.scene, {
- *                   diffuse: [1.0, 1.0, 0.0]
- *              }),
- *              geometry: boxGeometry
- *          }),
- *
- *          new Mesh(viewer.scene, { // Purple table top
- *              id: "tableTop",
- *              isObject: true, // <------ Node represents an object, so is registered by ID in viewer.scene.objects
- *              position: [0, -3, 0],
- *              scale: [6, 0.5, 6],
- *              rotation: [0, 0, 0],
- *              material: new PhongMaterial(viewer.scene, {
- *                  diffuse: [1.0, 0.3, 1.0]
- *              }),
- *              geometry: boxGeometry
- *          })
- *      ]
- *  });
- *
- * // Find Nodes and Meshes by their IDs
- *
- * var table = viewer.scene.models["table"];                // Since table Node has isModel == true
- *
- * var redLeg = viewer.scene.objects["redLeg"];             // Since the Meshes have isObject == true
- * var greenLeg = viewer.scene.objects["greenLeg"];
- * var blueLeg = viewer.scene.objects["blueLeg"];
- *
- * // Highlight one of the table leg Meshes
- *
- * viewer.scene.setObjectsHighlighted(["redLeg"], true);    // Since the Meshes have isObject == true
- *
- * // Periodically update transforms on our Nodes and Meshes
- *
- * viewer.scene.on("tick", function () {
- *
- *       // Rotate legs
- *       redLeg.rotateY(0.5);
- *       greenLeg.rotateY(0.5);
- *       blueLeg.rotateY(0.5);
- *
- *       // Rotate table
- *       table.rotateY(0.5);
- *       table.rotateX(0.3);
- *   });
- * ````
- *
- * ## Metadata
- *
- * As mentioned, we can also associate {@link MetaModel}s and {@link MetaObject}s with our {@link Node}s and Meshes,
- * within a {@link MetaScene}. See {@link MetaScene} for an example.
- *
- * @implements {Entity}
- * @implements {Drawable}
- */
-class Mesh extends Component {
-
-    /**
-     @private
-     */
-    get type() {
-        return "Mesh";
-    }
-
-    /**
-     * @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, unique among all components in the parent scene, generated automatically when omitted.
-     * @param {String} [cfg.originalSystemId] ID of the corresponding object within the originating system, if any.
-     * @param {Boolean} [cfg.isModel] Specify ````true```` if this Mesh represents a model, in which case the Mesh will be registered by {@link Mesh#id} in {@link Scene#models} and may also have a corresponding {@link MetaModel} with matching {@link MetaModel#id}, registered by that ID in {@link MetaScene#metaModels}.
-     * @param {Boolean} [cfg.isObject] Specify ````true```` if this Mesh represents an object, in which case the Mesh will be registered by {@link Mesh#id} in {@link Scene#objects} and may also have a corresponding {@link MetaObject} with matching {@link MetaObject#id}, registered by that ID in {@link MetaScene#metaObjects}.
-     * @param {Node} [cfg.parent] The parent Node.
-     * @param {Number[]} [cfg.rtcCenter] Relative-to-center (RTC) coordinate system center for this Mesh. When this is given, then ````matrix````, ````position```` and ````geometry```` are all assumed to be relative to this center.
-     * @param {Number[]} [cfg.position=[0,0,0]] Local 3D position.
-     * @param {Number[]} [cfg.scale=[1,1,1]] Local scale.
-     * @param {Number[]} [cfg.rotation=[0,0,0]] Local rotation, as Euler angles given in degrees, for each of the X, Y and Z axis.
-     * @param {Number[]} [cfg.matrix=[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1]] Local modelling transform matrix. Overrides the position, scale and rotation parameters.
-     * @param {Number[]} [cfg.offset=[0,0,0]] World-space 3D translation offset. Translates the Mesh in World space, after modelling transforms.
-     * @param {Boolean} [cfg.visible=true] Indicates if the Mesh is initially visible.
-     * @param {Boolean} [cfg.culled=false] Indicates if the Mesh is initially culled from view.
-     * @param {Boolean} [cfg.pickable=true] Indicates if the Mesh is initially pickable.
-     * @param {Boolean} [cfg.clippable=true] Indicates if the Mesh is initially clippable.
-     * @param {Boolean} [cfg.collidable=true] Indicates if the Mesh is initially included in boundary calculations.
-     * @param {Boolean} [cfg.castsShadow=true] Indicates if the Mesh initially casts shadows.
-     * @param {Boolean} [cfg.receivesShadow=true]  Indicates if the Mesh initially receives shadows.
-     * @param {Boolean} [cfg.xrayed=false] Indicates if the Mesh is initially xrayed.
-     * @param {Boolean} [cfg.highlighted=false] Indicates if the Mesh is initially highlighted.
-     * @param {Boolean} [cfg.selected=false] Indicates if the Mesh is initially selected.
-     * @param {Boolean} [cfg.edges=false] Indicates if the Mesh's edges are initially emphasized.
-     * @param {Number[]} [cfg.colorize=[1.0,1.0,1.0]] Mesh's initial RGB colorize color, multiplies by the rendered fragment colors.
-     * @param {Number} [cfg.opacity=1.0] Mesh's initial opacity factor, multiplies by the rendered fragment alpha.
-     * @param {String} [cfg.billboard="none"] Mesh's billboarding behaviour. Options are "none" for no billboarding, "spherical" to always directly face {@link Camera.eye}, rotating both vertically and horizontally, or "cylindrical" to face the {@link Camera#eye} while rotating only about its vertically axis (use that mode for things like trees on a landscape).
-     * @param {Geometry} [cfg.geometry] {@link Geometry} to define the shape of this Mesh. Inherits {@link Scene#geometry} by default.
-     * @param {Material} [cfg.material] {@link Material} to define the normal rendered appearance for this Mesh. Inherits {@link Scene#material} by default.
-     * @param {EmphasisMaterial} [cfg.xrayMaterial] {@link EmphasisMaterial} to define the xrayed appearance for this Mesh. Inherits {@link Scene#xrayMaterial} by default.
-     * @param {EmphasisMaterial} [cfg.highlightMaterial] {@link EmphasisMaterial} to define the xrayed appearance for this Mesh. Inherits {@link Scene#highlightMaterial} by default.
-     * @param {EmphasisMaterial} [cfg.selectedMaterial] {@link EmphasisMaterial} to define the selected appearance for this Mesh. Inherits {@link Scene#selectedMaterial} by default.
-     * @param {EmphasisMaterial} [cfg.edgeMaterial] {@link EdgeMaterial} to define the appearance of enhanced edges for this Mesh. Inherits {@link Scene#edgeMaterial} by default.
-     */
-    constructor(owner, cfg = {}) {
-
-        super(owner, cfg);
-
-        /**
-         * ID of the corresponding object within the originating system, if any.
-         *
-         * @type {String}
-         * @abstract
-         */
-        this.originalSystemId = (cfg.originalSystemId || this.id);
-
-        /** @private **/
-        this.renderFlags = new RenderFlags();
-
-        this._state = new RenderState({ // NOTE: Renderer gets modeling and normal matrices from Mesh#matrix and Mesh.#normalWorldMatrix
-            visible: true,
-            culled: false,
-            pickable: null,
-            clippable: null,
-            collidable: null,
-            castsShadow: null,
-            receivesShadow: null,
-            xrayed: false,
-            highlighted: false,
-            selected: false,
-            edges: false,
-            stationary: !!cfg.stationary,
-            billboard: this._checkBillboard(cfg.billboard),
-            layer: null,
-            colorize: null,
-            pickID: this.scene._renderer.getPickID(this),
-            drawHash: "",
-            pickHash: "",
-            offset: math.vec3(),
-            rtcCenter: null,
-            rtcCenterHash: null
-        });
-
-        this._drawRenderer = null;
-        this._shadowRenderer = null;
-        this._emphasisFillRenderer = null;
-        this._emphasisEdgesRenderer = null;
-        this._pickMeshRenderer = null;
-        this._pickTriangleRenderer = null;
-        this._occlusionRenderer = null;
-
-        this._geometry = cfg.geometry ? this._checkComponent2(["ReadableGeometry", "VBOGeometry"], cfg.geometry) : this.scene.geometry;
-        this._material = cfg.material ? this._checkComponent2(["PhongMaterial", "MetallicMaterial", "SpecularMaterial", "LambertMaterial"], cfg.material) : this.scene.material;
-        this._xrayMaterial = cfg.xrayMaterial ? this._checkComponent("EmphasisMaterial", cfg.xrayMaterial) : this.scene.xrayMaterial;
-        this._highlightMaterial = cfg.highlightMaterial ? this._checkComponent("EmphasisMaterial", cfg.highlightMaterial) : this.scene.highlightMaterial;
-        this._selectedMaterial = cfg.selectedMaterial ? this._checkComponent("EmphasisMaterial", cfg.selectedMaterial) : this.scene.selectedMaterial;
-        this._edgeMaterial = cfg.edgeMaterial ? this._checkComponent("EdgeMaterial", cfg.edgeMaterial) : this.scene.edgeMaterial;
-
-        this._parentNode = null;
-
-        this._aabb = null;
-        this._aabbDirty = true;
-
-        this._numTriangles = (this._geometry ? this._geometry.numTriangles : 0);
-
-        this.scene._aabbDirty = true;
-
-        this._scale = math.vec3();
-        this._quaternion = math.identityQuaternion();
-        this._rotation = math.vec3();
-        this._position = math.vec3();
-
-        this._worldMatrix = math.identityMat4();
-        this._worldNormalMatrix = math.identityMat4();
-
-        this._localMatrixDirty = true;
-        this._worldMatrixDirty = true;
-        this._worldNormalMatrixDirty = true;
-
-        if (cfg.rtcCenter) {
-            this._state.rtcCenter = math.vec3(cfg.rtcCenter);
-            this._state.rtcCenterHash = cfg.rtcCenter.join();
-        }
-
-        if (cfg.matrix) {
-            this.matrix = cfg.matrix;
-        } else {
-            this.scale = cfg.scale;
-            this.position = cfg.position;
-            if (cfg.quaternion) {
-            } else {
-                this.rotation = cfg.rotation;
-            }
-        }
-
-        this._isObject = cfg.isObject;
-        if (this._isObject) {
-            this.scene._registerObject(this);
-        }
-
-        this._isModel = cfg.isModel;
-        if (this._isModel) {
-            this.scene._registerModel(this);
-        }
-
-        this.visible = cfg.visible;
-        this.culled = cfg.culled;
-        this.pickable = cfg.pickable;
-        this.clippable = cfg.clippable;
-        this.collidable = cfg.collidable;
-        this.castsShadow = cfg.castsShadow;
-        this.receivesShadow = cfg.receivesShadow;
-        this.xrayed = cfg.xrayed;
-        this.highlighted = cfg.highlighted;
-        this.selected = cfg.selected;
-        this.edges = cfg.edges;
-        this.layer = cfg.layer;
-        this.colorize = cfg.colorize;
-        this.opacity = cfg.opacity;
-        this.offset = cfg.offset;
-
-        if (cfg.parentId) {
-            const parentNode = this.scene.components[cfg.parentId];
-            if (!parentNode) {
-                this.error("Parent not found: '" + cfg.parentId + "'");
-            } else if (!parentNode.isNode) {
-                this.error("Parent is not a Node: '" + cfg.parentId + "'");
-            } else {
-                parentNode.addChild(this);
-            }
-            this._parentNode = parentNode;
-        } else if (cfg.parent) {
-            if (!cfg.parent.isNode) {
-                this.error("Parent is not a Node");
-            }
-            cfg.parent.addChild(this);
-            this._parentNode = cfg.parent;
-        }
-
-        this.compile();
-    }
-
-    //------------------------------------------------------------------------------------------------------------------
-    // Mesh members
-    //------------------------------------------------------------------------------------------------------------------
-
-    /**
-     * Returns true to indicate that this Component is a Mesh.
-     * @final
-     * @type {Boolean}
-     */
-    get isMesh() {
-        return true;
-    }
-
-    /**
-     * The parent Node.
-     *
-     * The parent Node may also be set by passing the Mesh to the parent's {@link Node#addChild} method.
-     *
-     * @type {Node}
-     */
-    get parent() {
-        return this._parentNode;
-    }
-
-    _checkBillboard(value) {
-        value = value || "none";
-        if (value !== "spherical" && value !== "cylindrical" && value !== "none") {
-            this.error("Unsupported value for 'billboard': " + value + " - accepted values are " +
-                "'spherical', 'cylindrical' and 'none' - defaulting to 'none'.");
-            value = "none";
-        }
-        return value;
-    }
-
-    /**
-     * Called by yjkkit to compile shaders for this Mesh.
-     * @private
-     */
-    compile() {
-        const drawHash = this._makeDrawHash();
-        if (this._state.drawHash !== drawHash) {
-            this._state.drawHash = drawHash;
-            this._putDrawRenderers();
-            this._drawRenderer = DrawRenderer.get(this);
-            // this._shadowRenderer = ShadowRenderer.get(this);
-            this._emphasisFillRenderer = EmphasisFillRenderer.get(this);
-            this._emphasisEdgesRenderer = EmphasisEdgesRenderer.get(this);
-        }
-        const pickHash = this._makePickHash();
-        if (this._state.pickHash !== pickHash) {
-            this._state.pickHash = pickHash;
-            this._putPickRenderers();
-            this._pickMeshRenderer = PickMeshRenderer.get(this);
-        }
-        const occlusionHash = this._makeOcclusionHash();
-        if (this._state.occlusionHash !== occlusionHash) {
-            this._state.occlusionHash = occlusionHash;
-            this._putOcclusionRenderer();
-            this._occlusionRenderer = OcclusionRenderer.get(this);
-        }
-    }
-
-    _setLocalMatrixDirty() {
-        this._localMatrixDirty = true;
-        this._setWorldMatrixDirty();
-    }
-
-    _setWorldMatrixDirty() {
-        this._worldMatrixDirty = true;
-        this._worldNormalMatrixDirty = true;
-    }
-
-    _buildWorldMatrix() {
-        const localMatrix = this.matrix;
-        if (!this._parentNode) {
-            for (let i = 0, len = localMatrix.length; i < len; i++) {
-                this._worldMatrix[i] = localMatrix[i];
-            }
-        } else {
-            math.mulMat4(this._parentNode.worldMatrix, localMatrix, this._worldMatrix);
-        }
-        this._worldMatrixDirty = false;
-    }
-
-    _buildWorldNormalMatrix() {
-        if (this._worldMatrixDirty) {
-            this._buildWorldMatrix();
-        }
-        if (!this._worldNormalMatrix) {
-            this._worldNormalMatrix = math.mat4();
-        }
-        // Note: order of inverse and transpose doesn't matter
-        math.transposeMat4(this._worldMatrix, this._worldNormalMatrix);
-        math.inverseMat4(this._worldNormalMatrix);
-        this._worldNormalMatrixDirty = false;
-    }
-
-    _setAABBDirty() {
-        if (this.collidable) {
-            for (let node = this; node; node = node._parentNode) {
-                node._aabbDirty = true;
-            }
-        }
-    }
-
-    _updateAABB() {
-        this.scene._aabbDirty = true;
-        if (!this._aabb) {
-            this._aabb = math.AABB3();
-        }
-        this._buildAABB(this.worldMatrix, this._aabb); // Mesh or PerformanceModel
-        this._aabbDirty = false;
-    }
-
-    _webglContextRestored() {
-        if (this._drawRenderer) {
-            this._drawRenderer.webglContextRestored();
-        }
-        if (this._shadowRenderer) {
-            this._shadowRenderer.webglContextRestored();
-        }
-        if (this._emphasisFillRenderer) {
-            this._emphasisFillRenderer.webglContextRestored();
-        }
-        if (this._emphasisEdgesRenderer) {
-            this._emphasisEdgesRenderer.webglContextRestored();
-        }
-        if (this._pickMeshRenderer) {
-            this._pickMeshRenderer.webglContextRestored();
-        }
-        if (this._pickTriangleRenderer) {
-            this._pickMeshRenderer.webglContextRestored();
-        }
-        if (this._occlusionRenderer) {
-            this._occlusionRenderer.webglContextRestored();
-        }
-    }
-
-    _makeDrawHash() {
-        const scene = this.scene;
-        const hash = [
-            scene.canvas.canvas.id,
-            (scene.gammaInput ? "gi;" : ";") + (scene.gammaOutput ? "go" : ""),
-            scene._lightsState.getHash(),
-            scene._sectionPlanesState.getHash()
-        ];
-        const state = this._state;
-        if (state.stationary) {
-            hash.push("/s");
-        }
-        if (state.billboard === "none") {
-            hash.push("/n");
-        } else if (state.billboard === "spherical") {
-            hash.push("/s");
-        } else if (state.billboard === "cylindrical") {
-            hash.push("/c");
-        }
-        if (state.receivesShadow) {
-            hash.push("/rs");
-        }
-        hash.push(";");
-        return hash.join("");
-    }
-
-    _makePickHash() {
-        const scene = this.scene;
-        const hash = [
-            scene.canvas.canvas.id,
-            scene._sectionPlanesState.getHash()
-        ];
-        const state = this._state;
-        if (state.stationary) {
-            hash.push("/s");
-        }
-        if (state.billboard === "none") {
-            hash.push("/n");
-        } else if (state.billboard === "spherical") {
-            hash.push("/s");
-        } else if (state.billboard === "cylindrical") {
-            hash.push("/c");
-        }
-        hash.push(";");
-        return hash.join("");
-    }
-
-    _makeOcclusionHash() {
-        const scene = this.scene;
-        const hash = [
-            scene.canvas.canvas.id,
-            scene._sectionPlanesState.getHash()
-        ];
-        const state = this._state;
-        if (state.stationary) {
-            hash.push("/s");
-        }
-        if (state.billboard === "none") {
-            hash.push("/n");
-        } else if (state.billboard === "spherical") {
-            hash.push("/s");
-        } else if (state.billboard === "cylindrical") {
-            hash.push("/c");
-        }
-        hash.push(";");
-        return hash.join("");
-    }
-
-    _buildAABB(worldMatrix, aabb) {
-
-        math.transformOBB3(worldMatrix, this._geometry.obb, obb);
-        math.OBB3ToAABB3(obb, aabb);
-
-        const offset = this._state.offset;
-
-        aabb[0] += offset[0];
-        aabb[1] += offset[1];
-        aabb[2] += offset[2];
-        aabb[3] += offset[0];
-        aabb[4] += offset[1];
-        aabb[5] += offset[2];
-
-        if (this._state.rtcCenter) {
-            const rtcCenter = this._state.rtcCenter;
-            aabb[0] += rtcCenter[0];
-            aabb[1] += rtcCenter[1];
-            aabb[2] += rtcCenter[2];
-            aabb[3] += rtcCenter[0];
-            aabb[4] += rtcCenter[1];
-            aabb[5] += rtcCenter[2];
-        }
-    }
-
-    /**
-     * Defines the shape of this Mesh.
-     *
-     * Set to {@link Scene#geometry} by default.
-     *
-     * @type {Geometry}
-     */
-    get geometry() {
-        return this._geometry;
-    }
-
-    /**
-     * Defines the appearance of this Mesh when rendering normally, ie. when not xrayed, highlighted or selected.
-     *
-     * Set to {@link Scene#material} by default.
-     *
-     * @type {Material}
-     */
-    get material() {
-        return this._material;
-    }
-
-    /**
-     * Sets the Mesh's local translation.
-     *
-     * Default value is ````[0,0,0]````.
-     *
-     * @type {Number[]}
-     */
-    set position(value) {
-        this._position.set(value || [0, 0, 0]);
-        this._setLocalMatrixDirty();
-        this._setAABBDirty();
-        this.glRedraw();
-    }
-
-    /**
-     * Gets the Mesh's local translation.
-     *
-     * Default value is ````[0,0,0]````.
-     *
-     * @type {Number[]}
-     */
-    get position() {
-        return this._position;
-    }
-
-    /**
-     * Sets the Mesh's local rotation, as Euler angles given in degrees, for each of the X, Y and Z axis.
-     *
-     * Default value is ````[0,0,0]````.
-     *
-     * @type {Number[]}
-     */
-    set rotation(value) {
-        this._rotation.set(value || [0, 0, 0]);
-        math.eulerToQuaternion(this._rotation, "XYZ", this._quaternion);
-        this._setLocalMatrixDirty();
-        this._setAABBDirty();
-        this.glRedraw();
-    }
-
-    /**
-     * Gets the Mesh's local rotation, as Euler angles given in degrees, for each of the X, Y and Z axis.
-     *
-     * Default value is ````[0,0,0]````.
-     *
-     * @type {Number[]}
-     */
-    get rotation() {
-        return this._rotation;
-    }
-
-    /**
-     * Sets the Mesh's local rotation quaternion.
-     *
-     * Default value is ````[0,0,0,1]````.
-     *
-     * @type {Number[]}
-     */
-    set quaternion(value) {
-        this._quaternion.set(value || [0, 0, 0, 1]);
-        math.quaternionToEuler(this._quaternion, "XYZ", this._rotation);
-        this._setLocalMatrixDirty();
-        this._setAABBDirty();
-        this.glRedraw();
-    }
-
-    /**
-     * Gets the Mesh's local rotation quaternion.
-     *
-     * Default value is ````[0,0,0,1]````.
-     *
-     * @type {Number[]}
-     */
-    get quaternion() {
-        return this._quaternion;
-    }
-
-    /**
-     * Sets the Mesh's local scale.
-     *
-     * Default value is ````[1,1,1]````.
-     *
-     * @type {Number[]}
-     */
-    set scale(value) {
-        this._scale.set(value || [1, 1, 1]);
-        this._setLocalMatrixDirty();
-        this._setAABBDirty();
-        this.glRedraw();
-    }
-
-    /**
-     * Gets the Mesh's local scale.
-     *
-     * Default value is ````[1,1,1]````.
-     *
-     * @type {Number[]}
-     */
-    get scale() {
-        return this._scale;
-    }
-
-    /**
-     * Sets the Mesh's local modeling transform matrix.
-     *
-     * Default value is ````[1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]````.
-     *
-     * @type {Number[]}
-     */
-    set matrix(value) {
-        if (!this.__localMatrix) {
-            this.__localMatrix = math.identityMat4();
-        }
-        this.__localMatrix.set(value || identityMat);
-        math.decomposeMat4(this.__localMatrix, this._position, this._quaternion, this._scale);
-        this._localMatrixDirty = false;
-        this._setWorldMatrixDirty();
-        this._setAABBDirty();
-        this.glRedraw();
-    }
-
-    /**
-     * Gets the Mesh's local modeling transform matrix.
-     *
-     * Default value is ````[1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]````.
-     *
-     * @type {Number[]}
-     */
-    get matrix() {
-        if (this._localMatrixDirty) {
-            if (!this.__localMatrix) {
-                this.__localMatrix = math.identityMat4();
-            }
-            math.composeMat4(this._position, this._quaternion, this._scale, this.__localMatrix);
-            this._localMatrixDirty = false;
-        }
-        return this.__localMatrix;
-    }
-
-    /**
-     * Gets the Mesh's World matrix.
-     *
-     * @property worldMatrix
-     * @type {Number[]}
-     */
-    get worldMatrix() {
-        if (this._worldMatrixDirty) {
-            this._buildWorldMatrix();
-        }
-        return this._worldMatrix;
-    }
-
-    /**
-     * Gets the Mesh's World normal matrix.
-     *
-     * @type {Number[]}
-     */
-    get worldNormalMatrix() {
-        if (this._worldNormalMatrixDirty) {
-            this._buildWorldNormalMatrix();
-        }
-        return this._worldNormalMatrix;
-    }
-
-    /**
-     * Rotates the Mesh about the given local axis by the given increment.
-     *
-     * @param {Number[]} axis Local axis about which to rotate.
-     * @param {Number} angle Angle increment in degrees.
-     */
-    rotate(axis, angle) {
-        angleAxis[0] = axis[0];
-        angleAxis[1] = axis[1];
-        angleAxis[2] = axis[2];
-        angleAxis[3] = angle * math.DEGTORAD;
-        math.angleAxisToQuaternion(angleAxis, q1);
-        math.mulQuaternions(this.quaternion, q1, q2);
-        this.quaternion = q2;
-        this._setLocalMatrixDirty();
-        this._setAABBDirty();
-        this.glRedraw();
-        return this;
-    }
-
-    /**
-     * Rotates the Mesh about the given World-space axis by the given increment.
-     *
-     * @param {Number[]} axis Local axis about which to rotate.
-     * @param {Number} angle Angle increment in degrees.
-     */
-    rotateOnWorldAxis(axis, angle) {
-        angleAxis[0] = axis[0];
-        angleAxis[1] = axis[1];
-        angleAxis[2] = axis[2];
-        angleAxis[3] = angle * math.DEGTORAD;
-        math.angleAxisToQuaternion(angleAxis, q1);
-        math.mulQuaternions(q1, this.quaternion, q1);
-        //this.quaternion.premultiply(q1);
-        return this;
-    }
-
-    /**
-     * Rotates the Mesh about the local X-axis by the given increment.
-     *
-     * @param {Number} angle Angle increment in degrees.
-     */
-    rotateX(angle) {
-        return this.rotate(xAxis, angle);
-    }
-
-    /**
-     * Rotates the Mesh about the local Y-axis by the given increment.
-     *
-     * @param {Number} angle Angle increment in degrees.
-     */
-    rotateY(angle) {
-        return this.rotate(yAxis, angle);
-    }
-
-    /**
-     * Rotates the Mesh about the local Z-axis by the given increment.
-     *
-     * @param {Number} angle Angle increment in degrees.
-     */
-    rotateZ(angle) {
-        return this.rotate(zAxis, angle);
-    }
-
-    /**
-     * Translates the Mesh along local space vector by the given increment.
-     *
-     * @param {Number[]} axis Normalized local space 3D vector along which to translate.
-     * @param {Number} distance Distance to translate along  the vector.
-     */
-    translate(axis, distance) {
-        math.vec3ApplyQuaternion(this.quaternion, axis, veca);
-        math.mulVec3Scalar(veca, distance, vecb);
-        math.addVec3(this.position, vecb, this.position);
-        this._setLocalMatrixDirty();
-        this._setAABBDirty();
-        this.glRedraw();
-        return this;
-    }
-
-    /**
-     * Translates the Mesh along the local X-axis by the given increment.
-     *
-     * @param {Number} distance Distance to translate along  the X-axis.
-     */
-    translateX(distance) {
-        return this.translate(xAxis, distance);
-    }
-
-    /**
-     * Translates the Mesh along the local Y-axis by the given increment.
-     *
-     * @param {Number} distance Distance to translate along  the Y-axis.
-     */
-    translateY(distance) {
-        return this.translate(yAxis, distance);
-    }
-
-    /**
-     * Translates the Mesh along the local Z-axis by the given increment.
-     *
-     * @param {Number} distance Distance to translate along  the Z-axis.
-     */
-    translateZ(distance) {
-        return this.translate(zAxis, distance);
-    }
-
-    _putDrawRenderers() {
-        if (this._drawRenderer) {
-            this._drawRenderer.put();
-            this._drawRenderer = null;
-        }
-        if (this._shadowRenderer) {
-            this._shadowRenderer.put();
-            this._shadowRenderer = null;
-        }
-        if (this._emphasisFillRenderer) {
-            this._emphasisFillRenderer.put();
-            this._emphasisFillRenderer = null;
-        }
-        if (this._emphasisEdgesRenderer) {
-            this._emphasisEdgesRenderer.put();
-            this._emphasisEdgesRenderer = null;
-        }
-    }
-
-    _putPickRenderers() {
-        if (this._pickMeshRenderer) {
-            this._pickMeshRenderer.put();
-            this._pickMeshRenderer = null;
-        }
-        if (this._pickTriangleRenderer) {
-            this._pickTriangleRenderer.put();
-            this._pickTriangleRenderer = null;
-        }
-    }
-
-    _putOcclusionRenderer() {
-        if (this._occlusionRenderer) {
-            this._occlusionRenderer.put();
-            this._occlusionRenderer = null;
-        }
-    }
-
-    //------------------------------------------------------------------------------------------------------------------
-    // Entity members
-    //------------------------------------------------------------------------------------------------------------------
-
-    /**
-     * Returns true to indicate that Mesh implements {@link Entity}.
-     *
-     * @returns {Boolean}
-     */
-    get isEntity() {
-        return true;
-    }
-
-    /**
-     * Returns ````true```` if this Mesh represents a model.
-     *
-     * When this returns ````true````, the Mesh will be registered by {@link Mesh#id} in {@link Scene#models} and
-     * may also have a corresponding {@link MetaModel}.
-     *
-     * @type {Boolean}
-     */
-    get isModel() {
-        return this._isModel;
-    }
-
-    /**
-     * Returns ````true```` if this Mesh represents an object.
-     *
-     * When this returns ````true````, the Mesh will be registered by {@link Mesh#id} in {@link Scene#objects} and
-     * may also have a corresponding {@link MetaObject}.
-     *
-     * @type {Boolean}
-     */
-    get isObject() {
-        return this._isObject;
-    }
-
-    /**
-     * Gets the Mesh's World-space 3D axis-aligned bounding box.
-     *
-     * Represented by a six-element Float64Array containing the min/max extents of the
-     * axis-aligned volume, ie. ````[xmin, ymin,zmin,xmax,ymax, zmax]````.
-     *
-     * @type {Number[]}
-     */
-    get aabb() {
-        if (this._aabbDirty) {
-            this._updateAABB();
-        }
-        return this._aabb;
-    }
-
-    /**
-     * Center of the relative-to-center (RTC) coordinate system for this Mesh.
-     *
-     * When this is given, then {@link Mesh#matrix}, {@link Mesh#position} and {@link Mesh#geometry} are all assumed to be relative to this center position.
-     *
-     * @type {Float64Array}
-     */
-    set rtcCenter(rtcCenter) {
-        if (rtcCenter) {
-            if (!this._state.rtcCenter) {
-                this._state.rtcCenter = math.vec3();
-            }
-            this._state.rtcCenter.set(rtcCenter);
-            this._state.rtcCenterHash = rtcCenter.join();
-            this._setAABBDirty();
-            this.scene._aabbDirty = true;
-        } else {
-            if (this._state.rtcCenter) {
-                this._state.rtcCenter = null;
-                this._state.rtcCenterHash = null;
-                this._setAABBDirty();
-                this.scene._aabbDirty = true;
-            }
-        }
-    }
-
-    /**
-     * 3D origin of the Mesh's {@link Geometry}'s vertex positions.
-     *
-     * When this is defined, then the positions are RTC, which means that they are relative to this position.
-     *
-     * @type {Float64Array}
-     */
-    get rtcCenter() {
-        return this._state.rtcCenter;
-    }
-
-    /**
-     * The approximate number of triangles in this Mesh.
-     *
-     * @type {Number}
-     */
-    get numTriangles() {
-        return this._numTriangles;
-    }
-
-    /**
-     * Sets if this Mesh is visible.
-     *
-     * Only rendered when {@link Mesh#visible} is ````true```` and {@link Mesh#culled} is ````false````.
-     *
-     * When {@link Mesh#isObject} and {@link Mesh#visible} are both ````true```` the Mesh will be
-     * registered by {@link Mesh#id} in {@link Scene#visibleObjects}.
-     *
-     * @type {Boolean}
-     */
-    set visible(visible) {
-        visible = visible !== false;
-        this._state.visible = visible;
-        if (this._isObject) {
-            this.scene._objectVisibilityUpdated(this);
-        }
-        this.glRedraw();
-    }
-
-    /**
-     * Gets if this Mesh is visible.
-     *
-     * Only rendered when {@link Mesh#visible} is ````true```` and {@link Mesh#culled} is ````false````.
-     *
-     * When {@link Mesh#isObject} and {@link Mesh#visible} are both ````true```` the Mesh will be
-     * registered by {@link Mesh#id} in {@link Scene#visibleObjects}.
-     *
-     * @type {Boolean}
-     */
-    get visible() {
-        return this._state.visible;
-    }
-
-    /**
-     * Sets if this Mesh is xrayed.
-     *
-     * XRayed appearance is configured by the {@link EmphasisMaterial} referenced by {@link Mesh#xrayMaterial}.
-     *
-     * When {@link Mesh#isObject} and {@link Mesh#xrayed} are both ````true``` the Mesh will be
-     * registered by {@link Mesh#id} in {@link Scene#xrayedObjects}.
-     *
-     * @type {Boolean}
-     */
-    set xrayed(xrayed) {
-        xrayed = !!xrayed;
-        if (this._state.xrayed === xrayed) {
-            return;
-        }
-        this._state.xrayed = xrayed;
-        if (this._isObject) {
-            this.scene._objectXRayedUpdated(this);
-        }
-        this.glRedraw();
-    }
-
-    /**
-     * Gets if this Mesh is xrayed.
-     *
-     * XRayed appearance is configured by the {@link EmphasisMaterial} referenced by {@link Mesh#xrayMaterial}.
-     *
-     * When {@link Mesh#isObject} and {@link Mesh#xrayed} are both ````true``` the Mesh will be
-     * registered by {@link Mesh#id} in {@link Scene#xrayedObjects}.
-     *
-     * @type {Boolean}
-     */
-    get xrayed() {
-        return this._state.xrayed;
-    }
-
-    /**
-     * Sets if this Mesh is highlighted.
-     *
-     * Highlighted appearance is configured by the {@link EmphasisMaterial} referenced by {@link Mesh#highlightMaterial}.
-     *
-     * When {@link Mesh#isObject} and {@link Mesh#highlighted} are both ````true```` the Mesh will be
-     * registered by {@link Mesh#id} in {@link Scene#highlightedObjects}.
-     *
-     * @type {Boolean}
-     */
-    set highlighted(highlighted) {
-        highlighted = !!highlighted;
-        if (highlighted === this._state.highlighted) {
-            return;
-        }
-        this._state.highlighted = highlighted;
-        if (this._isObject) {
-            this.scene._objectHighlightedUpdated(this);
-        }
-        this.glRedraw();
-    }
-
-    /**
-     * Gets if this Mesh is highlighted.
-     *
-     * Highlighted appearance is configured by the {@link EmphasisMaterial} referenced by {@link Mesh#highlightMaterial}.
-     *
-     * When {@link Mesh#isObject} and {@link Mesh#highlighted} are both ````true```` the Mesh will be
-     * registered by {@link Mesh#id} in {@link Scene#highlightedObjects}.
-     *
-     * @type {Boolean}
-     */
-    get highlighted() {
-        return this._state.highlighted;
-    }
-
-    /**
-     * Sets if this Mesh is selected.
-     *
-     * Selected appearance is configured by the {@link EmphasisMaterial} referenced by {@link Mesh#selectedMaterial}.
-     *
-     * When {@link Mesh#isObject} and {@link Mesh#selected} are both ````true``` the Mesh will be
-     * registered by {@link Mesh#id} in {@link Scene#selectedObjects}.
-     *
-     * @type {Boolean}
-     */
-    set selected(selected) {
-        selected = !!selected;
-        if (selected === this._state.selected) {
-            return;
-        }
-        this._state.selected = selected;
-        if (this._isObject) {
-            this.scene._objectSelectedUpdated(this);
-        }
-        this.glRedraw();
-    }
-
-    /**
-     * Gets if this Mesh is selected.
-     *
-     * Selected appearance is configured by the {@link EmphasisMaterial} referenced by {@link Mesh#selectedMaterial}.
-     *
-     * When {@link Mesh#isObject} and {@link Mesh#selected} are both ````true``` the Mesh will be
-     * registered by {@link Mesh#id} in {@link Scene#selectedObjects}.
-     *
-     * @type {Boolean}
-     */
-    get selected() {
-        return this._state.selected;
-    }
-
-    /**
-     * Sets if this Mesh is edge-enhanced.
-     *
-     * Edge appearance is configured by the {@link EdgeMaterial} referenced by {@link Mesh#edgeMaterial}.
-     *
-     * @type {Boolean}
-     */
-    set edges(edges) {
-        edges = !!edges;
-        if (edges === this._state.edges) {
-            return;
-        }
-        this._state.edges = edges;
-        this.glRedraw();
-    }
-
-    /**
-     * Gets if this Mesh is edge-enhanced.
-     *
-     * Edge appearance is configured by the {@link EdgeMaterial} referenced by {@link Mesh#edgeMaterial}.
-     *
-     * @type {Boolean}
-     */
-    get edges() {
-        return this._state.edges;
-    }
-
-    /**
-     * Sets if this Mesh is culled.
-     *
-     * Only rendered when {@link Mesh#visible} is ````true```` and {@link Mesh#culled} is ````false````.
-     *
-     * @type {Boolean}
-     */
-    set culled(value) {
-        this._state.culled = !!value;
-        this.glRedraw();
-    }
-
-    /**
-     * Gets if this Mesh is culled.
-     *
-     * Only rendered when {@link Mesh#visible} is ````true```` and {@link Mesh#culled} is ````false````.
-     *
-     * @type {Boolean}
-     */
-    get culled() {
-        return this._state.culled;
-    }
-
-    /**
-     * Sets if this Mesh is clippable.
-     *
-     * Clipping is done by the {@link SectionPlane}s in {@link Scene#sectionPlanes}.
-     *
-     * @type {Boolean}
-     */
-    set clippable(value) {
-        value = value !== false;
-        if (this._state.clippable === value) {
-            return;
-        }
-        this._state.clippable = value;
-        this.glRedraw();
-    }
-
-    /**
-     * Gets if this Mesh is clippable.
-     *
-     * Clipping is done by the {@link SectionPlane}s in {@link Scene#sectionPlanes}.
-     *
-     * @type {Boolean}
-     */
-    get clippable() {
-        return this._state.clippable;
-    }
-
-    /**
-     * Sets if this Mesh included in boundary calculations.
-     *
-     * @type {Boolean}
-     */
-    set collidable(value) {
-        value = value !== false;
-        if (value === this._state.collidable) {
-            return;
-        }
-        this._state.collidable = value;
-        this._setAABBDirty();
-        this.scene._aabbDirty = true;
-
-    }
-
-    /**
-     * Gets if this Mesh included in boundary calculations.
-     *
-     * @type {Boolean}
-     */
-    get collidable() {
-        return this._state.collidable;
-    }
-
-    /**
-     * Sets if this Mesh is pickable.
-     *
-     * Picking is done via calls to {@link Scene#pick}.
-     *
-     * @type {Boolean}
-     */
-    set pickable(value) {
-        value = value !== false;
-        if (this._state.pickable === value) {
-            return;
-        }
-        this._state.pickable = value;
-        // No need to trigger a render;
-        // state is only used when picking
-    }
-
-    /**
-     * Gets if this Mesh is pickable.
-     *
-     * Picking is done via calls to {@link Scene#pick}.
-     *
-     * @type {Boolean}
-     */
-    get pickable() {
-        return this._state.pickable;
-    }
-
-    /**
-     * Sets if this Mesh casts shadows.
-     *
-     * @type {Boolean}
-     */
-    set castsShadow(value) {
-        value = value !== false;
-        if (value === this._state.castsShadow) {
-            return;
-        }
-        this._state.castsShadow = value;
-        this.glRedraw();
-    }
-
-    /**
-     * Gets if this Mesh casts shadows.
-     *
-     * @type {Boolean}
-     */
-    get castsShadow() {
-        return this._state.castsShadow;
-    }
-
-    /**
-     * Sets if this Mesh can have shadows cast upon it.
-     *
-     * @type {Boolean}
-     */
-    set receivesShadow(value) {
-        value = value !== false;
-        if (value === this._state.receivesShadow) {
-            return;
-        }
-        this._state.receivesShadow = value;
-        this._state.hash = value ? "/mod/rs;" : "/mod;";
-        this.fire("dirty", this); // Now need to (re)compile objectRenderers to include/exclude shadow mapping
-    }
-
-    /**
-     * Gets if this Mesh can have shadows cast upon it.
-     *
-     * @type {Boolean}
-     */
-    get receivesShadow() {
-        return this._state.receivesShadow;
-    }
-
-    /**
-     * Gets if this Mesh can have Scalable Ambient Obscurance (SAO) applied to it.
-     *
-     * SAO is configured by {@link SAO}.
-     *
-     * @type {Boolean}
-     * @abstract
-     */
-    get saoEnabled() {
-        return false; // TODO: Support SAO on Meshes
-    }
-
-    /**
-     * Sets the RGB colorize color for this Mesh.
-     *
-     * Multiplies by rendered fragment colors.
-     *
-     * Each element of the color is in range ````[0..1]````.
-     *
-     * @type {Number[]}
-     */
-    set colorize(value) {
-        let colorize = this._state.colorize;
-        if (!colorize) {
-            colorize = this._state.colorize = new Float32Array(4);
-            colorize[3] = 1;
-        }
-        if (value) {
-            colorize[0] = value[0];
-            colorize[1] = value[1];
-            colorize[2] = value[2];
-        } else {
-            colorize[0] = 1;
-            colorize[1] = 1;
-            colorize[2] = 1;
-        }
-        const colorized = (!!value);
-        this.scene._objectColorizeUpdated(this, colorized);
-        this.glRedraw();
-    }
-
-    /**
-     * Gets the RGB colorize color for this Mesh.
-     *
-     * Multiplies by rendered fragment colors.
-     *
-     * Each element of the color is in range ````[0..1]````.
-     *
-     * @type {Number[]}
-     */
-    get colorize() {
-        return this._state.colorize;
-    }
-
-    /**
-     * Sets the opacity factor for this Mesh.
-     *
-     * This is a factor in range ````[0..1]```` which multiplies by the rendered fragment alphas.
-     *
-     * @type {Number}
-     */
-    set opacity(opacity) {
-        let colorize = this._state.colorize;
-        if (!colorize) {
-            colorize = this._state.colorize = new Float32Array(4);
-            colorize[0] = 1;
-            colorize[1] = 1;
-            colorize[2] = 1;
-        }
-        const opacityUpdated = (opacity !== null && opacity !== undefined);
-        colorize[3] = opacityUpdated ? opacity : 1.0;
-        this.scene._objectOpacityUpdated(this, opacityUpdated);
-        this.glRedraw();
-    }
-
-    /**
-     * Gets the opacity factor for this Mesh.
-     *
-     * This is a factor in range ````[0..1]```` which multiplies by the rendered fragment alphas.
-     *
-     * @type {Number}
-     */
-    get opacity() {
-        return this._state.colorize[3];
-    }
-
-    /**
-     * Gets if this Mesh is transparent.
-     * @returns {Boolean}
-     */
-    get transparent() {
-        return this._material.alphaMode === 2 /* blend */ || this._state.colorize[3] < 1
-    }
-
-    /**
-     * Sets the Mesh's rendering order relative to other Meshes.
-     *
-     * Default value is ````0````.
-     *
-     * This can be set on multiple transparent Meshes, to make them render in a specific order for correct alpha blending.
-     *
-     * @type {Number}
-     */
-    set layer(value) {
-        // TODO: Only accept rendering layer in range [0...MAX_layer]
-        value = value || 0;
-        value = Math.round(value);
-        if (value === this._state.layer) {
-            return;
-        }
-        this._state.layer = value;
-        this._renderer.needStateSort();
-    }
-
-    /**
-     * Gets the Mesh's rendering order relative to other Meshes.
-     *
-     * Default value is ````0````.
-     *
-     * This can be set on multiple transparent Meshes, to make them render in a specific order for correct alpha blending.
-     *
-     * @type {Number}
-     */
-    get layer() {
-        return this._state.layer;
-    }
-
-    /**
-     * Gets if the Node's position is stationary.
-     *
-     * When true, will disable the effect of {@link Camera} translations for this Mesh, while still allowing it to rotate. This is useful for skyboxes.
-     *
-     * @type {Boolean}
-     */
-    get stationary() {
-        return this._state.stationary;
-    }
-
-    /**
-     * Gets the Node's billboarding behaviour.
-     *
-     * Options are:
-     * * ````"none"```` -  (default) - No billboarding.
-     * * ````"spherical"```` - Mesh is billboarded to face the viewpoint, rotating both vertically and horizontally.
-     * * ````"cylindrical"```` - Mesh is billboarded to face the viewpoint, rotating only about its vertically axis. Use this mode for things like trees on a landscape.
-     * @type {String}
-     */
-    get billboard() {
-        return this._state.billboard;
-    }
-
-    /**
-     * Sets the Mesh's 3D World-space offset.
-     *
-     * The offset dynamically translates the Mesh in World-space.
-     *
-     * Default value is ````[0, 0, 0]````.
-     *
-     * Provide a null or undefined value to reset to the default value.
-     *
-     * @type {Number[]}
-     */
-    set offset(value) {
-        this._state.offset.set(value || [0, 0, 0]);
-        this._setAABBDirty();
-        this.glRedraw();
-    }
-
-    /**
-     * Gets the Mesh's 3D World-space offset.
-     *
-     * Default value is ````[0,0,0]````.
-     *
-     * @type {Number[]}
-     */
-    get offset() {
-        return this._state.offset;
-    }
-
-    //------------------------------------------------------------------------------------------------------------------
-    // Drawable members
-    //------------------------------------------------------------------------------------------------------------------
-
-    /**
-     * Returns true to indicate that Mesh implements {@link Drawable}.
-     * @final
-     * @type {Boolean}
-     */
-    get isDrawable() {
-        return true;
-    }
-
-    /**
-     * Property with final value ````true```` to indicate that yjkkit should render this Mesh in sorted order, relative to other Meshes.
-     *
-     * The sort order is determined by {@link Mesh#stateSortCompare}.
-     *
-     * Sorting is essential for rendering performance, so that yjkkit is able to avoid applying runs of the same state changes to the GPU, ie. can collapse them.
-     *
-     * @type {Boolean}
-     */
-    get isStateSortable() {
-        return true;
-    }
-
-    /**
-     * Comparison function used by the renderer to determine the order in which yjkkit should render the Mesh, relative to to other Meshes.
-     *
-     * yjkkit requires this method because Mesh implements {@link Drawable}.
-     *
-     * Sorting is essential for rendering performance, so that yjkkit is able to avoid needlessly applying runs of the same rendering state changes to the GPU, ie. can collapse them.
-     *
-     * @param {Mesh} mesh1
-     * @param {Mesh} mesh2
-     * @returns {number}
-     */
-    stateSortCompare(mesh1, mesh2) {
-        return (mesh1._state.layer - mesh2._state.layer)
-            || (mesh1._drawRenderer.id - mesh2._drawRenderer.id) // Program state
-            || (mesh1._material._state.id - mesh2._material._state.id) // Material state
-            || (mesh1._geometry._state.id - mesh2._geometry._state.id); // Geometry state
-    }
-
-    /** @private */
-    rebuildRenderFlags() {
-        this.renderFlags.reset();
-        if (!this._getActiveSectionPlanes()) {
-            this.renderFlags.culled = true;
-            return;
-        }
-        this.renderFlags.numLayers = 1;
-        this.renderFlags.numVisibleLayers = 1;
-        this.renderFlags.visibleLayers[0] = 0;
-        this._updateRenderFlags();
-    }
-
-    /**
-     * @private
-     */
-    _updateRenderFlags() {
-
-        const renderFlags = this.renderFlags;
-        const state = this._state;
-
-        if (state.xrayed) {
-            const xrayMaterial = this._xrayMaterial._state;
-            if (xrayMaterial.fill) {
-                if (xrayMaterial.fillAlpha < 1.0) {
-                    renderFlags.xrayedSilhouetteTransparent = true;
-                } else {
-                    renderFlags.xrayedSilhouetteOpaque = true;
-                }
-            }
-            if (xrayMaterial.edges) {
-                if (xrayMaterial.edgeAlpha < 1.0) {
-                    renderFlags.xrayedEdgesTransparent = true;
-                } else {
-                    renderFlags.xrayedEdgesOpaque = true;
-                }
-            }
-        } else {
-            const normalMaterial = this._material._state;
-            if (normalMaterial.alpha < 1.0 || state.colorize[3] < 1.0) {
-                renderFlags.colorTransparent = true;
-            } else {
-                renderFlags.colorOpaque = true;
-            }
-            if (state.edges) {
-                const edgeMaterial = this._edgeMaterial._state;
-                if (edgeMaterial.alpha < 1.0) {
-                    renderFlags.edgesTransparent = true;
-                } else {
-                    renderFlags.edgesOpaque = true;
-                }
-            }
-            if (state.selected) {
-                const selectedMaterial = this._selectedMaterial._state;
-                if (selectedMaterial.fill) {
-                    if (selectedMaterial.fillAlpha < 1.0) {
-                        renderFlags.selectedSilhouetteTransparent = true;
-                    } else {
-                        renderFlags.selectedSilhouetteOpaque = true;
-                    }
-                }
-                if (selectedMaterial.edges) {
-                    if (selectedMaterial.edgeAlpha < 1.0) {
-                        renderFlags.selectedEdgesTransparent = true;
-                    } else {
-                        renderFlags.selectedEdgesOpaque = true;
-                    }
-                }
-            } else if (state.highlighted) {
-                const highlightMaterial = this._highlightMaterial._state;
-                if (highlightMaterial.fill) {
-                    if (highlightMaterial.fillAlpha < 1.0) {
-                        renderFlags.highlightedSilhouetteTransparent = true;
-                    } else {
-                        renderFlags.highlightedSilhouetteOpaque = true;
-                    }
-                }
-                if (highlightMaterial.edges) {
-                    if (highlightMaterial.edgeAlpha < 1.0) {
-                        renderFlags.highlightedEdgesTransparent = true;
-                    } else {
-                        renderFlags.highlightedEdgesOpaque = true;
-                    }
-                }
-            }
-        }
-    }
-
-    _getActiveSectionPlanes() {
-
-        if (this._state.clippable) {
-
-            const sectionPlanes = this.scene._sectionPlanesState.sectionPlanes;
-            const numSectionPlanes = sectionPlanes.length;
-
-            if (numSectionPlanes > 0) {
-                for (let i = 0; i < numSectionPlanes; i++) {
-
-                    const sectionPlane = sectionPlanes[i];
-                    const renderFlags = this.renderFlags;
-
-                    if (!sectionPlane.active) {
-                        renderFlags.sectionPlanesActivePerLayer[i] = false;
-
-                    } else {
-
-                        if (this._state.rtcCenter) {
-
-                            const intersect = math.planeAABB3Intersect(sectionPlane.dir, sectionPlane.dist, this.aabb);
-                            const outside = (intersect === -1);
-
-                            if (outside) {
-                                return false;
-                            }
-
-                            const intersecting = (intersect === 0);
-                            renderFlags.sectionPlanesActivePerLayer[i] = intersecting;
-
-                        } else {
-                            renderFlags.sectionPlanesActivePerLayer[i] = true;
-                        }
-                    }
-                }
-            }
-        }
-
-        return true;
-    }
-
-    /**
-     * Defines the appearance of this Mesh when xrayed.
-     *
-     * Mesh is xrayed when {@link Mesh#xrayed} is ````true````.
-     *
-     * Set to {@link Scene#xrayMaterial} by default.
-     *
-     * @type {EmphasisMaterial}
-     */
-    get xrayMaterial() {
-        return this._xrayMaterial;
-    }
-
-    /**
-     * Defines the appearance of this Mesh when highlighted.
-     *
-     * Mesh is xrayed when {@link Mesh#highlighted} is ````true````.
-     *
-     * Set to {@link Scene#highlightMaterial} by default.
-     *
-     * @type {EmphasisMaterial}
-     */
-    get highlightMaterial() {
-        return this._highlightMaterial;
-    }
-
-    /**
-     * Defines the appearance of this Mesh when selected.
-     *
-     * Mesh is xrayed when {@link Mesh#selected} is ````true````.
-     *
-     * Set to {@link Scene#selectedMaterial} by default.
-     *
-     * @type {EmphasisMaterial}
-     */
-    get selectedMaterial() {
-        return this._selectedMaterial;
-    }
-
-    /**
-     * Defines the appearance of this Mesh when edges are enhanced.
-     *
-     * Mesh is xrayed when {@link Mesh#edges} is ````true````.
-     *
-     * Set to {@link Scene#edgeMaterial} by default.
-     *
-     * @type {EdgeMaterial}
-     */
-    get edgeMaterial() {
-        return this._edgeMaterial;
-    }
-
-    // ---------------------- NORMAL RENDERING -----------------------------------
-
-    /** @private  */
-    drawColorOpaque(frameCtx) {
-        if (this._drawRenderer || (this._drawRenderer = DrawRenderer.get(this))) {
-            this._drawRenderer.drawMesh(frameCtx, this);
-        }
-    }
-
-    /** @private  */
-    drawColorTransparent(frameCtx) {
-        if (this._drawRenderer || (this._drawRenderer = DrawRenderer.get(this))) {
-            this._drawRenderer.drawMesh(frameCtx, this);
-        }
-    }
-
-    // ---------------------- RENDERING SAO POST EFFECT TARGETS --------------
-
-    // TODO
-
-    // ---------------------- EMPHASIS RENDERING -----------------------------------
-
-    /** @private  */
-    drawSilhouetteXRayed(frameCtx) {
-        if (this._emphasisFillRenderer || (this._emphasisFillRenderer = EmphasisFillRenderer.get(this))) {
-            this._emphasisFillRenderer.drawMesh(frameCtx, this, 0); // 0 == xray
-        }
-    }
-
-    /** @private  */
-    drawSilhouetteHighlighted(frameCtx) {
-        if (this._emphasisFillRenderer || (this._emphasisFillRenderer = EmphasisFillRenderer.get(this))) {
-            this._emphasisFillRenderer.drawMesh(frameCtx, this, 1); // 1 == highlight
-        }
-    }
-
-    /** @private  */
-    drawSilhouetteSelected(frameCtx) {
-        if (this._emphasisFillRenderer || (this._emphasisFillRenderer = EmphasisFillRenderer.get(this))) {
-            this._emphasisFillRenderer.drawMesh(frameCtx, this, 2); // 2 == selected
-        }
-    }
-
-    // ---------------------- EDGES RENDERING -----------------------------------
-
-    /** @private  */
-    drawEdgesColorOpaque(frameCtx) {
-        if (this._emphasisEdgesRenderer || (this._emphasisEdgesRenderer = EmphasisEdgesRenderer.get(this))) {
-            this._emphasisEdgesRenderer.drawMesh(frameCtx, this, 3); // 3 == edges
-        }
-    }
-
-    /** @private  */
-    drawEdgesColorTransparent(frameCtx) {
-        if (this._emphasisEdgesRenderer || (this._emphasisEdgesRenderer = EmphasisEdgesRenderer.get(this))) {
-            this._emphasisEdgesRenderer.drawMesh(frameCtx, this, 3); // 3 == edges
-        }
-    }
-
-    /** @private  */
-    drawEdgesXRayed(frameCtx) {
-        if (this._emphasisEdgesRenderer || (this._emphasisEdgesRenderer = EmphasisEdgesRenderer.get(this))) {
-            this._emphasisEdgesRenderer.drawMesh(frameCtx, this, 0); // 0 == xray
-        }
-    }
-
-    /** @private  */
-    drawEdgesHighlighted(frameCtx) {
-        if (this._emphasisEdgesRenderer || (this._emphasisEdgesRenderer = EmphasisEdgesRenderer.get(this))) {
-            this._emphasisEdgesRenderer.drawMesh(frameCtx, this, 1); // 1 == highlight
-        }
-    }
-
-    /** @private  */
-    drawEdgesSelected(frameCtx) {
-        if (this._emphasisEdgesRenderer || (this._emphasisEdgesRenderer = EmphasisEdgesRenderer.get(this))) {
-            this._emphasisEdgesRenderer.drawMesh(frameCtx, this, 2); // 2 == selected
-        }
-    }
-
-    // ---------------------- OCCLUSION CULL RENDERING -----------------------------------
-
-    /** @private  */
-    drawOcclusion(frameCtx) {
-        if (this._occlusionRenderer || (this._occlusionRenderer = OcclusionRenderer.get(this))) {
-            this._occlusionRenderer.drawMesh(frameCtx, this);
-        }
-    }
-
-    // ---------------------- SHADOW BUFFER RENDERING -----------------------------------
-
-    /** @private  */
-    drawShadow(frameCtx) {
-        if (this._shadowRenderer || (this._shadowRenderer = ShadowRenderer.get(this))) {
-            this._shadowRenderer.drawMesh(frameCtx, this);
-        }
-    }
-
-    // ---------------------- PICKING RENDERING ----------------------------------
-
-    /** @private  */
-    drawPickMesh(frameCtx) {
-        if (this._pickMeshRenderer || (this._pickMeshRenderer = PickMeshRenderer.get(this))) {
-            this._pickMeshRenderer.drawMesh(frameCtx, this);
-        }
-    }
-
-    /** @private
-     */
-    canPickTriangle() {
-        return this._geometry.isReadableGeometry; // VBOGeometry does not support surface picking because it has no geometry data in browser memory
-    }
-
-    /** @private  */
-    drawPickTriangles(frameCtx) {
-        if (this._pickTriangleRenderer || (this._pickTriangleRenderer = PickTriangleRenderer.get(this))) {
-            this._pickTriangleRenderer.drawMesh(frameCtx, this);
-        }
-    }
-
-    /** @private */
-    pickTriangleSurface(pickViewMatrix, pickProjMatrix, pickResult) {
-        pickTriangleSurface(this, pickViewMatrix, pickProjMatrix, pickResult);
-    }
-
-    /** @private  */
-    drawPickVertices(frameCtx) {
-
-    }
-
-    /**
-     * @private
-     * @returns {PerformanceNode}
-     */
-    delegatePickedEntity() {
-        return this;
-    }
-
-    //------------------------------------------------------------------------------------------------------------------
-    // Component members
-    //------------------------------------------------------------------------------------------------------------------
-
-    /**
-     * Destroys this Mesh.
-     */
-    destroy() {
-        super.destroy(); // yjkkit.Object
-        this._putDrawRenderers();
-        this._putPickRenderers();
-        this._putOcclusionRenderer();
-        this.scene._renderer.putPickID(this._state.pickID); // TODO: somehow puch this down into yjkkit framework?
-        if (this._isObject) {
-            this.scene._deregisterObject(this);
-            if (this._visible) {
-                this.scene._objectVisibilityUpdated(this, false);
-            }
-            if (this._xrayed) {
-                this.scene._objectXRayedUpdated(this, false);
-            }
-            if (this._selected) {
-                this.scene._objectSelectedUpdated(this, false);
-            }
-            if (this._highlighted) {
-                this.scene._objectHighlightedUpdated(this, false);
-            }
-            this.scene._objectColorizeUpdated(this, false);
-            this.scene._objectOpacityUpdated(this, false);
-            this.scene._objectOffsetUpdated(this, false);
-        }
-        if (this._isModel) {
-            this.scene._deregisterModel(this);
-        }
-        this.glRedraw();
-    }
-
-}
-
-
-const pickTriangleSurface = (function () {
-
-    // Cached vars to avoid garbage collection
-
-    const localRayOrigin = math.vec3();
-    const localRayDir = math.vec3();
-    const positionA = math.vec3();
-    const positionB = math.vec3();
-    const positionC = math.vec3();
-    const triangleVertices = math.vec3();
-    const position = math.vec4();
-    const worldPos = math.vec3();
-    const viewPos = math.vec3();
-    const bary = math.vec3();
-    const normalA = math.vec3();
-    const normalB = math.vec3();
-    const normalC = math.vec3();
-    const uva = math.vec3();
-    const uvb = math.vec3();
-    const uvc = math.vec3();
-    const tempVec4a = math.vec4();
-    const tempVec4b = math.vec4();
-    const tempVec4c = math.vec4();
-    const tempVec3 = math.vec3();
-    const tempVec3b = math.vec3();
-    const tempVec3c = math.vec3();
-    const tempVec3d = math.vec3();
-    const tempVec3e = math.vec3();
-    const tempVec3f = math.vec3();
-    const tempVec3g = math.vec3();
-    const tempVec3h = math.vec3();
-    const tempVec3i = math.vec3();
-    const tempVec3j = math.vec3();
-    const tempVec3k = math.vec3();
-
-    return function (mesh, pickViewMatrix, pickProjMatrix, pickResult) {
-
-        var primIndex = pickResult.primIndex;
-
-        if (primIndex !== undefined && primIndex !== null && primIndex > -1) {
-
-            const geometry = mesh.geometry._state;
-            const scene = mesh.scene;
-            const camera = scene.camera;
-            const canvas = scene.canvas;
-
-            if (geometry.primitiveName === "triangles") {
-
-                // Triangle picked; this only happens when the
-                // Mesh has a Geometry that has primitives of type "triangle"
-
-                pickResult.primitive = "triangle";
-
-                // Get the World-space positions of the triangle's vertices
-
-                const i = primIndex; // Indicates the first triangle index in the indices array
-
-                const indices = geometry.indices; // Indices into geometry arrays, not into shared VertexBufs
-                const positions = geometry.positions;
-
-                let ia3;
-                let ib3;
-                let ic3;
-
-                if (indices) {
-
-                    var ia = indices[i + 0];
-                    var ib = indices[i + 1];
-                    var ic = indices[i + 2];
-
-                    triangleVertices[0] = ia;
-                    triangleVertices[1] = ib;
-                    triangleVertices[2] = ic;
-
-                    pickResult.indices = triangleVertices;
-
-                    ia3 = ia * 3;
-                    ib3 = ib * 3;
-                    ic3 = ic * 3;
-
-                } else {
-
-                    ia3 = i * 3;
-                    ib3 = ia3 + 3;
-                    ic3 = ib3 + 3;
-                }
-
-                positionA[0] = positions[ia3 + 0];
-                positionA[1] = positions[ia3 + 1];
-                positionA[2] = positions[ia3 + 2];
-
-                positionB[0] = positions[ib3 + 0];
-                positionB[1] = positions[ib3 + 1];
-                positionB[2] = positions[ib3 + 2];
-
-                positionC[0] = positions[ic3 + 0];
-                positionC[1] = positions[ic3 + 1];
-                positionC[2] = positions[ic3 + 2];
-
-                if (geometry.compressGeometry) {
-
-                    // Decompress vertex positions
-
-                    const positionsDecodeMatrix = geometry.positionsDecodeMatrix;
-                    if (positionsDecodeMatrix) {
-                        geometryCompressionUtils.decompressPosition(positionA, positionsDecodeMatrix, positionA);
-                        geometryCompressionUtils.decompressPosition(positionB, positionsDecodeMatrix, positionB);
-                        geometryCompressionUtils.decompressPosition(positionC, positionsDecodeMatrix, positionC);
-                    }
-                }
-
-                // Attempt to ray-pick the triangle in local space
-
-                let canvasPos;
-
-                if (pickResult.canvasPos) {
-                    canvasPos = pickResult.canvasPos;
-                    math.canvasPosToLocalRay(canvas.canvas, pickViewMatrix, pickProjMatrix, mesh.worldMatrix, canvasPos, localRayOrigin, localRayDir);
-
-                } else if (pickResult.origin && pickResult.direction) {
-                    math.worldRayToLocalRay(mesh.worldMatrix, pickResult.origin, pickResult.direction, localRayOrigin, localRayDir);
-                }
-
-                math.normalizeVec3(localRayDir);
-                math.rayPlaneIntersect(localRayOrigin, localRayDir, positionA, positionB, positionC, position);
-
-                // Get Local-space cartesian coordinates of the ray-triangle intersection
-
-                pickResult.localPos = position;
-                pickResult.position = position;
-
-                // Get interpolated World-space coordinates
-
-                // Need to transform homogeneous coords
-
-                tempVec4a[0] = position[0];
-                tempVec4a[1] = position[1];
-                tempVec4a[2] = position[2];
-                tempVec4a[3] = 1;
-
-                // Get World-space cartesian coordinates of the ray-triangle intersection
-
-                math.transformVec4(mesh.worldMatrix, tempVec4a, tempVec4b);
-
-                worldPos[0] = tempVec4b[0];
-                worldPos[1] = tempVec4b[1];
-                worldPos[2] = tempVec4b[2];
-
-                pickResult.worldPos = worldPos;
-
-                // Get View-space cartesian coordinates of the ray-triangle intersection
-
-                math.transformVec4(camera.matrix, tempVec4b, tempVec4c);
-
-                viewPos[0] = tempVec4c[0];
-                viewPos[1] = tempVec4c[1];
-                viewPos[2] = tempVec4c[2];
-
-                pickResult.viewPos = viewPos;
-
-                // Get barycentric coordinates of the ray-triangle intersection
-
-                math.cartesianToBarycentric(position, positionA, positionB, positionC, bary);
-
-                pickResult.bary = bary;
-
-                // Get interpolated normal vector
-
-                const normals = geometry.normals;
-
-                if (normals) {
-
-                    if (geometry.compressGeometry) {
-
-                        // Decompress vertex normals
-
-                        const ia2 = ia * 3;
-                        const ib2 = ib * 3;
-                        const ic2 = ic * 3;
-
-                        geometryCompressionUtils.decompressNormal(normals.subarray(ia2, ia2 + 2), normalA);
-                        geometryCompressionUtils.decompressNormal(normals.subarray(ib2, ib2 + 2), normalB);
-                        geometryCompressionUtils.decompressNormal(normals.subarray(ic2, ic2 + 2), normalC);
-
-                    } else {
-
-                        normalA[0] = normals[ia3];
-                        normalA[1] = normals[ia3 + 1];
-                        normalA[2] = normals[ia3 + 2];
-
-                        normalB[0] = normals[ib3];
-                        normalB[1] = normals[ib3 + 1];
-                        normalB[2] = normals[ib3 + 2];
-
-                        normalC[0] = normals[ic3];
-                        normalC[1] = normals[ic3 + 1];
-                        normalC[2] = normals[ic3 + 2];
-                    }
-
-                    const normal = math.addVec3(math.addVec3(
-                        math.mulVec3Scalar(normalA, bary[0], tempVec3),
-                        math.mulVec3Scalar(normalB, bary[1], tempVec3b), tempVec3c),
-                        math.mulVec3Scalar(normalC, bary[2], tempVec3d), tempVec3e);
-
-                    pickResult.worldNormal = math.normalizeVec3(math.transformVec3(mesh.worldNormalMatrix, normal, tempVec3f));
-                }
-
-                // Get interpolated UV coordinates
-
-                const uvs = geometry.uv;
-
-                if (uvs) {
-
-                    uva[0] = uvs[(ia * 2)];
-                    uva[1] = uvs[(ia * 2) + 1];
-
-                    uvb[0] = uvs[(ib * 2)];
-                    uvb[1] = uvs[(ib * 2) + 1];
-
-                    uvc[0] = uvs[(ic * 2)];
-                    uvc[1] = uvs[(ic * 2) + 1];
-
-                    if (geometry.compressGeometry) {
-
-                        // Decompress vertex UVs
-
-                        const uvDecodeMatrix = geometry.uvDecodeMatrix;
-                        if (uvDecodeMatrix) {
-                            geometryCompressionUtils.decompressUV(uva, uvDecodeMatrix, uva);
-                            geometryCompressionUtils.decompressUV(uvb, uvDecodeMatrix, uvb);
-                            geometryCompressionUtils.decompressUV(uvc, uvDecodeMatrix, uvc);
-                        }
-                    }
-
-                    pickResult.uv = math.addVec3(
-                        math.addVec3(
-                            math.mulVec2Scalar(uva, bary[0], tempVec3g),
-                            math.mulVec2Scalar(uvb, bary[1], tempVec3h), tempVec3i),
-                        math.mulVec2Scalar(uvc, bary[2], tempVec3j), tempVec3k);
-                }
-            }
-        }
-    }
-})();
-
-export {Mesh};