Hi,
I am working on one demo. https://www.babylonjs-playground.com/#E3TVT#16
Is there any way we can add fluid simulation(Wave Effect) on rotating the object and how can I achieve on click of the object we can get the detailed view of each visible faces data in the form of distinct objects and then those objects will fade out.
Hey @Rajat_Nigam,
First of all, welcome to the forum! Second, if you are just going for a wave effect on your mesh, you might be able to use custom post-processing stuff to accomplish that (Post-processing) . Here’s an example of what I’m referring to: https://www.babylonjs-playground.com/#TZJ0HQ#18.
3 Likes
Hey @PolygonalSun,
Thanks for the answer, but I want that disturbance on hover on that particular face of the object only not on the whole object.
Adding @PatrickRyan as he is an effect master 
If you want it on a per face basis you could use morph target I guess or you could split the mesh and rely on shader but this would have the drawbacks of reducing the hit test accuracy.
1 Like
@Rajat_Nigam, I’m not sure if I’m following your vision for the interaction on your model, but I can offer a few seeds of techniques to see if any of them help:
-
@sebavan is right in that you could split your model into many meshes and use the Node Material Editor to animate them in a shader, however you will run into a lot of visual issues beyond the performance hit since you will have the faces physically separating from one another creating some strange behavior as you will be able to see inside the object.
-
Babylon.js Playground is a playground with a sample model that I created that has a specific setup. If you scroll down in the inspector when loaded, you will find three inputs. The first is facesToAnimate which the slider will allow you to animate one of the faces on the mesh. The other two are pretty self-explanatory. The way I achieved this was to use the Node Material Editor (hit edit when you have nodeMat material selected) to read the red channel of the vertex color of each vertex. It then will do some math and step the results of the vertex color and the color in the gradient determined by the faceToAnimate input. The way to build your mesh is to do this:
Each face has an extruded face within it. All vertices that will not animate are filled with black (0, 0, 0) in their vertex color. I then filled each face’s vertices that will animate with a custom color such as (10, 255, 255), (20, 255, 255), (30, 255, 255) etc. Choose an increment that works for the number of faces in your mesh. You then set the gradient node in NME to have the same number of colors and set each one to the same as one of your faces (so that when you subtract the red channel of the gradient from the red channel of the vertex color you get 0). For each color in the gradient, set a position value that is convenient for your code. Here I used 0.1, 0.2, 0.3, 0.4, and 0.5. But if you have 20 faces, you can increment by 0.05 and have even distribution. Or you can use 0.01 and increment by 0.01 per face. This part doesn’t matter and is up to you.
The last part is to associate a value for the gradient per face so that when you hit that face with a pick, you pass that value to the shader input.
- The last way you could do this is with a particle system that emits on a sphere emitter at the surface that emits a particle with an appropriate texture from the position of the face (you may want to build some null nodes in your mesh to get position from and use that for the placement of your particle. You can then animate the particle with a force/negative force wave to get a pulsating effect, or you could just emit one particle at a time from the same point to get the effect of the shape lifting away to fade out and repeat.
Not sure if these help at all, but if you have some visual reference for what you are trying to achieve, we can help more.
2 Likes
@Rajat_Nigam, I went a step further with a demo because I realized the shader I made for the last example didn’t take into account the surface normal (I forgot you were animating faces of an icosahedron). This playground will animate the face along the normal of the mesh:
https://playground.babylonjs.com/#CKEPC2
I added a simple icosahedron model, but you can do something similar with your model. Again, I extruded smaller faces to offset with vertex color as in the last one. The shader is all that changed in this version. The faceToAnimate input increments by 0.01 from 0.01 - 0.20 for convenience.
3 Likes
F*** YEAH!! First answer done using NodeMaterialEditor!!! ?/give a kiss to @PatrickRyan
1 Like
Thanks @PatrickRyan, This will really help me out, this is somewhat I wanted but I have to work on NodeMaterialEditor for achieving this. And I think if I apply this then I could not get the faceId on hover and on click.
2 Likes
@Rajat_Nigam the thing to take into account is that the face pick won’t take the shader vertex displacement into account. So the original position of the mesh will be the clickable face. However, it sounded to me like you want to click an unselected face to highlight the new face so it shouldn’t feel like you are missing the pick of the moving face.
In essence, the pick happens before the shader displacement. If you need to pick a moving face, you will want to skin the mesh to a skeleton so that the position of the mesh is determined by the offset of the skin and underlying bone which should allow you to pick a displaced portion of mesh through the skin.