@xeokit/xeokit-sdk 2.4.1 → 2.4.2-beta-1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xeokit/xeokit-sdk",
-  "version": "2.4.1",
+  "version": "2.4.2-beta-1",
   "description": "Web Programming Toolkit for 3D/2D BIM and AEC Graphics",
   "module": "./dist/xeokit-sdk.es.js",
   "main": "./dist/xeokit-sdk.cjs.js",

package/src/plugins/LODCullingPlugin/LODCullingPlugin.js

@@ -0,0 +1,209 @@
+
+import {LODManager} from "./LODManager.js";
+import {Plugin} from "../../viewer";
+
+/**
+ * Manages LOD culling for {@link SceneModel} implementations.
+ */
+export class LODCullingPlugin extends Plugin {
+
+    constructor(viewer, cfg = {}) {
+
+        super("LODCulling", viewer);
+
+        this._scene = viewer.scene;
+        this._lodLevels = [2000, 600, 150, 80, 20];
+        this._neverCullTypes = [];
+        this._neverCullTypesMap = {};
+        this._lodManagers = {};
+        this._lodManagerList = [];
+
+        this.enabled = cfg.enabled;
+        this.targetFPS = cfg.targetFPS;
+
+        this._init();
+    }
+
+    _init() {
+
+        const MAX_NUM_TICKS = 4;
+        const tickTimeArray = new Array(MAX_NUM_TICKS);
+
+        let numTick = 0;
+        let currentFPS = -1;
+        let preRenderTime = Date.now();
+        let deltaTime = 0;
+        let sceneTick = 0;
+        let lastTickCameraMoved = sceneTick;
+
+        this._scene.on("rendering", () => { // Apply LOD-culling before rendering the scene
+            if (currentFPS === -1) {
+                return;
+            }
+            for (let i = 0, len = this._lodManagerList.length; i < len; i++) {
+                this._lodManagerList[i].applyLodCulling(currentFPS);
+            }
+        });
+
+        this._scene.on("rendered", () => {
+            preRenderTime = Date.now();
+            window.requestAnimationFrame(() => {
+                numTick++;
+                const newTime = Date.now();
+                deltaTime = newTime - preRenderTime;
+                preRenderTime = newTime;
+                tickTimeArray[numTick % MAX_NUM_TICKS] = deltaTime;
+                let sumTickTimes = 0;
+                if (numTick > MAX_NUM_TICKS) {
+                    for (let i = 0; i < MAX_NUM_TICKS; i++) {
+                        sumTickTimes += tickTimeArray[i];
+                    }
+                    currentFPS = MAX_NUM_TICKS / sumTickTimes * 1000;
+                }
+            });
+        });
+
+        this._scene.camera.on("matrix", () => {
+            lastTickCameraMoved = sceneTick;
+        });
+
+        this._scene.on("tick", () => {
+            if ((sceneTick - lastTickCameraMoved) > 3) {
+                for (let i = 0, len = this._lodManagerList.length; i < len; i++) {   // Call LOD-culling tasks
+                    this._lodManagerList[i].resetLodCulling();
+                }
+            }
+            sceneTick++;
+        });
+
+        this._onModelLoaded = viewer.scene.on("modelLoaded", (modelId) => {
+            const sceneModel = this.viewer.scene.models[modelId];
+            if (sceneModel) {
+                this._getLODManager(sceneModel);
+            }
+        });
+    }
+
+    /**
+     * Sets whether LOD is enabled for the {@link Scene}.
+     *
+     * Default value is ````false````.
+     *
+     * @type {Boolean}
+     */
+    set enabled(value) {
+        value = !!value;
+        if (this._enabled === value) {
+            return;
+        }
+        this._enabled = value;
+        this.glRedraw();
+    }
+
+    /**
+     * Gets whether LOD is enabled for the {@link Scene}.
+     *
+     * Default value is ````false````.
+     *
+     * @type {Boolean}
+     */
+    get enabled() {
+        return this._enabled;
+    }
+
+    /**
+     * Sets the maximum area that LOD takes into account when checking for possible occlusion for each fragment.
+     *
+     * Default value is ````30.0````.
+     *
+     * @type {Number}
+     */
+    set targetFPS(value) {
+        if (value === undefined || value === null) {
+            value = 30.0;
+        }
+        if (this._targetFPS === value) {
+            return;
+        }
+        this._targetFPS = value;
+        this.glRedraw();
+    }
+
+    /**
+     * Gets the maximum area that LOD takes into account when checking for possible occlusion for each fragment.
+     *
+     * Default value is ````30.0````.
+     *
+     * @type {Number}
+     */
+    get targetFPS() {
+        return this._targetFPS;
+    }
+
+    /**
+     * Sets the {@link MetaObject} types that are never culled.
+     *
+     * Default value is ````[]````.
+     *
+     * @type {string[]}
+     */
+    set neverCullTypes(value) {
+        if (value === undefined || value === null) {
+            value = [];
+        }
+        this._neverCullTypes = value;
+        this._neverCullTypesMap = {};
+        for (let i = 0, len = this._neverCullTypes.length; i < len; i++) {
+            this._neverCullTypesMap[this._neverCullTypes[i]] = true;
+        }
+      //  this.glRedraw();
+    }
+
+    /**
+     * Gets the {@link MetaObject} types that are never culled.
+     *
+     * Default value is ````[]````.
+     *
+     * @type {string[]}
+     */
+    get neverCullTypes() {
+        return this._neverCullTypes;
+    }
+
+    /**
+     * @private
+     * @returns {*|{}}
+     */
+    get neverCullTypesMap() {
+        return this._neverCullTypesMap;
+    }
+    
+    /**
+     * Called within SceneModel constructors
+     * @private
+     */
+    _getLODManager(sceneModel) {
+        const lodManager = new LODManager(this.scene, sceneModel, this._lodLevels, this._targetFPS);
+        this._lodManagers[lodManager.id] = lodManager;
+        this._lodManagerList = Object.values(this._lodManagers);
+        return lodManager;
+    }
+
+    /**
+     * Called within SceneModel destructors
+     * @private
+     */
+    _putLODManager(lodManager) {
+        delete this._lodManagers[lodManager.id];
+        this._lodManagerList = Object.values(this._lodManagers);
+    }
+
+    /**
+     * Destroys this component.
+     *
+     * @private
+     */
+    destroy() {
+        super.destroy();
+    }
+}

