Babylon.js Weekly Video - New Series: How It Works

Hey Everyone!

@Deltakosh brings us an awesome new video this week that explains how the new Infinite Morph Target system works in Babylon.js. Yup you heard that right, if you didn’t already know, Babylon.js now supports an unlimited number of Morph Targets. You can throw as many morph targets at the engine as you have GPU memory!

This video also kicks off a new series that we’ll be adding to about how different features in Babylon.js work under the hood!

Check it out:

Follow along with this playground:

11 Likes

I was happy when @Deltakosh introduced the use morph targets into babylon and I was able to export “shapekeys” from Blender as these morph targets. I would have liked them to be animatable from Blender … but maybe one day.

To be or not to be

Animation done with setting a TimeOut in javascript for changing the influence of each of 3 shape keys. Press the U key to play in Firefox.

Now I watched all the video, thinking “infinite morph targets” sounded very good - got a little lost in the middle when it got into that "Spector JS’ stuff (and where Blender only defines “positions” in its values for the morph targets).

But watched and saw the benefits even if it is only for WebGL2 at the moment.

However, much of the demo is with a sphere and the targets created with the “ScrambleUp” and “ScrambleDown” functions. So no impact on a loaded file size, unlike the Alien example used if it was from a 3D modeling program. The morph targets use in my simple example above are 6K each - so “infinite” is going to have a dramatic effect on that file size.

So maybe one day, an animation direct from Blender and a way of reducing the impact of “infinite” on file size?

Stay Safe All, gryff :slight_smile:

I’m pretty sure you CAN animate shape keys in Blender. I did this accidentally last week. And you can bring them into Babylon as animations. Pretty fun stuff!

1 Like

@PirateJC : Will give it a try - that example I posted came from along time ago - when morph targets were first introduced.

Stay Safe, gryff :slight_smile:

@PirateJC : What version of Blender? and what exporter - Babylon or GLB - and if Babylon what version?

Stay Safe, gryff :slight_smile:

I’m on 2.91

You can key the value of the influence of the morph target:

image

So what I’ve done is taken our good friend the “Default Cube” and made a shape key with one corner dragged out. So when the shape key’s influence is 1, that corner will be out, when it’s 0 it will be in it’s default location.

Then you can key the value of the influence over time.

Then I exported this with the built in exporter to .gltf/.glb. When I throw it right in the sandbox, it already has an animation group and plays it for you.

Does that make sense?

2 Likes

@PirateJC Makes sense - just no animation export with the .babylon export. Which is too bad - as I’m not a fan of glb export.

I’ve spent too long with @JCPalmer and @Deltakosh 's babylon exporter. So much easier to figure out any issues. (for me anyway).

Stay Safe, gryff :slight_smile:

Hmm…good call…I haven’t tried with @JCPalmer’s exporter.

I don’t see why it wouldn’t support it though. It’s just animating a single influence value.

Probably a question for JC himself!

Deltakosh said morph animations can be in the file format. I am placing animations for meshes, cameras, lights, & armatures in the section with each of them. These would have to be at the top level animations array, because a MorphTargetManager cannot have animations. Also in the referenced format file “morph” is not even mentioned.

  • I do not know what the type of animation to put in the file.
  • I do not know how Blender represents these types of Animations. I fear that there be a large difference between the 2 on how values of multiple targets are referenced in the same frame of the same animation.
  • I do not know how these animations would get called once loaded, so testing would be time consuming. Trying to run something based on data which is not debugged can lead to a lot of churn. Running is the debugging.

This kind of thing would take much research. I have bookmarked this topic for when I start working on the 2.93 version of the exporter, after 2.92 of Blender is released.

Sorry to resurrect the topic, but I’m investigating this and he didn’t say in the video how to make these textures that contain the animation values. Can someone share something done with a simple model from Blender to see if we can figure this out?
Thanks!

This is created for you by the system you do not need to create them manually

How? Does anyone have an example anywhere? I find it curious that he goes through the trouble of making a video about a great feature and then doesn’t show how to use it, and uses two custom random functions (scrambleUp scrambleDown) instead. Can the gentleman please make a video where the feature is actually used or point us to a playground? By the way I mean how to do this with an actual model, like a GLTF other than a primitive sphere.

The animation data are stored in the model or by code like any other animation data.

We convert and store them in our own format within Babylon to be consumable by our shaders. This is an internal feature: Babylon.js/morphTargetManager.ts at master · sebavan/Babylon.js · GitHub

1 Like