How to implement path deformation in babylonjs

[Dad72]

My translator gives this exactly:

this is
The first image is based on the path and the deformation
The second image is the text according to the deformation of the path
The third image loads the distortion of the model

3 are the effect

Thank you for your patience

[Wingnut]

Anyone done FFD boxes in 3DsMax?

For those who are FFD noobs, FFD boxes are like putting the model into a cardboard box. Then you can stretch and smash the cardboard, and the model will somewhat follow the box-shape.

The 3rd picture… the green cork screw… could be “bent” that way… with an FFD box with MANY linear subdivisions… surrounding the cork screw. (3dsMax allows you to set ANY number of sections/slices on FFD boxes)

The model itself… must ALSO have many subdivisions… in order to get a smooth bend.

FFD boxes… and also the 3dsMax pathDeform that DataAngel is showing to us in his first picture… are vertices “pullers” and “pushers”. Positional vert warper. I think they COULD BE similar to our “weightedVertices”.

But, doesn’t BJS require a skeleton/bones armature… before a model can use weightedVertices? I think so.

Does it NEED to? Can we activate weighted vertices… based upon a path? The model would still need high subdivisions… to bend along smooth curves. But instead of attaching weightedVerts to bones, can we, instead, attached them to a path (path points)?

If the path has many steps/points… each step could be used as a push/pull attachment-point… for weightedVerts of the model.

Anyway, I’m shooting in the dark… because I know SO LITTLE about weightedVertices… but I know a little bit about 3dMax FFD boxes, which are a type of deform. I used them to make curvy aero-dynamic cowlings for snowmobile models. I also used them to make fishing lure models. They’re fun!

Just possibly, there’s a whole new world ahead… for BJS weightedVertices. (or maybe not)

[Deltakosh]

@Wingnut

But, doesn’t BJS require a skeleton/bones armature… before a model can use weightedVertices? I think so.

This is correct but we could think about a dynamic way of adding skin info to a mesh. But this will require some work and this is definitely not available out of the box

[trevordev]

@dataangel After talking to @PatrickRyan it sounds like using node animations and skinning might be the easiest way to do this.

If you can setup your mesh with node/skinning animation see: Babylon.js Documentation . You can then place it on a surface by picking the surface with a ray (scene.pickWithRay) and then update the bone position and orient with the collided normal.

Hopefully this makes sense and translates well

[Wingnut]

Hi tDev. I forgot about the collision.

So, it’s obvious, that the cork screw drank all the booze in the bottle, and passed-out laying against the bottle.

The ray-picking you speak-of… is for real-time path-plot determination? The model “senses” whatever it needs to contour its path-to… and the path bends… based upon massive “distance measuring” operations?

Wow! HARD! I was ONLY thinking that the programmer manually-plotted the path. I was NOT thinking about model determining its needed bends… from sensor arrays… real time. OMG!

Javascript, look out! TrevorDev and PatRyan… are out to HURT you. RUN!

[dataangel]

等待你们的好消息

[Wingnut]

dataangel: “Waiting for your good news”

wingnut: 携带食物和水。可能漫长的等待。非常困难的过程。也许超出了框架的范围。

Eng: Carry food and water. Possible long wait. Very difficult process. Perhaps beyond scope of framework.

(Sorry, but truthful. Wingnut gives whiskey and hug. Stay tuned for more comments, maybe.)

[dataangel]

第一张图的效果
https://www.babylonjs-playground.com/#RF9W9#570
第二张图和第三张图我实在想不出实现的方法

[JohnK]

From Google Translate
The effect of the first picture
https://www.babylonjs-playground.com/#RF9W9#570
The second picture and the third picture, I really can’t think of the way to achieve it.

My Interpretation (?)
I have achieved the effect I need for the first picture.

I really can’t think of a way to:

1. make text follow a path,
2. bend a mesh by distorting an line through the mesh so that it follows a given path

[JohnK]

My congratulations on solving your first problem. Very well done.

祝贺你解决第一个问题。 做得太好了。

[Wingnut]

@JohnK

make text follow a path,

I think… meshWriter fonts COULD be told to position and rotate (orient), based-upon a curvy path.

https://www.babylonjs-playground.com/#XWVXN9#63 (no curved paths there, just a demo of meshWriter fonts)

BUT, the flat surfaces of the font-shapes… with NOT bend (warp/morph) to match the spline curve.

Here’s another PG, and a bad attempt at “orienting” meshWriter fonts… around a circle. https://www.babylonjs-playground.com/#XWVXN9#69

Text on a rotating wheel… is a yet-to-be-adopted way of reading text in a 3D scene. Essentially, it is a curved text scroller… but it has brakes and throttle… to set scroll-speed (read speed). Or, should we say “roll speed” in the case of text-on-a-wheel. When reading text in 3D, it is often not plausible to have an entire paragraph of high-polycount font-mesh… on-screen at the same time. Often, text is flown-into and out-of the scene… at an adjustable reading-rate.

That’s future stuff. I was lucky enough to live a life in the future, before I started THIS life, so I have seen some future stuff. (You don’t really BELIEVE that, do you?)

