Jump to content

Export glTF Animation -> Blender2Babylon -> Minimum Steps Example


Recommended Posts

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



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



        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.




Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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





Link to comment
Share on other sites

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.




Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites


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.



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];




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)



  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!



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


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

          - export again...




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


        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:



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




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