Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Gizmos axis flipping #7063

Merged
merged 4 commits into from
Oct 24, 2024
Merged

Gizmos axis flipping #7063

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
654af8d
Added axis flipping to scale and translate gizmos
kpal81xd Oct 24, 2024
fa88073
Hides axes at glancing angles
kpal81xd Oct 24, 2024
9f4aace
Fixed forward axis comparison
kpal81xd Oct 24, 2024
4a47957
Updated shape look at code to only update on angle change
kpal81xd Oct 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 42 additions & 9 deletions src/extras/gizmo/scale-gizmo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ const tmpQ1 = new Quat();

// constants
const GLANCE_EPSILON = 0.98;
const CAMERA_EPSILON = 0.999;

/**
* Scaling gizmo.
Expand Down Expand Up @@ -95,6 +96,14 @@ class ScaleGizmo extends TransformGizmo {
*/
_nodeScales = new Map();

/**
* Internal forward vector of the camera in the direction of the gizmo.
*
* @type {Vec3}
* @private
*/
_forward = new Vec3();

/**
* Internal state if transform should use uniform scaling.
*
Expand All @@ -113,7 +122,7 @@ class ScaleGizmo extends TransformGizmo {
*
* @type {boolean}
*/
flipPlanes = true;
flipShapes = true;

