@xeokit/xeokit-sdk 2.4.0-alpha-81 → 2.4.0-alpha-82

package/src/viewer/scene/vfc/xeokit-cluster.js

@@ -0,0 +1,418 @@
+/**
+ * @author https://github.com/tmarti, with support from https://tribia.com/
+ * @license MIT
+ */
+
+var makeClusters = function (inputData) {
+    function countEntityTriangles (entity)
+    {
+        var numPrimitives = 0;
+    
+        entity.meshes.forEach (function (mesh) {
+            numPrimitives += mesh.numPrimitives;
+        });
+    
+        return numPrimitives;
+    }
+    
+    function scanCellsForEntities (cellSideInMeters, entityFilterFunc)
+    {
+        var filterFunc = entityFilterFunc || function (entity) {
+            return true;
+        };
+    
+        var sizeX = inputData.aabbTree.data.maxX - inputData.aabbTree.data.minX;
+        var sizeZ = inputData.aabbTree.data.maxZ - inputData.aabbTree.data.minZ;
+    
+        var numCellsPerAxisX = 10;
+        var numCellsPerAxisZ = 10;
+    
+        var stepX = sizeX / numCellsPerAxisX;
+        var stepZ = sizeZ / numCellsPerAxisZ;
+    
+        var cells = [];
+    
+        var x = inputData.aabbTree.data.minX;
+    
+        for (var i = 0; i < numCellsPerAxisX; i++, x += stepX)
+        {
+            var z = inputData.aabbTree.data.minZ;
+    
+            for (var j = 0; j < numCellsPerAxisZ; j++, z += stepZ)
+            {
+                cells.push ({
+                    minX: x,
+                    maxX: x+stepX,
+                    minY: -100000000.0,
+                    maxY:  100000000.0,
+                    minZ: z,
+                    maxZ: z+stepZ,
+                    indexX: i,
+                    indexZ: j,
+                });
+            }
+        }
+    
+        var scanResult = {
+            cellsByEntity: {},
+            entitiesByCell: {},
+            cellsX: numCellsPerAxisX,
+            cellsZ: numCellsPerAxisZ,
+        };
+    
+        (cells || []).forEach (function (cell) {
+            inputData.aabbTree.search(
+                cell
+            ).filter (function (x) {
+                return filterFunc (x.entity); 
+            }).forEach (function (x) {
+                var id = x.entity.id;
+    
+                scanResult.cellsByEntity [id] = scanResult.cellsByEntity [id] || {
+                    cells: [],
+                    entity: x.entity,
+                };
+    
+                scanResult.cellsByEntity [id].cells.push (cell);
+    
+                var cellId = cell.indexX + "_" + cell.indexZ;
+    
+                scanResult.entitiesByCell [cellId] = scanResult.entitiesByCell [cellId] || {
+                    entities: [],
+                    cell: cell,
+                };
+    
+                scanResult.entitiesByCell[cellId].entities.push (x.entity);
+            });
+        });
+    
+        return scanResult;
+    }
+    
+    /**
+     * Get maximum cells that clustered entities can use in order to make sure that at least
+     * ```minPercentOfClusteredPolygons``` % polygons are clustered.
+     * @param {float} minPercentOfClusteredPolygons 
+     */
+    function getMaxCellsPerEntity (
+        minPercentOfClusteredPolygons,
+        cellsByEntity)
+    {
+        var trianglesForEntityCellsCount = {};
+        var totalTriangles = 0;
+    
+        Object.keys (cellsByEntity).forEach (function (entityId) {
+            var entityCells = cellsByEntity[entityId].cells;
+            var numCellsForEntity = entityCells.length;
+            var entity = cellsByEntity[entityId].entity;
+    
+            var numPrimitives = countEntityTriangles (entity);
+    
+            trianglesForEntityCellsCount [numCellsForEntity] =
+                (trianglesForEntityCellsCount [numCellsForEntity] || 0) + numPrimitives;
+    
+            totalTriangles += numPrimitives;
+        });
+    
+        var cellsCounts = Object.keys (trianglesForEntityCellsCount);
+    
+        cellsCounts.sort(function (a, b) {
+            return a - b;
+        });
+    
+        var cellCount = 0;
+        var accum = 0.0;
+    
+        for (var i = 0; i < cellsCounts.length && accum < minPercentOfClusteredPolygons; i++)
+        {
+            cellCount = cellsCounts[i];
+    
+            accum += trianglesForEntityCellsCount[cellCount] / totalTriangles;
+        }
+    
+        return {
+            maxCellsPerEntity: cellCount,
+            polygonStats: {
+                percentClustered: accum,
+                numberClustered: Math.round (accum * totalTriangles),
+                numberUnclustered: totalTriangles - Math.round (accum * totalTriangles)    ,
+            },
+        };
+    }
+    
+    function generateSpiralIndexes (sizeX, sizeY)
+    {
+        var state = {
+            pos: {
+                x: 0,
+                y: 0,
+            },
+            left: 0,
+            right: sizeX,
+            top: 0,
+            bottom: sizeY,
+            dir: 0, // 0 right, 1 down, 2 left, 3 up 
+        };
+    
+        function mustTurn ()
+        {
+            if (state.dir == 0 && (state.pos.x + 1) >= state.right)
+                return true;
+            
+            if (state.dir == 1 && (state.pos.y + 1) >= state.bottom)
+                return true;
+    
+            if (state.dir == 2 && (state.pos.x - 1) <= (state.left - 1))
+                return true;
+    
+            if (state.dir == 3 && (state.pos.y - 1) <= (state.top -1))
+                return true;
+    
+            return false;
+        }
+    
+        function turn ()
+        {
+            state.dir = (state.dir + 1) % 4;
+    
+            if (state.dir == 0) state.left++;
+            if (state.dir == 1) state.top++;
+            if (state.dir == 2) state.right--;
+            if (state.dir == 3) state.bottom--;
+        }
+    
+        function advance ()
+        {
+            if (mustTurn ())
+                turn ();
+    
+            if (state.dir == 0) state.pos.x++;
+            if (state.dir == 1) state.pos.y++;
+            if (state.dir == 2) state.pos.x--;
+            if (state.dir == 3) state.pos.y--;
+        }
+    
+        var retVal = [];
+    
+        for (var len = sizeX*sizeY; retVal.length < len; advance ())
+        {
+            retVal.push (
+                state.pos.x + "_" + state.pos.y
+            );
+        }
+    
+        return retVal;
+    }
+    
+    function getAllEntitesOnCell (cellId, maxCellsPerEntity, entitiesByCell, cellsByEntity)
+    {
+        var ebc = entitiesByCell [cellId] || {
+            entities: [],
+        };
+    
+        return ebc.entities.filter (function (entity) {
+            return cellsByEntity [entity.id].cells.length <= maxCellsPerEntity;
+        });
+    }
+    
+    function generateEntityMappings (cellsX, cellsZ, maxCellsPerEntity, entitiesByCell, cellsByEntity, maxPolygonsPerCluster)
+    {
+        var processedEntities = {};
+    
+        // Create clusters for entities
+        var previousState = {
+            accumEntities: [],
+        };
+    
+        var entityClusters = [];
+    
+        generateSpiralIndexes (
+            cellsX,
+            cellsZ
+        ).forEach (function (cellId) {
+            var entities = getAllEntitesOnCell (
+                cellId,
+                maxCellsPerEntity,
+                entitiesByCell,
+                cellsByEntity
+            ).filter (function (entity) {
+                return !(entity.id in processedEntities);
+            });
+            
+            entities.forEach (function (entity) {
+               processedEntities [entity.id] = true; 
+            });
+    
+            entities.sort (function (e1, e2) {
+                return countEntityTriangles(e1) - countEntityTriangles (e2);
+            });
+    
+            var entitiesToProcess = previousState.accumEntities.concat(entities);
+    
+            var accumEntities = [];
+    
+            var remainingTriangles = maxPolygonsPerCluster;
+    
+            var i = 0;
+            do {
+                for (; i < entitiesToProcess.length; i++)
+                {
+                    var entity = entitiesToProcess [i];
+                    var numPrimitives = countEntityTriangles (entity);
+    
+                    if (numPrimitives > remainingTriangles)
+                    {
+                        entityClusters.push (accumEntities);
+                        accumEntities = [];
+                        remainingTriangles = maxPolygonsPerCluster;
+                    }
+    
+                    accumEntities.push (entity);
+                    remainingTriangles -= numPrimitives;
+                }
+            } while (i < entitiesToProcess.length);
+    
+            previousState.accumEntities = accumEntities;
+        });
+    
+        if (previousState.accumEntities.length)
+        {
+            entityClusters.push (previousState.accumEntities);
+        }
+    
+        // Create shared clusters for unclustered entities
+        var unClusteredEntities = [];
+    
+        Object.keys (cellsByEntity).forEach (function (entityId) {
+            if (!(entityId in processedEntities))
+            {
+                unClusteredEntities.push (cellsByEntity[entityId].entity);
+            }
+        });
+        
+        var remainingTriangles = maxPolygonsPerCluster;
+        var accumEntities = [];
+    
+        unClusteredEntities.forEach (function (entity) {
+            var numPrimitives = countEntityTriangles (entity);
+    
+            if (numPrimitives > remainingTriangles)
+            {
+                entityClusters.push (accumEntities);
+                accumEntities = [];
+                remainingTriangles = maxPolygonsPerCluster;
+            }
+    
+            accumEntities.push (entity);
+            remainingTriangles -= numPrimitives;
+        });
+    
+        if (accumEntities.length)
+        {
+            entityClusters.push (accumEntities);
+        }
+    
+        // Prepare return value
+        var entityIdToClusterIdMapping = {};
+    
+        entityClusters.forEach (function (cluster, clusterIndex) {
+            cluster.forEach (function (entity) {
+                entityIdToClusterIdMapping [entity.id] = clusterIndex;
+            });
+        });
+    
+        return {
+            clusters: entityClusters,
+            entityIdToClusterIdMapping: entityIdToClusterIdMapping,
+        };
+    }
+    
+    function generateClusters (cfg)
+    {
+        // console.time ("scanCells");
+        var scanResult = scanCellsForEntities (
+            cfg.cellSideInMeters,
+            cfg.entityFilterFunc
+        );
+        // console.timeEnd ("scanCells");
+    
+        // console.time ("stats-max-cells");
+        var maxCellsResult = getMaxCellsPerEntity(
+            cfg.minPercentOfClustredPolygons,
+            scanResult.cellsByEntity
+        );
+        // console.timeEnd ("stats-max-cells");
+        // console.log (maxCellsResult);
+    
+        // console.time ("clustering");
+        var clusteringResult = generateEntityMappings (
+            scanResult.cellsX,
+            scanResult.cellsZ,
+            maxCellsResult.maxCellsPerEntity,
+            scanResult.entitiesByCell,
+            scanResult.cellsByEntity,
+            cfg.maxPolygonsPerCluster
+        );
+        // console.timeEnd ("clustering");
+    
+        //console.log (clusteringResult);
+    
+        // var visibleClusters = {};
+    
+        // inputData.aabbTree.searchCustom(
+        //     inputData._aabbIntersectsCameraFrustum,
+        //     inputData._aabbContainedInCameraFrustum
+        // ).forEach (function (aabb) {
+        //     var clusterId = clusteringResult.entityIdToClusterIdMapping [aabb.entity.id];
+    
+        //     visibleClusters[clusterId] = true;
+        // });
+    
+        return {
+            clusters: {
+                // visible: Object.keys (visibleClusters).length,
+                total: clusteringResult.clusters.length,
+            },
+            clusteringResult: clusteringResult,
+        };
+    };
+    
+    var totalClusters = 0;
+    // var totalVisibleClusters = 0;
+    
+    // console.time ("clustering");
+    
+    var generateClustersResult = generateClusters ({
+        cellSideInMeters: 0.05,
+        entityFilterFunc: function (entity) {
+            return true;
+        },
+        maxPolygonsPerCluster: 90000,
+        minPercentOfClustredPolygons: 0.9,
+    });
+
+    // totalVisibleClusters += generateClustersResult.clusters.visible;
+    totalClusters += generateClustersResult.clusters.total;
+
+    // console.timeEnd ("clustering");
+    
+    console.log ("Total clusters: " + totalClusters);
+
+    // console.log (generateClustersResult);
+    // console.log ("Total visible clusters: " + totalVisibleClusters);
+    // console.log ("Visible clusters %: " + (totalVisibleClusters / totalClusters * 100).toFixed (2));
+
+    var orderedEntityIds = [];
+
+    generateClustersResult.clusteringResult.clusters.forEach (function (cluster) {
+        cluster.forEach (function (item) {
+            orderedEntityIds.push (item.id);
+        });
+    });
+
+    generateClustersResult.orderedEntityIds = orderedEntityIds;
+
+    return generateClustersResult;
+};
+
+export {makeClusters}

