@xeokit/xeokit-sdk 2.6.30 → 2.6.32

package/dist/xeokit-sdk.es.js

@@ -9554,7 +9554,7 @@ class Dot {
         this._dotClickable = document.createElement('div');
         this._dotClickable.className += this._dotClickable.className ? ' viewer-ruler-dot-clickable' : 'viewer-ruler-dot-clickable';
 
-        this._visible = !!cfg.visible;
+        this._visible = cfg.visible !== false;
         this._culled = false;
 
         var dot = this._dot;
@@ -9566,7 +9566,7 @@ class Dot {
         dotStyle["z-index"] = cfg.zIndex === undefined ? "40000005" : cfg.zIndex ;
         dotStyle.width = 8 + "px";
         dotStyle.height = 8 + "px";
-        dotStyle.visibility = cfg.visible !== false ? "visible" : "hidden";
+        dotStyle.visibility = this._visible ? "visible" : "hidden";
         dotStyle.top = 0 + "px";
         dotStyle.left = 0 + "px";
         dotStyle["box-shadow"] = "0 2px 5px 0 #182A3D;";
@@ -19148,6 +19148,9 @@ const Renderer$1 = function (scene, options) {
     let drawableTypeInfo = {};
     let drawables = {};
 
+    let postSortDrawableList = [];
+    let postCullDrawableList = [];
+
     let drawableListDirty = true;
     let stateSortDirty = true;
     let imageDirty = true;
@@ -19368,33 +19371,33 @@ const Renderer$1 = function (scene, options) {
     }
 
     function sortDrawableList() {
+        let lenDrawableList = 0;
         for (let type in drawableTypeInfo) {
             if (drawableTypeInfo.hasOwnProperty(type)) {
                 const drawableInfo = drawableTypeInfo[type];
-                if (drawableInfo.isStateSortable) {
-                    drawableInfo.drawableListPreCull.sort(drawableInfo.stateSortCompare);
+                const drawableListPreCull = drawableInfo.drawableListPreCull;
+                for (let i = 0, len = drawableListPreCull.length; i < len; i++) {
+                    const drawable = drawableListPreCull[i];
+                    postSortDrawableList[lenDrawableList++] = drawable;
                 }
             }
         }
+        postSortDrawableList.length = lenDrawableList;
+        postSortDrawableList.sort((a, b) => {
+            return a.renderOrder - b.renderOrder;
+        });
     }
 
     function cullDrawableList() {
-        for (let type in drawableTypeInfo) {
-            if (drawableTypeInfo.hasOwnProperty(type)) {
-                const drawableInfo = drawableTypeInfo[type];
-                const drawableListPreCull = drawableInfo.drawableListPreCull;
-                const drawableList = drawableInfo.drawableList;
-                let lenDrawableList = 0;
-                for (let i = 0, len = drawableListPreCull.length; i < len; i++) {
-                    const drawable = drawableListPreCull[i];
-                    drawable.rebuildRenderFlags();
-                    if (!drawable.renderFlags.culled) {
-                        drawableList[lenDrawableList++] = drawable;
-                    }
-                }
-                drawableList.length = lenDrawableList;
+        let lenDrawableList = 0;
+        for (let i = 0, len = postSortDrawableList.length; i < len; i++) {
+            const drawable = postSortDrawableList[i];
+            drawable.rebuildRenderFlags();
+            if (!drawable.renderFlags.culled) {
+                postCullDrawableList[lenDrawableList++] = drawable;
             }
         }
+        postCullDrawableList.length = lenDrawableList;
     }
 
     function draw(params) {
@@ -19470,25 +19473,16 @@ const Renderer$1 = function (scene, options) {
         if (params.clear !== false) {
             gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
         }
+        for (let i = 0, len = postCullDrawableList.length; i < len; i++) {
 
-        for (let type in drawableTypeInfo) {
-            if (drawableTypeInfo.hasOwnProperty(type)) {
-
-                const drawableInfo = drawableTypeInfo[type];
-                const drawableList = drawableInfo.drawableList;
-
-                for (let i = 0, len = drawableList.length; i < len; i++) {
-
-                    const drawable = drawableList[i];
+            const drawable = postCullDrawableList[i];
 
-                    if (drawable.culled === true || drawable.visible === false || !drawable.drawDepth || !drawable.saoEnabled) {
-                        continue;
-                    }
+            if (drawable.culled === true || drawable.visible === false || !drawable.drawDepth || !drawable.saoEnabled) {
+                continue;
+            }
 
-                    if (drawable.renderFlags.colorOpaque) {
-                        drawable.drawDepth(frameCtx);
-                    }
-                }
+            if (drawable.renderFlags.colorOpaque) {
+                drawable.drawDepth(frameCtx);
             }
         }
 
@@ -19627,7 +19621,6 @@ const Renderer$1 = function (scene, options) {
         }
 
         let i;
-        let len;
         let drawable;
 
         const startTime = Date.now();
@@ -19660,93 +19653,85 @@ const Renderer$1 = function (scene, options) {
         // Render normal opaque solids, defer others to bins to render after
         //------------------------------------------------------------------------------------------------------
 
-        for (let type in drawableTypeInfo) {
-            if (drawableTypeInfo.hasOwnProperty(type)) {
-
-                const drawableInfo = drawableTypeInfo[type];
-                const drawableList = drawableInfo.drawableList;
-
-                for (i = 0, len = drawableList.length; i < len; i++) {
+        for (let i = 0, len = postCullDrawableList.length; i < len; i++) {
 
-                    drawable = drawableList[i];
+            drawable = postCullDrawableList[i];
 
-                    if (drawable.culled === true || drawable.visible === false) {
-                        continue;
-                    }
+            if (drawable.culled === true || drawable.visible === false) {
+                continue;
+            }
 
-                    const renderFlags = drawable.renderFlags;
+            const renderFlags = drawable.renderFlags;
 
-                    if (renderFlags.colorOpaque) {
-                        if (saoEnabled && saoPossible && drawable.saoEnabled) {
-                            normalDrawSAOBin[normalDrawSAOBinLen++] = drawable;
-                        } else {
-                            drawable.drawColorOpaque(frameCtx);
-                        }
-                    }
+            if (renderFlags.colorOpaque) {
+                if (saoEnabled && saoPossible && drawable.saoEnabled) {
+                    normalDrawSAOBin[normalDrawSAOBinLen++] = drawable;
+                } else {
+                    drawable.drawColorOpaque(frameCtx);
+                }
+            }
 
-                    if (transparentEnabled) {
-                        if (renderFlags.colorTransparent) {
-                            normalFillTransparentBin[normalFillTransparentBinLen++] = drawable;
-                        }
-                    }
+            if (transparentEnabled) {
+                if (renderFlags.colorTransparent) {
+                    normalFillTransparentBin[normalFillTransparentBinLen++] = drawable;
+                }
+            }
 
-                    if (renderFlags.xrayedSilhouetteTransparent) {
-                        xrayedFillTransparentBin[xrayedFillTransparentBinLen++] = drawable;
-                    }
+            if (renderFlags.xrayedSilhouetteTransparent) {
+                xrayedFillTransparentBin[xrayedFillTransparentBinLen++] = drawable;
+            }
 
-                    if (renderFlags.xrayedSilhouetteOpaque) {
-                        xrayedFillOpaqueBin[xrayedFillOpaqueBinLen++] = drawable;
-                    }
+            if (renderFlags.xrayedSilhouetteOpaque) {
+                xrayedFillOpaqueBin[xrayedFillOpaqueBinLen++] = drawable;
+            }
 
-                    if (renderFlags.highlightedSilhouetteTransparent) {
-                        highlightedFillTransparentBin[highlightedFillTransparentBinLen++] = drawable;
-                    }
+            if (renderFlags.highlightedSilhouetteTransparent) {
+                highlightedFillTransparentBin[highlightedFillTransparentBinLen++] = drawable;
+            }
 
-                    if (renderFlags.highlightedSilhouetteOpaque) {
-                        highlightedFillOpaqueBin[highlightedFillOpaqueBinLen++] = drawable;
-                    }
+            if (renderFlags.highlightedSilhouetteOpaque) {
+                highlightedFillOpaqueBin[highlightedFillOpaqueBinLen++] = drawable;
+            }
 
-                    if (renderFlags.selectedSilhouetteTransparent) {
-                        selectedFillTransparentBin[selectedFillTransparentBinLen++] = drawable;
-                    }
+            if (renderFlags.selectedSilhouetteTransparent) {
+                selectedFillTransparentBin[selectedFillTransparentBinLen++] = drawable;
+            }
 
-                    if (renderFlags.selectedSilhouetteOpaque) {
-                        selectedFillOpaqueBin[selectedFillOpaqueBinLen++] = drawable;
-                    }
+            if (renderFlags.selectedSilhouetteOpaque) {
+                selectedFillOpaqueBin[selectedFillOpaqueBinLen++] = drawable;
+            }
 
-                    if (drawable.edges && edgesEnabled) {
-                        if (renderFlags.edgesOpaque) {
-                            normalEdgesOpaqueBin[normalEdgesOpaqueBinLen++] = drawable;
-                        }
+            if (drawable.edges && edgesEnabled) {
+                if (renderFlags.edgesOpaque) {
+                    normalEdgesOpaqueBin[normalEdgesOpaqueBinLen++] = drawable;
+                }
 
-                        if (renderFlags.edgesTransparent) {
-                            normalEdgesTransparentBin[normalEdgesTransparentBinLen++] = drawable;
-                        }
+                if (renderFlags.edgesTransparent) {
+                    normalEdgesTransparentBin[normalEdgesTransparentBinLen++] = drawable;
+                }
 
-                        if (renderFlags.selectedEdgesTransparent) {
-                            selectedEdgesTransparentBin[selectedEdgesTransparentBinLen++] = drawable;
-                        }
+                if (renderFlags.selectedEdgesTransparent) {
+                    selectedEdgesTransparentBin[selectedEdgesTransparentBinLen++] = drawable;
+                }
 
-                        if (renderFlags.selectedEdgesOpaque) {
-                            selectedEdgesOpaqueBin[selectedEdgesOpaqueBinLen++] = drawable;
-                        }
+                if (renderFlags.selectedEdgesOpaque) {
+                    selectedEdgesOpaqueBin[selectedEdgesOpaqueBinLen++] = drawable;
+                }
 
-                        if (renderFlags.xrayedEdgesTransparent) {
-                            xrayEdgesTransparentBin[xrayEdgesTransparentBinLen++] = drawable;
-                        }
+                if (renderFlags.xrayedEdgesTransparent) {
+                    xrayEdgesTransparentBin[xrayEdgesTransparentBinLen++] = drawable;
+                }
 
-                        if (renderFlags.xrayedEdgesOpaque) {
-                            xrayEdgesOpaqueBin[xrayEdgesOpaqueBinLen++] = drawable;
-                        }
+                if (renderFlags.xrayedEdgesOpaque) {
+                    xrayEdgesOpaqueBin[xrayEdgesOpaqueBinLen++] = drawable;
+                }
 
-                        if (renderFlags.highlightedEdgesTransparent) {
-                            highlightedEdgesTransparentBin[highlightedEdgesTransparentBinLen++] = drawable;
-                        }
+                if (renderFlags.highlightedEdgesTransparent) {
+                    highlightedEdgesTransparentBin[highlightedEdgesTransparentBinLen++] = drawable;
+                }
 
-                        if (renderFlags.highlightedEdgesOpaque) {
-                            highlightedEdgesOpaqueBin[highlightedEdgesOpaqueBinLen++] = drawable;
-                        }
-                    }
+                if (renderFlags.highlightedEdgesOpaque) {
+                    highlightedEdgesOpaqueBin[highlightedEdgesOpaqueBinLen++] = drawable;
                 }
             }
         }
@@ -20152,7 +20137,7 @@ const Renderer$1 = function (scene, options) {
         frameCtx.pickInvisible = !!params.pickInvisible;
         frameCtx.pickClipPos = [
             getClipPosX(canvasPos[0] * resolutionScale, gl.drawingBufferWidth),
-            getClipPosY(canvasPos[1] * resolutionScale, gl.drawingBufferHeight),
+            getClipPosY(canvasPos[1] * resolutionScale, gl.drawingBufferHeight)
         ];
 
         gl.viewport(0, 0, 1, 1);
@@ -20165,30 +20150,23 @@ const Renderer$1 = function (scene, options) {
         const includeEntityIds = params.includeEntityIds;
         const excludeEntityIds = params.excludeEntityIds;
 
-        for (let type in drawableTypeInfo) {
-            if (drawableTypeInfo.hasOwnProperty(type)) {
-
-                const drawableInfo = drawableTypeInfo[type];
-                const drawableList = drawableInfo.drawableList;
-
-                for (let i = 0, len = drawableList.length; i < len; i++) {
-
-                    const drawable = drawableList[i];
-
-                    if (!drawable.drawPickMesh || (params.pickInvisible !== true && drawable.visible === false) || drawable.pickable === false) {
-                        continue;
-                    }
-                    if (includeEntityIds && !includeEntityIds[drawable.id]) { // TODO: push this logic into drawable
-                        continue;
-                    }
-                    if (excludeEntityIds && excludeEntityIds[drawable.id]) {
-                        continue;
-                    }
-
-                    drawable.drawPickMesh(frameCtx);
-                }
+        for (let i = 0, len = postCullDrawableList.length; i < len; i++) {
+            const drawable = postCullDrawableList[i];
+            if (drawable.culled === true || drawable.visible === false) {
+                continue;
+            }
+            if (!drawable.drawPickMesh || (params.pickInvisible !== true && drawable.visible === false) || drawable.pickable === false) {
+                continue;
+            }
+            if (includeEntityIds && !includeEntityIds[drawable.id]) { // TODO: push this logic into drawable
+                continue;
+            }
+            if (excludeEntityIds && excludeEntityIds[drawable.id]) {
+                continue;
             }
+            drawable.drawPickMesh(frameCtx);
         }
+
         const pix = pickBuffer.read(0, 0);
         const pickID = pix[0] + (pix[1] << 8) + (pix[2] << 16) + (pix[3] << 24);
 
@@ -20218,7 +20196,7 @@ const Renderer$1 = function (scene, options) {
         // frameCtx.pickInvisible = !!params.pickInvisible;
         frameCtx.pickClipPos = [
             getClipPosX(canvasPos[0] * resolutionScale, gl.drawingBufferWidth),
-            getClipPosY(canvasPos[1] * resolutionScale, gl.drawingBufferHeight),
+            getClipPosY(canvasPos[1] * resolutionScale, gl.drawingBufferHeight)
         ];
 
         gl.viewport(0, 0, 1, 1);
@@ -20267,7 +20245,7 @@ const Renderer$1 = function (scene, options) {
             frameCtx.pickElementsOffset = pickable.pickElementsOffset;
             frameCtx.pickClipPos = [
                 getClipPosX(canvasPos[0] * resolutionScale, gl.drawingBufferWidth),
-                getClipPosY(canvasPos[1] * resolutionScale, gl.drawingBufferHeight),
+                getClipPosY(canvasPos[1] * resolutionScale, gl.drawingBufferHeight)
             ];
 
             gl.viewport(0, 0, 1, 1);
@@ -20332,15 +20310,14 @@ const Renderer$1 = function (scene, options) {
     function drawSnapInit(frameCtx) {
         frameCtx.snapPickLayerParams = [];
         frameCtx.snapPickLayerNumber = 0;
-        for (let type in drawableTypeInfo) {
-            const drawableInfo = drawableTypeInfo[type];
-            const drawableList = drawableInfo.drawableList;
-            for (let i = 0, len = drawableList.length; i < len; i++) {
-                const drawable = drawableList[i];
-                if (drawable.drawSnapInit) {
-                    if (!drawable.culled && drawable.visible && drawable.pickable) {
-                        drawable.drawSnapInit(frameCtx);
-                    }
+
+        for (let i = 0, len = postCullDrawableList.length; i < len; i++) {
+
+            const drawable = postCullDrawableList[i];
+
+            if (drawable.drawSnapInit) {
+                if (!drawable.culled && drawable.visible && drawable.pickable) {
+                    drawable.drawSnapInit(frameCtx);
                 }
             }
         }
@@ -20350,11 +20327,11 @@ const Renderer$1 = function (scene, options) {
     function drawSnap(frameCtx) {
         frameCtx.snapPickLayerParams = frameCtx.snapPickLayerParams || [];
         frameCtx.snapPickLayerNumber = frameCtx.snapPickLayerParams.length;
-        for (let type in drawableTypeInfo) {
-            const drawableInfo = drawableTypeInfo[type];
-            const drawableList = drawableInfo.drawableList;
-            for (let i = 0, len = drawableList.length; i < len; i++) {
-                const drawable = drawableList[i];
+        for (let i = 0, len = postCullDrawableList.length; i < len; i++) {
+
+            const drawable = postCullDrawableList[i];
+
+            if (drawable.drawSnapInit) {
                 if (drawable.drawSnap) {
                     if (!drawable.culled && drawable.visible && drawable.pickable) {
                         drawable.drawSnap(frameCtx);
@@ -20500,6 +20477,8 @@ const Renderer$1 = function (scene, options) {
             // result 1) regular hi-precision world position
 
             let worldPos = null;
+            let worldNormal = null;
+            let pickable = null;
 
             const middleX = snapRadiusInPixels;
             const middleY = snapRadiusInPixels;
@@ -20517,7 +20496,7 @@ const Renderer$1 = function (scene, options) {
                     pickResultMiddleXY[1] * scale[1] + origin[1],
                     pickResultMiddleXY[2] * scale[2] + origin[2],
                 ];
-                math.normalizeVec3([
+                worldNormal = math.normalizeVec3([
                     pickNormalResultMiddleXY[0] / math.MAX_INT,
                     pickNormalResultMiddleXY[1] / math.MAX_INT,
                     pickNormalResultMiddleXY[2] / math.MAX_INT,
@@ -20529,7 +20508,7 @@ const Renderer$1 = function (scene, options) {
                     + (pickPickableResultMiddleXY[2] << 16)
                     + (pickPickableResultMiddleXY[3] << 24);
 
-                pickIDs.items[pickID];
+                pickable = pickIDs.items[pickID];
             }
 
             // result 2) hi-precision snapped (to vertex/edge) world position
@@ -20626,13 +20605,16 @@ const Renderer$1 = function (scene, options) {
             }
 
             const snappedEntity = (snappedPickable && snappedPickable.delegatePickedEntity) ? snappedPickable.delegatePickedEntity() : snappedPickable;
+            if (!snappedEntity && pickable) {
+                pickable = pickable.delegatePickedEntity ? pickable.delegatePickedEntity() : pickable;
+            }
 
             pickResult.reset();
             pickResult.snappedToEdge = (snapType === "edge");
             pickResult.snappedToVertex = (snapType === "vertex");
-            pickResult.worldPos = snappedWorldPos;
-            pickResult.worldNormal = snappedWorldNormal;
-            pickResult.entity = snappedEntity;
+            pickResult.worldPos = snappedWorldPos || worldPos;
+            pickResult.worldNormal = snappedWorldNormal || worldNormal;
+            pickResult.entity = snappedEntity || pickable;
             pickResult.canvasPos = canvasPos || scene.camera.projectWorldPos(worldPos || snappedWorldPos);
             pickResult.snappedCanvasPos = snappedCanvasPos || canvasPos;
 
@@ -20739,19 +20721,16 @@ const Renderer$1 = function (scene, options) {
             gl.disable(gl.BLEND);
             gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
 
-            for (let type in drawableTypeInfo) {
-                if (drawableTypeInfo.hasOwnProperty(type)) {
-                    const drawableInfo = drawableTypeInfo[type];
-                    const drawableList = drawableInfo.drawableList;
-                    for (let i = 0, len = drawableList.length; i < len; i++) {
-                        const drawable = drawableList[i];
-                        if (!drawable.drawOcclusion || drawable.culled === true || drawable.visible === false || drawable.pickable === false) { // TODO: Option to exclude transparent?
-                            continue;
-                        }
 
-                        drawable.drawOcclusion(frameCtx);
-                    }
+            for (let i = 0, len = postCullDrawableList.length; i < len; i++) {
+
+                const drawable = postCullDrawableList[i];
+
+                if (!drawable.drawOcclusion || drawable.culled === true || drawable.visible === false || drawable.pickable === false) { // TODO: Option to exclude transparent?
+                    continue;
                 }
+
+                drawable.drawOcclusion(frameCtx);
             }
 
             this._occlusionTester.drawMarkers(frameCtx);
@@ -118166,7 +118145,7 @@ const parseNodesWithNames = (function () {
 
     const objectIdStack = [];
     const meshIdsStack = [];
-    let meshIds = null;
+    let meshIds = [];
 
     return function (ctx, node, depth, matrix) {
         matrix = parseNodeMatrix(node, matrix);
@@ -118342,7 +118321,11 @@ function parseNodeMesh(node, ctx, matrix, meshIds) {
             if (primitive.indices) {
                 meshCfg.indices = primitive.indices.value;
             }
-            math.transformPositions3(matrix, meshCfg.localPositions, meshCfg.positions);
+            if (matrix) {
+                math.transformPositions3(matrix, meshCfg.localPositions, meshCfg.positions);
+            } else { // eqiv to math.transformPositions3(math.identityMat4(), meshCfg.localPositions, meshCfg.positions);
+                meshCfg.positions.set(meshCfg.localPositions);
+            }
             const origin = math.vec3();
             const rtcNeeded = worldToRTCPositions(meshCfg.positions, meshCfg.positions, origin); // Small cellsize guarantees better accuracy
             if (rtcNeeded) {
@@ -127067,7 +127050,7 @@ class TreeViewPlugin extends Plugin {
             this._nodeNodes[buildingNode.nodeId] = buildingNode;
         } else if (metaObjectType === "IfcBuildingStorey") {
             if (!buildingNode) {
-                this.error("Failed to build storeys hierarchy for model '" + this.metaModel.id + "' - model does not have an IfcBuilding object, or is not an IFC model");
+                this.error("Failed to build storeys hierarchy for model - model does not have an IfcBuilding object, or is not an IFC model");
                 return;
             }
             storeyNode = {
@@ -132464,6 +132447,9 @@ class XKTLoaderPlugin extends Plugin {
      * represent the returned model. Set false to always use vertex buffer objects (VBOs). Note that DTX is only applicable
      * to non-textured triangle meshes, and that VBOs are always used for meshes that have textures, line segments, or point
      * primitives. Only works while {@link DTX#enabled} is also ````true````.
+     * @param {Number} [params.renderOrder=0] Specifies the rendering order for the model. This is used to control the order in which
+     * SceneModels are drawn when they have transparent objects, to give control over the order in which those objects are blended within the transparent
+     * render pass.
      * @returns {Entity} Entity representing the model, which will have {@link Entity#isModel} set ````true```` and will be registered by {@link Entity#id} in {@link Scene#models}.
      */
     load(params = {}) {
@@ -132513,7 +132499,8 @@ class XKTLoaderPlugin extends Plugin {
             origin: params.origin,
             disableVertexWelding: params.disableVertexWelding || false,
             disableIndexRebucketing: params.disableIndexRebucketing || false,
-            dtxEnabled: params.dtxEnabled
+            dtxEnabled: params.dtxEnabled,
+            renderOrder: params.renderOrder
         }));
 
         const modelId = sceneModel.id;  // In case ID was auto-generated
@@ -139254,49 +139241,126 @@ class DotBIMLoaderPlugin extends Plugin {
 
                 const dbMeshId = element.mesh_id;
 
-                parseDBMesh(dbMeshId);
-
-                const meshId = `${objectId}-mesh`;
                 const vector = element.vector;
                 const rotation = element.rotation;
                 const props = objectDefaults ? objectDefaults[elementType] || objectDefaults["DEFAULT"] : null;
-
                 let visible = true;
                 let pickable = true;
-                let color = element.color ? [element.color.r / 255, element.color.g / 255, element.color.b / 255] : [1, 1, 1];
-                let opacity = element.color ? element.color.a / 255 : 1.0;
 
-                if (props) {
-                    if (props.visible === false) {
-                        visible = false;
-                    }
-                    if (props.pickable === false) {
-                        pickable = false;
-                    }
-                    if (props.colorize) {
-                        color = props.colorize;
-                    }
-                    if (props.opacity !== undefined && props.opacity !== null) {
-                        opacity = props.opacity;
+                if (element.face_colors === undefined) {
+
+                    parseDBMesh(dbMeshId);
+
+                    const meshId = `${objectId}-mesh`;
+
+                    let color = element.color ? [element.color.r / 255.0, element.color.g / 255.0, element.color.b / 255.0] : [1, 1, 1];
+                    let opacity = element.color ? element.color.a / 255.0 : 1.0;
+
+                    if (props) {
+                        if (props.visible === false) {
+                            visible = false;
+                        }
+                        if (props.pickable === false) {
+                            pickable = false;
+                        }
+                        if (props.colorize) {
+                            color = props.colorize;
+                        }
+                        if (props.opacity !== undefined && props.opacity !== null) {
+                            opacity = props.opacity;
+                        }
                     }
+
+                    sceneModel.createMesh({
+                        id: meshId,
+                        geometryId: dbMeshId,
+                        color: color,
+                        opacity: opacity,
+                        quaternion: rotation && (rotation.qz !== 0 || rotation.qy !== 0 || rotation.qx !== 0 || rotation.qw !== 1.0) ? [rotation.qx, rotation.qy, rotation.qz, rotation.qw] : undefined,
+                        position: vector ? [vector.x, vector.y, vector.z] : undefined
+                    });
+
+                    sceneModel.createEntity({
+                        id: objectId,
+                        meshIds: [meshId],
+                        visible: visible,
+                        pickable: pickable,
+                        isObject: true
+                    });
                 }
+                else {
+                    let faceColors = element.face_colors;
+                    let coloredTrianglesDictionary = {};
+                    let currentTriangleIndicesCount = 0;
+                    let dbMesh = fileData.meshes[element.mesh_id];
+                    for (let i = 0, len = faceColors.length; i < len; i+=4) {
+                        let faceColor = [faceColors[i], faceColors[i+1], faceColors[i+2], faceColors[i+3]];
+                        if (coloredTrianglesDictionary[faceColor] === undefined) {
+                            coloredTrianglesDictionary[faceColor] = [];
+                        }
+                        let indexForPoint0 = dbMesh.indices[currentTriangleIndicesCount];
+                        let x0 = dbMesh.coordinates[indexForPoint0*3];
+                        let y0 = dbMesh.coordinates[indexForPoint0*3+1];
+                        let z0 = dbMesh.coordinates[indexForPoint0*3+2];
+                        let indexForPoint1 = dbMesh.indices[currentTriangleIndicesCount+1];
+                        let x1 = dbMesh.coordinates[indexForPoint1*3];
+                        let y1 = dbMesh.coordinates[indexForPoint1*3+1];
+                        let z1 = dbMesh.coordinates[indexForPoint1*3+2];
+                        let indexForPoint2 = dbMesh.indices[currentTriangleIndicesCount+2];
+                        let x2 = dbMesh.coordinates[indexForPoint2*3];
+                        let y2 = dbMesh.coordinates[indexForPoint2*3+1];
+                        let z2 = dbMesh.coordinates[indexForPoint2*3+2];
+                        coloredTrianglesDictionary[faceColor].push(x0, y0, z0, x1, y1, z1, x2, y2, z2);
+
+                        currentTriangleIndicesCount += 3;
+                    }
+                    let meshIds = [];
+                    for (const [faceColor, trianglesCoordinates] of Object.entries(coloredTrianglesDictionary)) {
+                        sceneModel.createGeometry({
+                            id: `${dbMeshId}-${faceColor}`,
+                            primitive: "triangles",
+                            positions: trianglesCoordinates,
+                            indices: [...Array(trianglesCoordinates.length).keys()]
+                        });
+                        const meshId = `${objectId}-mesh-${faceColor}`;
+                        const faceColorArray = faceColor.split(',').map(Number);
 
-                sceneModel.createMesh({
-                    id: meshId,
-                    geometryId: dbMeshId,
-                    color,
-                    opacity,
-                    quaternion: rotation && (rotation.qz !== 0 || rotation.qy !== 0 || rotation.qx !== 0 || rotation.qw !== 1.0) ? [rotation.qx, rotation.qy, rotation.qz, rotation.qw] : undefined,
-                    position: vector ? [vector.x, vector.y, vector.z] : undefined
-                });
+                        let color = [faceColorArray[0] / 255.0, faceColorArray[1] / 255.0, faceColorArray[2] / 255.0];
+                        let opacity = faceColorArray[3] / 255.0;
 
-                sceneModel.createEntity({
-                    id: objectId,
-                    meshIds: [meshId],
-                    visible,
-                    pickable,
-                    isObject: true
-                });
+                        if (props) {
+                            if (props.visible === false) {
+                                visible = false;
+                            }
+                            if (props.pickable === false) {
+                                pickable = false;
+                            }
+                            if (props.colorize) {
+                                color = props.colorize;
+                            }
+                            if (props.opacity !== undefined && props.opacity !== null) {
+                                opacity = props.opacity;
+                            }
+                        }
+
+                        sceneModel.createMesh({
+                            id: meshId,
+                            geometryId: `${dbMeshId}-${faceColor}`,
+                            color: color,
+                            opacity: opacity,
+                            quaternion: rotation && (rotation.qz !== 0 || rotation.qy !== 0 || rotation.qx !== 0 || rotation.qw !== 1.0) ? [rotation.qx, rotation.qy, rotation.qz, rotation.qw] : undefined,
+                            position: vector ? [vector.x, vector.y, vector.z] : undefined
+                        });
+                        meshIds.push(meshId);
+                    }
+                    sceneModel.createEntity({
+                        id: objectId,
+                        meshIds: meshIds,
+                        visible: visible,
+                        pickable: pickable,
+                        isObject: true
+                    });
+                }
 
                 for (let infoKey in info) {
                     let properties;
@@ -139642,10 +139706,9 @@ const basePolygon3D = function(scene, color, alpha) {
     };
 };
 
-const startAAZoneCreateUI = function(scene, zoneAltitude, zoneHeight, zoneColor, zoneAlpha, pointerLens, zonesPlugin, select3dPoint, onZoneCreated) {
-    const marker1 = marker3D(scene, zoneColor);
-    const marker2 = marker3D(scene, zoneColor);
-    const basePolygon = basePolygon3D(scene, zoneColor, zoneAlpha);
+const startAARectCreateUI = function(scene, markersColor, pointerLens, select3dPoint, withPoints, onPointsSelected) {
+    const marker1 = marker3D(scene, markersColor);
+    const marker2 = marker3D(scene, markersColor);
 
     const updatePointerLens = (pointerLens
                                ? function(canvasPos) {
@@ -139673,29 +139736,14 @@ const startAAZoneCreateUI = function(scene, zoneAltitude, zoneHeight, zoneColor,
                 function() {
                     updatePointerLens(null);
                     marker2.update(null);
-                    basePolygon.updateBase(null);
+                    withPoints(null);
                 },
                 function(canvasPos, point2WorldPos) {
                     updatePointerLens(canvasPos);
                     marker2.update(point2WorldPos);
-
-                    if (math.distVec3(point1WorldPos, point2WorldPos) > 0.01)
-                    {
-                        const min = (idx) => Math.min(point1WorldPos[idx], point2WorldPos[idx]);
-                        const max = (idx) => Math.max(point1WorldPos[idx], point2WorldPos[idx]);
-
-                        const xmin = min(0);
-                        const ymin = min(1);
-                        const zmin = min(2);
-                        const xmax = max(0);
-                        max(1);
-                        const zmax = max(2);
-
-                        basePolygon.updateBase([ [ xmin, ymin, zmax ], [ xmax, ymin, zmax ],
-                                                 [ xmax, ymin, zmin ], [ xmin, ymin, zmin ] ]);
-                    }
-                    else
-                        basePolygon.updateBase(null);
+                    withPoints((math.distVec3(point1WorldPos, point2WorldPos) > 0.01)
+                               &&
+                               [ point1WorldPos, point2WorldPos ]);
                 },
                 function(point2CanvasPos, point2WorldPos) {
                     // `marker2.update' makes sure marker's position has been updated from its default [0,0,0]
@@ -139705,35 +139753,9 @@ const startAAZoneCreateUI = function(scene, zoneAltitude, zoneHeight, zoneColor,
 
                     marker1.destroy();
                     marker2.destroy();
-                    basePolygon.destroy();
                     updatePointerLens(null);
 
-                    const min = (idx) => Math.min(point1WorldPos[idx], point2WorldPos[idx]);
-                    const max = (idx) => Math.max(point1WorldPos[idx], point2WorldPos[idx]);
-
-                    const xmin = min(0);
-                    const zmin = min(2);
-                    const xmax = max(0);
-                    const zmax = max(2);
-
-                    const zone = zonesPlugin.createZone(
-                        {
-                            id: math.createUUID(),
-                            geometry: {
-                                planeCoordinates: [
-                                    [ xmin, zmax ],
-                                    [ xmax, zmax ],
-                                    [ xmax, zmin ],
-                                    [ xmin, zmin ]
-                                ],
-                                altitude: zoneAltitude,
-                                height: zoneHeight
-                            },
-                            alpha: zoneAlpha,
-                            color: zoneColor
-                        });
-
-                    onZoneCreated(zone);
+                    onPointsSelected([ point1WorldPos, point2WorldPos ]);
                 });
         });
 
@@ -139742,7 +139764,6 @@ const startAAZoneCreateUI = function(scene, zoneAltitude, zoneHeight, zoneColor,
             deactivatePointSelection();
             marker1.destroy();
             marker2.destroy();
-            basePolygon.destroy();
             updatePointerLens(null);
         }
     };
@@ -140402,6 +140423,34 @@ class Zone extends Component {
     }
 }
 
+const createAAZoneFromPoints = function(pos1, pos2, zoneAltitude, zoneHeight, zoneColor, zoneAlpha, zonesPlugin) {
+
+    const min = (idx) => Math.min(pos1[idx], pos2[idx]);
+    const max = (idx) => Math.max(pos1[idx], pos2[idx]);
+
+    const xmin = min(0);
+    const zmin = min(2);
+    const xmax = max(0);
+    const zmax = max(2);
+
+    return zonesPlugin.createZone(
+        {
+            id: math.createUUID(),
+            geometry: {
+                planeCoordinates: [
+                    [ xmin, zmax ],
+                    [ xmax, zmax ],
+                    [ xmax, zmin ],
+                    [ xmin, zmin ]
+                ],
+                altitude: zoneAltitude,
+                height: zoneHeight
+            },
+            alpha: zoneAlpha,
+            color: zoneColor
+        });
+};
+
 /**
  * Creates {@link Zone}s in a {@link ZonesPlugin} from mouse input.
  *
@@ -140432,7 +140481,7 @@ class Zone extends Component {
  * const zonesControl  = new ZonesMouseControl(Zones)
  * ````
  */
-class ZonesMouseControl extends Component {
+class ZonesAAZoneControl extends Component {
 
     /**
      * Creates a ZonesMouseControl bound to the given ZonesPlugin.
@@ -140441,11 +140490,12 @@ class ZonesMouseControl extends Component {
      * @param [cfg] Configuration
      * @param {PointerLens} [cfg.pointerLens] A PointerLens to use to provide a magnified view of the cursor when snapping is enabled.
      */
-    constructor(zonesPlugin, cfg = {}) {
+    constructor(zonesPlugin, cfg, createSelect3dPoint) {
         super(zonesPlugin.viewer.scene);
 
         this.zonesPlugin = zonesPlugin;
         this.pointerLens = cfg.pointerLens;
+        this.createSelect3dPoint = createSelect3dPoint;
         this._deactivate = null;
     }
 
@@ -140482,16 +140532,35 @@ class ZonesMouseControl extends Component {
         const scene = viewer.scene;
         const self = this;
 
-        const select3dPoint = mousePointSelector(
-            viewer,
-            function(origin, direction) {
-                return planeIntersect(zoneAltitude, math.vec3([ 0, 1, 0 ]), origin, direction);
-            });
+        const select3dPoint = this.createSelect3dPoint(viewer, (origin, direction) => planeIntersect(zoneAltitude, math.vec3([ 0, 1, 0 ]), origin, direction));
 
         (function rec() {
-            self._deactivate = startAAZoneCreateUI(
-                scene, zoneAltitude, zoneHeight, zoneColor, zoneAlpha, self.pointerLens, zonesPlugin, select3dPoint,
-                zone => {
+            const basePolygon = basePolygon3D(scene, zoneColor, zoneAlpha);
+            const deactivate = startAARectCreateUI(
+                scene, zoneColor, self.pointerLens, select3dPoint,
+                points => {
+                    if (points) {
+                        const p0 = points[0];
+                        const p1 = points[1];
+                        const min = (idx) => Math.min(p0[idx], p1[idx]);
+                        const max = (idx) => Math.max(p0[idx], p1[idx]);
+
+                        const xmin = min(0);
+                        const ymin = min(1);
+                        const zmin = min(2);
+                        const xmax = max(0);
+                        max(1);
+                        const zmax = max(2);
+
+                        basePolygon.updateBase([ [ xmin, ymin, zmax ], [ xmax, ymin, zmax ],
+                                                 [ xmax, ymin, zmin ], [ xmin, ymin, zmin ] ]);
+                    } else {
+                        basePolygon.updateBase(null);
+                    }
+                },
+                points => {
+                    basePolygon.destroy();
+                    const zone = createAAZoneFromPoints(points[0], points[1], zoneAltitude, zoneHeight, zoneColor, zoneAlpha, zonesPlugin);
                     let reactivate = true;
                     self._deactivate = () => { reactivate = false; };
                     self.fire("zoneEnd", zone);
@@ -140500,6 +140569,10 @@ class ZonesMouseControl extends Component {
                         rec();
                     }
                 }).deactivate;
+            self._deactivate = () => {
+                deactivate();
+                basePolygon.destroy();
+            };
         })();
     }
 
@@ -140522,6 +140595,30 @@ class ZonesMouseControl extends Component {
     }
 }
 
+class ZonesMouseControl extends ZonesAAZoneControl {
+    constructor(zonesPlugin, cfg = {}) {
+        super(
+            zonesPlugin,
+            cfg,
+            (viewer, ray2WorldPos) => mousePointSelector(viewer, ray2WorldPos));
+    }
+}
+class ZonesTouchControl extends ZonesAAZoneControl {
+    constructor(zonesPlugin, cfg = {}) {
+        const pointerCircle = new PointerCircle(zonesPlugin.viewer);
+        super(
+            zonesPlugin,
+            cfg,
+            (viewer, ray2WorldPos) => touchPointSelector(viewer, pointerCircle, ray2WorldPos));
+        this.pointerCircle = pointerCircle;
+    }
+
+    destroy() {
+        this.pointerCircle.destroy();
+        super.destroy();
+    }
+}
+
 /**
  * ZonesPlugin documentation to be added, mostly compatible with DistanceMeasurementsPlugin.
  */
@@ -140636,86 +140733,6 @@ class ZonesPlugin extends Plugin {
     }
 }
 
-class ZonesTouchControl extends Component {
-
-    constructor(zonesPlugin, cfg = {}) {
-        super(zonesPlugin.viewer.scene);
-
-        this.zonesPlugin = zonesPlugin;
-        this.pointerLens = cfg.pointerLens;
-        this.pointerCircle = new PointerCircle(zonesPlugin.viewer);
-        this._deactivate = null;
-    }
-
-    get active() {
-        return !! this._deactivate;
-    }
-
-    activate(zoneAltitude, zoneHeight, zoneColor, zoneAlpha) {
-
-        if (typeof(zoneAltitude) === "object" && (zoneAltitude !== null)) {
-            const params = zoneAltitude;
-            const param = (name, defaultValue) => {
-                if (name in params) {
-                    return params[name];
-                } else if (defaultValue !== undefined) {
-                    return defaultValue;
-                } else {
-                    throw "config missing: " + name;
-                }
-            };
-
-            zoneAltitude = param("altitude");
-            zoneHeight   = param("height");
-            zoneColor    = param("color", "#008000");
-            zoneAlpha    = param("alpha", 0.5);
-        }
-
-        if (this._deactivate) {
-            return;
-        }
-
-        const zonesPlugin = this.zonesPlugin;
-        const viewer = zonesPlugin.viewer;
-        const scene = viewer.scene;
-        const self = this;
-
-        const select3dPoint = touchPointSelector(
-            viewer,
-            this.pointerCircle,
-            function(origin, direction) {
-                return planeIntersect(zoneAltitude, math.vec3([ 0, 1, 0 ]), origin, direction);
-            });
-
-        (function rec() {
-            self._deactivate = startAAZoneCreateUI(
-                scene, zoneAltitude, zoneHeight, zoneColor, zoneAlpha, self.pointerLens, zonesPlugin, select3dPoint,
-                zone => {
-                    let reactivate = true;
-                    self._deactivate = () => { reactivate = false; };
-                    self.fire("zoneEnd", zone);
-                    if (reactivate)
-                    {
-                        rec();
-                    }
-                }).deactivate;
-        })();
-    }
-
-    deactivate() {
-        if (this._deactivate)
-        {
-            this._deactivate();
-            this._deactivate = null;
-        }
-    }
-
-    destroy() {
-        this.deactivate();
-        super.destroy();
-    }
-}
-
 const startPolysurfaceZoneCreateUI = function(scene, zoneAltitude, zoneHeight, zoneColor, zoneAlpha, pointerLens, zonesPlugin, select3dPoint, onZoneCreated) {
     const updatePointerLens = (pointerLens
                                ? function(canvasPos) {