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

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

@@ -0,0 +1,278 @@
+import {TrianglesDataTextureColorRenderer} from "./renderers/TrianglesDataTextureColorRenderer.js";
+import {TrianglesDataTextureSilhouetteRenderer} from "./renderers/TrianglesDataTextureSilhouetteRenderer.js";
+import {TrianglesDataTextureEdgesRenderer} from "./renderers/TrianglesDataTextureEdgesRenderer.js";
+import {TrianglesDataTextureEdgesColorRenderer} from "./renderers/TrianglesDataTextureEdgesColorRenderer.js";
+import {TrianglesDataTexturePickMeshRenderer} from "./renderers/TrianglesDataTexturePickMeshRenderer.js";
+import {TrianglesDataTexturePickDepthRenderer} from "./renderers/TrianglesDataTexturePickDepthRenderer.js";
+import {TrianglesDataTextureSnapDepthRenderer} from "./renderers/TrianglesDataTextureSnapDepthRenderer.js";
+import {TrianglesDataTextureSnapDepthBufInitRenderer} from "./renderers/TrianglesDataTextureSnapDepthBufInitRenderer.js";
+import {TrianglesDataTexturePickNormalsRenderer} from "./renderers/TrianglesDataTexturePickNormalsRenderer.js";
+import {TrianglesDataTextureOcclusionRenderer} from "./renderers/TrianglesDataTextureOcclusionRenderer.js";
+import {TrianglesDataTextureDepthRenderer} from "./renderers/TrianglesDataTextureDepthRenderer.js";
+import {TrianglesDataTextureNormalsRenderer} from "./renderers/TrianglesDataTextureNormalsRenderer.js";
+import {TrianglesDataTexturePickNormalsFlatRenderer} from "./renderers/TrianglesDataTexturePickNormalsFlatRenderer.js";
+
+/**
+ * @private
+ */
+class TrianglesDataTextureRenderers {
+
+    constructor(scene) {
+        this._scene = scene;
+    }
+
+    _compile() {
+        if (this._colorRenderer && (!this._colorRenderer.getValid())) {
+            this._colorRenderer.destroy();
+            this._colorRenderer = null;
+        }
+        if (this._colorRendererWithSAO && (!this._colorRendererWithSAO.getValid())) {
+            this._colorRendererWithSAO.destroy();
+            this._colorRendererWithSAO = null;
+        }
+        if (this._flatColorRenderer && (!this._flatColorRenderer.getValid())) {
+            this._flatColorRenderer.destroy();
+            this._flatColorRenderer = null;
+        }
+        if (this._flatColorRendererWithSAO && (!this._flatColorRendererWithSAO.getValid())) {
+            this._flatColorRendererWithSAO.destroy();
+            this._flatColorRendererWithSAO = null;
+        }
+        if (this._colorQualityRendererWithSAO && (!this._colorQualityRendererWithSAO.getValid())) {
+            this._colorQualityRendererWithSAO.destroy();
+            this._colorQualityRendererWithSAO = null;
+        }
+        if (this._depthRenderer && (!this._depthRenderer.getValid())) {
+            this._depthRenderer.destroy();
+            this._depthRenderer = null;
+        }
+        if (this._normalsRenderer && (!this._normalsRenderer.getValid())) {
+            this._normalsRenderer.destroy();
+            this._normalsRenderer = null;
+        }
+        if (this._silhouetteRenderer && (!this._silhouetteRenderer.getValid())) {
+            this._silhouetteRenderer.destroy();
+            this._silhouetteRenderer = null;
+        }
+        if (this._edgesRenderer && (!this._edgesRenderer.getValid())) {
+            this._edgesRenderer.destroy();
+            this._edgesRenderer = null;
+        }
+        if (this._edgesColorRenderer && (!this._edgesColorRenderer.getValid())) {
+            this._edgesColorRenderer.destroy();
+            this._edgesColorRenderer = null;
+        }
+        if (this._pickMeshRenderer && (!this._pickMeshRenderer.getValid())) {
+            this._pickMeshRenderer.destroy();
+            this._pickMeshRenderer = null;
+        }
+        if (this._pickDepthRenderer && (!this._pickDepthRenderer.getValid())) {
+            this._pickDepthRenderer.destroy();
+            this._pickDepthRenderer = null;
+        }
+        if (this._vertexDepthRenderer && (!this._vertexDepthRenderer.getValid())) {
+            this._vertexDepthRenderer.destroy();
+            this._vertexDepthRenderer = null;
+        }
+        if (this._snapDepthBufInitRenderer && (!this._snapDepthBufInitRenderer.getValid())) {
+            this._snapDepthBufInitRenderer.destroy();
+            this._snapDepthBufInitRenderer = null;
+        }
+        if (this._pickNormalsRenderer && this._pickNormalsRenderer.getValid() === false) {
+            this._pickNormalsRenderer.destroy();
+            this._pickNormalsRenderer = null;
+        }
+        if (this._pickNormalsFlatRenderer && this._pickNormalsFlatRenderer.getValid() === false) {
+            this._pickNormalsFlatRenderer.destroy();
+            this._pickNormalsFlatRenderer = null;
+        }
+        if (this._occlusionRenderer && this._occlusionRenderer.getValid() === false) {
+            this._occlusionRenderer.destroy();
+            this._occlusionRenderer = null;
+        }
+    }
+
+    get colorRenderer() {
+        if (!this._colorRenderer) {
+            this._colorRenderer = new TrianglesDataTextureColorRenderer(this._scene, false);
+        }
+        return this._colorRenderer;
+    }
+
+    get colorRendererWithSAO() {
+        if (!this._colorRendererWithSAO) {
+            this._colorRendererWithSAO = new TrianglesDataTextureColorRenderer(this._scene, true);
+        }
+        return this._colorRendererWithSAO;
+    }
+
+    get colorQualityRendererWithSAO() {
+        if (!this._colorQualityRendererWithSAO) {
+            this._colorQualityRendererWithSAO = new TrianglesDataTextureColorQualityRenderer(this._scene, true);
+        }
+        return this._colorQualityRendererWithSAO;
+    }
+
+    get silhouetteRenderer() {
+        if (!this._silhouetteRenderer) {
+            this._silhouetteRenderer = new TrianglesDataTextureSilhouetteRenderer(this._scene);
+        }
+        return this._silhouetteRenderer;
+    }
+
+    get depthRenderer() {
+        if (!this._depthRenderer) {
+            this._depthRenderer = new TrianglesDataTextureDepthRenderer(this._scene);
+        }
+        return this._depthRenderer;
+    }
+
+    get normalsRenderer() {
+        if (!this._normalsRenderer) {
+            this._normalsRenderer = new TrianglesDataTextureNormalsRenderer(this._scene);
+        }
+        return this._normalsRenderer;
+    }
+
+    get edgesRenderer() {
+        if (!this._edgesRenderer) {
+            this._edgesRenderer = new TrianglesDataTextureEdgesRenderer(this._scene);
+        }
+        return this._edgesRenderer;
+    }
+
+    get edgesColorRenderer() {
+        if (!this._edgesColorRenderer) {
+            this._edgesColorRenderer = new TrianglesDataTextureEdgesColorRenderer(this._scene);
+        }
+        return this._edgesColorRenderer;
+    }
+
+    get pickMeshRenderer() {
+        if (!this._pickMeshRenderer) {
+            this._pickMeshRenderer = new TrianglesDataTexturePickMeshRenderer(this._scene);
+        }
+        return this._pickMeshRenderer;
+    }
+
+    get pickNormalsRenderer() {
+        if (!this._pickNormalsRenderer) {
+            this._pickNormalsRenderer = new TrianglesDataTexturePickNormalsRenderer(this._scene);
+        }
+        return this._pickNormalsRenderer;
+    }
+
+    get pickNormalsFlatRenderer() {
+        if (!this._pickNormalsFlatRenderer) {
+            this._pickNormalsFlatRenderer = new TrianglesDataTexturePickNormalsFlatRenderer(this._scene);
+        }
+        return this._pickNormalsFlatRenderer;
+    }
+
+    get pickDepthRenderer() {
+        if (!this._pickDepthRenderer) {
+            this._pickDepthRenderer = new TrianglesDataTexturePickDepthRenderer(this._scene);
+        }
+        return this._pickDepthRenderer;
+    }
+
+    get vertexDepthRenderer() {
+        if (!this._vertexDepthRenderer) {
+            this._vertexDepthRenderer = new TrianglesDataTextureSnapDepthRenderer(this._scene);
+        }
+        return this._vertexDepthRenderer;
+    }
+
+    get snapDepthBufInitRenderer() {
+        if (!this._snapDepthBufInitRenderer) {
+            this._snapDepthBufInitRenderer = new TrianglesDataTextureSnapDepthBufInitRenderer(this._scene);
+        }
+        return this._snapDepthBufInitRenderer;
+    }
+
+    get occlusionRenderer() {
+        if (!this._occlusionRenderer) {
+            this._occlusionRenderer = new TrianglesDataTextureOcclusionRenderer(this._scene);
+        }
+        return this._occlusionRenderer;
+    }
+
+    _destroy() {
+        if (this._colorRenderer) {
+            this._colorRenderer.destroy();
+        }
+        if (this._colorRendererWithSAO) {
+            this._colorRendererWithSAO.destroy();
+        }
+        if (this._flatColorRenderer) {
+            this._flatColorRenderer.destroy();
+        }
+        if (this._flatColorRendererWithSAO) {
+            this._flatColorRendererWithSAO.destroy();
+        }
+        if (this._colorQualityRendererWithSAO) {
+            this._colorQualityRendererWithSAO.destroy();
+        }
+        if (this._depthRenderer) {
+            this._depthRenderer.destroy();
+        }
+        if (this._normalsRenderer) {
+            this._normalsRenderer.destroy();
+        }
+        if (this._silhouetteRenderer) {
+            this._silhouetteRenderer.destroy();
+        }
+        if (this._edgesRenderer) {
+            this._edgesRenderer.destroy();
+        }
+        if (this._edgesColorRenderer) {
+            this._edgesColorRenderer.destroy();
+        }
+        if (this._pickMeshRenderer) {
+            this._pickMeshRenderer.destroy();
+        }
+        if (this._pickDepthRenderer) {
+            this._pickDepthRenderer.destroy();
+        }
+        if (this._vertexDepthRenderer) {
+            this._vertexDepthRenderer.destroy();
+        }
+        if (this._snapDepthBufInitRenderer) {
+            this._snapDepthBufInitRenderer.destroy();
+        }
+        if (this._pickNormalsRenderer) {
+            this._pickNormalsRenderer.destroy();
+        }
+        if (this._pickNormalsFlatRenderer) {
+            this._pickNormalsFlatRenderer.destroy();
+        }
+        if (this._occlusionRenderer) {
+            this._occlusionRenderer.destroy();
+        }
+    }
+}
+
+const cachdRenderers = {};
+
+/**
+ * @private
+ */
+function getDataTextureRenderers(scene) {
+    const sceneId = scene.id;
+    let dataTextureRenderers = cachdRenderers[sceneId];
+    if (!dataTextureRenderers) {
+        dataTextureRenderers = new TrianglesDataTextureRenderers(scene);
+        cachdRenderers[sceneId] = dataTextureRenderers;
+        dataTextureRenderers._compile();
+        scene.on("compile", () => {
+            dataTextureRenderers._compile();
+        });
+        scene.on("destroyed", () => {
+            delete cachdRenderers[sceneId];
+            dataTextureRenderers._destroy();
+        });
+    }
+    return dataTextureRenderers;
+}
+
+export {getDataTextureRenderers};

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

