Gizmo fixes

examples/src/examples/gizmos/transform-rotate.example.mjs

@@ -88,9 +88,9 @@ const cc = /** @type {CameraControls} */ (camera.script.create(CameraControls));
 Object.assign(cc, {
     focusPoint: pc.Vec3.ZERO,
     sceneSize: 5,
-    rotateDamping: 0.97,
-    moveDamping: 0.97,
-    zoomDamping: 0.97,
+    rotateDamping: 0.95,
+    moveDamping: 0.95,
+    zoomDamping: 0.95,
     pitchRange: new pc.Vec2(-89.999, 89.999),
     zoomRange: new pc.Vec2(2, 10),
     enableFly: false

examples/src/examples/gizmos/transform-scale.example.mjs

@@ -88,9 +88,9 @@ const cc = /** @type {CameraControls} */ (camera.script.create(CameraControls));
 Object.assign(cc, {
     focusPoint: pc.Vec3.ZERO,
     sceneSize: 5,
-    rotateDamping: 0.97,
-    moveDamping: 0.97,
-    zoomDamping: 0.97,
+    rotateDamping: 0.95,
+    moveDamping: 0.95,
+    zoomDamping: 0.95,
     pitchRange: new pc.Vec2(-89.999, 89.999),
     zoomRange: new pc.Vec2(2, 10),
     enableFly: false

examples/src/examples/gizmos/transform-translate.example.mjs

@@ -88,9 +88,9 @@ const cc = /** @type {CameraControls} */ (camera.script.create(CameraControls));
 Object.assign(cc, {
     focusPoint: pc.Vec3.ZERO,
     sceneSize: 5,
-    rotateDamping: 0.97,
-    moveDamping: 0.97,
-    zoomDamping: 0.97,
+    rotateDamping: 0.95,
+    moveDamping: 0.95,
+    zoomDamping: 0.95,
     pitchRange: new pc.Vec2(-89.999, 89.999),
     zoomRange: new pc.Vec2(2, 10),
     enableFly: false

src/extras/gizmo/gizmo.js

@@ -1,4 +1,5 @@
 import { math } from '../../core/math/math.js';
+import { Quat } from '../../core/math/quat.js';
 import { Vec3 } from '../../core/math/vec3.js';
 import { Mat4 } from '../../core/math/mat4.js';
 import { Ray } from '../../core/shape/ray.js';
@@ -21,8 +22,8 @@ import { Layer } from '../../scene/layer.js';
 // temporary variables
 const v = new Vec3();
 const position = new Vec3();
-const angles = new Vec3();
 const dir = new Vec3();
+const rotation = new Quat();
 const m1 = new Mat4();
 const m2 = new Mat4();
 const ray = new Ray();
@@ -494,7 +495,7 @@ class Gizmo extends EventHandler {
         }
         position.mulScalar(1.0 / (this.nodes.length || 1));
 
-        if (position.distance(this.root.getLocalPosition()) < UPDATE_EPSILON) {
+        if (position.equalsApprox(this.root.getLocalPosition(), UPDATE_EPSILON)) {
             return;
         }
 
@@ -507,17 +508,17 @@ class Gizmo extends EventHandler {
      * @protected
      */
     _updateRotation() {
-        angles.set(0, 0, 0);
+        rotation.set(0, 0, 0, 1);
         if (this._coordSpace === 'local' && this.nodes.length !== 0) {
-            angles.copy(this.nodes[this.nodes.length - 1].getEulerAngles());
+            rotation.copy(this.nodes[this.nodes.length - 1].getRotation());
         }
 
-        if (angles.distance(this.root.getLocalEulerAngles()) < UPDATE_EPSILON) {
+        if (rotation.equalsApprox(this.root.getRotation(), UPDATE_EPSILON)) {
             return;
         }
 
-        this.root.setLocalEulerAngles(angles);
-        this.fire(Gizmo.EVENT_ROTATIONUPDATE, angles);
+        this.root.setRotation(rotation);
+        this.fire(Gizmo.EVENT_ROTATIONUPDATE, rotation.getEulerAngles());
         this.fire(Gizmo.EVENT_RENDERUPDATE);
     }
 

src/extras/gizmo/mesh-line.js

@@ -47,7 +47,8 @@ class MeshLine {
         this._thickness = args.thickness ?? this._thickness;
 
         this._material.blendState = BlendState.ALPHABLEND;
-        this._material.setDefine('DEPTH_WRITE', '0');
+        this._material.setDefine('DEPTH_WRITE', '1');
+        this._material.setParameter('uDepth', 0);
         this._material.update();
 
         const mesh = Mesh.fromGeometry(app.graphicsDevice, new CylinderGeometry());

src/extras/gizmo/rotate-gizmo.js

@@ -631,9 +631,7 @@ class RotateGizmo extends TransformGizmo {
                 v1.copy(offset);
                 q1.transformVector(v1, v1);
                 q2.copy(q1).mul(rot);
-
-                // FIXME: Rotation via quaternion when scale inverted causes scale warping?
-                node.setEulerAngles(q2.getEulerAngles());
+                node.setRotation(q2);
                 node.setPosition(v1.add(gizmoPos));
             }
         }

src/extras/gizmo/scale-gizmo.js

@@ -64,32 +64,34 @@ class ScaleGizmo extends TransformGizmo {
             layers: [this._layer.id],
             defaultColor: this._theme.shapeBase.xyz,
             hoverColor: this._theme.shapeHover.xyz,
-            disabledColor: this._theme.disabled,
-            depth: false
+            disabledColor: this._theme.disabled
         }),
         yz: new PlaneShape(this._device, {
             axis: 'x',
             layers: [this._layer.id],
             rotation: new Vec3(0, 0, -90),
             defaultColor: this._theme.shapeBase.x,
             hoverColor: this._theme.shapeHover.x,
-            disabledColor: this._theme.disabled
+            disabledColor: this._theme.disabled,
+            depth: 1
         }),
         xz: new PlaneShape(this._device, {
             axis: 'y',
             layers: [this._layer.id],
             rotation: new Vec3(0, 0, 0),
             defaultColor: this._theme.shapeBase.y,
             hoverColor: this._theme.shapeHover.y,
-            disabledColor: this._theme.disabled
+            disabledColor: this._theme.disabled,
+            depth: 1
         }),
         xy: new PlaneShape(this._device, {
             axis: 'z',
             layers: [this._layer.id],
             rotation: new Vec3(90, 0, 0),
             defaultColor: this._theme.shapeBase.z,
             hoverColor: this._theme.shapeHover.z,
-            disabledColor: this._theme.disabled
+            disabledColor: this._theme.disabled,
+            depth: 1
         }),
         x: new BoxLineShape(this._device, {
             axis: 'x',

src/extras/gizmo/shaders.js

@@ -27,14 +27,15 @@ export const unlitShader = {
         precision highp float;
 
         uniform vec4 uColor;
+        uniform float uDepth;
 
         void main(void) {
             if (uColor.a < 1.0 / 255.0) {
                 discard;
             }
             gl_FragColor = vec4(gammaCorrectOutput(decodeGamma(uColor)), uColor.a);
-            #if DEPTH_WRITE == 0
-                gl_FragDepth = 0.0;
+            #if DEPTH_WRITE == 1
+                gl_FragDepth = uDepth;
             #endif
         }
     `,
@@ -57,6 +58,7 @@ export const unlitShader = {
         #include "gammaPS"
 
         uniform uColor: vec4f;
+        uniform uDepth: f32;
 
         @fragment
         fn fragmentMain(input: FragmentInput) -> FragmentOutput {
@@ -65,8 +67,8 @@ export const unlitShader = {
                 discard;
             }
             output.color = vec4f(gammaCorrectOutput(decodeGamma(uniform.uColor)), uniform.uColor.a);
-            #if DEPTH_WRITE == 0
-                output.fragDepth = 0.0;
+            #if DEPTH_WRITE == 1
+                output.fragDepth = uniform.uDepth;
             #endif
             return output;
         }

src/extras/gizmo/shape/shape.js

@@ -33,7 +33,7 @@ tmpG.normals = [];
  * @property {Color} [hoverColor] - The hover color of the shape.
  * @property {Color} [disabledColor] - The disabled color of the shape.
  * @property {number} [cull] - The culling mode of the shape.
- * @property {boolean} [depth] - Whether the shape is rendered with depth testing.
+ * @property {number} [depth] - The depth of the shape. -1 = interpolated depth.
  */
 
 /**
@@ -129,12 +129,12 @@ class Shape {
     _cull = CULLFACE_BACK;
 
     /**
-     * The internal depth state of the shape.
+     * The internal depth state of the shape. -1 = interpolated depth.
      *
-     * @type {boolean}
+     * @type {number}
      * @protected
      */
-    _depth = true;
+    _depth = -1;
 
     /**
      * The graphics device.
@@ -269,7 +269,8 @@ class Shape {
      */
     _createRenderComponent(entity, meshes) {
         const color = this._disabled ? this._disabledColor : this._defaultColor;
-        this._material.setDefine('DEPTH_WRITE', this._depth ? '1' : '0');
+        this._material.setDefine('DEPTH_WRITE', this._depth > 0 ? '1' : '0');
+        this._material.setParameter('uDepth', this._depth);
         this._material.setParameter('uColor', color.toArray());
         this._material.cull = this._cull;
         this._material.blendType = BLEND_NORMAL;

src/extras/gizmo/translate-gizmo.js

@@ -65,32 +65,34 @@ class TranslateGizmo extends TransformGizmo {
             layers: [this._layer.id],
             defaultColor: this._theme.shapeBase.xyz,
             hoverColor: this._theme.shapeHover.xyz,
-            disabledColor: this._theme.disabled,
-            depth: false
+            disabledColor: this._theme.disabled
         }),
         yz: new PlaneShape(this._device, {
             axis: 'x',
             layers: [this._layer.id],
             rotation: new Vec3(0, 0, -90),
             defaultColor: this._theme.shapeBase.x,
             hoverColor: this._theme.shapeHover.x,
-            disabledColor: this._theme.disabled
+            disabledColor: this._theme.disabled,
+            depth: 1
         }),
         xz: new PlaneShape(this._device, {
             axis: 'y',
             layers: [this._layer.id],
             rotation: new Vec3(0, 0, 0),
             defaultColor: this._theme.shapeBase.y,
             hoverColor: this._theme.shapeHover.y,
-            disabledColor: this._theme.disabled
+            disabledColor: this._theme.disabled,
+            depth: 1
         }),
         xy: new PlaneShape(this._device, {
             axis: 'z',
             layers: [this._layer.id],
             rotation: new Vec3(90, 0, 0),
             defaultColor: this._theme.shapeBase.z,
             hoverColor: this._theme.shapeHover.z,
-            disabledColor: this._theme.disabled
+            disabledColor: this._theme.disabled,
+            depth: 1
         }),
         x: new ArrowShape(this._device, {
             axis: 'x',