@onerjs/core 8.28.0 → 8.28.2

package/Collisions/gpuPicker.js

@@ -1,7 +1,7 @@
 
 import { RenderTargetTexture } from "../Materials/Textures/renderTargetTexture.js";
 import { ShaderMaterial } from "../Materials/shaderMaterial.js";
-import { Color3, Color4 } from "../Maths/math.color.js";
+import { Color4 } from "../Maths/math.color.js";
 import { VertexBuffer } from "../Meshes/buffer.js";
 import { Logger } from "../Misc/logger.js";
 /**
@@ -13,14 +13,20 @@ export class GPUPicker {
         this._pickingTexture = null;
         this._idMap = [];
         this._thinIdMap = [];
-        this._idColors = [];
+        this._meshUniqueIdToPickerId = [];
+        this._idWarningIssued = false;
+        this._cachedScene = null;
+        this._engine = null;
+        this._pickingMaterialCache = new Array(9).fill(null);
+        this._pickableMeshes = [];
         this._meshMaterialMap = new Map();
+        this._readbuffer = null;
         this._meshRenderingCount = 0;
-        this._attributeName = "instanceMeshID";
-        this._warningIssued = false;
+        this._renderWarningIssued = false;
         this._renderPickingTexture = false;
         this._sceneBeforeRenderObserver = null;
-        this._pickingTextureAfterRenderObservable = null;
+        this._pickingTextureAfterRenderObserver = null;
+        this._nextFreeId = 1;
         /** Shader language used by the generator */
         this._shaderLanguage = 0 /* ShaderLanguage.GLSL */;
         this._pickingInProgress = false;
@@ -38,15 +44,12 @@ export class GPUPicker {
         return this._pickingInProgress;
     }
     /**
-     * Gets the default render material used by the picker.
+     * Gets the default render materials used by the picker.
+     *
+     * index is Material filling mode
      */
