Jump to content

Recommended Posts

QUESTION: How to animate many things? 

GOAL: review ALL types of  Animation Options available.

Reduce various animations into Patterns or Templates or MINIMUMS.

There are great docs on this... what follows are the practices of each.

RESULT: Animation-Type-Templates


         - eyes to look at stuff - mesh.lookAt()

         - a generic low-poly arm to grab stuff: bone animation - scene.beginAnimation() import from blender.

         - a generic IK arm - constraints

         - a morphing eyebrow - morph targets (minimum).

         - interpolate - random attributes like color, or opacity

         - a motion path

         - Blender Animation Ranges like: idle, jump, attack, die, win


          - Bone Animations - Review from docs

          - mesh.spinTo(), moveTo(), scaleTo()

          - Dynamic Animation (powerful?)

         - BABYLON.Animation.createAndStartAnimation()

There are a ton a great resources on all of these. 

Point is: They are all different Animation Types.

          Highlighting the tricky spots, referencing solutions, and...  the great docs and playgrounds that already exist.

           UPDATE: a long list of successful blender animation export  examples below. :)


Link to comment
Share on other sites

Ah yep, edited. Good to see you Delta. Thx. :)  

Don't need much but the safety-net! And expert insight is greatly valued!

I'll run through solutions for each Animation Option... piece of cake.

There will probably be tricks or improvements along the way.  

And questions, just not sure what yet. : )

Starting with: Excellent Eyeballs!

Eventually working toward... Morph an Eyebrow.

Describing the methodology...

Thx DK

Link to comment
Share on other sites

Aw c'mon, Falconoid...  back hoe, first thing.  :D  Or maybe just... ISS Canada Arm 2.  :)

Aren't we talking about animating non-mesh bones, here, and then wiring the weightedVertices of ANY mesh... to those bones?

So you end up with a library of common bone animations, yes?  It might be somewhat overwhelming to attempt to build a library of specific animated mesh.

Not sure.  But bone animations need to be included, somewhere, eh?

Eyeballs... just rock their gizmo rotations back and forth with a Math.sin "rocker" on the Y-axes.   Probably not worth storing in an archive of often-used animations.  Sure, a guy could have an animatePosX() (pitch), animateNegY() (yaw)... but eyes only rotate JUST SO FAR and they must stop. 

So, eyes are a "special use" of animatePosX and animateNegY... with limits.

An elbow uses SAME rotation funcs, yet different limits.  A front end loader, same funcs, different start/end limits.  EVERYTHING has specialized/specific animation behaviors... and it will be difficult to build re-usables... because of those specifics.

I once talked about mesh.spinTo(), moveTo(), scaleTo()... funcs.  Those are REALLY a great starting place... for easier animation, I think (And easy to code-up in a testing playground).  Mizewell do colorTo(), as well.  :) 

The 'to' part might be bad/wrong.  That indicates that you are animating from current orientation TO a new orientation. 

The way I use it below...  doesn't provide a TO.  Only an amount.  I think moveWithCollisions is also an amount, so we should probably keep it consistent.  Perhaps code-up spin() AND spinTo(), eh?  Build yourself a library of mesh movers... another layer of animation API above the BJS layer.

leftEye.gizmo.spin({ axis: y, radians: -1.3, speed: 25, [stopOnCollisions: true, pivotOffset: new BABYLON.Vector3(0, -0.8, 0)] });   [ optional params ]

Then the new spin() / spinTo() func would use a BABYLON.Animation.createAndStartAnimation() with its automatic valueType sensing, to build/start the animation for us.  Easy.   And, BABYLON.Animation.createAndStartAnimation() is "another layer of animation API"... in itself.  It was a late-add to BJS, created to make things easier.

If we had these 3/6 new funcs, would eyeball-animating tasks... be easy?   I think so.   *shrug*

Link to comment
Share on other sites

@Wingnut awesome. :)

Yes, I will make updates....Thank you!

Reusable... specifics, yes -> looking for MINIMUMS.

Collecting of starting points... for the things above. 

And the little bits of info that go along with the concept -> like you describe. Thanks!

Not a library, just animation methodology.

Experimentation and study, and if lucky reusability...

First up -> really great EYES!

Link to comment
Share on other sites