@JohnK - you made the sine-wave PG? (it’s nice, btw). Would you (or anyone) consider trying a playground version… to make meshWriter SPS-based fonts… follow (orient-to) a curvy path? Start with the above-mentioned PG’s that I did, perhaps?

I also have a need to make sentences follow a path thru a scene… for making it nicer to get kids to (learn to) read. I want to make a nice forest scene where user can sit on a stump, and watch/read sentences that come into view along a forest path, and then leave again. A bit like nature-watching, only we do sentence-watching.

Perhaps… we need an option… allow z-rotation true/false. This would determine if the fonts ALWAYS were perfectly upright, or whether they z-rot when climbing/descending path “hills”. Keep in mind that a meshWriter font/word/sentence… has a natural orientation… of laying flat on its back, on the ground. See me “tip-up” the fonts from their natural orientation… in the #63 playground.

All kids/people read at different speeds, so a throttle and brake button nearby… would be handy scrolling-speed controls. Here is another mesh-oriented-to-path demo. https://www.babylonjs-playground.com/#92EYG#30

It has problems with some box “flip-over” at a certain point in the path. Also, the path-start and path-end do not perfectly align/meet, so there is some odd wiggle, there. All in all, this is the type of “orient mesh to path” that I am speaking-of (usable with meshWriter fonts), and again, @dataangel… it does not “bend” the font-shapes. It can ONLY “orient” the flat-faced fonts ALONG a curved path.

[shrug]. Just sharing what I know. Perhaps someone can “run with it” to make it all more useful, and possibly get a work-around solution to picture #2. Thanks everyone. Sorry for the long post.

[JohnK]

@Wingnut

@JohnK - you made the sine-wave PG?

No that was @dataangel 's own work.

[JohnK]

https://www.babylonjs-playground.com/#BWZWXP

This playground shows 2D text following a path.

此示例显示路径后的2D文本

[Wingnut]

Sneaky. No thickness, though. Picture #2 fonts have z-depth. But you DO have bends on the fonts themselves. Cool. Dynamic Texture… sure… good idea.

Can anyone tell… if the “m” in “Path Deform” (picture #2) is bent/curved? It sort of LOOKS bent/curved, but I can’t tell for sure. The other fonts don’t look bent at all.

I think that is an orientation-path-follow (un-bent fonts), and not a morph-path-follow (bent fonts).

Wingnut makes-up terminology, because he’s clueless to the CORRECT terminology, if there IS any.

Thanks, though, JohnK. Nice demo. Wibbly Wobbly Words. heh. Alright!

[dataangel]

good idea.

[JohnK]

Update to @Wingnut 's playground for vertical letters https://www.babylonjs-playground.com/#XWVXN9#71

[TheLeftover]

Wicked 2D bendy text, JohnK!

I believe that having the letters follow a not-straight path is not “outa this world”. Making individual letters curvy is, at a minimum, outa my world.

To the former point: I go to some effort to make each glyph (letter) its own mesh; there is a matching array for glyph positions. The last step, when creating an SPS, positions each letter. See code snippet nearby – the last few lines: positionParticle. This could potentially be made more complex than it is now. Now, it just does basic kerning.

Not obvious to me is how the curve is communicated into MeshWriter. The other alternative, as you have already discovered, is to position individual particles after the fact.

Hope this adds some value.

//  ~  -  =  ~  -  =  ~  -  =  ~  -  =  ~  -  =  ~  -  =  ~  -  =
// MakeSPS turns the output of constructLetterPolygons into an SPS
// with the whole string, with appropriate offsets
function makeSPS(scene,meshesAndBoxes,material){
  var meshes                 = meshesAndBoxes[0],
      lettersOrigins         = meshesAndBoxes[2],sps,spsMesh;
  if(meshes.length){
    sps                      = new BABYLON.SolidParticleSystem("sps"+"test",scene, { } );
    meshes.forEach(function(mesh,ix){
      sps.addShape(mesh, 1, {positionFunction: makePositionParticle(lettersOrigins[ix])});
      mesh.dispose()
    });
    spsMesh                  = sps.buildMesh();
    spsMesh.material         = material;
    sps.setParticles()
  }
  return [sps,spsMesh];

  function makePositionParticle(letterOrigins){
    return function positionParticle(particle,ix,s){
      particle.position.x    = letterOrigins[0]+letterOrigins[1];
      particle.position.z    = letterOrigins[2]
    }
  }
};

[Wingnut]

Thx @TheLeftover! (He’s the author of MeshWriter, for those who don’t know). @jerome is the author of Solid Particle System (SPS), which MeshWriter uses to get some of its display-work done.

In MY “super-path” hopes and dreams, rotation and scale are just as pertinent as position.

I want to get long-winded and wander off-topic, so join me here for the long version… and some “heavy” path conversations, if wanted.

[FergalMohan]

Hi guys, a big thank you for the trail blazing on this. I am hoping to a develop a stock ticker element (single line, scrolling, updatable text) and am wondering whether this implementation would be a good place to start from or if there are other jumping off points that might be a better foundation. Any advice from the participants in this thread would be really appreciated,
Fergal