Animated displacement

[paleRider]

Hi there:

We need to materialize a toothed belt in one of our 3D e-learning projects.

Initialy, we were looking for a solution via GLTF, but that has finally not possible, as a correct approach using a cinematic skeleton implies a high number of links, exceding the limits of the format.

This way, now we are more prone to a solution 100% BJS, a mix between an animated texture (see PG here) and displacement mapping (PG here).

Any help with that?

Thanks in advance you for your time!

[sebavan]

I would suggest creating your own material with NME maybe ?

[paleRider]

Thanks for the advice, @sebavan.

Certainly, We’re not very motivated to learn the NME at this moment, but as you say, maybe that’s our best (only) choice.

[carolhmj]

Hello @paleRider just checking in, how’s the project going? Need any further help?

[paleRider]

Hi there, @carolhmj:

Thanks for your support.

The project is at cruise speed at the moment and, certainly, we’ve letting this issue for the end.

Anyway, we’re trying to avoid to learn NME (at least until all is more calmed), so we’ve being exploring other approach, also with the help of the (superb) people of this forum, as you can see here.

But that way seems even more daunting, and I still think that the animated-texture-displacement could be a more simple solution.

Best regards.

[joie]

Hi there,
I’m a node guy but the NME is super low level and can’t figure out how displacement can be done, since I don’t see any node for that.
I’ve searched for tutorials about NME, but I can’t find anything related to displacement mapping.
Could you point us to something like that?
Thanks.

[sebavan]

Would this help Happy Holidays Node Material Displacement Demo - YouTube an amzing explanation from @PatrickRyan

[joie]

I didn’t see that one. I’ll check it and tell you back, but seems what we need.
On another layer of complexity, we would need to connect somehow the translation of the displacement texture coordinates based on the rotation of one piece of our scene.
How would we do that?
I know how to do it in MAYA, but BabylonJS is a completely different thing.

[joie]

Now that I watched the video, I have even more questions and doubts (remember I’m NOT a tech guy):

1. The displacement he does on the plane is very simple and so related to that particular scene. He just moves the vertex from gound zero to the desired position, but the final position is actually the original model, so it’s super easy for him to do that, because he just move vertices from the actual position to zero
2. His displacement is NOT based on texture, and that is exactly what we need: vertex movement based on a displacement map
3. Another problem he is facing that he resolves easily is about the normals of the surface. Because he just moves the vertex to a zero position, it’s super easy to modify the normals also, because he just need to deform them to match a 0.1.0 normal state. Our issue will be much complex, because our displacement should move along the surface (like a wave moving) and normals should always match the updated position of all vertices
4. Oh, and another thing to address is that all that should be made in local space, and he is doing everything in word space

As you can see, more questions arise LOL

[paleRider]

Hi there @joie, maybe letting know @PatrickRyan in person about your questions is our best choice.

Also, I think the functionality we’re looking for is something like this (made with ThreeJS). Isn’t it?

[joie]

Yes, that example is exactly what we want to achieve.
Any ideas whatsoever @PatrickRyan ?
Thanks!

[paleRider]

Hi there, @sebavan @PatrickRyan:

For your information, even we have tried to make a mix between the referenced at the beginning of this thread PGs, namely for animated texture (see PG here ) and displacement mapping (PG here ), but as you can review here, it doesn’t work as intended.

Thanks for your time.

[carolhmj]

It’s pretty simple to achieve an effect similar to the one @paleRider posted with NME: NME animated displacement | Babylon.js Playground (babylonjs.com)

[paleRider]

Hi, @carolhmj:

Thank you very much for your support on this.

About your code, I’m not at all aware of the MNE, but I guess that “TJ9SG3#5” is a kind of URL for the specific node graph. Isn’t it?

In that case, how can we visualize it in order to study your solution? We’d like to have it done on an animated texture (png), in order to preserve the sharpness of the displacement, as we need to use it in a way more or less like this, to show the movement of a drive belt.

Many thanks for your time.

[PatrickRyan]

@paleRider, I was on vacation last week so I apologize for the delay in my response. To see the NME solution from @carolhmj:

1. Click on the inspector button
2. Click on the + next to materials to expand the list
3. Click on the edit button next to the node material

This will open NME in a child window attached to the playground scene so any changes you make in NME will be immediately reflected in the playground canvas. This solution seems a little different than what you originally asked for which I believe was a method to displace vertices along a path to simulate a belt mesh winding through a series of pulleys. Are you set with this explanation or do you still have questions about displacing along a path.

That concept is far more complex and will need a custom shader (NME) and likely some tricks to recompute the mesh normals from the displacement. While the engine and NME are able to handle this problem, none of this is straight forward and you will need to dive deeper than you may be comfortable with to achieve your end result with a displacement approach.

[paleRider]

Hi there @PatrickRyan:

First; I hope you enjoyed your vacation time. Here in Spain the weather is this year hot as hell and vacations (or digging deep enough in the ground to avoid so much heat) is something all people are thinking about these days.

This said, thank you very much for the instructions to show the NME graph, in order to been able to inspect the @carolhmj solution.

About the aim of all this, yes, we are validating at the moment several approaches to the problem over the table. The one involving a displacement animated/moving texture seems maybe less resource than others.

Maybe my colleague @joie has something to add, but he’s not available for a couple of days.

Again, thanks for the time and help.

[Blake]

Also maybe this thread could help, it has NME and ShaderMaterial examples of a strategy to compute the normals.

How to smooth normals useing NME?

Hello! When we use an a displacement for vertex shader positions is changing but normals isn’t. For some cases i can get normal data like i did that here: But i don’ t know how i can smooth this normals. I think this is an important question because i faced with this too many cases and it can be an bottleneck for large spectre of shaders.

[paleRider]

Hi there, @Blake:

Thanks for your advice. We’ll keep an eye on it!