General help in achieving material grid effect

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.

The Motivation
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.

The Present
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.

The Difficulties
I cannot control the opacity of the grid and when using GridMaterials lighting effects are no longer taking place.

  1. 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).
  2. Since I can’t control the opacity of the grid lines, they look harsh and sharp on the right-side.

The Desire
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.

Current Thoughts
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.

Bonus!
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!

Would using and inner and outer box with grid material work for you? https://www.babylonjs-playground.com/#5S6MD#168

1 Like

Solution from @JohnK is great!

However, if you don’t want to use two boxes, you can try this one:

https://playground.babylonjs.com/#1QIWRQ

I thought it could be fun to recreate this material in the NME!

I used some simple computations for the lights, feel free to experiment (use texture instead of fixed color, for eg).

1 Like

When you move to rounded corner cubes then the increase in the number of vertices means the solution of @Evgeni_Popov does not double the vertices.

1 Like

When I checked my email this morning, I felt like Christmas came early. I did not expect such high quality responses so soon.

These are both fantastic suggestions and are generalizable to other endeavors. Thanks to you both.

@Evgeni_Popov Did you create this material from scratch in the NME, or did you use some template? That looks like a fairly sophisticated diagram. At least, there are a fair amount of nodes. I’m looking forward to diving into it. The NME seems like a powerful tool.

I’ll try out both solutions this week to learn them (the overlay idea looks promising for a cellular automata I want to build on a cube). As @JohnK mentioned, not having to double the vertices means I should put in the extra work to figure out how to use a new material too for this particular application.

Thanks again. I’ll report back soon.

I did it from scratch, but there are not so many different nodes, because contributionOnAxis Y and contributionOnAxis Z are a copy/paste of contributionOnAxis X and normalImpact Y / normalImpact Z a copy/paste of normalImpact X.

It’s a direct port of the shader code from the GridMaterial class, I reused the same variable names and put the same comments.

Nice!

Regarding the playground, it seems you should use a snippet like #ADJ9FW/31 in the ParseFromSnippetAsync and not #ADJ9FW#31:

https://playground.babylonjs.com/#1QIWRQ#1

Regarding your other questions about the code itself I can’t tell, I think whoever wrote the shader in the first place may be able to have more insights.

1 Like

Ah, nice find. That the version number was never registering explains why it kept reverting to the oldest version.

I’ve found the original code via GitHub, and I think I now get a sense of what’s going on. I’ll need to improve the anti-aliasing as the playground example makes it evident that it’s needed.

Thanks again for everything.

this is a bug I’m going to fix