@xeokit/xeokit-sdk 2.6.87 → 2.6.88-renderers-refactor-v5

package/src/viewer/scene/model/layer/DTXLayer.js

@@ -0,0 +1,940 @@
+import {ENTITY_FLAGS} from "../ENTITY_FLAGS.js";
+import {getColSilhEdgePickFlags, getRenderers, isPerspectiveMatrix, Layer} from "./Layer.js";
+import {math} from "../../math/math.js";
+import {Configs} from "../../../Configs.js";
+
+const iota = (n) => { const ret = [ ]; for (let i = 0; i < n; ++i) ret.push(i); return ret; };
+
+const dataTextureRamStats = {
+    sizeDataColorsAndFlags: 0,
+    sizeDataInstancesMatrices: 0,
+    sizeDataPositionDecodeMatrices: 0,
+    sizeDataTextureOffsets: 0,
+    sizeDataTexturePositions: 0,
+    sizeDataTextureIndices: 0,
+    sizeDataTextureEdgeIndices: 0,
+    sizeDataTexturePortionIds: 0,
+    numberOfGeometries: 0,
+    numberOfPortions: 0,
+    numberOfLayers: 0,
+    numberOfTextures: 0,
+    totalPolygons: 0,
+    totalPolygons8Bits: 0,
+    totalPolygons16Bits: 0,
+    totalPolygons32Bits: 0,
+    totalEdges: 0,
+    totalEdges8Bits: 0,
+    totalEdges16Bits: 0,
+    totalEdges32Bits: 0,
+    cannotCreatePortion: {
+        because10BitsObjectId: 0,
+        becauseTextureSize: 0,
+    },
+    overheadSizeAlignementIndices: 0,
+    overheadSizeAlignementEdgeIndices: 0,
+};
+
+window.printDataTextureRamStats = function () {
+
+    console.log(JSON.stringify(dataTextureRamStats, null, 4));
+
+    let totalRamSize = 0;
+
+    Object.keys(dataTextureRamStats).forEach(key => {
+        if (key.startsWith("size")) {
+            totalRamSize += dataTextureRamStats[key];
+        }
+    });
+
+    console.log(`Total size ${totalRamSize} bytes (${(totalRamSize / 1000 / 1000).toFixed(2)} MB)`);
+    console.log(`Avg bytes / triangle: ${(totalRamSize / dataTextureRamStats.totalPolygons).toFixed(2)}`);
+
+    let percentualRamStats = {};
+
+    Object.keys(dataTextureRamStats).forEach(key => {
+        if (key.startsWith("size")) {
+            percentualRamStats[key] =
+                `${(dataTextureRamStats[key] / totalRamSize * 100).toFixed(2)} % of total`;
+        }
+    });
+
+    console.log(JSON.stringify({percentualRamUsage: percentualRamStats}, null, 4));
+};
+
+const configs = new Configs();
+
+/**
+ * 12-bits allowed for object ids.
+ * Limits the per-object texture height in the layer.
+ */
+const MAX_NUMBER_OF_OBJECTS_IN_LAYER = (1 << 16);
+
+/**
+ * 4096 is max data texture height.
+ * Limits the aggregated geometry texture height in the layer.
+ */
+const MAX_DATA_TEXTURE_HEIGHT = configs.maxDataTextureHeight;
+
+/**
+ * Align `indices` and `edgeIndices` memory layout to 8 elements.
+ *
+ * Used as an optimization for the `...portionIds...` texture, so it
+ * can just be stored 1 out of 8 `portionIds` corresponding to a given
+ * `triangle-index` or `edge-index`.
+ */
+const INDICES_EDGE_INDICES_ALIGNEMENT_SIZE = 8;
+
+/**
+ * Number of maximum allowed per-object flags update per render frame
+ * before switching to batch update mode.
+ */
+const MAX_OBJECT_UPDATES_IN_FRAME_WITHOUT_BATCHED_UPDATE = 10;
+
+const tempVec3 = math.vec3();
+const tempVec3a = math.vec3();
+const tempVec4a = math.vec4();
+const tempVec4b = math.vec4();
+const tempMat4a = new Float32Array(16);
+const tempUint8Array4 = new Uint8Array(4);
+const tempFloat32Array3 = new Float32Array(3);
+
+const DEFAULT_MATRIX = math.identityMat4();
+
+/**
+ * @private
+ */
+export class DTXLayer extends Layer {
+
+    constructor(model, primitive, origin) {
+
+        super(model, primitive, origin);
+
+        dataTextureRamStats.numberOfLayers++;
+
+        this._sortId = `TriDTX-${dataTextureRamStats.numberOfLayers}`;
+
+        const gl = model.scene.canvas.gl;
+
+        const geometryData = (indicesStatsProp, edgesStatsProp) => {
+            const indicesBuffer = [ ];
+            let lenIndices = 0;
+            const perTriangleNumberPortionId = [ ];
+            let numIndices = 0;
+
+            const edgeIndicesBuffer = [ ];
+            let lenEdgeIndices = 0;
+            const perEdgeNumberPortionId = [ ];
+            let numEdgeIndices = 0;
+
+            return {
+                len: () => numIndices,
+
+                accumulateIndices: (indices, edgeIndices) => {
+                    const accIndicesSubPortion = (indices && (indices.length > 0)) && (function() {
+                        const indicesBase = lenIndices / 3;
+                        lenIndices += indices.length;
+                        indicesBuffer.push(indices);
+                        const numTriangles = indices.length / 3;
+                        return (subPortionId) => {
+                            const currentNumIndices = numIndices;
+                            numIndices += numTriangles * 3;
+                            buffer.perObjectIndexBaseOffsets.push(currentNumIndices / 3 - indicesBase);
+                            for (let i = 0; i < numTriangles; i += INDICES_EDGE_INDICES_ALIGNEMENT_SIZE) {
+                                perTriangleNumberPortionId.push(subPortionId);
+                            }
+                            dataTextureRamStats[indicesStatsProp] += numTriangles;
+                            dataTextureRamStats.totalPolygons += numTriangles;
+                        };
+                    })();
+
+                    const accEdgesSubPortion = edgeIndices && (edgeIndices.length > 0) && (function() {
+                        const edgeIndicesBase = lenEdgeIndices / 2;
+                        lenEdgeIndices += edgeIndices.length;
+                        edgeIndicesBuffer.push(edgeIndices);
+                        const numEdges = edgeIndices.length / 2;
+                        return subPortionId => {
+                            const currentNumEdgeIndices = numEdgeIndices;
+                            numEdgeIndices += numEdges * 2;
+                            buffer.perObjectEdgeIndexBaseOffsets.push(currentNumEdgeIndices / 2 - edgeIndicesBase);
+                            for (let i = 0; i < numEdges; i += INDICES_EDGE_INDICES_ALIGNEMENT_SIZE) {
+                                perEdgeNumberPortionId.push(subPortionId);
+                            }
+                            dataTextureRamStats[edgesStatsProp] += numEdges;
+                            dataTextureRamStats.totalEdges += numEdges;
+                        };
+                    })();
+
+                    dataTextureRamStats.numberOfGeometries++;
+
+                    return {
+                        numTriangles: indices ? (indices.length / 3) : 0,
+                        accumulateSubPortionId: subPortionId => {
+                            accIndicesSubPortion && accIndicesSubPortion(subPortionId);
+                            accEdgesSubPortion   && accEdgesSubPortion(subPortionId);
+                        }
+                    };
+                },
+
+                createDrawers: (createTextureForSingleItems, indicesType) => {
+                    const createTextureForPackedPortionIds = function(portionIdsArray, defaultIfEmpty) {
+                        return (portionIdsArray.length > 0) ? createTextureForSingleItems([ portionIdsArray ], portionIdsArray.length, 1, gl.UNSIGNED_SHORT, "sizeDataTexturePortionIds") : defaultIfEmpty;
+                    };
+
+                    // Texture that holds the PortionId that corresponds to a given polygon-id.
+                    const portionIdsTexture = createTextureForPackedPortionIds(perTriangleNumberPortionId, { texture: null });
+
+                    // Texture that holds the unique-vertex-indices.
+                    const indicesTexture = (lenIndices > 0) && createTextureForSingleItems(indicesBuffer, lenIndices, 3, indicesType, "sizeDataTextureIndices");
+
+                    // Texture that holds the PortionId that corresponds to a given edge-id.
+                    const portionEdgeIdsTexture = createTextureForPackedPortionIds(perEdgeNumberPortionId);
+
+                    // Texture that holds the unique-vertex-indices for 8-bit based edge indices.
+                    const edgeIndicesTexture = (lenEdgeIndices > 0) && createTextureForSingleItems(edgeIndicesBuffer, lenEdgeIndices, 2, indicesType, "sizeDataTextureEdgeIndices");
+
+                    return {
+                        indices: function(layerTypeInputs, glMode) {
+                            if (numIndices > 0) {
+                                layerTypeInputs.perPrimIndices.setInputValue(indicesTexture);
+                                layerTypeInputs.perPrimIdPorIds.setInputValue(portionIdsTexture);
+                                gl.drawArrays(glMode, 0, numIndices);
+                            }
+                        },
+                        edges: function(layerTypeInputs, glMode) {
+                            if (numEdgeIndices > 0) {
+                                layerTypeInputs.perPrimIndices.setInputValue(edgeIndicesTexture);
+                                layerTypeInputs.perPrimIdPorIds.setInputValue(portionEdgeIdsTexture);
+                                gl.drawArrays(glMode, 0, numEdgeIndices);
+                            }
+                        }
+                    };
+                }
+            };
+        };
+
+        const buffer = this._buffer = {
+            positionsCompressed: [],
+            lenPositionsCompressed: 0,
+
+            geometry8Bits:  geometryData("totalPolygons8Bits",  "totalEdges8Bits"),
+            geometry16Bits: geometryData("totalPolygons16Bits", "totalEdges16Bits"),
+            geometry32Bits: geometryData("totalPolygons32Bits", "totalEdges32Bits"),
+
+            perObjectColors: [],
+            perObjectPickColors: [],
+            perObjectSolid: [],
+            perObjectPositionsDecodeMatrices: [],
+            perObjectInstancePositioningMatrices: [],
+            perObjectVertexBases: [],
+            perObjectIndexBaseOffsets: [],
+            perObjectEdgeIndexBaseOffsets: []
+        };
+
+        this._numVertices = 0;
+
+        this._portions = []; // These counts are used to avoid unnecessary render passes
+
+        this._subPortionReadableGeometries = this.model.scene.readableGeometryEnabled && {};
+
+        /**
+         * Due to `index rebucketting` process in ```prepareMeshGeometry``` function, it's possible that a single
+         * portion is expanded to more than 1 real sub-portion.
+         *
+         * This Array tracks the mapping between:
+         *
+         * - external `portionIds` as seen by consumers of this class.
+         * - internal `sub-portionIds` actually managed by this class.
+         *
+         * The outer index of this array is the externally seen `portionId`.
+         * The inner value of the array, are `sub-portionIds` corresponding to the `portionId`.
+         */
+        this._portionToSubPortionsMap = [];
+
+        this._bucketGeometries = {};
+
+        this._primitive = primitive;
+    }
+
+    /**
+     * Returns whether the ```TrianglesDataTextureLayer``` has room for more portions.
+     *
+     * @param {object} portionCfg An object containing the geometrical data (`positions`, `indices`, `edgeIndices`) for the portion.
+     * @returns {Boolean} Wheter the requested portion can be created
+     */
+    canCreatePortion(portionCfg) {
+        const numNewPortions = portionCfg.buckets.length;
+        if ((this._portions.length + numNewPortions) > MAX_NUMBER_OF_OBJECTS_IN_LAYER) {
+            dataTextureRamStats.cannotCreatePortion.because10BitsObjectId++;
+        }
+        let retVal = (this._portions.length + numNewPortions) <= MAX_NUMBER_OF_OBJECTS_IN_LAYER;
+        const bucketIndex = 0; // TODO: Is this a bug?
+        const bucketGeometryId = portionCfg.geometryId !== undefined && portionCfg.geometryId !== null
+            ? `${portionCfg.geometryId}#${bucketIndex}`
+            : `${portionCfg.id}#${bucketIndex}`;
+        const alreadyHasPortionGeometry = this._bucketGeometries[bucketGeometryId];
+        if (!alreadyHasPortionGeometry) {
+            const buffer = this._buffer;
+            const maxIndicesOfAnyBits = Math.max(buffer.geometry8Bits.len(), buffer.geometry16Bits.len(), buffer.geometry32Bits.len());
+            let numVertices = 0;
+            let numIndices = 0;
+            portionCfg.buckets.forEach(bucket => {
+                numVertices += bucket.positionsCompressed.length / 3;
+                numIndices += bucket.indices.length / 3;
+            });
+            if ((this._numVertices + numVertices) > MAX_DATA_TEXTURE_HEIGHT * 4096 ||
+                (maxIndicesOfAnyBits + numIndices) > MAX_DATA_TEXTURE_HEIGHT * 4096) {
+                dataTextureRamStats.cannotCreatePortion.becauseTextureSize++;
+            }
+            retVal &&=
+                (this._numVertices + numVertices) <= MAX_DATA_TEXTURE_HEIGHT * 4096 &&
+                (maxIndicesOfAnyBits + numIndices) <= MAX_DATA_TEXTURE_HEIGHT * 4096;
+        }
+        return retVal;
+    }
+
+    /**
+     * Creates a new portion within this TrianglesDataTextureLayer, returns the new portion ID.
+     *
+     * Gives the portion the specified geometry, color and matrix.
+     *
+     * @param mesh The SceneModelMesh that owns the portion
+     * @param portionCfg.positionsCompressed Flat float Local-space positionsCompressed array.
+     * @param [portionCfg.normals] Flat float normals array.
+     * @param [portionCfg.colors] Flat float colors array.
+     * @param portionCfg.indices  Flat int indices array.
+     * @param [portionCfg.edgeIndices] Flat int edges indices array.
+     * @param portionCfg.color Quantized RGB color [0..255,0..255,0..255,0..255]
+     * @param portionCfg.opacity Opacity [0..255]
+     * @param [portionCfg.meshMatrix] Flat float 4x4 matrix - transforms the portion within the coordinate system that's local to the SceneModel
+     * @param portionCfg.worldAABB Flat float AABB World-space AABB
+     * @param portionCfg.pickColor Quantized pick color
+     * @returns {number} Portion ID
+     */
+    createPortion(mesh, portionCfg) {
+        const buffer = this._buffer;
+        //   const portionAABB = portionCfg.worldAABB;
+        const subPortionIds = portionCfg.buckets.map((bucket, bucketIndex) => {
+            const bucketGeometryId = (portionCfg.geometryId ?? portionCfg.id) + "#" + bucketIndex;
+            //  const subPortionAABB = math.collapseAABB3(tempAABB3b);
+            if (! (bucketGeometryId in this._bucketGeometries)) {
+                const aligned = (indices, elementSize, statsProp) => {
+                    // Indices and EdgeIndices alignement
+                    // This will make every mesh consume a multiple of INDICES_EDGE_INDICES_ALIGNEMENT_SIZE
+                    // array items for storing the triangles and edges of the mesh, and it supports:
+                    // - a memory optimization of factor INDICES_EDGE_INDICES_ALIGNEMENT_SIZE
+                    // - in exchange for a small RAM overhead
+                    //   (by adding some padding until a size that is multiple of INDICES_EDGE_INDICES_ALIGNEMENT_SIZE)
+                    if (indices) {
+                        const alignedLen = Math.ceil((indices.length / elementSize) / INDICES_EDGE_INDICES_ALIGNEMENT_SIZE) * INDICES_EDGE_INDICES_ALIGNEMENT_SIZE * elementSize;
+                        const alignedArray = new Uint32Array(alignedLen);
+                        alignedArray.set(indices);
+                        dataTextureRamStats[statsProp] += 2 * (alignedArray.length - indices.length);
+                        return alignedArray;
+                    } else {
+                        return indices;
+                    }
+                };
+
+                bucket.indices     = aligned(bucket.indices,     3, "overheadSizeAlignementIndices");
+                bucket.edgeIndices = aligned(bucket.edgeIndices, 2, "overheadSizeAlignementEdgeIndices");
+
+                const positionsCompressed = bucket.positionsCompressed;
+                buffer.positionsCompressed.push(positionsCompressed);
+                const numVertices = positionsCompressed.length / 3;
+                this._numVertices += numVertices;
+                const vertexBase = buffer.lenPositionsCompressed / 3;
+                buffer.lenPositionsCompressed += positionsCompressed.length;
+
+                this._bucketGeometries[bucketGeometryId] = {
+                    vertexBase: vertexBase,
+                    geometryData: (function() {
+                        const indices = bucket.indices;
+                        const edgeIndices = bucket.edgeIndices;
+                        if (numVertices <= (1 << 8)) {
+                            return buffer.geometry8Bits.accumulateIndices( indices, edgeIndices);
+                        } else if (numVertices <= (1 << 16)) {
+                            return buffer.geometry16Bits.accumulateIndices(indices, edgeIndices);
+                        } else {
+                            return buffer.geometry32Bits.accumulateIndices(indices, edgeIndices);
+                        }
+                    })()
+                };
+            }
+
+            //math.expandAABB3(portionAABB, subPortionAABB);
+            const bucketGeometry = this._bucketGeometries[bucketGeometryId];
+            buffer.perObjectPositionsDecodeMatrices.push(portionCfg.positionsDecodeMatrix);
+            buffer.perObjectInstancePositioningMatrices.push(portionCfg.meshMatrix || DEFAULT_MATRIX);
+            buffer.perObjectSolid.push(!!portionCfg.solid);
+            buffer.perObjectPickColors.push(portionCfg.pickColor);
+            buffer.perObjectVertexBases.push(bucketGeometry.vertexBase);
+
+            const colors = portionCfg.colors;
+            const color = portionCfg.color; // Color is pre-quantized by SceneModel
+            buffer.perObjectColors.push(colors
+                                        ? [ colors[0] * 255, colors[1] * 255, colors[2] * 255, 255 ]
+                                        : [ color[0],        color[1],        color[2],        portionCfg.opacity ]);
+
+            const subPortionId = this._portions.length;
+            this._portions.push({ });
+            bucketGeometry.geometryData.accumulateSubPortionId(subPortionId);
+
+            if (this._subPortionReadableGeometries) {
+                this._subPortionReadableGeometries[subPortionId] = {
+                    indices: bucket.indices,
+                    positionsCompressed: bucket.positionsCompressed,
+                    positionsDecodeMatrix: portionCfg.positionsDecodeMatrix
+                };
+            }
+
+            dataTextureRamStats.numberOfPortions++;
+
+            return subPortionId;
+        });
+        const portionId = this._portionToSubPortionsMap.length;
+        this._portionToSubPortionsMap.push(subPortionIds);
+        this.model.numPortions++;
+        this._meshes.push(mesh);
+        return portionId;
+    }
+
+    /**
+     * Builds data textures from the appended geometries and loads them into the GPU.
+     *
+     * No more portions can then be created.
+     */
+    compilePortions() {
+        const buffer                       = this._buffer;
+        const model                        = this.model;
+        const numPortions                  = this._portions.length;
+        const origin                       = this.origin;
+        const portionToSubPortionsMap      = this._portionToSubPortionsMap;
+        const primitive                    = this._primitive;
+        const sortId                       = this._sortId;
+        const subPortionReadableGeometries = this._subPortionReadableGeometries;
+
+        const scene = model.scene;
+        const gl = scene.canvas.gl;
+
+        /*
+         * Texture that holds colors/pickColors/flags/flags2 per-object:
+         * - columns: one concept per column => color / pick-color / ...
+         * - row: the object Id
+         * The texture will have:
+         * - 4 RGBA columns per row: for each object (pick) color and flags(2)
+         * - N rows where N is the number of objects
+         */
+        const populateTexArray = texArray => {
+            const pack32as4x8 = ui32 => [
+                (ui32 >> 24) & 255,
+                (ui32 >> 16) & 255,
+                (ui32 >>  8) & 255,
+                (ui32)       & 255
+            ];
+            for (let i = 0; i < numPortions; i++) {
+                // 8 columns per texture row:
+                texArray.set(buffer.perObjectColors[i],                            i * 32 +  0); // (RGBA)
+                texArray.set(buffer.perObjectPickColors[i],                        i * 32 +  4); // (packed Uint32 as RGBA)
+                texArray.set([0, 0, 0, 0], /* flags */                             i * 32 +  8); // (packed 4 bytes as RGBA)
+                texArray.set([0, 0, 0, 0], /* flags2 */                            i * 32 + 12); // (packed 4 bytes as RGBA)
+                texArray.set(pack32as4x8(buffer.perObjectVertexBases[i]),          i * 32 + 16); // (packed Uint32 bytes as RGBA)
+                texArray.set(pack32as4x8(buffer.perObjectIndexBaseOffsets[i]),     i * 32 + 20); // (packed Uint32 bytes as RGBA)
+                texArray.set(pack32as4x8(buffer.perObjectEdgeIndexBaseOffsets[i]), i * 32 + 24); // (packed Uint32 bytes as RGBA)
+                texArray.set([buffer.perObjectSolid[i] ? 1 : 0, 0, 0, 0],          i * 32 + 28); // (packed 4 bytes as RGBA)
+            }
+        };
+
+        // The number of rows in the texture is the number of objects in the layer.
+        const texturePerObjectColorsAndFlags = createBindableDataTexture(gl, numPortions, 32, gl.UNSIGNED_BYTE, 512, populateTexArray, "sizeDataColorsAndFlags", true);
+        const texturePerObjectColorsAndFlagsData = texturePerObjectColorsAndFlags.textureData;
+
+        const createDataTexture = function(dataArrays, entitiesCnt, entitySize, type, entitiesPerRow, statsProp, exposeData) {
+            const populateTexArray = texArray => {
+                for (let i = 0, j = 0, len = dataArrays.length; i < len; i++) {
+                    const pc = dataArrays[i];
+                    texArray.set(pc, j);
+                    j += pc.length;
+                }
+            };
+            return createBindableDataTexture(gl, entitiesCnt, entitySize, type, entitiesPerRow, populateTexArray, statsProp, exposeData);
+        };
+
+        const createTextureForMatrices = function(matrices, statsProp, exposeData) {
+            const numMatrices = matrices.length;
+            if (numMatrices === 0) {
+                throw "num " + statsProp + " matrices===0";
+            }
+            // in one row we can fit 512 matrices
+            return createDataTexture(matrices, numMatrices, 16, gl.FLOAT, 512, statsProp, exposeData);
+        };
+
+        /**
+         * This will generate a texture for all positions decode matrices in the layer.
+         * The texture will have:
+         * - 4 RGBA columns per row (each column will contain 4 packed half-float (16 bits) components).
+         *   Thus, each row will contain 16 packed half-floats corresponding to a complete positions decode matrix)
+         * - N rows where N is the number of objects
+         */
+        const texturePerObjectInstanceMatrices = createTextureForMatrices(buffer.perObjectInstancePositioningMatrices, "sizeDataInstancesMatrices", true);
+        const texturePerObjectInstanceMatricesData = texturePerObjectInstanceMatrices.textureData;
+
+        /*
+         * Texture that holds the objectDecodeAndInstanceMatrix per-object:
+         * - columns: each column is one column of the matrix
+         * - row: the object Id
+         * The texture will have:
+         * - 4 RGBA columns per row (each column will contain 4 packed half-float (16 bits) components).
+         *   Thus, each row will contain 16 packed half-floats corresponding to a complete positions decode matrix)
+         * - N rows where N is the number of objects
+         */
+        const texturePerObjectPositionsDecodeMatrix = createTextureForMatrices(buffer.perObjectPositionsDecodeMatrices, "sizeDataPositionDecodeMatrices", false);
+
+
+        const createTextureForSingleItems = function(dataArrays, dataCnt, entitySize, type, statsProp) {
+            return createDataTexture(dataArrays, dataCnt / entitySize, entitySize, type, 4096, statsProp, false);
+        };
+
+        /*
+         * Texture that holds all the `different-vertices` used by the layer.
+         * This will generate a texture for positions in the layer.
+         *
+         * The texture will have:
+         * - 1024 columns, where each pixel will be a 16-bit-per-component RGB texture, corresponding to the XYZ of the position
+         * - a number of rows R where R*1024 is just >= than the number of vertices (positions / 3)
+         */
+        const texturePerVertexIdCoordinates = createTextureForSingleItems(
+            buffer.positionsCompressed, buffer.lenPositionsCompressed, 3, gl.UNSIGNED_SHORT, "sizeDataTexturePositions");
+
+        const draw8  = buffer.geometry8Bits.createDrawers( createTextureForSingleItems, gl.UNSIGNED_BYTE);
+        const draw16 = buffer.geometry16Bits.createDrawers(createTextureForSingleItems, gl.UNSIGNED_SHORT);
+        const draw32 = buffer.geometry32Bits.createDrawers(createTextureForSingleItems, gl.UNSIGNED_INT);
+
+        // Free up memory
+        this._buffer = null;
+
+        let deferredSetFlagsActive = false;
+        let deferredSetFlagsDirty = false;
+        let destroyed = false;
+        let numUpdatesInFrame = 0;
+
+
+        /**
+         * This will _start_ a "set-flags transaction".
+         *
+         * After invoking this method, calling setFlags/setFlags2 will not update
+         * the colors+flags texture but only store the new flags/flag2 in the
+         * colors+flags texture data array.
+         *
+         * After invoking this method, and when all desired setFlags/setFlags2 have
+         * been called on needed portions of the layer, invoke `uploadDeferredFlags`
+         * to actually upload the data array into the texture.
+         *
+         * In massive "set-flags" scenarios like VFC or LOD mechanisms, the combination of
+         * `beginDeferredFlags` + `uploadDeferredFlags`brings a speed-up of
+         * up to 80x when e.g. objects are massively (un)culled 🚀.
+         */
+        const beginDeferredFlags = () => { deferredSetFlagsActive = true; };
+
+        const onSceneRendering = scene.on("rendering", () => {
+            if (deferredSetFlagsDirty) {
+                // uploadDeferredFlags
+                /**
+                 * This will _commit_ a "set-flags transaction".
+                 * Invoking this method will update the colors+flags texture data with new
+                 * flags/flags2 set since the previous invocation of `beginDeferredFlags`.
+                 */
+                deferredSetFlagsActive = false;
+                deferredSetFlagsDirty = false;
+                texturePerObjectColorsAndFlagsData.reloadData();
+            }
+            numUpdatesInFrame = 0;
+        });
+
+        const forEachSubPortionId = (portionId, cb) => {
+            const subPortionIds = portionToSubPortionsMap[portionId];
+            if (!subPortionIds) {
+                model.error("portion not found: " + portionId);
+            } else {
+                for (let i = 0, len = subPortionIds.length; i < len; i++) {
+                    cb(subPortionIds[i]);
+                }
+            }
+        };
+
+        const setPortionColorsAndFlags = (subPortionId, offset, data, deferred) => {
+            const defer = deferredSetFlagsActive || deferred;
+            if (defer) {
+                deferredSetFlagsDirty = true;
+            } else if (++numUpdatesInFrame >= MAX_OBJECT_UPDATES_IN_FRAME_WITHOUT_BATCHED_UPDATE) {
+                beginDeferredFlags(); // Subsequent flags updates now deferred
+            }
+            texturePerObjectColorsAndFlagsData.setData(data, subPortionId, offset, !defer);
+        };
+
+        const setFlags2 = (portionId, flags, deferred = false) => {
+            tempUint8Array4.set([ (flags & ENTITY_FLAGS.CLIPPABLE) ? 255 : 0, 0, 1, 2 ]);
+            forEachSubPortionId(portionId, subPortionId => setPortionColorsAndFlags(subPortionId, 3, tempUint8Array4, deferred));
+        };
+
+        return {
+            edgesColorOpaqueAllowed: () => {
+                if (scene.logarithmicDepthBufferEnabled) {
+                    if (!scene._loggedWarning) {
+                        console.log("Edge enhancement for SceneModel data texture layers currently disabled with logarithmic depth buffer");
+                        scene._loggedWarning = true;
+                    }
+                    return false;
+                } else {
+                    return true;
+                }
+            },
+            sortId: sortId,
+            setClippableFlags: setFlags2,
+            setFlags: (portionId, flags, transparent, deferred = false) => {
+                getColSilhEdgePickFlags(flags, transparent, true, scene, tempUint8Array4);
+                forEachSubPortionId(portionId, subPortionId => setPortionColorsAndFlags(subPortionId, 2, tempUint8Array4, deferred));
+            },
+            setFlags2: setFlags2,
+            setDeferredFlags: () => { },
+
+            setColor: (portionId, color) => {
+                tempUint8Array4.set(color);
+                forEachSubPortionId(portionId, subPortionId => setPortionColorsAndFlags(subPortionId, 0, tempUint8Array4, false));
+            },
+            setMatrix: (portionId, matrix) => {
+                forEachSubPortionId(portionId, subPortionId => {
+                    const defer = deferredSetFlagsActive;
+                    if (defer) {
+                        deferredSetFlagsDirty = true;
+                    } else if (++numUpdatesInFrame >= MAX_OBJECT_UPDATES_IN_FRAME_WITHOUT_BATCHED_UPDATE) {
+                        beginDeferredFlags(); // Subsequent flags updates now deferred
+                    }
+                    tempMat4a.set(matrix);
+                    texturePerObjectInstanceMatricesData.setData(tempMat4a, subPortionId, 0, !defer);
+                });
+            },
+            setOffset: (portionId, offset) =>  { /* NOT COMPLETE */ },
+
+            getEachIndex: (portionId, callback) => {
+                if (subPortionReadableGeometries) {
+                    forEachSubPortionId(
+                        portionId,
+                        subPortionId => subPortionReadableGeometries[subPortionId].indices.forEach(i => callback(i)));
+                }
+            },
+            getEachVertex: (portionId, callback) => {
+                if (subPortionReadableGeometries) {
+                    forEachSubPortionId(portionId, subPortionId => {
+                        const subPortionReadableGeometry = subPortionReadableGeometries[subPortionId];
+                        const positions = subPortionReadableGeometry.positionsCompressed;
+                        const positionsDecodeMatrix = subPortionReadableGeometry.positionsDecodeMatrix;
+                        const worldPos = tempVec4a;
+                        for (let i = 0, len = positions.length; i < len; i += 3) {
+                            worldPos[0] = positions[i];
+                            worldPos[1] = positions[i + 1];
+                            worldPos[2] = positions[i + 2];
+                            worldPos[3] = 1.0;
+                            math.decompressPosition(worldPos, positionsDecodeMatrix);
+                            math.mulMat4v4(model.worldMatrix, worldPos, worldPos);
+                            math.addVec3(origin, worldPos, worldPos);
+                            callback(worldPos);
+                        }
+                    });
+                }
+            },
+            precisionRayPickSurface: (portionId, worldRayOrigin, worldRayDir, worldSurfacePos, worldNormal) => false,
+
+            renderers: getRenderers(scene, "dtx", primitive, model.saoEnabled, false, false, true,
+                                    (programVariables, subGeometry) => makeDTXRenderingAttributes(programVariables, !subGeometry)),
+            drawCalls: (function() {
+                const drawer = function(drawCall) {
+                    const setInputValue = (input, value) => (input.setInputValue && input.setInputValue(value));
+                    return (attributesHash, layerTypeInputs, viewState) => {
+                        setInputValue(layerTypeInputs.worldMatrix, model.rotationMatrix);
+                        setInputValue(layerTypeInputs.viewMatrix, viewState.viewMatrix);
+                        setInputValue(layerTypeInputs.projMatrix, viewState.projMatrix);
+                        const rtcOrigin = math.transformPoint3(model.matrix, origin, tempVec3);
+                        setInputValue(layerTypeInputs.uCameraEyeRtc, math.subVec3(viewState.eye, rtcOrigin, tempVec3a));
+                        setInputValue(layerTypeInputs.perObjPosDecode, texturePerObjectPositionsDecodeMatrix);
+                        setInputValue(layerTypeInputs.perVertIdCoords, texturePerVertexIdCoordinates);
+                        setInputValue(layerTypeInputs.perObjColsFlags, texturePerObjectColorsAndFlags);
+                        setInputValue(layerTypeInputs.perObjectMatrix, texturePerObjectInstanceMatrices);
+                        drawCall(layerTypeInputs);
+                    };
+                };
+
+                const vertEdgesDrawer = function(glMode) {
+                    return drawer((layerTypeInputs) => {
+                        draw8.edges( layerTypeInputs, glMode);
+                        draw16.edges(layerTypeInputs, glMode);
+                        draw32.edges(layerTypeInputs, glMode);
+                    });
+                };
+
+                return {
+                    drawVertices: vertEdgesDrawer(gl.POINTS),
+                    drawEdges:    vertEdgesDrawer(gl.LINES),
+                    drawSurface:  drawer((layerTypeInputs) => {
+                        const glMode = gl.TRIANGLES;
+                        draw8.indices( layerTypeInputs, glMode);
+                        draw16.indices(layerTypeInputs, glMode);
+                        draw32.indices(layerTypeInputs, glMode);
+                    })
+                };
+            })(),
+
+            destroy: () => {
+                if (! destroyed) {
+                    scene.off(onSceneRendering);
+                    destroyed = true;
+                }
+            }
+        };
+    }
+}
+
+const createBindableDataTexture = function(gl, entitiesCnt, entitySize, type, entitiesPerRow, populateTexArray, statsProp, exposeData) {
+    if ((entitySize > 4) && ((entitySize % 4) > 0)) {
+        throw "Unhandled data size " + entitySize;
+    }
+    const pixelsPerEntity = Math.ceil(entitySize / 4);
+    const pixelWidth = entitySize / pixelsPerEntity;
+
+    const [ arrayType, internalFormat, format ] = (function() {
+        switch(type) {
+        case gl.UNSIGNED_BYTE:
+            return [ Uint8Array,   ...((pixelWidth === 1) ? [ gl.R8UI,  gl.RED_INTEGER ] : ((pixelWidth === 2) ? [ gl.RG8UI,  gl.RG_INTEGER ] : ((pixelWidth === 3) ? [ gl.RGB8UI,  gl.RGB_INTEGER ] : [ gl.RGBA8UI,  gl.RGBA_INTEGER ]))) ];
+        case gl.UNSIGNED_SHORT:
+            return [ Uint16Array,  ...((pixelWidth === 1) ? [ gl.R16UI, gl.RED_INTEGER ] : ((pixelWidth === 2) ? [ gl.RG16UI, gl.RG_INTEGER ] : ((pixelWidth === 3) ? [ gl.RGB16UI, gl.RGB_INTEGER ] : [ gl.RGBA16UI, gl.RGBA_INTEGER ]))) ];
+        case gl.UNSIGNED_INT:
+            return [ Uint32Array,  ...((pixelWidth === 1) ? [ gl.R32UI, gl.RED_INTEGER ] : ((pixelWidth === 2) ? [ gl.RG32UI, gl.RG_INTEGER ] : ((pixelWidth === 3) ? [ gl.RGB32UI, gl.RGB_INTEGER ] : [ gl.RGBA32UI, gl.RGBA_INTEGER ]))) ];
+        case gl.FLOAT:
+            return [ Float32Array, ...((pixelWidth === 1) ? [ gl.R32F,  gl.RED ]         : ((pixelWidth === 2) ? [ gl.RG32F,  gl.RG ]         : ((pixelWidth === 3) ? [ gl.RGB32F,  gl.RGB ]         : [ gl.RGBA32F,  gl.RGBA ]))) ];
+        default:
+            throw "Unhandled data type " + type;
+        }
+    })();
+
+    const textureWidth = entitiesPerRow * pixelsPerEntity;
+    const textureHeight = Math.ceil(entitiesCnt / entitiesPerRow);
+    if (textureHeight === 0) {
+        throw "texture height===0";
+    }
+    const texArray = new arrayType(textureWidth * textureHeight * pixelWidth);
+    dataTextureRamStats[statsProp] += texArray.byteLength;
+    dataTextureRamStats.numberOfTextures++;
+
+    populateTexArray(texArray);
+
+    const texture = gl.createTexture();
+    gl.bindTexture(gl.TEXTURE_2D, texture);
+    gl.texStorage2D(gl.TEXTURE_2D, 1, internalFormat, textureWidth, textureHeight);
+    gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, textureWidth, textureHeight, format, type, texArray);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+    gl.bindTexture(gl.TEXTURE_2D, null);
+
+    return {
+        // called by createSampler::bindTexture
+        bind(unit) {
+            gl.activeTexture(gl["TEXTURE" + unit]);
+            gl.bindTexture(gl.TEXTURE_2D, texture);
+            return true;
+        },
+
+        unbind(unit) {
+            // This `unbind` method is ignored at the moment to allow avoiding
+            // to rebind same texture already bound to a texture unit.
+
+            // this._gl.activeTexture(gl["TEXTURE" + unit]);
+            // this._gl.bindTexture(gl.TEXTURE_2D, null);
+        },
+
+        textureData: exposeData && {
+            setData(data, subPortionId, offset = 0, load = false) {
+                texArray.set(data, subPortionId * entitySize + offset * pixelWidth);
+                if (load) {
+                    gl.bindTexture(gl.TEXTURE_2D, texture);
+                    const xoffset = (subPortionId % entitiesPerRow) * pixelsPerEntity + offset;
+                    const yoffset = Math.floor(subPortionId / entitiesPerRow);
+                    const width = data.length / pixelWidth;
+                    gl.texSubImage2D(gl.TEXTURE_2D, 0, xoffset, yoffset, width, 1, format, type, data);
+                    // gl.bindTexture (gl.TEXTURE_2D, null);
+                }
+            },
+
+            reloadData() {
+                gl.bindTexture(gl.TEXTURE_2D, texture);
+                gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, textureWidth, textureHeight, format, type, texArray);
+            }
+        }
+    };
+};
+
+const makeDTXRenderingAttributes = function(programVariables, isTriangle) {
+    const setupTex = (type, name) => {
+        const map = programVariables.createUniform(type, name);
+        const texelFetch = (P) => `texelFetch(${map}, ${P}, 0)`;
+        texelFetch.map = map;
+        return texelFetch;
+    };
+
+    const perPrimIndices  = setupTex("highp   usampler2D", "perPrimIndices");
+    const perPrimIdPorIds = setupTex("mediump usampler2D", "perPrimIdPorIds");
+
+    const perObjPosDecode = setupTex("highp    sampler2D", "perObjPosDecode");
+    const perVertIdCoords = setupTex("mediump usampler2D", "perVertIdCoords");
+    const perObjColsFlags = setupTex("lowp    usampler2D", "perObjColsFlags");
+    const perObjectMatrix = setupTex("highp    sampler2D", "perObjectMatrix");
+
+    const worldMatrix   = programVariables.createUniform("mat4", "worldMatrix");
+    const viewMatrix    = programVariables.createUniform("mat4", "viewMatrix");
+    const projMatrix    = programVariables.createUniform("mat4", "projMatrix");
+    const uCameraEyeRtc = programVariables.createUniform("vec3", "uCameraEyeRtc");
+
+    const lazyShaderVariable = function(name) {
+        const variable = {
+            toString: () => {
+                variable.needed = true;
+                return name;
+            }
+        };
+        return variable;
+    };
+
+    const colorA     = lazyShaderVariable("colorA");
+    const pickColorA = lazyShaderVariable("pickColor");
+    const worldNormal = lazyShaderVariable("worldNormal");
+    const viewNormal = lazyShaderVariable("viewNormal");
+
+    const colorsAndFlags = (offset) => perObjColsFlags(`ivec2(objectIndexCoords.x*8+${offset}, objectIndexCoords.y)`);
+
+    return {
+        geometryParameters: {
+            attributes: {
+                clippable:         "(flags2.r > 0u)",
+                color:             colorA,
+                flags:             iota(4).map(i => `int(flags[${i}])`),
+                metallicRoughness: null,
+                normal:            {
+                    view:  viewNormal,
+                    world: worldNormal
+                },
+                pickColor:         pickColorA,
+                position:          {
+                    clip:  "gl_Position",
+                    view:  "viewPosition",
+                    world: "worldPosition"
+                },
+                uv:                null
+            },
+            projMatrix: projMatrix,
+            viewMatrix: viewMatrix
+        },
+
+        ensureColorAndFlagAvailable: (src) => {
+            // constants
+            src.push("int primitiveIndex = gl_VertexID / " + (isTriangle ? 3 : 2) + ";");
+
+            // get packed object-id
+            src.push("int h_packed_object_id_index = (primitiveIndex >> 3) & 4095;");
+            src.push("int v_packed_object_id_index = (primitiveIndex >> 3) >> 12;");
+
+            src.push(`int objectIndex = int(${perPrimIdPorIds("ivec2(h_packed_object_id_index, v_packed_object_id_index)")}.r);`);
+            src.push("ivec2 objectIndexCoords = ivec2(objectIndex % 512, objectIndex / 512);");
+
+            // get flags & flags2
+            src.push(`uvec4 flags  = ${colorsAndFlags(2)};`);
+            src.push(`uvec4 flags2 = ${colorsAndFlags(3)};`);
+
+            colorA.needed && src.push(`vec4 ${colorA} = vec4(${colorsAndFlags(0)}) / 255.0;`);
+        },
+
+        appendVertexData: (src) => {
+            const objMatrix = (offset) => perObjectMatrix(`ivec2(objectIndexCoords.x*4+${offset}, objectIndexCoords.y)`);
+            src.push(`mat4 objectInstanceMatrix = mat4(${objMatrix(0)}, ${objMatrix(1)}, ${objMatrix(2)}, ${objMatrix(3)});`);
+
+            const posMatrix = (offset) => perObjPosDecode(`ivec2(objectIndexCoords.x*4+${offset}, objectIndexCoords.y)`);
+            src.push(`mat4 objectDecodeAndInstanceMatrix = objectInstanceMatrix * mat4(${posMatrix(0)}, ${posMatrix(1)}, ${posMatrix(2)}, ${posMatrix(3)});`);
+
+            src.push(`ivec4 packedVertexBase = ivec4(${colorsAndFlags(4)});`);
+            src.push(`ivec4 packedIndexBaseOffset = ivec4(${colorsAndFlags(isTriangle ? 5 : 6)});`);
+            src.push("int indexBaseOffset = (packedIndexBaseOffset.r << 24) + (packedIndexBaseOffset.g << 16) + (packedIndexBaseOffset.b << 8) + packedIndexBaseOffset.a;");
+
+            src.push("int h_index = (primitiveIndex - indexBaseOffset) & 4095;");
+            src.push("int v_index = (primitiveIndex - indexBaseOffset) >> 12;");
+
+            src.push(`ivec3 vertexIndices = ivec3(${perPrimIndices("ivec2(h_index, v_index)")});`);
+            src.push("ivec3 uniqueVertexIndexes = vertexIndices + (packedVertexBase.r << 24) + (packedVertexBase.g << 16) + (packedVertexBase.b << 8) + packedVertexBase.a;");
+
+            if (isTriangle) {
+                src.push("ivec3 indexPositionH = uniqueVertexIndexes & 4095;");
+                src.push("ivec3 indexPositionV = uniqueVertexIndexes >> 12;");
+                src.push(`uint solid = ${colorsAndFlags(7)}.r;`);
+                const vertIdCoords = (idx) => `vec3(${perVertIdCoords(`ivec2(indexPositionH[${idx}], indexPositionV[${idx}])`)})`;
+                src.push(`vec3 positions[] = vec3[](${vertIdCoords(0)}, ${vertIdCoords(1)}, ${vertIdCoords(2)});`);
+                src.push("vec3 normal = normalize(cross(positions[2] - positions[0], positions[1] - positions[0]));");
+                src.push("vec3 position = positions[gl_VertexID % 3];");
+                if (worldNormal.needed) { // WARNING: Not thoroughly tested, as not being used at the moment
+                    src.push(`vec3 worldNormal = -normalize((transpose(inverse(${worldMatrix} * objectDecodeAndInstanceMatrix)) * vec4(normal,1)).xyz);`);
+                }
+                if (viewNormal.needed) {
+                    src.push(`vec3 viewNormal = -normalize((transpose(inverse(${viewMatrix} * objectDecodeAndInstanceMatrix)) * vec4(normal,1)).xyz);`);
+                }
+                // when the geometry is not solid, if needed, flip the triangle winding
+                src.push("if (solid != 1u) {");
+                src.push(`  if (${isPerspectiveMatrix(projMatrix)}) {`);
+                src.push(`      vec3 uCameraEyeRtcInQuantizedSpace = (inverse(${worldMatrix} * objectDecodeAndInstanceMatrix) * vec4(${uCameraEyeRtc}, 1)).xyz;`);
+                src.push("      if (dot(position.xyz - uCameraEyeRtcInQuantizedSpace, normal) < 0.0) {");
+                src.push("          position = positions[2 - (gl_VertexID % 3)];");
+                if (worldNormal.needed) {
+                    src.push("          worldNormal = -worldNormal;");
+                }
+                if (viewNormal.needed) {
+                    src.push("          viewNormal = -viewNormal;");
+                }
+                src.push("      }");
+                src.push("  } else {");
+                if (!viewNormal.needed) {
+                    src.push(`      vec3 viewNormal = -normalize((transpose(inverse(${viewMatrix} * objectDecodeAndInstanceMatrix)) * vec4(normal,1)).xyz);`);
+                }
+                src.push("      if (viewNormal.z < 0.0) {");
+                src.push("          position = positions[2 - (gl_VertexID % 3)];");
+                if (worldNormal.needed) {
+                    src.push("          worldNormal = -worldNormal;");
+                }
+                if (viewNormal.needed) {
+                    src.push("          viewNormal = -viewNormal;");
+                }
+                src.push("      }");
+                src.push("  }");
+                src.push("}");
+            } else {
+                src.push("int indexPositionH = uniqueVertexIndexes[gl_VertexID % 2] & 4095;");
+                src.push("int indexPositionV = uniqueVertexIndexes[gl_VertexID % 2] >> 12;");
+                src.push(`vec3 position = vec3(${perVertIdCoords("ivec2(indexPositionH, indexPositionV)")});`);
+            }
+
+            pickColorA.needed && src.push(`vec4 pickColor = vec4(${colorsAndFlags(1)});`); // TODO: Normalize color "/ 255.0"?
+
+            src.push(`vec4 worldPosition = ${worldMatrix} * (objectDecodeAndInstanceMatrix * vec4(position, 1.0));`);
+        },
+
+        layerTypeInputs: {
+            perPrimIndices:  perPrimIndices.map,
+            perPrimIdPorIds: perPrimIdPorIds.map,
+
+            perObjPosDecode: perObjPosDecode.map,
+            perVertIdCoords: perVertIdCoords.map,
+            perObjColsFlags: perObjColsFlags.map,
+            perObjectMatrix: perObjectMatrix.map,
+
+            worldMatrix:   worldMatrix,
+            viewMatrix:    viewMatrix,
+            projMatrix:    projMatrix,
+            uCameraEyeRtc: uCameraEyeRtc
+        }
+    };
+};