package/src/plugins/LODCullingPlugin/LODManager.js

@@ -0,0 +1,82 @@
+import {LODState} from "./LODState.js";
+
+/**
+ * @private
+ */
+export class LODManager {
+
+    constructor(scene, sceneModel, lodLevels, targetFps) {
+        this.id = sceneModel.id;
+        this.scene = scene;
+        this.sceneModel = sceneModel;
+        this.lodState = new LODState(lodLevels, targetFps);
+        this.lodState.initializeLodState(sceneModel);
+    }
+
+    /**
+     * Cull any objects belonging to the current `LOD` level, and increase the `LOD` level.
+     */
+    _increaseLODLevelIndex() {
+        const lodState = this.lodState;
+        if (lodState.lodLevelIndex === lodState.primLODLevels.length) {
+            return false;
+        }
+        const entitiesInLOD = lodState.entitiesInLOD [lodState.primLODLevels[lodState.lodLevelIndex]] || [];
+        for (let i = 0, len = entitiesInLOD.length; i < len; i++) {
+            entitiesInLOD[i].culledLOD = true;
+        }
+        lodState.lodLevelIndex++;
+        return true;
+    }
+
+    /**
+     * Un-cull any objects belonging to the current `LOD` level, and decrease the `LOD` level.
+     */
+    _decreaseLODLevelIndex() {
+        const lodState = this.lodState;
+        if (lodState.lodLevelIndex === 0) {
+            return false;
+        }
+        const entitiesInLOD = lodState.entitiesInLOD [lodState.primLODLevels[lodState.lodLevelIndex - 1]] || [];
+        for (let i = 0, len = entitiesInLOD.length; i < len; i++) {
+            entitiesInLOD[i].culledLOD = false;
+        }
+        lodState.lodLevelIndex--;
+        return true;
+    }
+
+    /**
+     * Apply LOD culling.
+     *
+     * Will update LOD level, if needed, based on current FPS and target FPS,
+     * and then will cull/uncull the needed objects according to the LOD level.
+     *
+     * @param {number} currentFPS The current FPS (frames per second)
+     * @returns {boolean} Whether the LOD level was changed. This is, if some object was culled/unculled.
+     */
+    applyLodCulling(currentFPS) {
+        let lodState = this.lodState;
+        let retVal = false;
+        if (currentFPS < lodState.targetFps) {
+            if (++lodState.consecutiveFramesWithoutTargetFps > 2) {
+                lodState.consecutiveFramesWithoutTargetFps = 0;
+                retVal = this._increaseLODLevelIndex();
+            }
+        } else if (currentFPS > (lodState.targetFps + 4)) {
+            if (++lodState.consecutiveFramesWithTargetFps > 2) {
+                lodState.consecutiveFramesWithTargetFps = 0;
+                retVal = this._decreaseLODLevelIndex();
+            }
+        }
+        return retVal;
+    }
+
+    resetLodCulling() {
+        let retVal = false;
+        let decreasedLevel = false;
+        do {
+            retVal |= (decreasedLevel = this._decreaseLODLevelIndex());
+        } while (decreasedLevel);
+        return retVal;
+    }
+}

