Export of Animated 3D Web Assets: Help Needed with GLB/GLTF Pipeline

Hi everyone!

I'm diving into the creation of animated 3D web assets using Blender, with the goal of exporting them as GLB files that can run seamlessly in any browser-based GLTF viewer. While I've got a decent grasp of the modeling and animation process, I'm running into a few roadblocks when it comes to exporting these assets, particularly regarding the Actions that get exported with the animated objects.

Here's where I need some guidance:

    Exporting Only Necessary Actions: When I export my animated object (which consists of several parts), Blender seems to include multiple Actions, many of which are unnecessary for the final animation in the browser. Is there a way to streamline this so that only the essential Actions are exported, making the asset truly plug-and-play?

    Best Practices for Web-Ready 3D Assets: Are there any resources, tutorials, or courses specifically dedicated to creating and optimizing animated 3D assets for the web? My goal is to ensure that the final GLB file is as efficient and lightweight as possible, without compromising on the quality of the animations.

    Pipeline Optimization: Any tips on optimizing the entire pipeline, from modeling and animating in Blender to exporting and ensuring smooth performance in GLTF viewers, would be incredibly helpful.

I've searched around but haven't found any courses or tutorials that address these issues in-depth. If anyone here has experience with this or can recommend resources, I’d greatly appreciate your input!

Thanks in advance for your help!

  • Adrian Bellworthy replied

    It is not something I use, but I will try, or someone else maybe able to help or add more.

    I assume you are using the add-on included with Blender, glTF 2.0 format, all you need to do is enable it. I suggest researching the docs for info.  
    The Blender Manual is there to help with this.

    As far as animation actions is concerned, when exporting other formats the NLA editor is used for specific actions. Maybe that would be another area to research.
    Jonathan uses the NLA editor in the Animating First Person Character Weapons course.

    The workflow for 3D web assets I imagine being similar to that of game assets.

    Sorry I can't be of more help.

    1 love
  • Leo (wod) replied

    I worked with ThreeJS a few months ago and faced similar problems.
    If you go to Export in Blender and the new window appears, there are settings on the right.
    You could try to select your object beforehand and then in the settings under “Inlcude” you only select selected objects. Then it will only export the selected objects and their animations.


    There is also a setting to export only the scene or only visible objects.
    It is also important that the check mark for animations is set at the bottom. It's best to play with the settings ;)
    It also helped me to export the file as GLTF. It is then structured in JSON format and you can view the structure in Notepad to see exactly which objects and actions it has exported. That looks something like this


    Then you can also address the actions directly with the respective name
    Regarding your other question whether there are tutorials on assets. There are some videos about game assets about modeling and texturing here at CGCookie maybe they will help you already
    https://cgcookie.com/playlists/1589-game-asset-creation.
    But I would say that you control most of it on the web, i.e. how you load the objects, how many objects you load, how high-resolution the textures should be, etc.
    I loaded the file back then and addressed the objects and animations directly. Otherwise, i don't want to advertise but look for "ThreeJS Journey by Bruno Simons", which covers a lot of things in relation to 3D on the web but costs 99$.

    • 👍🍪
    1 love
  • Lorenz Meier (spitzmeier) replied

    Thanks so much for the quick responses. Regarding the export of static assets I'm quite firm already. I was already part in the development of a browser based game but there were only static objects in it. I already went through ThreeJS Journey from Bruno and it is good for a foundation but when things gets more complex I hit some limits, for instance baking of larger scenes (more than 100 objects), excessive use of image textures and baking them on one map AND the aforementioned animation content.

    I find it curious that there is apparently not that much content available as I'm expecting a higher demand for this kind of skills in the future. :)

    1 love
  • Adrian Bellworthy replied

    "I find it curious that there is apparently not that much content available as I'm expecting a higher demand for this kind of skills in the future. :)"

    Think of it as not a limitation, but as an opportunity. Lead the way...

    1 love
  • Omar Domenech replied

    I have zero experience on working 3D for browsers, but one idea that comes to my mind is that maybe the good people of Sketchfab can give you a helping had. If there's anyone that knows 3D for browser's, it's them. .