Gizmo scale fix v1 (#6830)

* Gizmo fixes (#6763) * disabled depth clipping and set start selection to be near clip instead of 1 * fixed gizmo scaling based on fov and aspect ratio * removed aspect ratio scaling * use distance instead of length for scale * removed unused property * removed redundant funciton for gizmo creation * refactor variable names * gizmo jsdoc and format cleanup * hoisted out guide angle color into constant * kept one pointDelta instance per class * fixed gizmo scaling based on fov and aspect ratio * removed aspect ratio scaling * use distance instead of length for scale * removed unused property
playcanvas · Jul 18, 2024 · d1796b4 · d1796b4
1 parent 8a81598
commit d1796b4
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 24 deletions.
diff --git a/examples/src/examples/misc/gizmos.example.mjs b/examples/src/examples/misc/gizmos.example.mjs
@@ -122,7 +122,8 @@ data.set('camera', {
 });
 const camera = new pc.Entity('camera');
 camera.addComponent('camera', {
-    clearColor: new pc.Color(0.1, 0.1, 0.1)
+    clearColor: new pc.Color(0.1, 0.1, 0.1),
+    farClip: 1000
 });
 camera.addComponent('script');
 const orbitCamera = camera.script.create('orbitCamera');

diff --git a/src/extras/gizmo/axis-shapes.js b/src/extras/gizmo/axis-shapes.js
@@ -50,7 +50,7 @@ const SHADER = {
                 // store z/w for later use in fragment shader
                 vZW = gl_Position.zw;
                 // disable depth clipping
-                gl_Position.z = 0.0;
+                // gl_Position.z = 0.0;
             #endif
         }`,
     frag: /* glsl */`

diff --git a/src/extras/gizmo/gizmo.js b/src/extras/gizmo/gizmo.js
@@ -147,14 +147,6 @@ class Gizmo extends EventHandler {
      */
     static EVENT_RENDERUPDATE = 'render:update';
 
-    /**
-     * Internal device start size.
-     *
-     * @type {number}
-     * @private
-     */
-    _deviceStartSize;
-
     /**
      * Internal version of the gizmo size. Defaults to 1.
      *
@@ -343,13 +335,6 @@ class Gizmo extends EventHandler {
         return this._size;
     }
 
-    _getProjFrustumWidth() {
-        const gizmoPos = this.root.getPosition();
-        const cameraPos = this._camera.entity.getPosition();
-        const dist = tmpV1.copy(gizmoPos).sub(cameraPos).dot(this._camera.entity.forward);
-        return dist * Math.tan(0.5 * this._camera.fov * math.DEG_TO_RAD);
-    }
-
     _createGizmo() {
         this.root = new Entity('gizmo');
         this._app.root.addChild(this.root);
@@ -380,11 +365,10 @@ class Gizmo extends EventHandler {
 
     _updateScale() {
         if (this._camera.projection === PROJECTION_PERSPECTIVE) {
-            let canvasMult = 1;
-            if (this._device.width > 0 && this._device.height > 0) {
-                canvasMult = this._deviceStartSize / Math.min(this._device.width, this._device.height);
-            }
-            this._scale = this._getProjFrustumWidth() * canvasMult * PERS_SCALE_RATIO;
+            const gizmoPos = this.root.getPosition();
+            const cameraPos = this._camera.entity.getPosition();
+            const dist = gizmoPos.distance(cameraPos);
+            this._scale = Math.tan(0.5 * this._camera.fov * math.DEG_TO_RAD) * dist * PERS_SCALE_RATIO;
         } else {
             this._scale = this._camera.orthoHeight * ORTHO_SCALE_RATIO;
         }
@@ -395,14 +379,14 @@ class Gizmo extends EventHandler {
     }
 
     _getSelection(x, y) {
-        const start = this._camera.screenToWorld(x, y, 1);
+        const start = this._camera.screenToWorld(x, y, this._camera.nearClip);
         const end = this._camera.screenToWorld(x, y, this._camera.farClip);
         const dir = end.clone().sub(start).normalize();
 
         const selection = [];
         for (let i = 0; i < this.intersectData.length; i++) {
             const { triData, parent, meshInstances } = this.intersectData[i];
-            const wtm = parent.getWorldTransform().clone();
+            const wtm = parent.getWorldTransform();
             for (let j = 0; j < triData.length; j++) {
                 const { tris, ptm, priority } = triData[j];
                 tmpM1.copy(wtm).mul(ptm);