Comment by romwell | Hacker News Reader

Comment by romwell | Hacker News Reader

This talks about one of my pet peeves with a lot of 3D software: they don't use Arcball[1] interface for rotation.

Autodesk products do (3DSmax, Maya), but Blender and OpenSCAD don't. And when I worked at Roblox, I couldn't convince the PM to let me implement it, because the users got by with whatever was there — and if they wanted more, they could use something else (...which they did, and Roblox stock reflected that in 2022).

Arcball is based on quaternions[2] (using exp for interpolation).

It's the only interface with these properties:

1. Any rotation can be accomplished with a single drag

2. No gimbal locks

3. Tracing a closed loop with a sequence of drags results in coming back to where you started

Once you formalize this, you can prove it mathematically (ultimately, this comes from unit quaternions giving a 2-cover of SO(3) in the same way unit complex numbers giving exactly the rotations of a circle).

For anyone interested, here is my reference implementation of Quaternions / Arcball that you can play with on the page:

https://romankogan.net/math/arcball_js/index.html

The code is very-commented Java (Processing library, running in JavaScript by the magic of ProcessingJS).

It's one way you can feel the fancy math.

Your hands and body will understand quaternions before your brain does.

If you ever work on 3D software, please use this, and thanks in advance <3

[1] Arcball: http://courses.cms.caltech.edu/cs171/assignments/hw3/hw3-not...

[2] Quaternions for rotations: https://en.wikipedia.org/wiki/Quaternions_and_spatial_rotati...

[3] Arcball in Processing: https://romankogan.net/math/arcball_js/index.html

why does it feel so much worse when you don't drag from the middle and instead from the e.g right side? It feels stuck and sometimes it snaps. If the point from which rotations are calculated changes then I think it should somehow be visually obvious what this means for the rotation and be shown on the screen

Thanks for the feedback!

Imagine you're spinning a globe with your finger. Obviously not much would happen if you poked outside the globe.

And while your finger is on the globe, you can't point at the sky (unless you finger is, well, stuck to the globe while you're rotating it - pointing to the sky would let go of the globe).

This is what you're doing here, and absolutely, I should add a visual representation for the globe and where you're poking it when you hold the mouse button down.

You feel "stuck" when the cursor attempts to leave the globe. And moving the cursor around that boundary is how you rotate around the axis facing poking from the screen.

This behavior can be changed/customized to an extent, I picked what felt good to me here.

> Imagine you're spinning a globe with your finger. Obviously not much would happen if you poked outside the globe.

And this is why arcball is not a good solution. I'm not putting my finger on a global. I'm spinning a world, terrain, airplane, etc. There's no "ball" so arc"ball" doesn't fit.

It gets worse. What if there is a ball but it's say 4 cm across on my screen. When I rotate with "arcball" am I touch that ball or some imaginary ball much larger than the visible ball. This problem exists all over depending on the thing I'm trying to rotate, arcball won't match.

> I'm spinning a world [...] there's no "ball"

I don't think I understand you, unless you insist that the Earth is flat :)

>It gets worse. What if there is a ball but it's say 4 cm across on my screen.

Then you zoom in / adjust gizmo size / etc. Surely any interface can be made unusable if you shrink it down far enough.

The arcball gizmo is usually visible; I was too lazy to paint a nice one in a bare-bones demo.

Oooh, yeah. This really bothered me too! Its behaviour is really intuitive when you strat with a drag from the middle, but even starting on the edge of the pink cube really makes it freak out.

This essentially forces you to start from the middle, but then you don't seem to be able to do any rotation around the axis pointing out of the screen. To do that rotation your best bet is to click and drag around an inscribed circle - but that in turn means you can't rotate around any other axis in the same movement without running into freak-out behaviour. And anything between those two extremes doesn't really behave intuitively.

Well, FWIW I increased the radius of the gizmo to 1/3 from 1/4, and made it visible.

I'm still not handling drags outside the canvas area - those will cause jumps, but everything else should feel better.

You probably clicked outside the ball. You can't see it, but the radius is 1/4 of the canvas width.

any chance to make this work on mobile?

I'm on mobile right now; https://asliceofrendering.com/camera/2019/11/30/ArcballCamer... helped me understand what arkball is about

>any chance to make this work on mobile?

I wrote it a while ago with ProcessingJS, whose support for touch events was lacking.

Will try to fix it and/or rewrite in P5JS, stay tuned :)

Here's a nice arcball demo that does work on mobile (and also uses multi touch, which allows you to do things which are a pain with the single cursor of a mouse, like rotating about the camera axis) https://threejs.org/examples/misc_controls_arcball.html

See, I don't think it's nice because it's not a proper arcball implementation.

This is what my pet peeve is about!

* There's gimbal lock at 180 degrees: you can only do some rotations with a single drag, and others require several

* Orient the gun so that the barrel is point straight at you, with handle down. Rotate it so that it continues pointing at you, but the handle points up. (It's.. not trivial with this interface).

* Drag the mouse horizontally along the top edge of the screen. I have no idea what's going on with the rotation.

Oh, and here's the thing that only arcball can do:

* Reset the rotation. Mark a rectangle on your screen (or put a pop-up window, e.g. the on-screen keyboard in Windows, over the demo). Start at a corner, and drag the mouse along the four edges, returning to the same position. The gun should return to the same initial orientation.

* Now do the same, but release the mouse at the corners of the rectangle - so you do four drags along the same path. Where's the gun facing now?

thank you for the arcball information! i didn't know about this

Reply on news.ycombinator.com