Testing miniMeshes | Babylon.js Playground (babylonjs.com)
I’m currently working on a project where I create multiple ribbons for each square of the original ribbon. The reason for this is that if certain conditions are not met, I won’t create that specific square. After creating all squares individually, I merge them into a single mesh and then apply the texture. However, the texture is being applied to each square individually rather than to the entire mesh (as is done when creating a single ribbon).
I’ve tried to use CSG and intersections but it didn’t work, any ideas?
Welcome aboard!
I don’t see any simple solution, as you will need to recreate a uv mapping for the merged mesh…
cc @PatrickRyan in case he has any ideas.
I’ve tried intersecting both ribbons with CSG and the texture is kinda working, but the intersection isn’t, do you know what causes this?
CSG will generally not work correctly if geometry has no volume and is not closed. You should try to give a thickness (even a small one) to your ribbons.
@JPKyzzor, is there a specific reason you need to remove the geometry like for mesh picking? If not, then the simpler solution would be to just discard the pixels that aren’t needed in the shader. This way you are not having to recreate the geometry or needing to regenerate UVs. In the node material editor we have a discard block that will discard any pixel below a threshold. You could use position in the fragment shader with some logic blocks to discard any pixels you want. Granted this is a per-pixel operation rather than simply not having mesh to render, but since it’s a discard operation, it’s not too bad in that we see not to render the pixel and move on.
Hi there, thanks for answering, in my project I’m generating only the squares that at least one of the four points are above floor level && that specific session has a pendulum with grains, if both true = square is built.
Probably there’s a better way of doing this, but the goal is to create a mountain of grains based on specific points inside the warehouse (red points in the screenshot)
Pendulums 08, 09, 10 are empty, so it shouldn’t have grains in the right side
@JPKyzzor, in looking at the problem you are trying to solve, it seems like there may be a simpler way to do this. It seems like you have a high resolution plane that represents the grain that needs to be displaced based on the amount of grain under each pendulum.
The way I would approach this problem is to place the high res plane just under the floor of the warehouse so that it isn’t visible when there is no grain on the floor. Then I would do a vertex displacement shader on the plane so that I can push vertices based on a texture. Something like this example PG. Then for the displacement texture, you can use dynamic textures to “paint” a lighter and lighter “gradient stamp” in the area under each pendulum. As the texture gets brighter in areas, the vertex displacement will cause individual vertices to move upward in real time. At that point, any vertices that have no grain will remain under the floor and you can let the penetration of the plane and floor occlude any parts of the floor that should not have grain.
What this will allow is that you can change the height of the grain in real time instead of generating ribbons and then needing to CSG them which will likely cause you to need to create new UVs. The CSG step also takes a little time so being able to see the displacement in real time wouldn’t be possible. I hope this explanation sparks some ideas for you. Let me know if you have further questions.
Hey, thanks for answering again.
What I currently have is a ribbon that was created considering the vector3s of each pendulum where the grain is at, it looks very detailed because I applied a CreateCatmullRomSpline for each path twice, horizontally and vertically. After the creation the ribbon is placed slighly below the ground. (y -=0.15).
Let me see if I understood your idea correctly, basically I would paint a plane with a dynamic texture, the lighter = more grain. Then the vertex displacement shader would move the lighter parts upwards? That’s it? I’m currently exploring the dynamic textures to paint multiple gradient circles in a plane, but I have no idea about how to do the vertex displacement
@JPKyzzor, if you look at the PG I linked above you will find a node material in the Materials section of the inspector. The node material has a pencil icon next to it and you can either click this icon or select the material and click on the material and then on the node material editor button lower in the inspector.
This will open the custom shader in the node material editor:
It may look a little overwhelming, but in fact this shader isn’t too bad once you look through the nodes. You can see that there is one part of the shader that is creating the voronoi noise texture and twirling it, and then that passes to both the fragment output for color and the vertex output for displacement. For your part, you can ignore all of the nodes that create the texture as you will be doing yours dynamically and just feed a texture node into the part of the shader which scales the normal by the texture value and adds it to the mesh.position:
This will move the mesh position along the normal vector to a specified distance determined by the value of your texture at that point. You will want a fairly high-resolution mesh to take advantage of the transitions in your texture, but your scene already appears to be using a high-resolution mesh so this should not add any performance drains over what you have. Let me know if this makes sense or if you have more questions.
1 Like
Hey there! Thank you for your help, since i’ve never worked with materials, I tried to find another way to fix this issue. I got an idea after reading you saying “Place the high res plane just under the floor of the warehouse” so i’ll mark that as the solution.
Since I was creating the lower points of the ribbon at the warehouse floor (red points), I was having bad results when the grain was very low (you can see those photos I sent in the previous message).
Now, if a pendulum doesn’t have grains, the red point Y will be the lowest point of the floor, instead of the actual floor Y. This way, I only need to create one ribbon and the texture works fine.
It’s now working great for the many different types of floors we can have 
1 Like
@JPKyzzor, this is a great solution and I’m glad you were able to get there without needing to rely on CSG and regenerating UVs at runtime. This method is more of a hack that you will see in game development, but it’s a simple and cheap solution that works. Most of the time, simple and cheap is the best of all choices since you never know what device is hitting your site and extra memory going to remeshing at run time can lag the experience on low-end devices. Glad to see you have this in hand!
2 Likes