/**
* The lower bound for scaling.
Expand Down Expand Up @@ -154,7 +163,7 @@ class ScaleGizmo extends TransformGizmo {
});

this._app.on('prerender', () => {
this._planesLookAtCamera();
this._shapesLookAtCamera();
});
}

Expand Down Expand Up @@ -371,22 +380,46 @@ class ScaleGizmo extends TransformGizmo {
/**
* @private
*/
_planesLookAtCamera() {
tmpV1.cross(this._camera.entity.forward, this.root.right);
_shapesLookAtCamera() {
tmpV1.copy(this.root.getPosition()).sub(this._camera.entity.getPosition()).normalize();
if (tmpV1.dot(this._forward) > CAMERA_EPSILON) {
return;
}
this._forward.copy(tmpV1);

let dot = this._forward.dot(this.root.right);
this._shapes.x.entity.enabled = Math.abs(dot) < GLANCE_EPSILON;
if (this.flipShapes) {
this._shapes.x.flipped = dot > 0;
}

dot = this._forward.dot(this.root.up);
this._shapes.y.entity.enabled = Math.abs(dot) < GLANCE_EPSILON;
if (this.flipShapes) {
this._shapes.y.flipped = dot > 0;
}

dot = this._forward.dot(this.root.forward);
this._shapes.z.entity.enabled = Math.abs(dot) < GLANCE_EPSILON;
if (this.flipShapes) {
this._shapes.z.flipped = dot < 0;
}

tmpV1.cross(this._forward, this.root.right);
this._shapes.yz.entity.enabled = tmpV1.length() < GLANCE_EPSILON;
if (this.flipPlanes) {
if (this.flipShapes) {
this._shapes.yz.flipped = tmpV2.set(0, +(tmpV1.dot(this.root.forward) > 0), +(tmpV1.dot(this.root.up) > 0));
}

tmpV1.cross(this._camera.entity.forward, this.root.forward);
tmpV1.cross(this._forward, this.root.forward);
this._shapes.xy.entity.enabled = tmpV1.length() < GLANCE_EPSILON;
if (this.flipPlanes) {
if (this.flipShapes) {
this._shapes.xy.flipped = tmpV2.set(+(tmpV1.dot(this.root.up) > 0), +(tmpV1.dot(this.root.right) < 0), 0);
}

tmpV1.cross(this._camera.entity.forward, this.root.up);
tmpV1.cross(this._forward, this.root.up);
this._shapes.xz.entity.enabled = tmpV1.length() < GLANCE_EPSILON;
if (this.flipPlanes) {
if (this.flipShapes) {
this._shapes.xz.flipped = tmpV2.set(+(tmpV1.dot(this.root.forward) < 0), 0, +(tmpV1.dot(this.root.right) < 0));
}
}
Expand Down
21 changes: 21 additions & 0 deletions src/extras/gizmo/shape/arrow-shape.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,8 @@ class ArrowShape extends Shape {

_line;

_flipped = false;

constructor(device, options = {}) {
super(device, options);

Expand Down Expand Up @@ -95,6 +97,25 @@ class ArrowShape extends Shape {
return this._tolerance;
}

set flipped(value) {
if (this._flipped === value) {
return;
}
this._flipped = value;
if (this._rotation.equals(Vec3.ZERO)) {
tmpV1.set(0, 0, this._flipped ? 180 : 0);
} else {
tmpV1.copy(this._rotation).mulScalar(this._flipped ? -1 : 1);
}

this._line.enabled = !this._flipped;
this.entity.setLocalEulerAngles(tmpV1);
}

get flipped() {
return this._flipped;
}

_createArrow() {
this._createRoot('arrow');

Expand Down
21 changes: 21 additions & 0 deletions src/extras/gizmo/shape/boxline-shape.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,8 @@ class BoxLineShape extends Shape {

_line;

_flipped = false;

constructor(device, options = {}) {
super(device, options);

Expand Down Expand Up @@ -84,6 +86,25 @@ class BoxLineShape extends Shape {
return this._tolerance;
}

set flipped(value) {
if (this._flipped === value) {
return;
}
this._flipped = value;
if (this._rotation.equals(Vec3.ZERO)) {
tmpV1.set(0, 0, this._flipped ? 180 : 0);
} else {
tmpV1.copy(this._rotation).mulScalar(this._flipped ? -1 : 1);
}

this._line.enabled = !this._flipped;
this.entity.setLocalEulerAngles(tmpV1);
}

get flipped() {
return this._flipped;
}

_createBoxLine() {
this._createRoot('boxLine');

Expand Down
51 changes: 42 additions & 9 deletions src/extras/gizmo/translate-gizmo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ const tmpQ1 = new Quat();

// constants
const GLANCE_EPSILON = 0.98;
const CAMERA_EPSILON = 0.999;

/**
* Translation gizmo.
Expand Down Expand Up @@ -107,6 +108,14 @@ class TranslateGizmo extends TransformGizmo {
*/
_nodePositions = new Map();

/**
* Internal forward vector of the camera in the direction of the gizmo.
*
* @type {Vec3}
* @private
*/
_forward = new Vec3();

/**
* @override
*/
Expand All @@ -117,7 +126,7 @@ class TranslateGizmo extends TransformGizmo {
*
* @type {boolean}
*/
flipPlanes = true;
flipShapes = true;

/**
* Creates a new TranslateGizmo object.
Expand Down Expand Up @@ -151,7 +160,7 @@ class TranslateGizmo extends TransformGizmo {
});

this._app.on('prerender', () => {
this._planesLookAtCamera();
this._shapesLookAtCamera();
});
}

Expand Down Expand Up @@ -360,22 +369,46 @@ class TranslateGizmo extends TransformGizmo {
/**
* @private
*/
_planesLookAtCamera() {
tmpV1.cross(this._camera.entity.forward, this.root.right);
_shapesLookAtCamera() {
tmpV1.copy(this.root.getPosition()).sub(this._camera.entity.getPosition()).normalize();
if (tmpV1.dot(this._forward) > CAMERA_EPSILON) {
return;
}
this._forward.copy(tmpV1);

let dot = this._forward.dot(this.root.right);
this._shapes.x.entity.enabled = Math.abs(dot) < GLANCE_EPSILON;
if (this.flipShapes) {
this._shapes.x.flipped = dot > 0;
}

dot = this._forward.dot(this.root.up);
this._shapes.y.entity.enabled = Math.abs(dot) < GLANCE_EPSILON;
if (this.flipShapes) {
this._shapes.y.flipped = dot > 0;
}

dot = this._forward.dot(this.root.forward);
this._shapes.z.entity.enabled = Math.abs(dot) < GLANCE_EPSILON;
if (this.flipShapes) {
this._shapes.z.flipped = dot < 0;
}

tmpV1.cross(this._forward, this.root.right);
this._shapes.yz.entity.enabled = tmpV1.length() < GLANCE_EPSILON;
if (this.flipPlanes) {
if (this.flipShapes) {
this._shapes.yz.flipped = tmpV2.set(0, +(tmpV1.dot(this.root.forward) > 0), +(tmpV1.dot(this.root.up) > 0));
}

tmpV1.cross(this._camera.entity.forward, this.root.forward);
tmpV1.cross(this._forward, this.root.forward);
this._shapes.xy.entity.enabled = tmpV1.length() < GLANCE_EPSILON;
if (this.flipPlanes) {
if (this.flipShapes) {
this._shapes.xy.flipped = tmpV2.set(+(tmpV1.dot(this.root.up) > 0), +(tmpV1.dot(this.root.right) < 0), 0);
}

tmpV1.cross(this._camera.entity.forward, this.root.up);
tmpV1.cross(this._forward, this.root.up);
this._shapes.xz.entity.enabled = tmpV1.length() < GLANCE_EPSILON;
if (this.flipPlanes) {
if (this.flipShapes) {
this._shapes.xz.flipped = tmpV2.set(+(tmpV1.dot(this.root.forward) < 0), 0, +(tmpV1.dot(this.root.right) < 0));
}
}
Expand Down