Path Animation - an experiment with animation 4

[gryff 522]

I read the post by Metalx1000 about how to move a mesh along a path. I assumed from the replies that he/she is looking for away of doing it in code - but it can be done other ways.

 

My immediate thought was I can do that in Blender. So here is a simple example"

 

Path Animation

 

It is quite simple to do - here is a tutorial by IanScott888 which explains how. And he always explains things well.

 

Additions I made were to extend the path by adding more points (in Edit mode Extrude) and moving those points so that I was almost at my starting point. I created the animation, then back in Edit mode, I closed the loop (Alt C) . Then I selected the cube and baked the animation to it. Finally using the Blender addon, "Simplify FCurves" I reduced the number of key frames by half.

 

The blocks are done by instancing - so the file is quite small - 8kb.

 

So, as the song says, "I did it my way"

 

cheers, gryff

 

PS My Firefox updated itself a couple of days ago and I seem to be getting this in my Web Console:

 

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help http://xhr.spec.whatwg.org/

 

Does this have any consequences for babylon.js?

[Deltakosh 4315]

We should not do any synchronous XHR. Is it raised by babylon.js code?

[Deltakosh 4315]

Oh this is done by handjs so no problem

[gryff 522]

DK: here is the exact line:

 

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help http://xhr.spec.whatwg.org/     babylon.1.12-beta.js:9

 

As you see it references "babylon.1.12-beta.js:9"

 

cheers, gryff

[Deltakosh 4315]

How to do you get this line? On one of your demo?

[gryff 522]

How to do you get this line? On one of your demo?

 

Not just my stuff. It varies with the scene that is loading, so :

 

PSN Telecentres I get:

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help http://xhr.spec.whatwg.org/     babylon.1.5.3.js:6770 (old version of babylon)

WanaPlan :

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help http://xhr.spec.whatwg.org/      wanaplan.min.js:8 (very new babylon project?)

Train:

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help http://xhr.spec.whatwg.org/      hand.minified-1.2.js:1

 

Metalx1000 maze demo

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help http://xhr.spec.whatwg.org/       babylon.js:28

 

Your Instances Demo:

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help http://xhr.spec.whatwg.org/       babylon.database.js:55

 

As far as I can tell everything works and it does show as a warning not an error. Could it be a FireFox thing ? Their update of March 28th was an update from hell as far as WebGL.was concerned.

 

cheers, gryff

 

[Deltakosh 4315]

Davrous found where the problem is. We do a sync request for manifest. We have to find out a new way to do this:)

 

Thanks Gryff!

[Metalx1000 4]

This is a pretty good solution,

It's a lot simpler then some of the things I have come up with.
I'm just not really sure why you posted this here and not as a response to my question. 
Might have saved me some time if you had at lest posted a reply saying, "Hey, I have an answer in this thread here."

Anyway,  I'm still having a problem.  Creating a path this way creates key frames for the path, not the Cube.
Obviously it works, you did it.  So, I must be doing something wrong.  I must have skipped a step.
I can Follow the Path in Blender, but not in BabylonJS because the Cube doesn't have key frames.

 

How did you apply the key frames to the cube?

 

Thanks.

[gryff 522]

Sorry Metal, I thought the words Path Animation in the title might attract your attention. It was something I did as an experiment and went along with my previous three experiments. I also thought you were looking for a coding solution - not a Blender one. I should have posted a link though - you are correct. My apologies.

 

To attach the animation to the cube, select just the cube. Now hit the spacebar and type "bake" into the input box - you will see a "BakeAction" option. Check all the check boxes, hit OK and the Animation Timeline will be filled with keyframes.

 

More info here

 

Now, you can reduce the number of keyframes (in my case by more than 50%) with the cube still selected do the following steps:

 

1. Go to File->UserPreferences->Addons Tab->Add Curve -> and check the Simplify Curve addon.

