Export glTF Animation -> Blender2Babylon -> Minimum Steps Example

[JackFalcon]

QUESTION: What are the minimum steps required to get a bone to export from blender and to be visualized with Debug.SkeletonViewer?

          Having trouble making a cube add a bone and then export to babylon. After a bunch of variations I see why... there are many steps:

          Applied: Object->Apply->Location & Rotation & Scale. And ensured Camera Icon is on Armiture (exporting). Weight Painted. Or setParent-> Auto Weights.

          And added Armiture modifier... still no bones.

           Tried two different loading types, two different export types (Tower of Babel), and then... #3 glTF. Fabulous!

          I'll leave the tips that I find below.

 

GOAL: open blender > add 1 bone inside a cube or tube and > export to .babylon > then see bone with Debug.SkeletonViewer. 

 

PURPOSE: to run a bunch of test animations on bones (at runtime).

 

CONTEXT:

          Blender version (2.78) and updated the exporter (babylon.js ver 5.4.2). Also Tower of Babel, and glTF exporter 1.0.

 

UPDATE: 

        glTF animations look promising. I'll provide answer here for minimum steps to animate GLTF Blender Export.

 

Any tips of things to try in this experiment? Thx.

 

 

 

[JCPalmer]

For the 2 babylon specific exports, I guess the minimum # of steps is: all of them.  The # of Blender export formats make it ideal for a great many of BJS workflows.

The specific exporters are designed for the most compact files, and hooking in as many of the BJS features that a generic exporter has no knowledge of.  Eg. the many different shadow options, different types of cameras, ignoring of non-deforming IK control bones at export time.  Variable # of bone influencers (1-8).

They are not really designed for testing very simple models for bones, filling in matrix weights when you do not provide them.  Ignoring of bones during export also limits the order of processing of the exporter.  If you found GLTF does use it during development.  When you progress to the point where you have a complete armature, try switching if you like.

One thing I am interested in adding is exporting "traditional" IK bones, which do deform vertices.  I cannot quite line up the fields which need to be transferred.  @adam is there an docs / scenes on what you did for IK inside of BJS.

[JackFalcon]

Thanks @JCPalmer, yep that insight helps, and I am also interested in IK. I do have a full armature, and I've narrowed it down to "something missing on blender".  Also had success with gltf. And yes, the goal is to get the complete armature through to glTF bone export animations. 

Bone exports (and animation) completed four times before, each a challenge to recall all steps.

So that is where "Minimum Steps to Bone Export Example" would help... and attempting!

glTF is running but - also not imported bones... so that is how I see your insight is correct.  

Re-reading blender rigging and then also glTF export guidelines (links):

https://docs.blender.org/manual/de/dev/rigging/armatures/skinning/introduction.html

Cheers...

 

[adam]

19 minutes ago, JCPalmer said:

I cannot quite line up the fields which need to be transferred.  @adam is there an docs / scenes on what you did for IK inside of BJS.

https://doc.babylonjs.com/how_to/how_to_use_bones_and_skeletons#boneikcontroller

https://www.babylonjs-playground.com/#1EVNNB#15

https://www.babylonjs-playground.com/#PNJGW#7

[JCPalmer]

@adam, I like that.  You just use a mesh, which is easy to set position / rotation.  Blender uses other bones as the "target" in your terminology.  Those are the bones I am ignoring, when you are doing the posing prior to export.  Sounds like nothing needs to be done in Blender.  Modeler can simply add a couple of plane meshes, setting visibility to false, & export. 

In my case, I also need to delete some bones as my chain is too long for legs.  Just to clarify, when it is said that the chain length must be 2, is that including the end bone?  That would not be a problem if the bone used when instancing the IK Controller does NOT have to be at the end of the chain.  That looks to be the case in the pg.

[JackFalcon]

SOLUTION:

BLENDER NOTE: when parenting an armature to mesh -> select the mesh first and then the armature. Important.  

Also found minimum rigging information... for all the things:

https://en.wikibooks.org/wiki/Blender_3D:_Noob_to_Pro/Bones

[JCPalmer]

Our exporter used to require parenting the mesh to the armature as well.  Now you can either do parenting or simply ad the armature constraint.  The advantage the 2nd is you can then be parented to something else as well.

TIP:  still use parenting to add though, as then you can pick automating weighting.  Just move what it is parented to afterward later.

[JackFalcon]

glTF docs on github === vgood:

Tutorial index: https://github.com/javagl/glTF-Tutorials/blob/master/gltfTutorial/README.md

and the goods:

https://github.com/javagl/glTF-Tutorials/blob/master/gltfTutorial/gltfTutorial_017_SimpleMorphTarget.md

https://github.com/javagl/glTF-Tutorials/blob/master/gltfTutorial/gltfTutorial_018_MorphTargets.md

https://github.com/javagl/glTF-Tutorials/blob/master/gltfTutorial/gltfTutorial_019_SimpleSkin.md

Buster Drone ... works.

AnimatedMorphCube ... works.

AnimatedTriangle...works (hard to find on my camera)

 

[adam]

6 hours ago, JCPalmer said:

Just to clarify, when it is said that the chain length must be 2, is that including the end bone? 

Yes, to replicate it in Blender you would select the end bone, add the IK constraint and then select a chain length of 2.

[JackFalcon]

On 11/13/2017 at 8:59 AM, JCPalmer said:

try switching if you like.

glTF is pretty complex... I may switch back and forth.

 

[JackFalcon]

glTF: "Sparse accessors are not currently supported" : )

[JackFalcon]

SUCCESS: MINIMUM GLTF BONES FROM BLENDER (methodology):

Thanks @adam for SkeletonViewer. It is great!

 We have similar animation methodologies: animate in code with a starting Blender Armature.

