Animation - center + rotation axis

[AllForum]

Hello,

 

I am using the BABYLON.Animation object to rotate a mesh :
new BABYLON.Animation("tutoAnimation", "rotation.y",...

 

I would like to do an animation like opening a door but sometimes with another axis than Y axis.

I also will have to set the rotation center.

 

[Edit]I tried to change the rotation center by setting the pivot matrix... but  I do not understand why it does not always work. It seems to work with a box but not with a triangle mesh. I can't find why and I am not sure that I use the good method. The pivot finally works and I corrected a javascript error (funny language ! ). So it's ok for the rotation center.

I still need advices to custom the rotation axis...[/Edit]

 

What is the simplest way to do simple animations like a rotation (to move a door for example) ?

What keywords must I search on the forum/doc/web to find help to do that ?

 

Thanks

[gryff]

What is the simplest way to do simple animations like a rotation (to move a door for example) ?

 

@AllForum: I'm not a very good javascripter so I have done it from my 3d modeling software (blender)

 

Desk with no rig

 

It is quite easy to set pivot points and rotate appropriately (and translate with the above example).

 

I hope that helps, although, I suspect you are looking for a method of doing it with javascript only.

 

cheers, gryff

[JCPalmer]

For something like a door, my simplest way would be make it a full 6 sided mesh, then add a 2 dimensional plane, called hinge, that was positioned as close as possible to the door, parallel to the hinge side.  Set the parent of the door to be the hinge pane.  Rotate the hinge pane.

 

You would not actually be pivoting from the corner of the hinge, but you did say simplest.

 

I have done some rotating of parented stuff.  Did a playground on it.  Not fully working due to the large source size,  but paste the source from this thread in the playground to see.  http://www.html5gamedevs.com/topic/8218-i-might-have-broke-the-playground/?hl=%2Bplayground+%2Bbroke

 

FYI, Gus the gingerbread man is one of the .blend files, parent_mesh.blend, that is part of the blender-test directory in Github, for regression testing.  In the next release,  the launch html will add this animation to prove the parenting is actually working.  It is not working in TOB 1.0.0 for the .babylon output, but already fixed for 1.0.1.  Also added toggle buttons to 'pause-play', & 'conceive-orphan'

[AllForum]

Thanks for your answers : I will look at the code next week to see :

- what Gryff means with "rotate appropriately".

- what JCPalmer means with " Rotate the hinge pane".

 

Today I can animate a door. I used Babylon as much as possible because I am a javascript beginner... Here is my approach :

1- I create an animation

var keys = [];keys.push({ frame: 0, value: 0 });keys.push({ frame: 50, value: -1.57 });keys.push({ frame: 100, value: 0 });var animation = new BABYLON.Animation("Animation", "rotation.y", 30,                                     BABYLON.Animation.ANIMATIONTYPE_FLOAT,                                     BABYLON.Animation.ANIMATIONLOOPMODE_RELATIVE);

2- I set the door.position and door.setPivotMatrix to define the rotation center.

3- I use the animation :

scene.beginAnimation(door, 0, 50, false); opens the door

scene.beginAnimation(door, 50, 100, false); closes the door

 

But with this approach I don't know how to change the rotation axis. And I can't animate a desk like Gryff.

 

So I will look at your methods.

Thanks.

 

[JCPalmer]

Just for entertainment, I remembered seeing a really complex way to do a door.  I made a video, since it was a .blend file with some weird lever you rotated to may things move.  Gryff, If you want, and know how to turn this into a "proper" Blender animation, I would like see what it might look like exported to Babylon.  Maybe multiple concurrent animations.  Might be a good candidate for blender-test.

 

https://www.dropbox.com/s/2rw7jheyfdoyaoa/complex_door.mp4?dl=0

[JCPalmer]

AllForum,

 

Let me go one step further, cause you are actually do "proper" animation, probably wrong.  You probably want to do a InterpolateValueAction with the value being the rotation of the hinge mesh.  InterpolateValueAction will do all the 'frames' for you.  Pseudo code:

 

1- instance 6 sided mesh 'door'

2- instance 1 sided mesh 'hinge', placed in the same position as the hinge face of door

3- door.parent = hinge;

4- Build you animation in relative terms like you are doing.

5 - Register it as an BABYLON.ExecuteCodeAction to get it called when you want.

 

This brings up 2 points:

- This action can be registered to happen without directly calling execute yourself (I have not done this, but I know it is the way to go)

- The property to interpolate is in absolute terms, not an incremental or delta value.  Means if you have more than one door along a non-parallel, it will not work.  A re-usability issue in my opinion.

 

You are a javascript guy, check out the source.  There is a tuturial wt playground on actions somewhere too.

[gryff]

But with this approach I don't know how to change the rotation axis. And I can't animate a desk like Gryff.

 

AllForum, if your method is working and the door rotates around the y-axis then try this to change the axis of rotation.

 

(I am assuming the door has its largest dimensions along the XY axis and the thickness of the door is along the z axis)

 

Set the pivot point to be along the top of the door, then change "rotation.y" to "rotation.x" - it should make the door behave more like a flap now.

 

Jeff's method will work too - place the hinge object at the top of the door and then make the hinge the door's parent and again rotate around x

 

cheers, gryff

[gryff]

Gryff, If you want, and know how to turn this into a "proper" Blender animation, I would like see what it might look like exported to Babylon.

 

Pretty easy to create something like that in Blender Jeff.

 

Will do it tomorrow.

 

cheers, gryff

[AllForum]

 change "rotation.y" to "rotation.x" - it should make the door behave more like a flap now.

 

I would like to do a rotation around an arbitrary axis : the rotation axis is not always aligned with the axes of the coordinate system.

How to open these classical (!) windows for example : http://designmag.fr/wp-content/uploads/domo-dom-maison-atypique-par-architekt-lemanski.jpg

 

From JCPalmer's playground I did some tries with the quaternions. The results are not good but maybe there is a way.

When creating an animation

Animation(name, targetProperty, framePerSecond, dataType, loopMode)

the dataType can be :

BABYLON.Animation.ANIMATIONTYPE_QUATERNIONBABYLON.Animation.ANIMATIONTYPE_MATRIX

I tried to set :

targetProperty to "rotation" to manage the whole rotation and not only a system axis.

the animation key values with BABYLON.Quaternion.RotationAxis(rotation_axis, angle) to set my own rotation axis.

 

The result is not good but there is maybe a way.

Do you know how to use these animation types ? Do I have to do something with the mesh rotation like with the mesh position when I set the pivot ?

 

I am trying to use the animation object because it is simpler than managing myself the rotation state/start/stop/speed of all animated objects...

[gryff]

I would like to do a rotation around an arbitrary axis : the rotation axis is not always aligned with the axes of the coordinate system.

How to open these classical (!) windows for example : http://designmag.fr/wp-content/uploads/domo-dom-maison-atypique-par-architekt-lemanski.jpg

 

Like this AllForum?

 

The "Wonderland" Window

 

Click on the green "window" to open and close it. The rotation is on a slanting axis. It is done by setting the blue frame as the parent of the green mesh (which has  the animation) -  then setting the position/angle of the blue frame.

 

Here is the blender file, the .babylon file and the html/javascript.

 

window.zip

 

Explore them at your leisure.

 

cheers, gryff

[AllForum]

Like this AllForum?

Exactly ! Many thanks for the files ! :)

 