There it is.... mesh.spin... sitting at the top of the PG... waiting for someone to code it.  :)  Called from line 88.

There's a couple of demo calls in lines 183/184 that might be handy.

In fact... this playground contains about everything that any demented animation scientist would need... to create a seriously-animated mess.  heh.

I coded it a long time ago, and ever since, I've been scared of it (...due to high-addiction to high fun-levels).

Avoid thoughts like THIS. You could lose YEARS of your life... if you catch "Hey, I'll make a blue-ball animation in BJS JUST LIKE THE ONE IN THAT PICTURE" -animator's disease.  Really... be careful.  Animating is empowering, and thus.... highly-addictive.  Disney Dope.  :)

I also did some thinking on... speaking sentences... to do animating.

Move greenbox +y 12 -z 6 +x 12 speed 5 and spin bluetorus +y 1.3 speed 1 wait 4 scale yellowsphere +* 3 speed .001 and move camera +y 12 speed 3 wait 12 end.

hehe.  "Talk" an animation sequence!  Goofy.  Might have to try it someday.  :o

Link to comment
Share on other sites


Puts on hazmat suit before deep-diving wingy-links!!! :)

I will return with something from down there! Thank you (dut-dut-daaaaa..........).




   -> add > mesh > icosphere

   -> add > mesh > uv sphere. s (scale down).  place eye: x y z.


   -> select eye, edit mode, plane select mode. ctrl+select drag select top fan-plane, x (delete).

    ->edge select mode. select open ring of iris, f (fill with n-gon for better render).


   Select the whole eye, Materials, Plus sign button, New Material -> diffuse color, white. Apply.

   Select the colored iris, Materials, Plus sign button, New Material -> diffuse color, green. Apply.

   Select the n-gon, Materials, Plus sign button, New Material -> diffuse color, black, specular purple. Apply.


   -> shift+d (duplicate). g, x (move the eye over).

   Post-Process ( BLENDERFIXES: solutions updated from thread examples below ):

   -> Name each: head, eye_L, eye_R

   -> Apply RTS for each head and eyes: Object > Apply > Rotation, Translation, & Scale.

   -> Rotate head to look backwards so facing ctrl + numpad 1 NOT numpad + 1.

   -> Set rotation point of each eye: Set Origin > Origin to Center of Mass (volume)

   Export -> .gltf


Wingstrom, all your links have fun-overload potential. B)


Link to comment
Share on other sites

Blender?   Pft.  Just play-grind, baby. 

Or... Babylon export, mesh only, to .babylon file... assetsManager add-task load... party!

(Wingy scrapes-off all animation activity that has been performed in Blender, just in case some got-onto your .babylon file by accident.)

:)  (Wingy sprays all your mesh to remove any shapeKeys/morphing data.)

Bring in good clean mesh.  THEN... dynamic animation... from JS.  LOTS of power.  Yum.

Link to comment
Share on other sites

@Wingnut -  rotating oscillating skybox makes brain happy.


~ wingyworld... is very nice.

There are multiple things in there that are helpful...

- prototype pattern.

- .animation()

- keyframes, NICE!

- spinning cone (3-states) is helpful...

AND, that second link... is EXACTLY how Falconoid spends rest of life!


How did you know!?!

Lolz.... actually it does have really nice infinite mappings... not sure what that is called.

AND "Dynamic Animation", very cool with that...

Link to comment
Share on other sites

Animations coded-with BJS standard animation tools, or coded-with "Falconoid's new Animation Toolkit of Excellent Add-Functionality-To-Mesh Methods"?  ;)

If those new funcs are user-added to abstractMesh, then they don't work for lights and cameras... OR DO THEY?  Any camera or light that is parented to an invisible mesh... will have the same animation powers that ALL the new 'Falconized' mesh have, right?  Falconized mesh fly better/easier than standard BJS mesh.  ;)

*shrug*.  Not sure how to think about these things.    You seem a bit stuck on "make/store animations" instead of make/store super-friendly animation TOOLS.  You might find... that after you/we code these easy-use tools, then the need to store demo animations themselves... dissolves. 

Who knows?  This is untamed and unexplored territory.  :)

