ArcRotateCamera, big mesh, mouse click, Performance issues

Questions
1

Thank you for browsing.
I have an example of a 400 Megabyte grid loaded with assetsManager that performs poorly after clicking。
But using the keyboard control will not have a lag, very smooth。
I hope someone can help me out

code:

camera = new BABYLON.ArcRotateCamera(‘ArcRotate’, 0, 0, 10, new BABYLON.Vector3(450, 200, -380), scene)

camera.idleRotationSpeed = 600
camera.idleRotationWaitTime = 3000
camera.idleRotationSpinupTime = 1000
camera.useAutoRotationBehavior = true
camera.lowerRadiusLimit = 150
camera.upperRadiusLimit = 800
camera.noRotationConstraint = false
camera.upperBetaLimit = (Math.PI / 180) * 60
camera.lowerBetaLimit = (Math.PI / 180) * 15

2

It is probably related to picking taking a long time with such a big mesh. you could try to set isPickable = false on your mesh

3

As sebavan stated, disabling picking will greatly improve perfomance when using the mouse to navigate. If this works but you still need the picking functionality for something that could be fine with double-click (ex.: repositioning the camera to focus on the picked point), a work around would be to add a scene.onPointerObservable and re-enable picking temporarily only when double-tap occurs.
I’ve had great results using this approach with various scenes even if they have multiple meshes.

For exemple :

this.scene.onPointerObservable.add((pointerInfo) => {
    switch (pointerInfo.type) {
        case PointerEventTypes.POINTERDOWN:
            this.isPointerDown = true;
            break;
        case PointerEventTypes.POINTERUP:
            this.isPointerDown = false;
            break;
        case PointerEventTypes.POINTERMOVE:
            // Do specific things when the pointer moves, like maybe stop an ongoing animation if isPointerDown === true.
            break;
        case PointerEventTypes.POINTERWHEEL:
            // Idem
            break;
        case PointerEventTypes.POINTERDOUBLETAP:
            // Temporarily allowing picking
            for (const mesh of this.scene.meshes) {
                if (mesh.id !== 'skybox') { // Filter out the meshes that shouldn't be concerned by this behaviour
                    mesh.isPickable = true;
                }
            }
            const pickedPoint = this.scene.pick(this.scene.pointerX, this.scene.pointerY);
            if (pickedPoint.hit) {
                // Handle what you want with that pickedPoint
            }
            // Reset picking to false
            for (const mesh of this.scene.meshes) {
                if (mesh.id !== 'skybox') {
                    mesh.isPickable = false;
                }
            }
            break;
    }
});
1 Like
5

set isPickable = false on your mesh，After the scene is opened, clicking on the large grid will no longer get stuck. After the scene mouse wheel zooms in, clicking on the large grid will become stuck again