search

metafizzy / zdog

Flat, round, designer-friendly pseudo-3D engine for canvas & SVG
https://zzz.dog
10.39k stars 394 forks source link

Add Versor Dragging? #13

Open mxfh opened 5 years ago

mxfh commented 5 years ago

Looks to me like the behaviour or of the dragger tool is working in euler angles, not quaternions. As is the vector.js has only euler rotation modes. Is it planned to add this or even a known issue?

for an example of versor dragging see this https://observablehq.com/@d3/versor-dragging and the comparison here: https://www.jasondavies.com/maps/rotate/

Maybe have a look if this versor library seems like a good dependency to add: https://github.com/Fil/versor

desandro commented 5 years ago

Thanks for this feature request. Yeah, all the underlying angle geometry uses euler angles. I understand the benefit of quaternions and matrices, but I've never been able to wrap my head around them. For my purposes, they felt like overkill. That said, I'm willing to reconsider them if there's a killer feature I'm missing out on.

Add a 👍 reaction to this issue if you would like to see this feature added. Do not add +1 comments — They will be deleted.

mxfh commented 5 years ago

Check the interactive side-by-side comparison in the "Interactive Rotations" paragraph, if you think its worth it: https://www.jasondavies.com/maps/rotate/

Still have to fix my own (shame on me.), so I know it's intimidating looking, but in the end more natural behaving and even easier to grasp, once you switch the paradigm from euler angles. Did some WebGL and Transformation Matrix and Versor stuff in between then and now and versors are definitly worth it. Just wanted to point out that fils version even supports tweening on versors now. Have a long weekend ahead, so maybe I could even put something together.

jrus commented 5 years ago

You might enjoy reading http://marctenbosch.com/quaternions/

desandro commented 5 years ago

@jrus Yeah, Marc Ten Bosch's proposal a couple months back. Unfortunately, I'm not as well-versed in 3D graphic math so all the concepts flew over my head. A JavaScript-port of his concepts would be helpful for me.

Neon22 commented 5 years ago

Three.js has a quaternion implementation with sauce.

IIRC minimum you need is slerp to do the interpolation and setfromEuler to create one. (and their dependencies which will include normalise etc).