Animation Methodology Review

[JackFalcon]

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

Examples:

         - 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

         ADDITIONS:

          - 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.

 

[GameMonetize]

Hello:) not sure to get what you need from the community

[JackFalcon]

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

[Wingnut]

Aw c'mon, Falconoid...  back hoe, first thing.    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*

[JackFalcon]

@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!

[Wingnut]

https://www.babylonjs-playground.com/#HH1U5#62

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. 

[JackFalcon]

Fantastic!

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

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

UPDATE -> MINIMUM-EYES:

STEPS:

   -> add > mesh > icosphere

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

   Modeling:

   -> 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).

   Materials:

   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.

   Duplicate:

   -> 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. 

Cheers!

[Wingnut]

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.

[JackFalcon]

@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...

[Wingnut]

You talkin' about #54?   Yeah, gruesome.  (barf) 

Oh, maybe #59?  Yep yep yep.  Ow. 

I hope I didn't kill your thread.  Not many participants, so far.  Sorry if I did.

[JackFalcon]

It will take many animations...

[Wingnut]

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. 

[JackFalcon]

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).

 

 

 

[Wingnut]

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!

[JackFalcon]

-> ANIMATION METHODOLOGY ~ LOOKAT, HEAD:

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

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

CODE:

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

         //Orbiting-TargetSphere
        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;

        displayMeshAxis(targetsphere);
            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].lookAt(gazeTgt);
                // 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.
                    }
                 };

               assetsManager.load()

BLENDERFIX:

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!!!

 

[JackFalcon]

@Wingnut ... Yep. "all of the above".

Methodology: practicing animation options, from simple to complex.

I wish to understand each animation option in-depth...

Happy to surface solutions for others, and tricky spots for expert insight.

--> On to EYES (still lookat, slightly cooler)!!!

[JackFalcon]

-> ANIMATION METHODOLOGY  ~ LOOKAT, EYES-ONLY:

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.

           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... 

 

[JackFalcon]

ANIMATION METHODOLOGY -> LOOKAT, HEAD & EYES:

#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!

[JackFalcon]

6 hours ago, Wingnut said:

mesh.spin, spinTo, move, moveTo, scale, scaleTo

@Wingnut yes, added to list at the top of this thread. : )

Great suggestion. Thank you.

Next up, Robot Arm!!

[Arte]

I like this community! 

[JackFalcon]

@Arte -> +1!  

 

[JackFalcon]

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.

...

[Spankied]

The easier you make it for people to help, the more attraction this will get. Good idea to document the progress this thread is making. 

Inb4 complete animations engine.

 

edit: document in english, not l33t speak

[JackFalcon]

Thank you @Spankied, good advice -  I see you are correct.

MAKE IT EASY TO HELP:

1. Using screentogif... post animations here.

2. Tell what is NOT easy - so that it becomes easier.

3. To post a gif there is a HACK: First, create response, then add the gif in edit mode. 

[JackFalcon]

~ 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).