General help in achieving material grid effect

Questions
1

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!

comparison-blocks
comparison-blocks1941×918 321 KB

2

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

1 Like
3

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
4

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
5

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.

6

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.

8

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
9

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.

10

this is a bug I’m going to fix