Babylon animation and MorphManagers

I’m working on a frame project that @JohnK and the gang recently helped me sort out (https://www.babylonjs-playground.com/#2CU0P1#3). I’m very close to a semi-finished product and am adding extra flourishes. One of those things is experimenting and learning MorphManager and MorphTargets.

I want to be able to re-adjust my canvas sizes. At first I was considering re-calculating and asserting all the vertices. That would have been fine for basic mesh geometry but Morph’s would be much easier for when I have far more complex meshes for the rails/sticks that build the frame.

Once I sorted out resizing I wanted to attempt animations the morph influence with Greensock. Lo and behold I found the Babylon AnimationGroup which would make that easier instead of tweening the influence property. There are however no helpful examples on combining Animation and Morph.

To complicate this further I have 5 meshes that I’m modifying with 5 separate MorphManagers. I basically have something like this going on (plus some additional repositioning logic for each strick):

const { frame, sticks } = this.generateFrameMeshes(
  this.mouldingDetail.width,
  this.mouldingDetail.depth,
  this.frameDetail.height,
  this.frameDetail.width,
  this.frameDepth
);
frame.setEnabled(false);
const manager = new MorphTargetManager();
this.frame.morphTargetManager = manager;
manager.addTarget(MorphTarget.FromMesh(frame, "FMTarget", 1));
const stickManagers: Array<MorphTargetManager> = [];
for (let i in sticks) {
  stickManagers.push(new MorphTargetManager());
  this.sticks[i].morphTargetManager = stickManagers[i];
  stickManagers[i].addTarget(MorphTarget.FromMesh(sticks[i], "STTarget", 1));
}

I’ll need to add each MorphManager to an AnimationGroup then trigger the animation. I know generally how I could pull it together I’m just not sure if this is a proper way of solving it.

If I’m able to solve this then my frames will morph beautifully when I resize on the fly excited smile lol.

Sorry, I am a little confused (as often happens) since you talk about

and then

Generally on this forum the word ‘canvas’ refers to the HTML Canvas that the scene is rendered on. However another interpretation given the context of the question it could refer to the an art type canvas, ie what the picture is painted on.

If HTML Canvas that re-sizing is carried out by

// Watch for browser/canvas resize events
window.addEventListener("resize", function () {
     engine.resize();
});

from First Steps - Babylon.js Documentation

If you mean art canvas the why not use scaling as in https://www.babylonjs-playground.com/#2CU0P1#4
You can use scaling with animation and of course both axes (in fact all three if you want to make your frame deeper).

If I am missing the point of your question the please clarify.

You know what you’re quite right! I am indeed referring to an art canvas. I wrote that quite late as my brain was in shutdown mode. I’m looking to dynamically resize the meshes if my picture frame. Mostly when someone decides to render a large frame.

I cannot use scale because it’s a relative value to the base geometry size, I need to recalculate the mesh then morph to it given how the sizing values are supplied by the user. There are other unrelated reasons to do it with a morph as well. The user will never say scale it by x it’ll be exact real life dimensions in inches. This is a product for visual art canvas design. :slight_smile:

Sorry for the confusion!

Oh also the other major reason for using Morph is aside from resizing eventually the mesh could be completely different ie concave or convex sticks or complex pattern surfaces.

A little bit clearer. What I am not clear on is the user interaction and why animation/morphing. As I understand it a user will select a frame type, give frames sizes and a frame of that type and size will be shown. Are you saying that on selection of frame type this type will be shown and as the user enters dimensions the frame will animate to the required size?

I can see that for a given frame type and dimensions the frame to be displayed will have to be constructed each time. For curved frames, in particular, in order to maintain smoothness, changing dimensions could produce a different number of vertices and morphing will not be possible.

The user will customize the frame throughout the experience. When they load the application it initiates some default values (likely a basic 30x30). As they proceed through the UI they customize components: selecting different frame geometry, changing overall size, adding mats and liners (which I have working elsewhere) as well as switching different artworks/picture etc. My goal was to make the transition between customizations very fluid instead of adjusting the mesh and rendering it right away – it’s a bit janky that way.

That’s definitely a show stopper. I just re-read the Morph docs and yeah: A morph target must be built from a mesh with the **EXACT** same number of vertices as the original mesh. Sigh. I was inspired by GSAP’s SVG morph (MorphSVGPlugin - Plugins - GreenSock) which now I’m understanding adds and removes vertices likely based on proximity/most similar position. I suppose the question is, without writing my own makeshift morph is this possible?

Darn!

I could use morph and animate on the base frame meshes. When I have complex geometry it would always sit on top of the frame. This is actually standard industry practice – most picture frames have a box base then a special moulding that sits on top. To replicate that I could just have a third complex mesh with the surface. The base geometry could use Animate/MorphManager and I could animate the complex geometry separately.

So the question remains: should I be create separate MorphManagers (artwork mesh + 4 x frame meshes + complex geometry mesh = 6 managers) and add them to an AnimationGroup? I’m wondering if I’m using the API properly this way?

Could you create an example in the Playground ? (not with the real final meshes) this might make the whole discussion easier ?

Some further thoughts

Not a real issue, there will be a maximum frame size. Create the frame using sufficient vertices to make the maximum size just smooth enough, smaller versions of this frame still use this amount of vertices.

Great idea. Doing a base and a moulding separately will mean you get the color separation you want and from a profile using ExtrudeShape you can easily have curve frames.

Two profiles one for the base and one for the moulding. Combine using parenting.

Thanks @JohnK and yup that was precisely what I’m working on right now. As for the whole MorphManager, I implemented it and it worked ok but when you transition between other points after the original it gets wonky.

I ended up deciding that Morph’s were NOT the best application in this situation. My geometry for all intents and purposes is rather basic and tweening vertices + UVs seems to be the simplest approach after all.

1 Like

Look forward to seeing the final product.

I certainly will. Once the basic rendering application is done we have to write the application UI around it. Aiming for mid to end of month =)