fix(pick): fix gui pick events (#422)

* chore: remove sample_candleflame maskMap * fix pick * fix(pick): fix gui pick over/out * fix: pickpick sample --------- Co-authored-by: ShuangLiu <[email protected]>
Orillusion · Jul 18, 2024 · 367f469 · 367f469
1 parent 61c7718
commit 367f469
Show file tree

Hide file tree

Showing 9 changed files with 58 additions and 39 deletions.
diff --git a/samples/compute/Sample_Fluid.ts b/samples/compute/Sample_Fluid.ts
@@ -52,7 +52,7 @@ export class Demo_Fluid {
         obj.addComponent(ColliderComponent);
         let pickFire = scene.view.pickFire;
         pickFire.addEventListener(
-            PointerEvent3D.PICK_MOVE, 
+            PointerEvent3D.PICK_MOVE,
             function (e: PointerEvent3D) {
                 let point = e.data.worldPos;
                 if (point.y >= 0 && (this.mLastPoint.x != point.x && this.mLastPoint.y != point.y && this.mLastPoint.z != point.z)) {

diff --git a/samples/compute/Sample_FluidOptimize.ts b/samples/compute/Sample_FluidOptimize.ts
@@ -51,18 +51,18 @@ export class Demo_FluidOptimize {
         obj.addComponent(ColliderComponent);
         let pickFire = scene.view.pickFire;
         pickFire.addEventListener(
-            PointerEvent3D.PICK_MOVE, 
+            PointerEvent3D.PICK_MOVE,
             function (e: PointerEvent3D) {
                 let point = e.data.worldPos;
                 if (point.y >= 0 && (this.mLastPoint.x != point.x && this.mLastPoint.y != point.y && this.mLastPoint.z != point.z)) {
-                    try{
-                    point.subtract(this.mLastPoint, this.mVelocity);
-                    this.mLastPoint.copy(point);
-                    let r = scene.view.camera;
-                    let ray = r.screenPointToRay(Engine3D.inputSystem.mouseX, Engine3D.inputSystem.mouseY);
-                    emulation.updateInputInfo(scene.view.camera.transform.localPosition, ray.direction, this.mVelocity);
+                    try {
+                        point.subtract(this.mLastPoint, this.mVelocity);
+                        this.mLastPoint.copy(point);
+                        let r = scene.view.camera;
+                        let ray = r.screenPointToRay(Engine3D.inputSystem.mouseX, Engine3D.inputSystem.mouseY);
+                        emulation.updateInputInfo(scene.view.camera.transform.localPosition, ray.direction, this.mVelocity);
                     }
-                    catch(e){
+                    catch (e) {
                         console.error(e);
                     }
 

diff --git a/samples/compute/fluid/FluidRenderShader.ts b/samples/compute/fluid/FluidRenderShader.ts
@@ -57,7 +57,7 @@ export let FluidRenderShader = /* wgsl */ `
         //ORI_VertexOut.fragCoord = normalize(vertex.position.xy) + vec2<f32>(0.5, 0.5);
         ORI_VertexOut.varying_Color = particleColor[vertex.index];
         ORI_VertexOut.varying_WNormal = worldNormal ; 
-
+        ORI_VertexOut.index = f32(particleGlobalData.instance_index) ;
         return ORI_VertexOut;
     }
 

diff --git a/samples/compute/fluid/FluidRenderShaderOpt.ts b/samples/compute/fluid/FluidRenderShaderOpt.ts
@@ -69,6 +69,7 @@ export let FluidRenderShaderOpt = /* wgsl */ `
 
         ORI_VertexOut.varying_WPos = worldPos;
         ORI_VertexOut.varying_WPos.w = f32(particleGlobalData.instance_index);
+        ORI_VertexOut.index = f32(particleGlobalData.instance_index) ;
 
         var clipPosition = globalUniform.projMat * viewPosition ;
 

diff --git a/samples/pick/Sample_PixelPick.ts b/samples/pick/Sample_PixelPick.ts
@@ -84,8 +84,7 @@ class Sample_PixelPick {
     }
 
     private getPickObject(e: PointerEvent3D): Object3D {
-        let pick = e.data.pick;
-        return pick ? pick.object3D : null;
+        return e.target || null;
     }
 
     private onMouseUp(e: PointerEvent3D) {

diff --git a/src/components/gui/GUIPick.ts b/src/components/gui/GUIPick.ts
@@ -4,7 +4,6 @@ import { MouseCode } from '../../event/MouseCode';
 import { webGPUContext } from '../../gfx/graphics/webGpu/Context3D';
 import { Ray } from '../../math/Ray';
 import { Vector2 } from '../../math/Vector2';
-import { Vector3 } from '../../math/Vector3';
 import { Time } from '../../util/Time';
 import { IUIInteractive, UIInteractiveStyle } from './uiComponents/IUIInteractive';
 import { UITransform } from './uiComponents/UITransform';
@@ -63,20 +62,37 @@ export class GUIPick {
         this._mouseCode = e.mouseCode;
         this.collectEntities();
         let ret = this.pick(this._colliderOut);
-        ret && e.stopImmediatePropagation();
-        let target = ret ? ret.collider : null;
-        if (target != this._lastOverTarget) {
-            if (this._lastOverTarget && this._lastOverTarget.enable) {
+        if(ret){
+            e.stopImmediatePropagation();
+            let _target = ret.collider;
+            if(_target != this._lastOverTarget){
+                _target.mouseStyle = UIInteractiveStyle.OVER;
+                Object.assign(this._overEvent, e);
+                this._overEvent.type = PointerEvent3D.PICK_OVER_GUI;
+                this._overEvent.target = _target.object3D;
+                this._overEvent.data = ret;
+                _target.object3D.dispatchEvent(this._overEvent);
+
+                if (this._lastOverTarget) {
+                    this._lastOverTarget.mouseStyle = UIInteractiveStyle.NORMAL;
+                    Object.assign(this._outEvent, e);
+                    this._outEvent.type = PointerEvent3D.PICK_OUT_GUI;
+                    this._outEvent.target = _target.object3D;
+                    this._outEvent.data = ret;
+                    this._lastOverTarget.object3D.dispatchEvent(this._outEvent);
+                }
+            }  
+            this._lastOverTarget = _target;
+        }else{
+            if (this._lastOverTarget) {
                 this._lastOverTarget.mouseStyle = UIInteractiveStyle.NORMAL;
-                this._outEvent.data = this._lastOverTarget;
+                Object.assign(this._outEvent, e);
+                this._outEvent.type = PointerEvent3D.PICK_OUT_GUI;
+                this._outEvent.target = this._lastOverTarget.object3D;
+                this._outEvent.data = ret;
                 this._lastOverTarget.object3D.dispatchEvent(this._outEvent);
+                this._lastOverTarget = null
             }
-            if (target) {
-                target.mouseStyle = UIInteractiveStyle.OVER;
-                this._overEvent.data = target;
-                target.object3D.dispatchEvent(this._overEvent);
-            }
-            this._lastOverTarget = target;
         }
     }
 
@@ -94,13 +110,16 @@ export class GUIPick {
         this.collectEntities();
         let ret = this.pick(this._colliderOut);
         ret && e.stopImmediatePropagation();
-        let target = ret ? ret.collider : null;
-        if (target) {
-            target.mouseStyle = UIInteractiveStyle.DOWN;
-            this._overEvent.data = target;
-            target.object3D.dispatchEvent(this._overEvent);
+        let collider = ret ? ret.collider : null;
+        if (collider) {
+            collider.mouseStyle = UIInteractiveStyle.DOWN;
+            Object.assign(this._downEvent, e);
+            this._downEvent.type = PointerEvent3D.PICK_DOWN_GUI;
+            this._downEvent.target = collider.object3D;
+            this._downEvent.data = ret;
+            collider.object3D.dispatchEvent(this._downEvent);
         }
-        this._lastDownTarget = target;
+        this._lastDownTarget = collider;
     }
 
     private onTouchUp(e: PointerEvent3D) {
@@ -111,17 +130,20 @@ export class GUIPick {
         let ret = this.pick(this._colliderOut);
         ret && e.stopImmediatePropagation();
 
-        let target = ret ? ret.collider : null;
+        let collider = ret ? ret.collider : null;
         if (this._lastDownTarget && this._lastDownTarget.enable) {
             this._lastDownTarget.mouseStyle = UIInteractiveStyle.NORMAL;
         }
 
-        if (target && target == this._lastDownTarget) {
+        if (collider && collider == this._lastDownTarget) {
             if (Time.time - this._lastDownTime <= this._clickTimeSpan) {
                 this._calcDistanceVec2.set(e.mouseX, e.mouseY);
                 if (this._calcDistanceVec2.distance(this._lastDownPosition) <= this._clickDistanceSpan) {
-                    this._clickEvent.data = { pick: target, pickInfo: ret, mouseCode: this._mouseCode };
-                    target.object3D.dispatchEvent(this._clickEvent);
+                    Object.assign(this._clickEvent, e);
+                    this._clickEvent.type = PointerEvent3D.PICK_CLICK_GUI;
+                    this._clickEvent.target = collider.object3D;
+                    this._clickEvent.data = ret;
+                    collider.object3D.dispatchEvent(this._clickEvent);
                 }
             }
         }

diff --git a/src/components/gui/uiComponents/IUIInteractive.ts b/src/components/gui/uiComponents/IUIInteractive.ts
@@ -1,4 +1,4 @@
-import { CEventDispatcher } from "../../../event/CEventDispatcher";
+import { Object3D } from "../../../core/entities/Object3D";
 import { Ray } from "../../../math/Ray";
 import { Vector2 } from "../../../math/Vector2";
 
@@ -13,7 +13,7 @@ export interface IUIInteractive {
     interactive: boolean;
     enable: boolean;
     visible: boolean;
-    object3D?: CEventDispatcher;
+    object3D?: Object3D;
 
     get interactiveVisible(): boolean;
 

diff --git a/src/components/gui/uiComponents/UIPanel.ts b/src/components/gui/uiComponents/UIPanel.ts
@@ -96,7 +96,6 @@ export class UIPanel extends UIImage {
     public set billboard(type: BillboardType) {
         if (this.space == GUISpace.View) {
             type = BillboardType.None;
-        } else {
             console.warn('Cannot enable billboard in view space');
         }
         if (type == BillboardType.BillboardXYZ || type == BillboardType.BillboardY) {

diff --git a/src/io/PickFire.ts b/src/io/PickFire.ts
@@ -55,7 +55,6 @@ export class PickFire extends CEventDispatcher {
      */
     private init(): void {
         this.ray = new Ray();
-
         this.mouseEnableMap = new Map<number, ColliderComponent>();
 
         this._pickEvent = new PointerEvent3D(PointerEvent3D.PICK_CLICK);
@@ -260,7 +259,6 @@ export class PickFire extends CEventDispatcher {
 
                 }
             }
-
         }
     }
 }