Have you found that BJS current animation methods... are scary and difficult to grapple-with?  I have.  4-8 lines of code to spin a mesh 90 degrees?  Create animation obj, create keys, set speeds, set frames, set cycle mode, add keys, start anim... seems ridiculous.  createAndStart() func is a savior, in many ways.  Other than its goofy name, it's a nice thing.  It could have been put upon abstractMesh instead of Animation class.  And then, it could have been named "animate(). 

mesh.animate(100 params, but 95 are optional).

And... you know... Wingnut is a whimsical dreamer, and doesn't have a whole lot of programmer horse-sense or a clear big-picture view.  But that's why idiots like me... actually try coding mesh.spin, spinTo, move, moveTo, scale, scaleTo... in a special project.  It is to test plausibility.

Are you going to code/try them?  I'd try to contribute and try to stay aboard the project, if you/we did.  (especially if I can coax you into talking with a bit more flow and a bit less thought-listing style)  :)

If we DID test-code these new mesh-based animation tools... THEN... your archive of animation demos... becomes a test bed and example festival... for the FalcAnim Toolkit.  ;)

I dunno.  Could be bad approach, but I still have curiosity.  Sometimes, I have a decent idea.  Other times, I'm so full-of-crap that I can taste it.  :)

Link to comment
Share on other sites

You were correct about the filtering import... it seemed like excluding camera and lamp in gtlf export  wasn't taking. (check) Export this layer only, didn't do it either. So filtering out Camera and Lamps on import, a little algorithm for that:

Filtering out Camera and Lamps from glTF Import:

               var meshTask1 = assetsManager.addMeshTask("mesh1", "", "../../3d/", "eyes9.gltf");
                meshTask1.onSuccess = function (task) {  
                    var meshes = task.loadedMeshes; //.meshes[0];
                    var skeleton = task.loadedSkeletons[0]; //.skeletons[0];
                    //init input: filter out camera and lamp, etc.
                    for(var i = 0; i < meshes.length; i++){
                        if(meshes[i].name === "eye_R"){
                            eyes1[0] = meshes[i];
                        } else if(meshes[i].name === "eye_L"){
                            eyes1[1] = meshes[i];
                        }  else if(meshes[i].name === "head"){
                            head1[0] = meshes[i];
                    // parent the eyes to the head
                    if(head1.length && eyes1.length){
                        eyes1[0].parent = head1[0];
                        eyes1[1].parent = head1[0];

Also... gotta parent the eyes to the head. Interesting data model emerging...


And... not going after eye-bones (just yet). :)




Link to comment
Share on other sites

Good Blender info, thx.  If you discover undocumented things, try to add a note to any BJS doc on the subject, of course.  :)  If something affected you, it will affect others when they try the same things.  If we can point some arrows towards bridges-across-hassles that YOU have built... then that will help others.

Ya got a good gltf import-to-scene, now?  Cooooool.  Let the games begin  :)  I think you can bone-up the eyes, manually, with in-scene JS... if you want to do bone animation experiments.  Not my cup of tea, but I'm willing to learn (and then likely forget, over and over again)

Update:  Oh, you wrote a cool doc about it... right here.  Excellent!

Link to comment
Share on other sites



There were some tricky spots. I'll explain...

#1) Hey look, the local Axis' are different? Local space... without rotate? On import? Symptoms later...


    var head1 = []
    var eyes1 = [] //left, right;

        var targetsphere = BABYLON.Mesh.CreateSphere("sphere", 2, 1, scene);
        targetsphere.isVisible = true;
        targetsphere.position.y = 1;
        targetsphere.position.x =  -15;
        var angle1 = 0;
        scene.registerBeforeRender(function() {
            targetsphere.position.z = 8 * Math.cos(angle1);
            angle1 += 0.02;

            if(head1.length) displayMeshAxis(head1[0]);

            if(head1 && head1[0]){
                //sphere look at points up the x-axis.
                var gazeTgt = targetsphere.position;
                // gazeTgt.z += 0.02;
                // head1[0].rotationQuaternion.y += 0.025;

               var assetsManager = new BABYLON.AssetsManager(scene); 

               var meshTask1 = assetsManager.addMeshTask("mesh1", "", "../../3d/", "eyes8.gltf");
                meshTask1.onSuccess = function (task) {  
                    var meshes = task.loadedMeshes; //.meshes[0];
                    var skeleton = task.loadedSkeletons[0]; //.skeletons[0];
                    //init input: filter out camera and lamp, etc.
                    for(var i = 0; i < meshes.length; i++){
                        if(meshes[i].name === "eye_R"){
                            eyes1[0] = meshes[i];
                        } else if(meshes[i].name === "eye_L"){
                            eyes1[1] = meshes[i];
                        }  else if(meshes[i].name === "head"){
                            head1[0] = meshes[i];
                    // if(head1.length){displayMeshAxis(head1[0]);}
                    if(head1.length && eyes1.length){
                        eyes1[0].parent = head1[0];
                        eyes1[1].parent = head1[0];
                        //parent head to eyes.



SYMPTOM: at first  -the face looking the wrong way. It would only look from its left ear!

SOLUTION: can orient face, exactly backwards in Blender... to get face to lookAt() target. And I don't understand why (yet)....

QUESTION: how to align Babylon Axis to Blender Front Position? (numpad 1)[-y?]  What is going on there? Setting is LeftHandSystem = true;

Happy to keep everything backward facing in Blender (ctrl+1 numpad) but... anyone know why?

#2) Tilt Eyes-Down (didn't anticipate)

       COOL INSIGHT: head.lookAt() is not the same as eye.lookAt()... difficult to guess that in design.


OR... the character moves both head and eyes. Interesting...


 --> Onto ~EYES-ONLY, then ~HEAD & EYES!!!


Link to comment
Share on other sites


And trickiness ensues immediately...


Eyes orbiting around parent center point. 

COOL-INSIGHT: distorted eye shapes convey emotion. Useful?

BLENDERFIX? Yes, always... 

      -> Select Each Eye. Set Origin -> Origin To Center of Mass (volume):

      -> Export again... and ....


not too bad.

#1) Strange Iris Flicker? -> artifact of the gif capture tool "screentogif", confirmed to not happen in browser.

#2)  @Wingnut  guessed it! Needs ocular-maximums and minimums. :wacko:

           Looked into it... as he described. Wow that's tough! Good to revisit with  ANIMATION CONSTRAINTS

           QUESTION: how to apply contraint on LookAt?

             UPDATE: (link below possibly relates), looks like atan time! But Idk... 


Link to comment
Share on other sites



#1) after combing the two. First head.lookAt() then eye.lookAt() -> for some reason eyes look high again.

QUESTION: any idea why eyes would look high after sequential: head then eye lookAt()'s?

         - cause it adds the rotation twice? Ah neat. 

         - yep, looks like @aWeirdo explained (something like that) last year... 

           -  I'll add this with CONSTRAINTS, unless someone knows off hand...

#2)  Also -> try reversing the order...

          - COOL INSIGHT! Its a subtle difference, but it seems running eye.lookAt() before head.lookAt() causes eyes to look faster... (maybe?). :)

Time for Lunch!

Link to comment
Share on other sites

ANIMATION METHODOLOGY -ARM, bones, blender keyframes:


1) MODELING (using mesh extrude, and bone automatic weights, then timeline keying on RotLoc.

2) IMPORT glTF successful (had to clear out a bunch of bad animation frames).

3) SKELETON is available in task parameters SUCCESS.


Link to comment
Share on other sites

~ ANIMATION METHODOLOGY > Blender Bones > Robot Arm (glTF && .babylon):

ERROR:   scene.beginAnimation(skeleton, 0, 120, true, 1);

          - does nothing... :)

SOLUTION: GLTF animations not imported.

QUESTION: GLTF animations not supported for assetsManager.addMeshTask?

       - ...I think I remember reading that.

       - TEST1: .babylon (ver 5.4.2) export -> it WORKS!


        -1) BUG: that means something is wrong with animations for assetsManager.addMeshTasks on glTF import, not importing, or Blender is not exporting(?).

        -2) .babylon export... that example had jank, on review this did not appear to be related to development.

                      TIP: reduce bones. reduce key frame attributes (or more keyframe attributes), reduce simultaneous movements. Small movements.

       TEST2:  .babylon export through Append:


       RESULTS: the background is different....

       TEST3: Does animation export of GTLF work through Append()?



      It does... so that tells us something interesting.

     TIP: It seems like , if you want animation and glTF then you should use Append loading method. It appears that the AssetManger() methodology, may not be supported for glTF Animations at the moment. (but I could be wrong).

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...