How to rotate mesh instead of the camera?

[amarneethi]

http://babylonjs-playground.com/#A83GX#0

Hi All,

I have been playing with babylonjs for a couple of days now and excited about it. It's one of the few friendly/easier frameworks that I have come across so far. I even managed to import a couple of models into BJS successfully. But I have a problem and need your help. : )

This is the playground link, right now an arcrotatecamera rotates around a mesh. It gives an illusion that the mesh itself is being rotated, but when I move the object away from (0,0,0) it starts to show that the camera is rotating and not the object. Instead of such a camera hack, I would like to rotate the mesh itself from wherever it is, I googled and found a couple of topics in the forum, but the solutions are not as smooth or eased as the camera solution. It will be great if someone can help me on this. Cheers and thanks for your help in advance.

[GameMonetize]

Hello and welcome!

first of all thank you because I think I spend 50% of my time on the forum asking for Playground samples

Regarding your question, you can just handle pointer events directly:

http://babylonjs-playground.com/#A83GX#5

 

[amarneethi]

Hey Delta! This is awesome and it works even in my tab too. Thanks for your help.

I did a couple of tweaks so it doesn't start at (0,0) angle every time and also changed the division to 100 so the rotation is more smooth and slower.

I need one more help (if it isn't too much trouble  ). How do I ease the rotation when it starts/stops to rotate, right now its too rigid.

http://babylonjs-playground.com/#A83GX#7

Update: And ya, I have been reading a lot in the forums and found out that people always ask for a playground link. So attached one. Haha.

Edited February 4, 2016 by amarneethi
Update

[pardo]

amarneethi you could use the bezier curve to ease in / out the movement http://cubic-bezier.com/#0,0,.58,1

here you can find some code examples https://github.com/d3/d3-ease

[Wingnut]

Hi guys!
     We have some easing functions already built-into the BabylonJS framework.  They are often used with animations.

http://playground.babylonjs.com/#HH1U5#33

( This started as a larger Animation demo... http://playground.babylonjs.com/#HH1U5#5 )

Amarneethi, you might need to use animation to accomplish easing on your mesh rotation.  Mixing mouse-dragging and animation might be a challenge.  I don't know if I have the expertise to show you a way to do it, but maybe you can figure it out.  There might be others that can help, too, IF it can be done at all.  I'll give it some thought, and keep us posted if you figure out a way to make it happen.

When a drag starts, that's when you need to install an Animation on the mesh.  The problem is, at that moment, you will not know how far the user will drag the pointer, so it is impossible to set the ending angle of the rotation animation.  You will need the animation to start immediately when the drag starts, or else the user will see a delay.  But you can't start the animation because you don't know how far the user will drag, so you won't have an ending key for the animation.  Trouble.

Let's hope there is another way.  MAYBE... all you really want is ease-out like that caused by the .inertia property on an arcRotate camera.  You might be able to "fake" inertia, somehow.  Essentially, your rotation would just continue after the drag is complete, and then taper-off speed until it comes to a stop.  A guy might think about putting an animation on the mesh just after the drag-rotation ends, but that will not look smooth, because you don't know how fast the user dragged, and thus you won't know how fast the rotation was going when the dragging stopped.  You need to know that speed to make a speed taper-off animation at the end of the drag (a fake inertia).

I dunno.  I'm not sure that I am being helpful, here.  Sorry.  Maybe others will comment and have better/more ideas.

[amarneethi]

@Wingnut I have got an idea to implement the fake inertia after reading your post. Still have no idea about the initial easing as it starts to rotate. Will keep you posted if I successfully implement the fake inertia. But this makes me wonder how they managed to achieve the easing for the ArcRotateCamera, there must be a solution already in the Babylon source as the challenges that you mentioned applies to the arcRotateCamera rotation also. Interesting.

[Wingnut]

Yes, well thought.  I don't know if the ArcRotateCamera eases-in to moving.  I don't think so.  I think it only uses its inertia to "carry-on" a bit, after the drag has stopped.  Not sure.

But yes, find the inertia system in the ArcRotateCamera, and you might be on your way to your own inertia application.

https://github.com/BabylonJS/Babylon.js/blob/master/src/Cameras/babylon.arcRotateCamera.js#L380

It is not a simple thing.    ArcRotateCamera inertia happens for alpha pans, beta pans, and radius moves (mousewheel).  SOMEBODY knew what they were doing, eh?  Too bad it wasn't me.  heh

[Wingnut]

A bit more.  Maybe some folks can fix my thinking.

Inertia seems like a strange thing.  Think about this.  JS must keep doing processing of inertia, even if the user has closed their scene/browser.  But no, not really.  Yet... SOMETHING maintains some kind of "state", after the arcCam drag is complete and inertia has taken-over.

http://playground.babylonjs.com/#25MKTS

.inertia = 1.  On my machine, I can drag this camera panning at amazing speeds.  Too fast, and it has some problems with disappearing.  Medium speed... a-ok. 

WHILE it is still spinning on the alpha value, I can STILL do good .beta tilts and .radius mouse-wheeling.  COOL!  The scene... is maintaining an animation, that has no keys, and requires no user input!  Something is maintaining the inertia (and likely falling it off)... for us.  WEIRD!   "i before e... except when it's weird" 

How do they do that?    I have SO much to learn.

I just checked the rotating scene again.  Screen blank.  So, even in medium-speed inertia-coasting mode, it has a limited number of revolutions.  I wonder what that number is. 

Crank the camera.inertia = 5, (and press RUN again), and watch it go crazy with speed.  It goes blank (reaches max #revs) rather quickly, too.  Interesting!  We have all sorts of mad scientist experiments to do, eh Amarneethi?  Fun!

[amarneethi]

Haha. Its crazy, we definitely go to-do some mad scientist experiments. They definitely have something that maintains the state, the approach that I'm thinking of for inertia is to find when the mouse drag stops and note the last speed or the difference in rotation and keep rotating it a few frames after the drag by slowly reducing the rotation amount and eventually coming to zero. Yet to start coding, will keep it posted here. Cheers.

[amarneethi]

@Wingnut I think I almost cracked it  here is the updated playground scene. It works, but buggy.  Half the time it bounces back in the opposite direction, dunno why!
I think it can be fixed, will continue to work on it through this week.

http://babylonjs-playground.com/#CGXLT#3

[amarneethi]

@Wingnut It's done, its 98% perfect and I think I will use this method for now and improvise it later on when I need a 100% solution. Cheers!!!!

http://babylonjs-playground.com/#CGXLT#5

[Wingnut]

Hey, that's working great!  Wow!  Well done!

You're starting to scare me, A-man!    (I'm assuming your male.  BJS forum statistics favor that).

I tried to start a "Girls With Grids" campaign to get some more girls in here, but I found out that many guys come here to get AWAY from girls.

Your demo has quite a bit of mad scientist code in it.  Cool!  You're a genius, A!  I love it.  I better bookmark this one.

[amarneethi]

Haha! I'm a guy... Upload a profile pic to avoid confusions in the future and thanks man. This is my first time in any forum, never thought it would be so much fun and engaging.
Will keep coming often! Let's celebrate... Lol.

[Wingnut]

Still partying, A?  I bet so.  hehe

Ya know... your whole project here... has some rather interesting "big picture" stuff to it.  If you enjoy 420 baked goods, engage now.    You'll need it for this.

When you de-commandeered the mouse from the camera, and instead attached it to a mesh (or the whole scene-group), you entered a new world (space).

Let's say you wanted to do a "fly-through", showing users THIS model, then over to THAT model, etc etc... most would immediately say "Yeah, we need a camera path, with camera.targets set for the entire fly, and easing between keys of the path."  (also easing between target changes)

The less common way... would be to move featured models, or fly the entire scene... past a stationary camera.

As you can tell, BabylonJS and most other webGL frameworks... sort of "push" us in the "fly the camera, not the scene" -direction, eh?  I think maybe that is because we must do the same in real life.  We haven't yet learned how to pull the planet rotation until a tropical beach is under our feet.  Generally, we must transport the camera... and our butt... to the beach.

So, many of us... tend to take the camera to the view, and not drag the view to the camera.  But you... amarneethi... you decided not to follow the herd... and decided to treat your web GL scene... as if you were in a modeling software package.  You needed the mesh to spin around and face you.  You would probably make a rather good supervisor/boss, because you insist that the situation come to your office.  You are much too busy and important to fly to the situation yourself. 

Weird, eh?  What personality traits can be deduced... from seeing how folks treat BabylonJS scenes and worldSpaces, eh?  LocalSpaces and worldSpaces, and transformations.  Who comes to who?  What is presented to what?  Yevver think about these strange things?  (anyone is free to jump-in, eh?  *nod*).  The parade marches past the people.  But amarneethi marches the people past the parade. 

[dbawel]

Hello All,

 

I'm currently rotating specific meshes in my scene using pointerdown events. However, I would like to only have the objects rotat when I am holding down a keyboard key such as the "Alt" key (or any other); otherwise, the mouse pointerdown will be used for other operations. Does anyone have the time to add a key down event to the pointerdown event in order to rotate a mesh? I'm sure I could find examples in Javascript and spend time through experimentation to get this to work, but if someone could simply spend a couple of minutes altering one of the playground scenes in this post so that the objects only rotate when a pointerdown event and a keypad key down event are used together - this would save me potentially allot of time finding examples and trying until I get the result.

I know this must be qyuite simple, but I have yet to view and example in Java Script as well as to write this into a scene - so for me, this would allow me to focus on the more difficult functions I'm currently building. So if someone has the time to modify one of the existing playground scenes, it would be much appriciated.

Thank you,

DB

[Wingnut]

Hi DB, good to talk to you again.  Hope you've been ok.

http://playground.babylonjs.com/#1HXY4E#4

Its not exactly what you asked-for, but its not bad.  Hold ALT and pick repeatedly... 30 degree per-click X rots.  Hold CONTROL for Y rots.  Hold SHIFT for Z rots.

Then it all changes.  All the bucky keys switch duties.    I need a currentMesh.bakeCurrentRotationalTransformIntoVertices() after every click, or something.  Maybe bakeCurrentOrientationIntoVertices()?  I need to bake-in the rotation, but not the position.  (huh?)

I "mashed" the "taters".  (mess-up my rotational axes with each click).

I thought I could fix it with 'Local' and 'World', but it didn't pay-off.  Hopefully, others will do better than I.

Really, we need all three, again.  bakeCurrentRotation(), bakeCurrentPosition(), bakeCurrentScale();  (drool)  (Wingy, STOP TALKING SO MUCH!)

Oh, I know.  I can rotate, then move the mesh.position back to 0, 0, 0 for a moment, then bakeCurrentTransformIntoVertices() (which will bake ONLY rotational factors) and then move back to old .position.  Hmm...

http://playground.babylonjs.com/#1HXY4E#5

YAY!  Now the control, alt, and shift... quit trying to do each others' duties.  They are permanently assigned.

[dbawel]

Hi Wingnut,

It's good to be back. I've been away taking care of my family. My Mother in Law has been in a cancer hospital for several weeks, but recently my Wife's Brother (who lives in Thailand as my Wife is Thai)  fell ill at age 35 with a blood disease and when admitted to the hospital, went into a coma. So I was able to take my Wife and her Mother out of the hospital and get them to Thailand quickly - but he passed away a few hours before they arrived. There were a great deal of other difficult things occurring at the time, so the combination of all these events kept me out of the game for quite a while.

However, all these things must pass for all people, so it was just the time for these things to occur. I'm now trying to get my Mother in Law back into treatment, which is proving most difficult since she left the US for Thailand to be with her Son. So there you go - I hope you don't regret asking, and I haven't had any time to speak about these things, so I just coming to terms with it all now. But I need to deal with everything eventually.

Anyway, thank you for your playground scene. It works great, and I shouldn't have any issues incorporating into my scene. I hope so, as it's a bit more extensive than I thought I might receive back from my question - but that has always been your way - to take a task and push it as far as you possibly are able. But this is why your help is always great help. There is much more function in your exmple scene than I currently require, but I'm certain that in the near future I will be using functions similar in operation to what you posted.

Again, thank you for your help, and I'm glad to be back working in BJS and on the forum.

Thanks,

DB

 

[Wingnut]

Somebody has a unique drag-rotater here.  http://www.babylonjs-playground.com/#2AKWXH#2

Bobby Razowsky.  

Hey Amarneethi, don't hate me... I wasn't hiding that one from you.  I just found it.  Feels like Bob has a little inertia or something happening there, too.  Kind of a sleepy outer space feel to that "tater".  You might want to take a sniff.

@dbawel Yeah, you've certainly gotten 100 LBS of crap shoveled into your 5 LB bucket, eh?  Wow.  Emotions and money and hard decisions... what a miserable scene.  At a certain point, I bet you become somewhat numb, out of pure self-preservation needs.  It's hard to imagine... and it's not something I seek to imagine. 

Sorry, bud.  I'd make it better if I could.  We're all hoping it turns out as best it can.  Sorry to hear about your Uncle... age 35... much much too young.  And your poor mother-in-law... what a rough trail for her.  Unreal.  Too sad.  Sorry.  I wish I could fix it all for ya.  :/

[amarneethi]

@Wingnut : Omg! that playground is awesome. Great find. And it's really not about marching against the parade Haha. I would gladly rotate the camera instead of the mesh if it served my apps performance as it saves me from the frustration to code extra *lol*. The user has to move the mesh to either right or left (in camera space or screen space) once it is rotated, now with a target camera that is impossible as the object will always be at the center of the screen, also the scene involves shadows based on the mesh's rotation. I can still rotate the whole scene along with the camera including the lights and everything so it will look like to the user as if he is rotating the mesh where we are actually rotating the whole world around the model, which kinda sounds like a scene from a Nolan movie. But then I found out the gaping hole, that you cant move the mesh in screen space if you did that. But when I rotate the mesh, its easier for me to move it around the scene and screen space that's all.

@dbawel Sorry for the loss and welcome back

[Vousk-prod.]

On 6/2/2016 at 6:45 PM, amarneethi said:

@Wingnut It's done, its 98% perfect and I think I will use this method for now and improvise it later on when I need a 100% solution. Cheers!!!!

http://babylonjs-playground.com/#CGXLT#5

Yep there is still something very disturbing for the final user : when your object is in default position, every mouse movement is perfectly followed by the object, but once horizontaly rotated, the vertical movements rotate the object in unexpected ways...

[Nockawa]

6 minutes ago, Vousk-prod. said:

Yep there is still something very disturbing for the final user : when your object is in default position, every mouse movement is perfectly followed by the object, but once horizontaly rotated, the vertical movements rotate the object in unexpected ways...

Yes, this is because the rotation has to be in camera space and not in the object local space.

So you have to first put the object in camera space (by mul its worldmtx by the invert of the camera's world), then clean the translation information, perform the rotation, and mul back the object in world. I have the code working locally, I'll do a playground later today.

var degToRad = Math.PI / 180;
var rotatingMatrix = BABYLON.Matrix.RotationYawPitchRoll(deltaPos.x * degToRad, -deltaPos.y * degToRad, 0);

var nodetoworld = mainNode.getWorldMatrix();
var wmtx = self.camera.getWorldMatrix().clone();
var invwmtx = wmtx.clone();
invwmtx.invert();
wmtx.setTranslation(BABYLON.Vector3.Zero())
invwmtx.setTranslation(BABYLON.Vector3.Zero())

mainNode.setPivotMatrix(initialTransformationMatrix.multiply(invwmtx).multiply(rotatingMatrix).multiply(wmtx));

 

[Nockawa]

4 hours ago, Vousk-prod. said:

Yep there is still something very disturbing for the final user : when your object is in default position, every mouse movement is perfectly followed by the object, but once horizontaly rotated, the vertical movements rotate the object in unexpected ways...

Ok, take a look at this one: http://babylonjs-playground.com/#DKROG#2

I believe it's the best way to go, note that this code is generally enhanced to also support Roll (Z axis) rotation by using using the shift key of the keyboard to apply Roll on mouse X move instead of Yaw. I didn't implement inertia either, but it's not that hard to do too...

Edit: ok i was lazy, so I implemented the Roll also on Shift key down: http://babylonjs-playground.com/#DKROG#4

[Wingnut]

Hey, this Nockawa guy really knows his matrix wrangling!  (I'm assuming Nockawa is male) 

Welcome to the forum, Nockawa, and thanks for the input and playground.  Nice work!  You're a God!

@Vousk-prod.  Yeah, I agree.  Good to see you again, too.  For those who don't know, VP is a God of animating, primarily stop-action.  Pretty cool.  I don't know how anyone has the patience for that.  erf.  Maybe I shouldn't tell you this, but I submitted your name and some links... to Aardman "speculation portfolios" (potential future employees/contractors).  I talked you up pretty highly, but your work does that better than I.  I also showed them the post in The Wingnut Chronicles where you said that you'd love to work with Aardman.   I probably ruined your chances... but... maybe not. 

[amarneethi]

@Nockawa I had a look at your playground, with all respect the movement looks very similar to what it is in my other playground scene. Maybe this is because the inertia is not implemented yet (as you mentioned) or something else, I dunno. But thanks for pitching in buddy.

@Vousk-prod. Yeah you are right about the movement being followed perfectly, but that can be fixed by increasing the factor from 300 to 500 at line 85 and 86 in the playground scene. As for the unexpected rotation, I have no idea how to fix that. haha. Let's see if someone from the forum can throw some light on the solution.

http://babylonjs-playground.com/#CGXLT#5

[Vousk-prod.]

When saying it doesn't follow mouse movement, I meant that when object is more or less horizontaly rotated, vertical mouse movement rotates mesh in unexpected directions. This is what Nockawa corrected in its example.