# General help in achieving material grid effect
**URL:** https://forum.babylonjs.com/t/general-help-in-achieving-material-grid-effect/10329
**Category:** Questions
**Created:** [April 26, 2020, 8:11am UTC](https://forum.babylonjs.com/t/general-help-in-achieving-material-grid-effect/10329 "2020-04-26T08:11:54Z")
**Posts on this page:** 9
**Page:** 1
### Author:  [@Babylonian2718](https://forum.babylonjs.com/u/Babylonian2718)
#### Post date: [April 26, 2020, 8:11am UTC](https://forum.babylonjs.com/t/general-help-in-achieving-material-grid-effect/10329/1 "2020-04-26T08:11:55Z")
I think the [GridMaterial extension](https://doc.babylonjs.com/extensions/grid) makes for a really awesome [playground and effect](https://www.babylonjs-playground.com/#1UFGZH#12). 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 ``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!
---
### Author:  [@JohnK](https://forum.babylonjs.com/u/JohnK)
#### Post date: [April 26, 2020, 1:09pm UTC](https://forum.babylonjs.com/t/general-help-in-achieving-material-grid-effect/10329/2 "2020-04-26T13:09:09Z")
Would using and inner and outer box with grid material work for you? [https://www.babylonjs-playground.com/#5S6MD#168](https://www.babylonjs-playground.com/#5S6MD#168)
---
### Author:  [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)
#### Post date: [April 26, 2020, 2:32pm UTC](https://forum.babylonjs.com/t/general-help-in-achieving-material-grid-effect/10329/3 "2020-04-26T14:32:22Z")
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](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).
---
### Author:  [@JohnK](https://forum.babylonjs.com/u/JohnK)
#### Post date: [April 26, 2020, 5:04pm UTC](https://forum.babylonjs.com/t/general-help-in-achieving-material-grid-effect/10329/4 "2020-04-26T17:04:44Z")
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.
---
### Author:  [@Babylonian2718](https://forum.babylonjs.com/u/Babylonian2718)
#### Post date: [April 27, 2020, 2:18am UTC](https://forum.babylonjs.com/t/general-help-in-achieving-material-grid-effect/10329/5 "2020-04-27T02:18:16Z")
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.
---
### Author:  [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)
#### Post date: [April 27, 2020, 11:53am UTC](https://forum.babylonjs.com/t/general-help-in-achieving-material-grid-effect/10329/6 "2020-04-27T11:53:56Z")
> [@Babylonian2718](#):
>
> 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 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.
---
### Author:  [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)
#### Post date: [May 9, 2020, 10:35am UTC](https://forum.babylonjs.com/t/general-help-in-achieving-material-grid-effect/10329/8 "2020-05-09T10:35:24Z")
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](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.
---
### Author:  [@Babylonian2718](https://forum.babylonjs.com/u/Babylonian2718)
#### Post date: [May 9, 2020, 8:52pm UTC](https://forum.babylonjs.com/t/general-help-in-achieving-material-grid-effect/10329/9 "2020-05-09T20:52:11Z")
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.
---
### Author:  [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)
#### Post date: [May 11, 2020, 3:25pm UTC](https://forum.babylonjs.com/t/general-help-in-achieving-material-grid-effect/10329/10 "2020-05-11T15:25:19Z")
> [@Evgeni\_Popov](#):
>
> `#ADJ9FW/31` in the `ParseFromSnippetAsync` and not `#ADJ9FW#31` :
this is a bug I’m going to fix