package/src/plugins/LODCullingPlugin/LODState.js

@@ -0,0 +1,130 @@
+import {math} from "../math/math.js";
+
+/**
+ * Data structure containing pre-initialized `LOD` data.
+ *
+ * Will be used by the rest of `LOD` related code.
+ *
+ * @private
+ */
+
+export class LODState {
+
+    /**
+     * @param {Array<number>} primLODLevels The primtive counts for the LOD levels, for example ```[ 2000, 600, 150, 80, 20 ]```
+     * @param {number} targetFps The target FPS (_Frames Per Second_) for the dynamic culling of objects in the different LOD levels.
+     */
+    constructor(primLODLevels, targetFps) {
+
+        /**
+         * An array ordered DESC with the number of primtives allowed in each LOD bucket.
+         *
+         * @type {Array<number>}
+         */
+        this.primLODLevels = primLODLevels;
+
+        /**
+         * A computed dictionary for `primtive-number-buckets` where:
+         * - key: the number of primtives allowed for the objects in the bucket.
+         * - value: all PerformanceNodes that have the number of primtives or more.
+         *
+         * @type {Map<number, Array<DataTextureSceneModelNode>>}
+         */
+        this.entitiesInLOD = {};
+
+        /**
+         * A computed dictionary for `primtive-number-buckets` where:
+         * - key: the number of primtives allowed for the objects in the bucket.
+         * - value: the sum of primtives counts for all PeformanceNodes in the bucket.
+         *
+         * @type {Map<number, number>}
+         */
+        this.primCountInLOD = {};
+
+        /**
+         * The target FPS for the `LOD` mechanism:
+         * - if real FPS are below this number, the next `LOD` level will be applied.
+         *
+         * - if real FPS are...
+         *   - above this number plus a margin
+         *   - and for some consecutive frames
+         *  ... then the previous `LOD` level will be applied.
+         *
+         * @type {number}
+         */
+        this.targetFps = targetFps;
+
+        // /**
+        //  * Not used at the moment.
+        //  */
+        // this.restoreTime = LOD_RESTORE_TIME;
+
+        /**
+         * Current `LOD` level. Starts at 0.
+         *
+         * @type {number}
+         */
+        this.lodLevelIndex = 0;
+
+        /**
+         * Number of consecutive frames in current `LOD` level where FPS was above `targetFps`
+         *
+         * @type {number}
+         */
+        this.consecutiveFramesWithTargetFps = 0;
+
+        /**
+         * Number of consecutive frames in current `LOD` level where FPS was below `targetFps`
+         *
+         * @type {number}
+         */
+        this.consecutiveFramesWithoutTargetFps = 0;
+    }
+
+    /**
+     * @param {SceneModel} sceneModel
+     */
+    initializeLodState(sceneModel) {
+        const entityList = Object.values(sceneModel.objects);
+        if (entityList.length === 0) {
+            return;
+        }
+        const neverCullTypesMap = sceneModel.scene.lod.neverCullTypesMap;
+        const metaScene = sceneModel.scene.viewer.metaScene;
+        const entitiesInLOD = {};
+        const primCountInLOD = {};
+        const maxSize = 20;
+        const minComplexity = 25;
+
+        for (let i = 0, len = entityList.length; i < len; i++) {
+            const entity = entityList[i];
+            const metaObject = metaScene.metaObjects[entity.id];
+            if (metaObject && neverCullTypesMap[metaObject.type]) {
+                continue;
+            }
+            const entityComplexity = entity.numPrimitives;
+            const entitySize = math.getAABB3Diag(entity.aabb);
+            // const isCullable = ((minComplexity <= entityComplexity) && (entitySize <= maxSize));
+            // if (!isCullable) {
+            //     continue;
+            // }
+            let lodLevel = 0, len;
+            for (lodLevel = 0, len = this.primLODLevels.length; lodLevel < len; lodLevel++) {
+                if (entity.numPrimitives >= this.primLODLevels [lodLevel]) {
+                    break;
+                }
+            }
+            const lodPrims = this.primLODLevels [lodLevel] || 0;
+            if (!(lodPrims in entitiesInLOD)) {
+                entitiesInLOD [lodPrims] = [];
+            }
+            entitiesInLOD [lodPrims].push(entity);
+            if (!(lodPrims in primCountInLOD)) {
+                primCountInLOD [lodPrims] = 0;
+            }
+            primCountInLOD [lodPrims] += entity.numPrimitives;
+        }
+        this.entitiesInLOD = entitiesInLOD;
+        this.primCountInLOD = primCountInLOD;
+    }
+}

