Skip to content

Gizmo overhaul for translate/rotate/scale #1428

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

Jump to bottom
Merged
merged 40 commits into from
Nov 3, 2025
Merged

Gizmo overhaul for translate/rotate/scale #1428

merged 40 commits into from
Nov 3, 2025

Conversation

@kpal81xd
Copy link
Contributor

@kpal81xd kpal81xd commented Sep 9, 2025 •
edited
Loading

Continuation of #1367

Requires

What's changed

  • Replaces translate/rotate/scale gizmos with ones from engine
  • Added Gizmo customisation settings Gizmos settings #1431

Testing

  • Engine v2.12.4

@kpal81xd
Updated gizmos for translate/rotate/scale (#1367)
179b9f2 
* Update PlayCanvas dependency to version 2.10.3 and refine type declarations for 'pc' and 'pcx' in types.d.ts

* feat: replaced translate gizmo with engine one

* refactor: simplify layer creation and entity attachment in translate gizmo

* feat: added history management to gizmo

* fix: preserve history state in setTRS function

* fix: update history management in gizmo-translate to use cache instead of store

* fix: rename state variable to action for clarity in history management

* fix: update action structure for history management in gizmo-translate

* feat: replaced old gizmos with new scale and rotate gizmos

* feat: combined all transform gizmos into one class

* fix: allow for switching cameras for gizmos

* fix: add write permission check to gizmo update logic

* feat: add snapping functionality to gizmos with configurable increment

* feat: add custom theme to gizmos to match the look of existing ones

* feat: set gizmo opacity to 0.7

* feat: update gizmo theme structure and add guideOccluded color settings

* feat: add xyz color settings for guideOccluded in gizmo initialization

* feat: update guideOccluded settings to guideOcclusion for improved clarity

* feat: simplify color settings in initGizmo by removing opacity and enabling orbit rotation for RotateGizmo

* feat: override picker to reset node and picked if gizmo is being hovered

* feat: update initGizmo to disable axis shapes for improved scaling intuitiveness

* feat: set dragMode to 'hide' for RotateGizmo in initGizmo for improved user experience

* feat: toggle camera and viewport pick state during gizmo initialization

* fix: update drag mode for RotateGizmo to 'selected'

* feat: add angle guide thickness to gizmo initialization

* fix: rename parameter in gizmo:coordSystem event for clarity

* fix: update gizmo initialization to hide center sphere and rotation ball

* fix: update playcanvas version to 2.11.1 and adjust Node.js engine requirement

* fix: update playcanvas version to 2.11.2

* fix: unify gizmo visibility handling by replacing individual calls with a single event emission

* fix: improve visibility handling in update function by separating write permission check

* fix: refactor gizmo update handling to use reflow for visibility and selection changes

* fix: update gizmo enable logic to depend on write state and visibility

* fix: update gizmo visibility handling by emitting events on handle changes

* fix: update gizmo event handling to track hover state and trigger viewport render on updates

* fix: integrate FORCE_PICK_TAG into gizmo entity creation and viewport picking logic
@kpal81xd kpal81xd self-assigned this Sep 9, 2025
@kpal81xd kpal81xd added the enhancement New feature or request label Sep 9, 2025
@Maksims
Copy link
Collaborator

Maksims commented Sep 11, 2025 •
edited
Loading

This PR changes visuals and most importantly mechanics of how gizmos behave.

This is extremely undesirable, as users got intuition and comfort of using current gizmos, and just abruptly without any warning or choice forcing everyone to re-learn, without any benefits, with actual reduction in experience.

Very very undesirable.

Issues:

  1. Flipping axes arrows prevents us from knowing where forward and where back is, same with other axes.
  2. Rotation two modes gizmo is magically switching between, and is an awful UX of hidden rules.
  3. Visually gizmos are dull and non-clear, mixing up with our content, making it harder to interact with.

@Maksims
Copy link
Collaborator

Maksims commented Sep 11, 2025 •
edited
Loading

Please vote on this poll if these changes are desirable or will make you unhappy: https://x.com/mrmaxm/status/1966079197618847987

@yaustar
Copy link
Collaborator

yaustar commented Sep 11, 2025 •
edited
Loading

I'm not a huge fan of the axis flipping behaviour as a default setting as that's quite confusing. The other issues that Max has raised I personally don't see as deal breakers (colours could (and maybe should?)) be added as presets in settings but the axis flipping I personally find very confusing as I have to mentally flip the axis to know the orientation of the object when selected

11.Sep.2025.at.11.10.mp4

Edit: The more I use the new rotation gizmo, I think it's fine but likely to need a sensitivity setting

Edit2: Ah sorry, knee jerk reaction. Looks like there is a setting to switch between the two #1431

@OlegGedzjuns
Copy link

OlegGedzjuns commented Sep 11, 2025

https://github.com/user-attachments/assets/c1ff51da-e3dd-46fa-ae30-196207129821
How do i even know now where is forward/back and left/right of my entity with arrows always flipping???

chrome_kYJRXH0zeF If i move entity right now, will my entity move like i drawn here? NOPE, i just rotated my camera around entity and coordinate changes will be exactly opposite

Yeah, I see that there is option to disable axes flipping, but this SHOULD NOT be default behaviour

@LeXXik
Copy link

LeXXik commented Sep 11, 2025

I usually use the arrows as an indication of which direction is a positive or negative axis in relation to the object. I can see it by selecting an entity. With flipping arrows, I would have to move the object to see how the values change in order to find out the same info. Not sure I like it, but not going to fuss about it either. A matter of habbit I guess. Scale and rotation are fine for me.

@kpal81xd
Copy link
Contributor Author

kpal81xd commented Sep 11, 2025

The axis flipping was added so that the gizmos would still be reachable if covered by other parts (i.e.. the planes).

The line connected to the center was removed to show direction but seems like its not clear enough.

I am going to remove the axis flipping in favor of better positioning of planes (like how Blender and Unity handle it)

@kpal81xd kpal81xd changed the title Updated gizmos for translate/rotate/scale Gizmo overhaul for translate/rotate/scale Sep 18, 2025
@kpal81xd kpal81xd requested a review from Maksims October 15, 2025 14:16
@Maksims
Copy link
Collaborator

Maksims commented Oct 22, 2025

When flying with WASDQE, raycasting is not happening, only when mouse is moved, leading to "croppy" movement of the gizmos.

Video shows how it works currently (correct), and how it works with this PR (incorrect).

2025-10-22.15-10-46.mp4

@Maksims
Copy link
Collaborator

Maksims commented Oct 22, 2025 •
edited
Loading

Regression:

It is not possible with a new Gizmo (this PR) to grab object, and use look around (right mouse button) while dragging the object.

Video below shows current behavior, that allows to drag object, and re-orient camera while doing so, while the new gizmo, simply ignores right click, leading to inability to re-orient, which forces to release first, re-orient, and then grab again. We use look around with WASD in our projects pretty much everywhere, and this will be a regression in UX.

2025-10-22.15-15-16.mp4

@Maksims
Copy link
Collaborator

Maksims commented Oct 22, 2025

While new rotation gizmo visually is an upgrade, it's math is changed from the current one, and behaves inconsistently. Depending on steepness and where the circle is grabbed from, the rotation direction will not be towards the mouse, but will move to some offset for some reason.

Here is an image, with blue pointer - where mouse is, and red line - where the rotation vector is pointing (wrong), while it should be pointing as a green line (correct). Current gizmos are doing the correct math currently.

image

Video below shows current correct and clear behavior, then shows this PR gizmo with weird offset when rotating:

2025-10-22.15-25-52.mp4

@Maksims
Copy link
Collaborator

Maksims commented Oct 22, 2025

Regression with multi-selection and local space gizmos.

Currently, when multi-selecting, and using local space, gizmo will be positioned at the last selected entity, and will be rotated based on that entity. So manipulating that gizmo, behaving same as manipulating a single entity, no funky weird stuff. Other entities will transform in their local space.

With this PR, the rotation of gizmo will be based on last selected entity, but the position will be based on center of selection's AABB - so when you interact with the gizmo, it does not follow mouse at all, and moves around in weird directions. Also when pointer up, the gizmo will not be where your mouse is, and be moved to another average place, with more complex selections, user has to "chase" the gizmo around. And won't be able to move objects where they expect.

Video shows, how it is now (correct), and how it is with this PR:

2025-10-22.16-31-52.mp4

@Maksims
Copy link
Collaborator

Maksims commented Oct 22, 2025 •
edited
Loading

On Classic gizmos:

A few new features that feels good:

  1. Rotation using view-aligned axis - feels great, with rotation motion of mouse around the object.
  2. Visuals of rotation gizmo - is a good upgrade vs current one.
  3. Axes guides changes - generally feels like an improvement.

Some that feels as downgrade in addition to logical described in messages above:

  1. Translation gizmo visually feels as a downgrade, lines are too thin, rectangle is not solid, feels too loud, and does not help to visually see axis arrows.
  2. When we are axis-aligned with rotation gizmo, then "big circle" - is not needed, and could be hidden.

On "default" gizmos (new):

  1. Translation gizmos have arrows shown for some reason when moving, unnecessary obstruction from seeing what we are translating.
  2. Colors are dull, and easy to mix with scene.
  3. Hovering states feel too busy and convoluted, could be cleaner and more simple.
  4. Why it is needed in the first place, except rotation gizmo rotation on non-axis, and translation on screen-plane - there is no improvements, or benefits of having different gizmos.

Why not make current (classic) gizmo behavior slightly better, and simply ship it, without complicating code-base with two versions of gizmos, and also splitting users with two versions of gizmos? Why complicating it all?

@kpal81xd
Copy link
Contributor Author

kpal81xd commented Oct 28, 2025

@Maksims thanks again for the QA review 😄

  1. & 2. For flying and rotating while holding the gizmo I have added (surprised this slipped though earlier)

  2. The rotation was changed to match Blender to rotating slight angles becomes easier but this makes the guide angle obsolete and requires another guide to show rotation. Scrapped the blender rotation and reverted to the old rotation style

  3. Local space gizmo position yep I agree it makes no sense to use average when spaces are different so it uses the last selection space for the gizmos transform

@Maksims
Copy link
Collaborator

Maksims commented Oct 28, 2025

Let us use this gizmos in work for a day, so we can battle test it, and see if we are all good.

@Maksims
Copy link
Collaborator

Maksims commented Oct 31, 2025 •
edited
Loading

Minor one, but nonetheless:

When using ortho camera, the rectangle in translate gizmo, is flipping around - this is actually a current behavior also.
I'm wandering if it has to flip at all.

But other small bit, is when rectangle is flipped, the length of an arrow, is not extended to the middle of the gizmo:

Current:
image

New:
image

Notice that red (X) axis line, starts not from middle when rectangle is flipped, but from far away, making it non-hoverable from the middle.

Also the line thickness feels like less than 1 pixel, making it very thing compared to other lines.

Also rectangle style, I personally like the current one way more, than this solid one.

@kpal81xd
Copy link
Contributor Author

kpal81xd commented Nov 3, 2025

Minor one, but nonetheless:

When using ortho camera, the rectangle in translate gizmo, is flipping around - this is actually a current behavior also. I'm wandering if it has to flip at all.

But other small bit, is when rectangle is flipped, the length of an arrow, is not extended to the middle of the gizmo:

Current: image

New: image

Notice that red (X) axis line, starts not from middle when rectangle is flipped, but from far away, making it non-hoverable from the middle.

Also the line thickness feels like less than 1 pixel, making it very thing compared to other lines.

Also rectangle style, I personally like the current one way more, than this solid one.

@Maksims thanks for testing 🙂 . I will probably do some follow up PRs in the engine down the road to address the inconsistencies in the gizmo design like the line thickness, length and the rectangle opacity but this PR I just want to make sure they function at least as good as the existing ones.

@kpal81xd kpal81xd merged commit 2f77a90 into main Nov 3, 2025
3 checks passed
@kpal81xd kpal81xd deleted the gizmos branch November 3, 2025 15:04
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@willeastcott willeastcott willeastcott approved these changes

@Maksims Maksims Awaiting requested review from Maksims

Assignees

@kpal81xd kpal81xd

Labels

area: editor interface area: viewport enhancement New feature or request

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

7 participants

@kpal81xd @Maksims @yaustar @OlegGedzjuns @LeXXik @willeastcott