-    get defaultRenderMaterial() {
-        return this._defaultRenderMaterial;
-    }
-    static _IdToRgb(id) {
-        GPUPicker._TempColor.r = (id & 0xff0000) >> 16;
-        GPUPicker._TempColor.g = (id & 0x00ff00) >> 8;
-        GPUPicker._TempColor.b = (id & 0x0000ff) >> 0;
+    get defaultRenderMaterials() {
+        return this._pickingMaterialCache;
     }
     _getColorIdFromReadBuffer(offset) {
         const r = this._readbuffer[offset];
@@ -54,12 +57,6 @@ export class GPUPicker {
         const b = this._readbuffer[offset + 2];
         return (r << 16) + (g << 8) + b;
     }
-    static _SetColorData(buffer, i, r, g, b) {
-        buffer[i] = r / 255.0;
-        buffer[i + 1] = g / 255.0;
-        buffer[i + 2] = b / 255.0;
-        buffer[i + 3] = 1.0;
-    }
     _createRenderTarget(scene, width, height) {
         if (this._cachedScene && this._pickingTexture) {
             const index = this._cachedScene.customRenderTargets.indexOf(this._pickingTexture);
@@ -71,21 +68,36 @@ export class GPUPicker {
         if (this._pickingTexture) {
             this._pickingTexture.dispose();
         }
-        this._pickingTexture = new RenderTargetTexture("pickingTexure", { width: width, height: height }, scene, false, undefined, 0, false, 1);
+        this._pickingTexture = new RenderTargetTexture("pickingTexure", { width: width, height: height }, scene, {
+            generateMipMaps: false,
+            type: 0,
+            samplingMode: 1,
+        });
+    }
+    _clearPickingMaterials() {
+        for (let i = 0; i < this._pickingMaterialCache.length; i++) {
+            const material = this._pickingMaterialCache[i];
+            if (material !== null) {
+                material.dispose();
+                this._pickingMaterialCache[i] = null;
+            }
+        }
     }
-    // eslint-disable-next-line @typescript-eslint/require-await
-    async _createColorMaterialAsync(scene) {
-        if (this._defaultRenderMaterial) {
-            this._defaultRenderMaterial.dispose();
+    _getPickingMaterial(scene, fillMode) {
+        if (fillMode < 0 || 8 < fillMode) {
+            fillMode = 0;
+        }
+        const cachedMaterial = this._pickingMaterialCache[fillMode];
+        if (cachedMaterial) {
+            return cachedMaterial;
         }
-        this._defaultRenderMaterial = null;
         const engine = scene.getEngine();
         if (engine.isWebGPU) {
             this._shaderLanguage = 1 /* ShaderLanguage.WGSL */;
         }
         const defines = [];
         const options = {
-            attributes: [VertexBuffer.PositionKind, this._attributeName, "bakedVertexAnimationSettingsInstanced"],
+            attributes: [VertexBuffer.PositionKind, GPUPicker._AttributeName],
             uniforms: ["world", "viewProjection", "meshID"],
             needAlphaBlending: false,
             defines: defines,
@@ -100,8 +112,11 @@ export class GPUPicker {
                 }
             },
         };
-        this._defaultRenderMaterial = new ShaderMaterial("pickingShader", scene, "picking", options, false);
-        this._defaultRenderMaterial.onBindObservable.add(this._materialBindCallback, undefined, undefined, this);
+        const newMaterial = new ShaderMaterial("pickingShader", scene, "picking", options, false);
+        newMaterial.fillMode = fillMode;
+        newMaterial.onBindObservable.add(this._materialBindCallback, undefined, undefined, this);
+        this._pickingMaterialCache[fillMode] = newMaterial;
+        return newMaterial;
     }
     _materialBindCallback(mesh) {
         if (!mesh) {
@@ -109,39 +124,18 @@ export class GPUPicker {
         }
         const material = this._meshMaterialMap.get(mesh);
         if (!material) {
-            if (!this._warningIssued) {
-                this._warningIssued = true;
+            if (!this._renderWarningIssued) {
+                this._renderWarningIssued = true;
                 Logger.Warn("GPUPicker issue: Mesh not found in the material map. This may happen when the root mesh of an instance is not in the picking list.");
             }
             return;
         }
         const effect = material.getEffect();
-        if (!mesh.hasInstances && !mesh.isAnInstance && !mesh.hasThinInstances && this._idColors[mesh.uniqueId] !== undefined) {
-            effect.setColor4("meshID", this._idColors[mesh.uniqueId], 1);
+        if (!mesh.hasInstances && !mesh.isAnInstance && !mesh.hasThinInstances && this._meshUniqueIdToPickerId[mesh.uniqueId] !== undefined) {
+            effect.setFloat("meshID", this._meshUniqueIdToPickerId[mesh.uniqueId]);
         }
         this._meshRenderingCount++;
     }
-    _generateColorData(instanceCount, id, r, g, b, onInstance) {
-        const colorData = new Float32Array(4 * (instanceCount + 1));
-        GPUPicker._SetColorData(colorData, 0, r, g, b);
-        for (let i = 0; i < instanceCount; i++) {
-            GPUPicker._IdToRgb(id);
-            onInstance(i, id);
-            GPUPicker._SetColorData(colorData, (i + 1) * 4, GPUPicker._TempColor.r, GPUPicker._TempColor.g, GPUPicker._TempColor.b);
-            id++;
-        }
-        return colorData;
-    }
-    _generateThinInstanceColorData(instanceCount, id, onInstance) {
-        const colorData = new Float32Array(4 * instanceCount);
-        for (let i = 0; i < instanceCount; i++) {
-            GPUPicker._IdToRgb(id);
-            onInstance(i, id);
-            GPUPicker._SetColorData(colorData, i * 4, GPUPicker._TempColor.r, GPUPicker._TempColor.g, GPUPicker._TempColor.b);
-            id++;
-        }
-        return colorData;
-    }
     /**
      * Set the list of meshes to pick from
      * Set that value to null to clear the list (and avoid leaks)
@@ -149,21 +143,37 @@ export class GPUPicker {
      * @param list defines the list of meshes to pick from
      */
     setPickingList(list) {
+        this.clearPickingList();
+        if (!list || list.length === 0) {
+            return;
+        }
+        this._pickableMeshes = list;
+        // Prepare target
+        const scene = ("mesh" in list[0] ? list[0].mesh : list[0]).getScene();
+        if (!this._cachedScene || this._cachedScene !== scene) {
+            this._clearPickingMaterials();
+        }
+        this.addPickingList(list);
+    }
+    /**
+     * Clear the current picking list and free resources
+     */
+    clearPickingList() {
         if (this._pickableMeshes) {
             // Cleanup
             for (let index = 0; index < this._pickableMeshes.length; index++) {
                 const mesh = this._pickableMeshes[index];
                 if (mesh.hasInstances) {
-                    mesh.removeVerticesData(this._attributeName);
+                    mesh.removeVerticesData(GPUPicker._AttributeName);
                 }
                 if (mesh.hasThinInstances) {
-                    mesh.thinInstanceSetBuffer(this._attributeName, null);
+                    mesh.thinInstanceSetBuffer(GPUPicker._AttributeName, null);
                 }
                 if (this._pickingTexture) {
                     this._pickingTexture.setMaterialForRendering(mesh, undefined);
                 }
                 const material = this._meshMaterialMap.get(mesh);
-                if (material !== this._defaultRenderMaterial) {
+                if (!this._pickingMaterialCache.includes(material)) {
                     material.onBindObservable.removeCallback(this._materialBindCallback);
                 }
             }
@@ -171,15 +181,21 @@ export class GPUPicker {
             this._meshMaterialMap.clear();
             this._idMap.length = 0;
             this._thinIdMap.length = 0;
-            this._idColors.length = 0;
+            this._meshUniqueIdToPickerId.length = 0;
             if (this._pickingTexture) {
                 this._pickingTexture.renderList = [];
             }
         }
+        this._nextFreeId = 1;
+    }
+    /**
+     * Add array of meshes to the current picking list
+     * @param list defines the array of meshes to add to the current picking list
+     */
+    addPickingList(list) {
         if (!list || list.length === 0) {
             return;
         }
-        this._pickableMeshes = list;
         // Prepare target
         const scene = ("mesh" in list[0] ? list[0].mesh : list[0]).getScene();
         const engine = scene.getEngine();
@@ -201,29 +217,39 @@ export class GPUPicker {
                 this._cachedScene.activeCamera = null;
             }
         });
-        if (!this._cachedScene || this._cachedScene !== scene) {
-            // eslint-disable-next-line @typescript-eslint/no-floating-promises
-            this._createColorMaterialAsync(scene);
+        this._cachedScene = scene;
+        this._engine = scene.getEngine();
+        if (!this._pickingTexture.renderList) {
+            this._pickingTexture.renderList = [];
         }
+        const newPickableMeshes = new Array(list.length);
+        const pickableMeshOffset = this._pickableMeshes?.length ?? 0;
         this._cachedScene = scene;
         this._engine = scene.getEngine();
         for (let i = 0; i < list.length; i++) {
             const item = list[i];
             if ("mesh" in item) {
                 this._meshMaterialMap.set(item.mesh, item.material);
-                list[i] = item.mesh;
+                newPickableMeshes[i] = item.mesh;
             }
             else {
-                this._meshMaterialMap.set(item, this._defaultRenderMaterial);
+                const material = this._getPickingMaterial(scene, item.material?.fillMode ?? 0);
+                this._meshMaterialMap.set(item, material);
+                newPickableMeshes[i] = item;
             }
         }
-        this._pickingTexture.renderList = [];
+        if (this._pickableMeshes !== null) {
+            this._pickableMeshes = [...this._pickableMeshes, ...newPickableMeshes];
+        }
+        else {
+            this._pickableMeshes = newPickableMeshes;
+        }
         // We will affect colors and create vertex color buffers
-        let id = 1;
-        for (let index = 0; index < this._pickableMeshes.length; index++) {
-            const mesh = this._pickableMeshes[index];
+        let nextFreeid = this._nextFreeId;
+        for (let index = 0; index < newPickableMeshes.length; index++) {
+            const mesh = newPickableMeshes[index];
             const material = this._meshMaterialMap.get(mesh);
-            if (material !== this._defaultRenderMaterial) {
+            if (!this._pickingMaterialCache.includes(material)) {
                 material.onBindObservable.add(this._materialBindCallback, undefined, undefined, this);
             }
             this._pickingTexture.setMaterialForRendering(mesh, material);
@@ -231,33 +257,54 @@ export class GPUPicker {
             if (mesh.isAnInstance) {
                 continue; // This will be handled by the source mesh
             }
-            GPUPicker._IdToRgb(id);
+            const globalIndex = index + pickableMeshOffset;
             if (mesh.hasThinInstances) {
-                const colorData = this._generateThinInstanceColorData(mesh.thinInstanceCount, id, (i, id) => {
-                    this._thinIdMap[id] = { meshId: index, thinId: i };
-                });
-                id += mesh.thinInstanceCount;
-                mesh.thinInstanceSetBuffer(this._attributeName, colorData, 4);
+                const thinInstanceCount = mesh.thinInstanceCount;
+                const instanceIdData = new Float32Array(thinInstanceCount);
+                for (let i = 0; i < thinInstanceCount; i++) {
+                    instanceIdData[i] = nextFreeid;
+                    this._thinIdMap[nextFreeid] = { meshId: globalIndex, thinId: i };
+                    nextFreeid++;
+                }
+                mesh.thinInstanceSetBuffer(GPUPicker._AttributeName, instanceIdData, 1);
             }
             else {
-                this._idMap[id] = index;
-                id++;
+                const currentMeshId = nextFreeid;
+                this._idMap[currentMeshId] = globalIndex;
+                nextFreeid++;
                 if (mesh.hasInstances) {
-                    const instancesForPick = this._pickableMeshes.filter((m) => m.isAnInstance && m.sourceMesh === mesh);
-                    const colorData = this._generateColorData(instancesForPick.length, id, GPUPicker._TempColor.r, GPUPicker._TempColor.g, GPUPicker._TempColor.b, (i, id) => {
-                        const instance = instancesForPick[i];
-                        this._idMap[id] = this._pickableMeshes.indexOf(instance);
-                    });
-                    id += instancesForPick.length;
+                    // find index of instances of that mesh
+                    const instancesForPick = [];
+                    for (let pickableMeshIndex = 0; pickableMeshIndex < newPickableMeshes.length; ++pickableMeshIndex) {
+                        const m = newPickableMeshes[pickableMeshIndex];
+                        if (m.isAnInstance && m.sourceMesh === mesh) {
+                            instancesForPick.push(pickableMeshIndex);
+                        }
+                    }
+                    const instanceIdData = new Float32Array(instancesForPick.length + 1); // +1 for the source mesh
+                    instanceIdData[0] = currentMeshId;
+                    for (let i = 0; i < instancesForPick.length; i++) {
+                        instanceIdData[i + 1] = nextFreeid;
+                        const globalInstanceIndex = instancesForPick[i] + pickableMeshOffset;
+                        this._idMap[nextFreeid] = globalInstanceIndex;
+                        nextFreeid++;
+                    }
                     const engine = mesh.getEngine();
-                    const buffer = new VertexBuffer(engine, colorData, this._attributeName, false, false, 4, true);
+                    const buffer = new VertexBuffer(engine, instanceIdData, GPUPicker._AttributeName, false, false, 1, true);
                     mesh.setVerticesBuffer(buffer, true);
                 }
                 else {
-                    this._idColors[mesh.uniqueId] = Color3.FromInts(GPUPicker._TempColor.r, GPUPicker._TempColor.g, GPUPicker._TempColor.b);
+                    this._meshUniqueIdToPickerId[mesh.uniqueId] = currentMeshId;
                 }
             }
         }
+        if (GPUPicker._MaxPickingId < nextFreeid - 1) {
+            if (!this._idWarningIssued) {
+                this._idWarningIssued = true;
+                Logger.Warn(`GPUPicker maximum number of pickable meshes and instances is ${GPUPicker._MaxPickingId}. Some meshes or instances won't be pickable.`);
+            }
+        }
+        this._nextFreeId = nextFreeid;
     }
     /**
      * Execute a picking operation
@@ -332,6 +379,40 @@ export class GPUPicker {
         this._preparePickingBuffer(this._engine, rttSizeW, rttSizeH, minX, partialCutH, w, h);
         return await this._executeMultiPickingAsync(processedXY, minX, maxY, rttSizeH, w, h, disposeWhenDone);
     }
+    /**
+     * Execute a picking operation on box defined by two screen coordinates
+     * @param x1 defines the X coordinate of the first corner of the box where to run the pick
+     * @param y1 defines the Y coordinate of the first corner of the box where to run the pick
+     * @param x2 defines the X coordinate of the opposite corner of the box where to run the pick
+     * @param y2 defines the Y coordinate of the opposite corner of the box where to run the pick
+     * @param disposeWhenDone defines a boolean indicating we do not want to keep resources alive (false by default)
+     * @returns A promise with the picking results. Always returns an array with the same length as the number of coordinates. The mesh or null at the index where no mesh was picked.
+     */
+    async boxPickAsync(x1, y1, x2, y2, disposeWhenDone = false) {
+        if (this._pickingInProgress) {
+            return null;
+        }
+        if (!this._pickableMeshes || this._pickableMeshes.length === 0) {
+            return null;
+        }
+        this._pickingInProgress = true;
+        const { rttSizeW, rttSizeH, devicePixelRatio } = this._getRenderInfo();
+        const { x: adjustedX1, y: adjustedY1 } = this._prepareForPicking(x1, y1, devicePixelRatio);
+        const { x: adjustedX2, y: adjustedY2 } = this._prepareForPicking(x2, y2, devicePixelRatio);
+        const minX = Math.max(Math.min(adjustedX1, adjustedX2), 0);
+        const maxX = Math.min(Math.max(adjustedX1, adjustedX2), rttSizeW - 1);
+        const minY = Math.max(Math.min(adjustedY1, adjustedY2), 0);
+        const maxY = Math.min(Math.max(adjustedY1, adjustedY2), rttSizeH - 1);
+        if (minX >= rttSizeW || minY >= rttSizeH || maxX < 0 || maxY < 0) {
+            this._pickingInProgress = false;
+            return null;
+        }
+        const w = Math.max(maxX - minX, 1);
+        const h = Math.max(maxY - minY, 1);
+        const partialCutH = rttSizeH - maxY - 1;
+        this._preparePickingBuffer(this._engine, rttSizeW, rttSizeH, minX, partialCutH, w, h);
+        return await this._executeBoxPickingAsync(minX, partialCutH, w, h, disposeWhenDone);
+    }
     _getRenderInfo() {
         const engine = this._cachedScene.getEngine();
         const rttSizeW = engine.getRenderWidth();
@@ -362,8 +443,8 @@ export class GPUPicker {
         this._pickingTexture.onBeforeRender = () => {
             this._enableScissor(x, y, w, h);
         };
-        this._pickingTextureAfterRenderObservable?.remove();
-        this._pickingTextureAfterRenderObservable = this._pickingTexture.onAfterRenderObservable.add(() => {
+        this._pickingTextureAfterRenderObserver?.remove();
+        this._pickingTextureAfterRenderObserver = this._pickingTexture.onAfterRenderObservable.add(() => {
             this._disableScissor();
         });
         this._cachedScene.customRenderTargets.push(this._pickingTexture);
@@ -445,6 +526,50 @@ export class GPUPicker {
             };
         });
     }
+    // pick box area
+    async _executeBoxPickingAsync(x, y, w, h, disposeWhenDone) {
+        return await new Promise((resolve, reject) => {
+            if (!this._pickingTexture) {
+                this._pickingInProgress = false;
+                reject(new Error("Picking texture not created"));
+                return;
+            }
+            // eslint-disable-next-line @typescript-eslint/no-misused-promises
+            this._pickingTexture.onAfterRender = async () => {
+                if (this._checkRenderStatus()) {
+                    this._pickingTexture.onAfterRender = null;
+                    const pickedMeshes = [];
+                    const thinInstanceIndexes = [];
+                    if (await this._readTexturePixelsAsync(x, y, w, h)) {
+                        for (let offsetY = 0; offsetY < h; ++offsetY) {
+                            for (let offsetX = 0; offsetX < w; ++offsetX) {
+                                const colorId = this._getColorIdFromReadBuffer((offsetY * w + offsetX) * 4);
+                                if (colorId > 0) {
+                                    // Thin?
+                                    if (this._thinIdMap[colorId]) {
+                                        const pickedMesh = this._pickableMeshes[this._thinIdMap[colorId].meshId];
+                                        const thinInstanceIndex = this._thinIdMap[colorId].thinId;
+                                        pickedMeshes.push(pickedMesh);
+                                        thinInstanceIndexes.push(thinInstanceIndex);
+                                    }
+                                    else {
+                                        const pickedMesh = this._pickableMeshes[this._idMap[colorId]];
+                                        pickedMeshes.push(pickedMesh);
+                                        thinInstanceIndexes.push(0);
+                                    }
+                                }
+                            }
+                        }
+                    }
+                    if (disposeWhenDone) {
+                        this.dispose();
+                    }
+                    this._pickingInProgress = false;
+                    resolve({ meshes: pickedMeshes, thinInstanceIndexes: thinInstanceIndexes });
+                }
+            };
+        });
+    }
     _enableScissor(x, y, w = 1, h = 1) {
         if (this._engine.enableScissor) {
             this._engine.enableScissor(x, y, w, h);
@@ -459,8 +584,8 @@ export class GPUPicker {
      * @returns true if rendering if the picking texture has finished, otherwise false
      */
     _checkRenderStatus() {
-        const wasSuccessfull = this._meshRenderingCount > 0;
-        if (wasSuccessfull) {
+        const wasSuccessful = this._meshRenderingCount > 0;
+        if (wasSuccessful) {
             // Remove from the active RTTs
             const index = this._cachedScene.customRenderTargets.indexOf(this._pickingTexture);
             if (index > -1) {
@@ -516,15 +641,11 @@ export class GPUPicker {
         // Cleaning up
         this._pickingTexture?.dispose();
         this._pickingTexture = null;
-        this._defaultRenderMaterial?.dispose();
-        this._defaultRenderMaterial = null;
+        this._clearPickingMaterials();
         this._sceneBeforeRenderObserver?.remove();
         this._sceneBeforeRenderObserver = null;
     }
 }
-GPUPicker._TempColor = {
-    r: 0,
-    g: 0,
-    b: 0,
-};
+GPUPicker._AttributeName = "instanceMeshID";
+GPUPicker._MaxPickingId = 0x00ffffff; // 24 bits unsigned integer max
 //# sourceMappingURL=gpuPicker.js.map