I think the GridMaterial extension makes for a really awesome playground and effect. I wanted to use it because it resembled an effect that I wanted to achieve. Indeed, achieving this is part of the reason why I started using BabylonJS. But I have a problem.
For my website (and for general awesomeness), I wanted to create 3D blocks that looked like they were made up of many tiny blocks. See the left-side of the attached image for examples. I ended up building an interactive editor that assembled 3 SVG
<Rect />s with a pattern atop each that resembled a grid. I handled the matrix transforms for each and built make-believe 3D cubes. But they were lacking, in various respects – like in the difficulty of scaling this and difficulties with animation. So due to this and other reasons I came to BabylonJS.
I’ve again built an interactive editor using BabylonJS, and it’s awesome, but I’m having difficulties reproducing the visual effect seen on the left-side of my image (with the SVGs). I thought GridMaterial would be the answer, but it’s led to some difficulties.
I cannot control the opacity of the grid and when using GridMaterials lighting effects are no longer taking place.
- Each side looks identical (see the right-side of the image). The SVG system (on the left-side) was simulating light effects (or simulating the simulation of light effects…) by hard-coding the opacity of each side. With BJS, I was hoping to have all of this handled by the lighting system (and have it look more realistic, as lighting effects on the left-side don’t make sense due to the hard-coding).
- Since I can’t control the opacity of the grid lines, they look harsh and sharp on the right-side.
The GridMaterial extension is quite comprehensive and I really don’t need so much. I’d be content only with grid lines with a spacing I can set, that allowed me to control the opacity, and that did not affect the lighting. Essentially, I want the right-side to produce blocks that look just as good, and then better than, the left-side. I’m sure BJS can do it, but I’m not yet sure how to do it myself.
I imagine I’ll have to do some UV mapping. But maybe there’s a better way. I’m also not sure if there’s an elegant way to reuse some components as the lines are essentially all the same – it’s just a grid.
Should I be creating my own material here? Some material overlay? A texture? I sense there’s a simple and elegant solution but I don’t know it yet.
After I solve this, I’ll be figuring out how to round out the corners of these cubes/blocks. That was simple to do in SVG, but it’s proven a bit challenging here. I’ve seen multiple ideas and a few playgrounds, but not yet something anyone has said is the best way (or pretty good). I do care about efficiency and I might make several hundred of these. If you’ve any thoughts about this, feel free to chime in too.
Thank you so much for any insight!