2. Open a new Window and assign it to the Graph Editor - you will see all the F Curves for your cube Animation

3. Hit the spacebar and type "simpli" into the box.  Chose the "Simplify F Curve" option. An extra tool - "Simplify F-Curves" now appears in the toolbar on left of 3D window. There is just one option called "Error" which you adjust. It is very sensitive - so tweak it in small amounts.

4. You can play the animation while tweaking it and watch the changes to your F-curves in the Graph Editor window. Adjust until you are happy.

 

More info here

 

The one benefit of this method with Blender is it is automatically adjusting the rotation of the cube so that it is always perpendicular to the curve. - facing in the direction the cube is moving.

 

Hope the above helps. If you need more - let me know.

 

cheers, gryff

 

 

 

[gryff 522]

Metal, as an addition to the above post, here is a simple view of Blender as I reduce the number of frames.

 

GE = Graph Editor

AE = Action Editor (from the DopeSheet view)

 

The starting animation I had baked had 90 keyframes - applying a small error adjustment with Simplify FCurves reduced that to 27 keys in the Action Editor/Graph Editor/Timeline yet maintained the animation.

 

cheers, gryff

[Metalx1000 4]

Thanks gryff,

The Bake Animation option was what I needed.
Thanks for the post.

[ancientholiday 1]

Can we use this process to bake the animation into the camera movement?

Thanks gryff,

The Bake Animation option was what I needed.
Thanks for the post.

[gryff 522]

Well ancientholiday you can do this:

 

Camera Animation

 

Is that what you are looking for?

 

cheers, gryff

[ancientholiday 1]

Well ancientholiday you can do this:

 

Camera Animation

 

Is that what you are looking for?

 

cheers, gryff

Yes, I am looking for something like that!  I am new to bablyon.js and it seems that you did not need much code at all to implement the scene.  However instead of animating a box and parenting the camera (never parented anything before), I would like to just animate the camera in blender and export all the movement to babylonjs.  I would like to animate the camera on a click event.  In threejs alot of math is required to make the camera follow a spline.  It seems much easier to bake the animation into the camera from a blender camera path.  If that is what you have done, I will follow that example and go from there!

[JCPalmer 725]

I was not even aware there was a synchronous option for XHR.  To be fair, since my delivery plans for Babylon are as apps, I have done everything to avoid using a .babylon file.

 

The multi-pass implementation of the Blender exporter is good for having multiple exporters, which all use a very similar first pass to extract / process all the Blender info into near ready format.  The 2nd pass either writes a .babylon file or inline .js / .ts file.

 

The reason I am adding on to this thread is to see if there is any interest in putting either of 2 of the recent changes I have made to the code generator into the .babylon generator.

1. Inline textures.  Having fewer, but bigger files needed to construct a scene decreases latency.  Base64 textures are bigger, but when using a server with gzip the size increase was estimated at 3%.  As much as possible was put into pass 1 (a python library does all the heavy lifting).  I did not try to implement this for the .babylon generator, since FlieLoader would have to be modified to read it in.  There are legacy issues & well as use by other exporters, so I do not plan to edit this code.
2. Allow for changing how long a material continues to check if it is ready in the render loop.  The way I did this in the code generator was just to invert the default in the generated code.  When instancing the materials, you now have to override when you want to check forever.  This does not really transfer well to the .babylon format.  Something could be done though.

Lastly, I found when you export from a packed texture in a .blend file, that the file is every likely to be much larger than the original texture file.  This is because it is not compressed.  I have not done this yet, but was planning on adding a warning message to that effect when exporting a packed texture.

[gryff 522]

ancientholiday, Never tried to just bake the camera animation but here is a tutorial that does not use a cube - just animates the camera along a path. It does use an "empty" to change the cameras "lookat" position as the animation proceeds.

 

Camera Animation Tutorial

 

IMHO, not as good a tutorial as IanScott888's one.

 

Let us know how you progress.

 

cheers, gryff