@@ -0,0 +1,126 @@
+/**
+ * @author https://github.com/tmarti, with support from https://tribia.com/
+ * @license MIT
+ *
+ * This file takes a geometry given by { positionsCompressed, indices }, and returns
+ * equivalent { positionsCompressed, indices } arrays but which only contain unique
+ * positionsCompressed.
+ *
+ * The time is O(N logN) with the number of positionsCompressed due to a pre-sorting
+ * step, but is much more GC-friendly and actually faster than the classic O(N)
+ * approach based in keeping a hash-based LUT to identify unique positionsCompressed.
+ */
+let comparePositions = null;
+
+function compareVertex(a, b) {
+    let res;
+    for (let i = 0; i < 3; i++) {
+        if (0 !== (res = comparePositions[a * 3 + i] - comparePositions[b * 3 + i])) {
+            return res;
+        }
+    }
+    return 0;
+}
+
+let seqInit = null;
+
+function setMaxNumberOfPositions(maxPositions) {
+    if (seqInit !== null && seqInit.length >= maxPositions) {
+        return;
+    }
+    seqInit = new Uint32Array(maxPositions);
+    for (let i = 0; i < maxPositions; i++) {
+        seqInit[i] = i;
+    }
+}
+
+/**
+ * This function obtains unique positionsCompressed in the provided object
+ * .positionsCompressed array and calculates an index mapping, which is then
+ * applied to the provided object .indices and .edgeindices.
+ *
+ * The input object items are not modified, and instead new set
+ * of positionsCompressed, indices and edgeIndices with the applied optimization
+ * are returned.
+ *
+ * The algorithm, instead of being based in a hash-like LUT for
+ * identifying unique positionsCompressed, is based in pre-sorting the input
+ * positionsCompressed...
+ *
+ * (it's possible to define a _"consistent ordering"_ for the positionsCompressed
+ *  as positionsCompressed are quantized and thus not suffer from float number
+ *  comparison artifacts)
+ *
+ * ... so same positionsCompressed are adjacent in the sorted array, and then
+ * it's easy to scan linearly the sorted array. During the linear run,
+ * we will know that we found a different position because the comparison
+ * function will return != 0 between current and previous element.
+ *
+ * During this linear traversal of the array, a `unique counter` is used
+ * in order to calculate the mapping between original indices and unique
+ * indices.
+ *
+ * @param {*} mesh The input mesh to process, with `positionsCompressed`, `indices` and `edgeIndices` keys.
+ *
+ * @returns An array with 3 elements: 0 => the uniquified positionsCompressed; 1 and 2 => the remapped edges and edgeIndices arrays
+ */
+export function uniquifyPositions(mesh) {
+    const _positions = mesh.positionsCompressed;
+    const _indices = mesh.indices;
+    const _edgeIndices = mesh.edgeIndices;
+
+    setMaxNumberOfPositions(_positions.length / 3);
+
+    const seq = seqInit.slice(0, _positions.length / 3);
+    const remappings = seqInit.slice(0, _positions.length / 3);
+
+    comparePositions = _positions;
+
+    seq.sort(compareVertex);
+
+    let uniqueIdx = 0
+
+    remappings[seq[0]] = 0;
+
+    for (let i = 1, len = seq.length; i < len; i++) {
+        if (0 !== compareVertex(seq[i], seq[i - 1])) {
+            uniqueIdx++;
+        }
+        remappings[seq[i]] = uniqueIdx;
+    }
+
+    const numUniquePositions = uniqueIdx + 1;
+    const newPositions = new Uint16Array(numUniquePositions * 3);
+
+    uniqueIdx = 0
+
+    newPositions [uniqueIdx * 3 + 0] = _positions [seq[0] * 3 + 0];
+    newPositions [uniqueIdx * 3 + 1] = _positions [seq[0] * 3 + 1];
+    newPositions [uniqueIdx * 3 + 2] = _positions [seq[0] * 3 + 2];
+
+    for (let i = 1, len = seq.length; i < len; i++) {
+        if (0 !== compareVertex(seq[i], seq[i - 1])) {
+            uniqueIdx++;
+            newPositions [uniqueIdx * 3 + 0] = _positions [seq[i] * 3 + 0];
+            newPositions [uniqueIdx * 3 + 1] = _positions [seq[i] * 3 + 1];
+            newPositions [uniqueIdx * 3 + 2] = _positions [seq[i] * 3 + 2];
+        }
+        remappings[seq[i]] = uniqueIdx;
+    }
+
+    comparePositions = null;
+
+    const newIndices = new Uint32Array(_indices.length);
+
+    for (let i = 0, len = _indices.length; i < len; i++) {
+        newIndices[i] = remappings [_indices[i]];
+    }
+
+    const newEdgeIndices = new Uint32Array(_edgeIndices.length);
+
+    for (let i = 0, len = _edgeIndices.length; i < len; i++) {
+        newEdgeIndices[i] = remappings [_edgeIndices[i]];
+    }
+
+    return [newPositions, newIndices, newEdgeIndices];
+}

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

@@ -0,0 +1,54 @@
+export const dataTextureRamStats = {
+    sizeDataColorsAndFlags: 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));
+};