Hi all,
I am quite new to BabylonJS and I have been trying to better understand how meshes and materials work. I have started with a workshop project from the documentation (Babylon.js docs) PG ( https://playground.babylonjs.com/#4GBWI5#266 ). This mesh does not generate a bottom plane for the created room, so I experimented a bit with the vertexData and ended up adding 2x3 indices for the 2 triangle that would make up the floor. So far so good.
My problems started when I attempted to apply a GridMaterial to the floor ONLY. To achieve this I split my original mesh into 2 submeshes, one for the walls and one for the floor. Then I added GridMaterial to the floor and instead of a grid pattern I ended up with strangely fading parallel lines. What am I missing here? Also, why do the walls have these strange shadows? They seem to have triangle shapes so maybe there are some misaligned triangles in the wall mesh?
Here is a link for my playground Babylon.js Playground .
Any help would be much appreciated
This is because the normals of your floor are wrong:
They should be all straight up.
They are used in grid material to ensure it looks good when applied on smthg spherical.
Thank you for the quick response. So when the normals are calculated by BABYLON.VertexData.ComputeNormals it took into consideration the normals of the triangles of the walls? If I would like my floor to have a non-fading grid, then what would be the best way to achieve it? Creating 2 separate meshes for the walls and floor, applying materials to them and then merging the meshes?
This sounds like a nice option indeed
1 Like
Thank you for the help, I kept experimenting with gridmaterials, but I seem to be lost on how some of its properties work.
Lets say I have a polygon and would like the grid to start in one of the polygon’s corners. How can I achieve this? I created a simple playground Babylon.js Playground where I calculated it for a square: if the square is 10 long, and the gridratio is 0.6, then I would need to use an offset of: 10%0.6/2 = 0.2 i.e. (0.2,0.2,?) offset vector to make the grid start in one of the corners. It is quite easy for squares, but how can this be calculated for a polygon? Is the grid applied based on the boundingbox of the polygon?
In the same playground I also tried rotating the gridlines by rotating the UV coordinates, however it did not seem to have any effect on the grid lines. It would be a trivial solution to just rotate the mesh, but a polygon mesh is not always symmetrical, so I can not do this.
Thank you
The grid material is all based off the local position of the vertices and the lines follow the axis. For what you are trying to do, you might be better using UV and textures ?
Thank you @sebavan that was indeed the right approach. I experimented a lot with it, but managed to get the tiling and rotating and scaling working. Now I would like to shift the grid texture in a way that the grid “starts” at a given position, meaning that there is an intersection of lines where the grid is. I know that my grid cells are exactly 0.9 sized in the world space so I took the boundingbox.minimumworld of the polygon and calculated their distance in the x and z directions (my polygon and point are in the xz plane), then took the 0.9 remainder of the distances (so this is how far an intersection is from my intended point). This is the distance in the real space, so I also true divide it by 0.9 to get the UV offsets (from the xz distances respectively). The texture is a single grid cell that tiles the polygon. This method should work assuming that the tiling “starts” at the boundingbox.minimumworld, but it does not seem to achieve the desired effect. Am I wrong in my assumption or this is not how the offset should be calculated?
Thank you kindly for your help and patience with me 
1 Like