package/src/viewer/scene/viewport/Viewport.js

@@ -0,0 +1,212 @@
+/**
+ * @desc controls the canvas viewport for a {@link Scene}.
+ *
+ * * One Viewport per scene.
+ * * You can configure a Scene to render multiple times per frame, while setting the Viewport to different extents on each render.
+ * * Make a Viewport automatically size to its {@link Scene} {@link Canvas} by setting its {@link Viewport#autoBoundary} ````true````.
+ *
+ *
+ * Configuring the Scene to render twice on each frame, each time to a separate viewport:
+ *
+ * ````Javascript
+ * // Load glTF model
+ * var model = new xeokit.GLTFModel({
+    src: "models/gltf/GearboxAssy/glTF-MaterialsCommon/GearboxAssy.gltf"
+ });
+
+ var scene = model.scene;
+ var viewport = scene.viewport;
+
+ // Configure Scene to render twice for each frame
+ scene.passes = 2; // Default is 1
+ scene.clearEachPass = false; // Default is false
+
+ // Render to a separate viewport on each render
+
+ var viewport = scene.viewport;
+ viewport.autoBoundary = false;
+
+ scene.on("rendering", function (e) {
+     switch (e.pass) {
+         case 0:
+             viewport.boundary = [0, 0, 200, 200]; // xmin, ymin, width, height
+             break;
+
+         case 1:
+             viewport.boundary = [200, 0, 200, 200];
+             break;
+     }
+ });
+ ````
+
+ @class Viewport
+ @module xeokit
+ @submodule rendering
+ @constructor
+ @param {Component} owner Owner component. When destroyed, the owner will destroy this component as well.
+ @param {*} [cfg] Viewport configuration
+ @param {String} [cfg.id] Optional ID, unique among all components in the parent
+ {@link Scene}, generated automatically when omitted.
+ @param {String:Object} [cfg.meta] Optional map of user-defined metadata to attach to this Viewport.
+ @param [cfg.boundary] {Number[]} Canvas-space Viewport boundary, given as
+ (min, max, width, height). Defaults to the size of the parent
+ {@link Scene} {@link Canvas}.
+ @param [cfg.autoBoundary=false] {Boolean} Indicates if this Viewport's {@link Viewport#boundary}
+ automatically synchronizes with the size of the parent {@link Scene} {@link Canvas}.
+
+ @extends Component
+ */
+import {Component} from '../Component.js';
+import {RenderState} from '../webgl/RenderState.js';
+
+class Viewport extends Component {
+
+    /**
+     @private
+     */
+    get type() {
+        return "Viewport";
+    }
+
+    /**
+     @private
+     */
+    constructor(owner, cfg = {}) {
+
+        super(owner, cfg);
+
+        this._state = new RenderState({
+            boundary: [0, 0, 100, 100]
+        });
+
+        this.boundary = cfg.boundary;
+        this.autoBoundary = cfg.autoBoundary;
+    }
+
+
+    /**
+     * Sets the canvas-space boundary of this Viewport, indicated as ````[min, max, width, height]````.
+     *
+     * When {@link Viewport#autoBoundary} is ````true````, ignores calls to this method and automatically synchronizes with {@link Canvas#boundary}.
+     *
+     * Fires a "boundary"" event on change.
+     *
+     * Defaults to the {@link Canvas} extents.
+     *
+     * @param {Number[]} value New Viewport extents.
+     */
+    set boundary(value) {
+
+        if (this._autoBoundary) {
+            return;
+        }
+
+        if (!value) {
+
+            const canvasBoundary = this.scene.canvas.boundary;
+
+            const width = canvasBoundary[2];
+            const height = canvasBoundary[3];
+
+            value = [0, 0, width, height];
+        }
+
+        this._state.boundary = value;
+
+        this.glRedraw();
+
+        /**
+         Fired whenever this Viewport's {@link Viewport#boundary} property changes.
+
+         @event boundary
+         @param value {Boolean} The property's new value
+         */
+        this.fire("boundary", this._state.boundary);
+    }
+
+    /**
+     * Gets the canvas-space boundary of this Viewport, indicated as ````[min, max, width, height]````.
+     *
+     * @returns {Number[]} The Viewport extents.
+     */
+    get boundary() {
+        return this._state.boundary;
+    }
+
+    /**
+     * Sets if {@link Viewport#boundary} automatically synchronizes with {@link Canvas#boundary}.
+     *
+     * Default is ````false````.
+     *
+     * @param {Boolean} value Set true to automatically sycnhronize.
+     */
+    set autoBoundary(value) {
+
+        value = !!value;
+
+        if (value === this._autoBoundary) {
+            return;
+        }
+
+        this._autoBoundary = value;
+
+        if (this._autoBoundary) {
+            this._onCanvasSize = this.scene.canvas.on("boundary",
+                function (boundary) {
+
+                    const width = boundary[2];
+                    const height = boundary[3];
+
+                    this._state.boundary = [0, 0, width, height];
+
+                    this.glRedraw();
+
+                    /**
+                     Fired whenever this Viewport's {@link Viewport#boundary} property changes.
+
+                     @event boundary
+                     @param value {Boolean} The property's new value
+                     */
+                    this.fire("boundary", this._state.boundary);
+
+                }, this);
+
+        } else if (this._onCanvasSize) {
+            this.scene.canvas.off(this._onCanvasSize);
+            this._onCanvasSize = null;
+        }
+
+        /**
+         Fired whenever this Viewport's {@link autoBoundary/autoBoundary} property changes.
+
+         @event autoBoundary
+         @param value The property's new value
+         */
+        this.fire("autoBoundary", this._autoBoundary);
+    }
+
+    /**
+     * Gets if {@link Viewport#boundary} automatically synchronizes with {@link Canvas#boundary}.
+     *
+     * Default is ````false````.
+     *
+     * @returns {Boolean} Returns ````true```` when automatically sycnhronizing.
+     */
+    get autoBoundary() {
+        return this._autoBoundary;
+    }
+
+    _getState() {
+        return this._state;
+    }
+
+    /**
+     * @private
+     */
+    destroy() {
+        super.destroy();
+        this._state.destroy();
+    }
+}
+
+export {Viewport};