My search is for BOTH, or ALL animation methodologies (later)...

So, steps here for anyone who wants to replicate methodology.

 

STEPS TO MINIMUM-BONE:

It is an ongoing challenge to get the pipeline correct because there are many options. Gotta get em aligned.

This is not a problem when the pipeline is working - but it is when it isn't. : )

So all parts need to be streamlined to get the right results. Or flow not flowing... what?

 

1) Loading Options (Append works, need to try each. Also, skeleton or mesh locations can be different in parameter): 

  - BABYLON.SceneLoader.Append         //good  (example below)

 - BABYLON.SceneLoader.ImportMesh //better

 - BABYLON.AssetsManage                    //best (for my needs):

                var assetsManager = new BABYLON.AssetsManager(scene); 

               var meshTask1 = assetsManager.addMeshTask("mesh1", "", "../../3d/", "bonebox10.gltf");
                meshTask1.onSuccess = function (task) {   

                    var mesh = task.loadedMeshes; //.meshes[0];
                    var skeleton = taskloadedSkeletons; //.skeletons[0];

});

               assetsManager.load()

 

2) Import options (blender export plugins: File > User Preferences > Add-Ons > Install Add-On From File > Save Settings) ... derp.

      - .babylon              //favorite

      - Tower Of Babel  //interesting (tons of custom options in Blender)

      - glTF                     //looks awesome: compression, interoperability, complex animation compositions, and (MSGb) multi-scene-graph-baby! (links above)

 

3) Blender Options (Challenge Area #1 )

     It takes a while to memorize the special sequence of Blender hotkeys that unlock the magic prize!

     FUTURE-NOTE (to self): Don't need Armature-Modifier, and don't need Weight-Paint. Enstead...

     *Parent Bone to Mesh using Automatic-Weights. (wiki-link above) STEPS:

        @gryff mentioned all this... years ago.

      -> Right click Mesh first, then Armature last (for the bones to be the parent). Important.

      -> ctrl + p -> Set Parent To -> Armature Deform -> With Automatic Weights.

      -> Pose mode, rotate a bone.

      -> File -> Export -> (blender plugins) -> gltf 2.0 (gltf)

                  https://en.wikibooks.org/wiki/Blender_3D:_Noob_to_Pro/Bones

 

  4) Loading into Babylon (Challenge Area #2)

        Trouble-shootin' time! What is this? Two Blender bugs... Ha! And grey hair...

       

        1st SOLUTION: again thx gryff - "the bones and the mesh not in the same spot."  Ah, ha!

               

        BLENDER FIX (RTS-RESET): 

              Select Armature, Object Mode -> Object -> Apply -> Location & Rotation & Scale.

              Select Mesh, Object Mode -> Object -> Apply -> Location & Rotation & Scale.

              Export....again. Where is the other bone?!?

         2nd SOLUTION: thanks to @adam (1.5 yrs ago), if he didn't mention it....

         "doesn't draw the last bone if the bones don't have a length property.". Look Blender, sure enough. No Length???

                  http://www.html5gamedevs.com/topic/20814-skeletonviewer-class/

         BLENDER FIX: Ah well, added a baby-bone at the end, pieceivecake.  (HINT: one cannotsee the babybone). derp...

          - export again...

SUCCESS! -> MINIMUM-BONE-EXPORT from BLENDER.

 

6) Why??? To TEST the multiplicitous-animation-methodologies. What, black-magic?!? No, it's just multi... ok:

BABYLON ANIMATION OPTIONS:

        BoneControls(1st thing @Wingnut), Blender Keyframes, Action Manager, ActionBuilder, Morph Targets, Shape Keys, Baking?, Motion Paths, LookAt, Interpolations, etc...

        ->  in another fact-finding-info-thread ... 

        Also thanks @JCPalmer

 

Here is loader code for EAT... (Export Append Test ):

    BABYLON.SceneLoader.Append("../../3d/", "bonetube2b.gltf", scene, function (obj) {
        var mesh = obj.meshes[0];
        var skeleton = obj.skeletons[0];

        // Create a skeleton viewer for the mesh
        var skeletonViewer = new BABYLON.Debug.SkeletonViewer(skeleton, mesh, scene);
        skeletonViewer.isEnabled = true; // Enable it
        skeletonViewer.color = BABYLON.Color3.Red(); // Change default color from white to red

    }, null, function (obj) {

    });

No, yes. endure.

 

5) GLTF (isn't necessary for this solution, but it sure is cool!)

     Get the correct version of Babylon... 

     <script src="../../lib/gltf/babylon.preview.js"></script> 
     <script src="../../lib/gltf/babylon.glTFFileLoader.min.js"></script>

      From glTF ... RTS (rotation, translation, scale). So golden-rule:  'in Blender be sure to Object -> apply -> RTS. Else-anim-stuffs-breaks!' 

       Here are the great glTF DOCS: https://doc.babylonjs.com/how_to/gltf

 

6) (dot).babylon Blender exporter

  

        - Why different? https://doc.babylonjs.com/resources/blender

        3rd SOLUTION: thanks to the docs on exporting, "gotta check flat-shading"

        BLENDER FIX:

                (check) -> Mesh, Vertex-Data -> Use Flat Shading:

              Also the background was black:

             

BLENDER FIX:

              -> No selection, World -> Ambient Color

One last thing: Why is the .gltf tube grey and .blender white? Default colors. 

             -> when no color is specified .gltf defaults to 50% grey. zing!

 

That's that ...

my wife says I must EAT now.

... most of those pesky terrrible jokes removed.

BABYLON.Rocks(true);

 

 

[adam]

I don't have much time this morning so I just skimmed your post.  Make sure that you apply rotations and positions before exporting from Blender.

edit:  I looked closer and it appears that you already solved that issue.