How to create gizmos?

Started by
6 comments, last by vinnyvicious 8 years, 9 months ago

I'm trying to write my first editor and i thought about getting started with the basics: translation, rotation and scale gizmos. How do you guys create gizmos? Are they actually models that you guys spawn upon the model?

Advertisement

I'm not familiar with the term 'gizmos'. Is that another word for widgets?

That sentence felt artificially silly. Like a parody of developer in-speak. laugh.png

I believe he's referring to when you select a 3d model you get the red/green/blue arrows on the three axis for moving the object, or the red/green/blue circles around each axis for rotation, etc.

Though I can't really answer the question other than the shapes are generally simple enough you could probably create them in code - or you could load a model for a single arrow or circle, orient it to the axis, give it vertex colors, etc. And then you need to do hit testing when the user moves the mouse or clicks to see if they are clicking on one of the models.

And then of course apply the appropriate adjustments to the model as the mouse is dragged.

Oh, and you'll probably want to render them with depth testing off so they draw on top of the model.

I believe he's referring to when you select a 3d model you get the red/green/blue arrows on the three axis for moving the object, or the red/green/blue circles around each axis for rotation, etc.

Yep. For no reason known to man, those are called "gizmos".

@OP: loading a model is a perfectly fine approach. Personally, I tend to just generate the gizmos at runtime - there is a reason they are composed entirely out of geometric primitives (spheres, cones, boxes, cylinders).

Tristam MacDonald. Ex-BigTech Software Engineer. Future farmer. [https://trist.am]

Yep. For no reason known to man, those are called "gizmos".


The reason is because that's what some popular 3D modelers called their widgets (which is not a universal term; widgets, gizmos, controls, elements, etc. are all used by different projects to mean the same thing) and since every single 3D artist and programmer had to be familiar with those tools and the in-game editing features were modeled off of them, they used the same terminology those tools used (even when the rest of the game's UI used a different term for other UI elements).

Sean Middleditch – Game Systems Engineer – Join my team!

I've looked into the code for some editors.

What I have seen become the most common thing, is that the editor will use actual models to represent the Gizmo's bits. And will quickly swap them out as needed. Some will use a procedural method but usually for the bar. Everything else is just a primitive.

To add functionality to the widget, you're going to use a context sensitive picking from the mouse's location to select one of the arms, and make it do something. This goes the same for just about every other gizmo.

To get an idea of how this works, look into the source code of other engine's. Don't go to Unreal's.... it's hard to find anything in that monstrocity. Try looking into Polycode, as it's really dumbed it down.

The tricky bit is when you have it grabbed and need to move it. As you are moving things in relation to your screen space. Make sure you compensate for that. The code I pointed to below shows how they went about that.

Here's the link.
The .h file

https://github.com/ivansafrin/Polycode/blob/master/IDE/Contents/Include/TransformGizmo.h

And then the implementation

https://github.com/ivansafrin/Polycode/blob/master/IDE/Contents/Source/TransformGizmo.cpp

It helps to read into other engines that are more complete than your own tongue.png

Sorry it's in cpp. If you use C# or Java, then it's still pretty easy to add this.

all pointers declarations Example
float *FloatPointer
are really just reference declarations in C# and Java.

You are looking for direct manipulation:

https://en.wikipedia.org/wiki/Direct_manipulation_interface

This is a good first reference:

http://www.codeproject.com/Articles/35139/Interactive-Techniques-in-Three-dimensional-Scenes

And the notes of this Siggraph course cover it all:

https://www.siggraph.org/s2002/conference/courses/crs20.html

I found the course notes a while ago online. PM me if you cannot and I can send them to you!

Amazing tutorials! Thank you guys. :)

This topic is closed to new replies.

Advertisement