Merge pull request #404 from xeokit/fix-excess-pick-events

CameraControl picking optimizations and fixes

src/viewer/scene/CameraControl/CameraControl.js

@@ -11,7 +11,6 @@ import {KeyboardPanRotateDollyHandler} from "./lib/handlers/KeyboardPanRotateDol
 import {CameraUpdater} from "./lib/CameraUpdater.js";
 import {MouseMiscHandler} from "./lib/handlers/MouseMiscHandler.js";
 import {TouchPanRotateAndDollyHandler} from "./lib/handlers/TouchPanRotateAndDollyHandler.js";
-import {TouchPickHandler} from "./lib/handlers/TouchPickHandler.js";
 import {utils} from "../utils.js";
 
 /**
@@ -673,7 +672,7 @@ class CameraControl extends Component {
             activeTouches: [],
             tapStartPos: new Float32Array(2),
             tapStartTime: -1,
-            lastTapTime: -1,
+            lastTapTime: -1
         };
 
         // Updates for CameraUpdater to process on next Scene "tick" event
@@ -709,7 +708,6 @@ class CameraControl extends Component {
             new MousePanRotateDollyHandler(this.scene, this._controllers, this._configs, this._states, this._updates),
             new KeyboardAxisViewHandler(this.scene, this._controllers, this._configs, this._states, this._updates),
             new MousePickHandler(this.scene, this._controllers, this._configs, this._states, this._updates),
-            new TouchPickHandler(this.scene, this._controllers, this._configs, this._states, this._updates),
             new KeyboardPanRotateDollyHandler(this.scene, this._controllers, this._configs, this._states, this._updates)
         ];
 

src/viewer/scene/CameraControl/lib/CameraUpdater.js

@@ -15,6 +15,7 @@ class CameraUpdater {
 
         this._scene = scene;
         const camera = scene.camera;
+        const pickController = controllers.pickController;
         const pivotController = controllers.pivotController;
         const panController = controllers.panController;
 
@@ -71,14 +72,13 @@ class CameraUpdater {
 
                     if (updates.rotateDeltaY === 0 && updates.rotateDeltaX === 0) {
 
-                        const pickResult = this._scene.pick({
-                            pickSurface: true,
-                            pickSurfaceNormal: false,
-                            canvasPos: states.pointerCanvasPos
-                        });
+                        pickController.pickCursorPos = states.pointerCanvasPos;
+                        pickController.schedulePickSurface = true;
 
-                        if (pickResult && pickResult.worldPos) {
-                            const worldPos = pickResult.worldPos;
+                        pickController.update();
+
+                        if (pickController.pickResult && pickController.pickResult.worldPos) {
+                            const worldPos = pickController.pickResult.worldPos;
                             pivotController.setPivotPos(worldPos);
                             pivotController.hidePivot();
                         } else {
@@ -289,6 +289,8 @@ class CameraUpdater {
                 updates.dollyDelta *= configs.dollyInertia;
             }
 
+            pickController.fireEvents();
+
             document.body.style.cursor = cursorType;
         });
     }

src/viewer/scene/CameraControl/lib/controllers/PickController.js

@@ -1,4 +1,5 @@
 import {math} from "../../../math/math.js";
+import {PickResult} from "../../../webgl/PickResult.js";
 
 /**
  *
@@ -56,9 +57,7 @@ class PickController {
 
         this._lastPickedEntityId = null;
 
-        this._onTick = this._scene.on("tick", () => {
-            this.update()
-        });
+        this._needFireEvents = false;
     }
 
     /**
@@ -76,32 +75,87 @@ class PickController {
 
         this.picked = false;
         this.pickedSurface = false;
+        this._needFireEvents = false;
+
+        const hasHoverSurfaceSubs = this._cameraControl.hasSubs("hoverSurface");
+
+        if (this.schedulePickSurface) {
+            if (this.pickResult && this.pickResult.worldPos) {
+                const pickResultCanvasPos = this.pickResult.canvasPos;
+                if (pickResultCanvasPos[0] === this.pickCursorPos[0] && pickResultCanvasPos[1] === this.pickCursorPos[1]) {
+                    this.picked = true;
+                    this.pickedSurface = true;
+                    this._needFireEvents = hasHoverSurfaceSubs;
+                    this.schedulePickEntity = false;
+                    this.schedulePickSurface = false;
+                    return;
+                }
+            }
+        }
+
+        if (this.schedulePickEntity) {
+            if (this.pickResult) {
+                const pickResultCanvasPos = this.pickResult.canvasPos;
+                if (pickResultCanvasPos[0] === this.pickCursorPos[0] && pickResultCanvasPos[1] === this.pickCursorPos[1]) {
+                    this.picked = true;
+                    this.pickedSurface = false;
+                    this._needFireEvents = false;
+                    this.schedulePickEntity = false;
+                    this.schedulePickSurface = false;
+                    return;
+                }
+            }
+        }
+
+        if (this.schedulePickSurface) {
 
-        if (this.schedulePickSurface || this._cameraControl.hasSubs("hoverSurface")) {
             this.pickResult = this._scene.pick({
                 pickSurface: true,
                 pickSurfaceNormal: true,
                 canvasPos: this.pickCursorPos
             });
+
+            if (this.pickResult) {
+                this.picked = true;
+                this.pickedSurface = true;
+                this._needFireEvents = true;
+            }
+
         } else { // schedulePickEntity == true
+
             this.pickResult = this._scene.pick({
                 canvasPos: this.pickCursorPos
             });
+
+            if (this.pickResult) {
+                this.picked = true;
+                this.pickedSurface = false;
+                this._needFireEvents = true;
+            }
         }
 
-        if (this.pickResult) {
+        this.schedulePickEntity = false;
+        this.schedulePickSurface = false;
+    }
+
+    fireEvents() {
+
+        if (!this._needFireEvents) {
+            return;
+        }
 
-            this.picked = true;
+        if (this.picked && this.pickResult) {
 
             const pickedEntityId = this.pickResult.entity.id;
 
             if (this._lastPickedEntityId !== pickedEntityId) {
-                if (this._lastPickedEntityId !== undefined) {
 
+                if (this._lastPickedEntityId !== undefined) {
                     this._cameraControl.fire("hoverOut", {
                         entity: this._scene.objects[this._lastPickedEntityId]
                     }, true);
                 }
+
                 this._cameraControl.fire("hoverEnter", this.pickResult, true);
                 this._lastPickedEntityId = pickedEntityId;
             }
@@ -127,8 +181,9 @@ class PickController {
             }, true);
         }
 
-        this.schedulePickEntity = false;
-        this.schedulePickSurface = false;
+        this.pickResult = null;
+
+        this._needFireEvents = false;
     }
 
     destroy() {

src/viewer/scene/CameraControl/lib/handlers/MousePickHandler.js

@@ -228,11 +228,9 @@ class MousePickHandler {
 
             if (this._clicks === 1) { // First click
 
-                const pointerCanvasPos = states.pointerCanvasPos.slice();
-
                 this._timeout = setTimeout(() => {
 
-                    pickController.pickCursorPos = pointerCanvasPos;
+                    pickController.pickCursorPos = states.pointerCanvasPos;
                     pickController.schedulePickEntity = configs.doublePickFlyTo;
                     pickController.schedulePickSurface = pickedSurfaceSubs;
                     pickController.update();