package/src/plugins/LODCullingPlugin/index.js

@@ -0,0 +1 @@
+export * from "./LOD.js";

package/src/viewer/scene/model/dtx/triangles/DataTextureGenerator.js

@@ -199,16 +199,17 @@ export class DataTextureGenerator {
 
     /**
      * @param {WebGL2RenderingContext} gl
-     * @param {ArrayLike<int>} indices
+     * @param indicesArrays
+     * @param lenIndices
      *
      * @returns {BindableDataTexture}
      */
-    generateTextureFor8BitIndices(gl, indices) {
-        if (indices.length === 0) {
+    generateTextureFor8BitIndices(gl, indicesArrays, lenIndices) {
+        if (lenIndices === 0) {
             return {texture: null, textureHeight: 0,};
         }
         const textureWidth = 4096;
-        const textureHeight = Math.ceil(indices.length / 3 / textureWidth);
+        const textureHeight = Math.ceil(lenIndices / 3 / textureWidth);
         if (textureHeight === 0) {
             throw "texture height===0";
         }
@@ -216,8 +217,11 @@ export class DataTextureGenerator {
         const texArray = new Uint8Array(texArraySize);
         dataTextureRamStats.sizeDataTextureIndices += texArray.byteLength;
         dataTextureRamStats.numberOfTextures++;
-        texArray.fill(0);
-        texArray.set(indices, 0)
+        for (let i = 0, j = 0, len = indicesArrays.length; i < len; i++) {
+            const pc = indicesArrays[i];
+            texArray.set(pc, j);
+            j += pc.length;
+        }
         const texture = gl.createTexture();
         gl.bindTexture(gl.TEXTURE_2D, texture);
         gl.texStorage2D(gl.TEXTURE_2D, 1, gl.RGB8UI, textureWidth, textureHeight);
@@ -229,16 +233,17 @@ export class DataTextureGenerator {
 
     /**
      * @param {WebGL2RenderingContext} gl
-     * @param {ArrayLike<int>} indices
+     * @param indicesArrays
+     * @param lenIndices
      *
      * @returns {BindableDataTexture}
      */
-    generateTextureFor16BitIndices(gl, indices) {
-        if (indices.length === 0) {
+    generateTextureFor16BitIndices(gl, indicesArrays, lenIndices) {
+        if (lenIndices === 0) {
             return {texture: null, textureHeight: 0,};
         }
         const textureWidth = 4096;
-        const textureHeight = Math.ceil(indices.length / 3 / textureWidth);
+        const textureHeight = Math.ceil(lenIndices / 3 / textureWidth);
         if (textureHeight === 0) {
             throw "texture height===0";
         }
@@ -246,8 +251,11 @@ export class DataTextureGenerator {
         const texArray = new Uint16Array(texArraySize);
         dataTextureRamStats.sizeDataTextureIndices += texArray.byteLength;
         dataTextureRamStats.numberOfTextures++;
-        texArray.fill(0);
-        texArray.set(indices, 0)
+        for (let i = 0, j = 0, len = indicesArrays.length; i < len; i++) {
+            const pc = indicesArrays[i];
+            texArray.set(pc, j);
+            j += pc.length;
+        }
         const texture = gl.createTexture();
         gl.bindTexture(gl.TEXTURE_2D, texture);
         gl.texStorage2D(gl.TEXTURE_2D, 1, gl.RGB16UI, textureWidth, textureHeight);
@@ -259,16 +267,17 @@ export class DataTextureGenerator {
 
     /**
      * @param {WebGL2RenderingContext} gl
-     * @param {ArrayLike<int>} indices
+     * @param indicesArrays
+     * @param lenIndices
      *
      * @returns {BindableDataTexture}
      */
-    generateTextureFor32BitIndices(gl, indices) {
-        if (indices.length === 0) {
-            return {texture: null, textureHeight: 0};
+    generateTextureFor32BitIndices(gl, indicesArrays, lenIndices) {
+        if (lenIndices === 0) {
+            return {texture: null, textureHeight: 0,};
         }
         const textureWidth = 4096;
-        const textureHeight = Math.ceil(indices.length / 3 / textureWidth);
+        const textureHeight = Math.ceil(lenIndices / 3 / textureWidth);
         if (textureHeight === 0) {
             throw "texture height===0";
         }
@@ -276,8 +285,11 @@ export class DataTextureGenerator {
         const texArray = new Uint32Array(texArraySize);
         dataTextureRamStats.sizeDataTextureIndices += texArray.byteLength;
         dataTextureRamStats.numberOfTextures++;
-        texArray.fill(0);
-        texArray.set(indices, 0)
+        for (let i = 0, j = 0, len = indicesArrays.length; i < len; i++) {
+            const pc = indicesArrays[i];
+            texArray.set(pc, j);
+            j += pc.length;
+        }
         const texture = gl.createTexture();
         gl.bindTexture(gl.TEXTURE_2D, texture);
         gl.texStorage2D(gl.TEXTURE_2D, 1, gl.RGB32UI, textureWidth, textureHeight);
@@ -289,16 +301,17 @@ export class DataTextureGenerator {
 
     /**
      * @param {WebGL2RenderingContext} gl
-     * @param {ArrayLike<int>} edgeIndices
+     * @param indicesArrays
+     * @param lenIndices
      *
      * @returns {BindableDataTexture}
      */
-    generateTextureFor8BitsEdgeIndices(gl, edgeIndices) {
-        if (edgeIndices.length === 0) {
-            return {texture: null, textureHeight: 0};
+    generateTextureFor8BitsEdgeIndices(gl, indicesArrays, lenIndices) {
+        if (lenIndices === 0) {
+            return {texture: null, textureHeight: 0,};
         }
         const textureWidth = 4096;
-        const textureHeight = Math.ceil(edgeIndices.length / 2 / textureWidth);
+        const textureHeight = Math.ceil(lenIndices / 2 / textureWidth);
         if (textureHeight === 0) {
             throw "texture height===0";
         }
@@ -306,8 +319,11 @@ export class DataTextureGenerator {
         const texArray = new Uint8Array(texArraySize);
         dataTextureRamStats.sizeDataTextureEdgeIndices += texArray.byteLength;
         dataTextureRamStats.numberOfTextures++;
-        texArray.fill(0);
-        texArray.set(edgeIndices, 0)
+        for (let i = 0, j = 0, len = indicesArrays.length; i < len; i++) {
+            const pc = indicesArrays[i];
+            texArray.set(pc, j);
+            j += pc.length;
+        }
         const texture = gl.createTexture();
         gl.bindTexture(gl.TEXTURE_2D, texture);
         gl.texStorage2D(gl.TEXTURE_2D, 1, gl.RG8UI, textureWidth, textureHeight);
@@ -319,16 +335,17 @@ export class DataTextureGenerator {
 
     /**
      * @param {WebGL2RenderingContext} gl
-     * @param {ArrayLike<int>} edgeIndices
+     * @param indicesArrays
+     * @param lenIndices
      *
      * @returns {BindableDataTexture}
      */
-    generateTextureFor16BitsEdgeIndices(gl, edgeIndices) {
-        if (edgeIndices.length === 0) {
-            return {texture: null, textureHeight: 0};
+    generateTextureFor16BitsEdgeIndices(gl, indicesArrays, lenIndices) {
+        if (lenIndices === 0) {
+            return {texture: null, textureHeight: 0,};
         }
         const textureWidth = 4096;
-        const textureHeight = Math.ceil(edgeIndices.length / 2 / textureWidth);
+        const textureHeight = Math.ceil(lenIndices / 2 / textureWidth);
         if (textureHeight === 0) {
             throw "texture height===0";
         }
@@ -336,8 +353,11 @@ export class DataTextureGenerator {
         const texArray = new Uint16Array(texArraySize);
         dataTextureRamStats.sizeDataTextureEdgeIndices += texArray.byteLength;
         dataTextureRamStats.numberOfTextures++;
-        texArray.fill(0);
-        texArray.set(edgeIndices, 0)
+        for (let i = 0, j = 0, len = indicesArrays.length; i < len; i++) {
+            const pc = indicesArrays[i];
+            texArray.set(pc, j);
+            j += pc.length;
+        }
         const texture = gl.createTexture();
         gl.bindTexture(gl.TEXTURE_2D, texture);
         gl.texStorage2D(gl.TEXTURE_2D, 1, gl.RG16UI, textureWidth, textureHeight);
@@ -349,16 +369,17 @@ export class DataTextureGenerator {
 
     /**
      * @param {WebGL2RenderingContext} gl
-     * @param {ArrayLike<int>} edgeIndices
+     * @param indicesArrays
+     * @param lenIndices
      *
      * @returns {BindableDataTexture}
      */
-    generateTextureFor32BitsEdgeIndices(gl, edgeIndices) {
-        if (edgeIndices.length === 0) {
+    generateTextureFor32BitsEdgeIndices(gl, indicesArrays, lenIndices) {
+        if (lenIndices === 0) {
             return {texture: null, textureHeight: 0,};
         }
         const textureWidth = 4096;
-        const textureHeight = Math.ceil(edgeIndices.length / 2 / textureWidth);
+        const textureHeight = Math.ceil(lenIndices / 2 / textureWidth);
         if (textureHeight === 0) {
             throw "texture height===0";
         }
@@ -366,8 +387,11 @@ export class DataTextureGenerator {
         const texArray = new Uint32Array(texArraySize);
         dataTextureRamStats.sizeDataTextureEdgeIndices += texArray.byteLength;
         dataTextureRamStats.numberOfTextures++;
-        texArray.fill(0);
-        texArray.set(edgeIndices, 0)
+        for (let i = 0, j = 0, len = indicesArrays.length; i < len; i++) {
+            const pc = indicesArrays[i];
+            texArray.set(pc, j);
+            j += pc.length;
+        }
         const texture = gl.createTexture();
         gl.bindTexture(gl.TEXTURE_2D, texture);
         gl.texStorage2D(gl.TEXTURE_2D, 1, gl.RG32UI, textureWidth, textureHeight);
@@ -379,7 +403,8 @@ export class DataTextureGenerator {
 
     /**
      * @param {WebGL2RenderingContext} gl
-     * @param {ArrayLike<int>} positions Array of (uniquified) quantized positions in the layer
+     * @param {ArrayLike<int>} positionsArrays Arrays of  quantized positions in the layer
+     * @param lenPositions
      *
      * This will generate a texture for positions in the layer.
      *
@@ -389,8 +414,8 @@ export class DataTextureGenerator {
      *
      * @returns {BindableDataTexture}
      */
-    generateTextureForPositions(gl, positions) {
-        const numVertices = positions.length / 3;
+    generateTextureForPositions(gl, positionsArrays, lenPositions) {
+        const numVertices = lenPositions / 3;
         const textureWidth = 4096;
         const textureHeight = Math.ceil(numVertices / textureWidth);
         if (textureHeight === 0) {
@@ -400,8 +425,11 @@ export class DataTextureGenerator {
         const texArray = new Uint16Array(texArraySize);
         dataTextureRamStats.sizeDataTexturePositions += texArray.byteLength;
         dataTextureRamStats.numberOfTextures++;
-        texArray.fill(0);
-        texArray.set(positions, 0);
+        for (let i = 0, j = 0, len = positionsArrays.length; i < len; i++) {
+            const pc = positionsArrays[i];
+            texArray.set(pc, j);
+            j += pc.length;
+        }
         const texture = gl.createTexture();
         gl.bindTexture(gl.TEXTURE_2D, texture);
         gl.texStorage2D(gl.TEXTURE_2D, 1, gl.RGB16UI, textureWidth, textureHeight);