I see that my data are different : my loaded object is already rotated in its coordinates. But with the rotation axis I can do the inverse rotation if needed.

 

I did a playground with your glass object. In the file there was 3 animations : 2 scale identities (?), a translation and a rotation. Your example works fine with the rotation alone so I keep only the rotation.

 

The initial scene : a box at the origine + the objet + the animation stopped.

http://www.babylonjs.com/playground/#19IOXL#1

I translate and rotate the object :

http://www.babylonjs.com/playground/#19IOXL#2

Then I start the animation : the position of the object  is correct but the rotation is no more taken into account...

It seems a bug for me...

http://www.babylonjs.com/playground/#19IOXL#3

And if I add a parent (the box) to the object and I translate and I rotate the parent like in your example then it works... JCPalmer uses the same approach with the "hinge" parent.

http://www.babylonjs.com/playground/#19IOXL#4

 

I think I will work on other things because I am doing "reverse ingineering" and I am not very efficient...

I will come back on animations later.

 

Thanks for your help.

[gryff]

And if I add a parent (the box) to the object and I translate and I rotate the parent like in your example then it works... JCPalmer uses the same approach with the "hinge" parent.
http://www.babylonjs...round/#19IOXL#4

 

That is it exactly.  Use the parent to position the window glass then apply the simple animation to the glass only.

 

As for the location/scale keys in my example from Blender they can be deleted as you did. If I was building something other than a demo, I would have removed them.

 

cheers, gryff

[Soulangel]

Hi,

 

I have a issue with the animation.

 

I try the sample animation on the box: Ok

I loaded my babylon object and I'd like animate a sub mesh of my model on the rotation.y, but doesn't work.

 

I try to apply the simple rotation on my mesh => KO

 

myMesh.rotation.y = 1.85;

 

I try with the rotate method => OK

 

myMesh.rotate(BABYLON.Axis.Y, 1.85, BABYLON.Space.LOCAL);

 

Accoding to me, the issue comes from there => apply the rotation on the my loaded mesh dosen't work, but why ?

Is it possible that the problem comes from the model I use ?

 

thanks for your help.

 

Soulangel

[Soulangel]

Ok, I understand why that didn't work.

 

The exporter for 3Ds max generates rotationQuaternion, so when Babylon parse the mesh, the priority is given to the rotationQuaternion.

 

So when I modified the rotation on my mesh this is never taken into account during the computeWorldMatrix method.

 

So, my ask: How i can modified the rotation with an animation on my mesh when the mesh have rotationQuaternion ?

 

Soulangel

[Soulangel]

I test to modify the code of AbstractMesh.prototype.computeWorldMatrix to fixe my problem (in green my add)

 

if (this.rotationQuaternion) {

    if (this.rotation.x != 0 || this.rotation.y != 0 || this.rotation.z !=0) {

        BABYLON.Quaternion.RotationYawPitchRollToRef(this.rotation.y, this.rotation.x, this.rotation.z, this.rotationQuaternion);

        this.rotation.y = this.rotation.y = this.rotation.z = 0;

    }

    this.rotationQuaternion.toRotationMatrix(this._localRotation);

    this._cache.rotationQuaternion.copyFrom(this.rotationQuaternion);

} else {

    BABYLON.Matrix.RotationYawPitchRollToRef(this.rotation.y, this.rotation.x, this.rotation.z, this._localRotation);

    this._cache.rotation.copyFrom(this.rotation);

}

 

is that correct ?

 

 

The animation with rotation.y works with that correction.