Grid Material opacity/visibility

Hello everyone!
I wanted to implement in my app GridMaterial on the plane but it has to be a little bit transparent. I discovered that when I’m changing the opacity of the GridMaterial it completely removes the main color and the opacity is changing only for the lines.
I could solve this by creating another plane with the specific color and opacity but I guess it won’t be the clearest solution.

line 39
https://playground.babylonjs.com/#G8YR0B#1

adding @sebavan

I think this is the reason why that happen.

To be honest, I don’t have solution for this (i tried out few stuff, but nope). But adding another plane should work fine. I don’t think it’s bad solution.

You can use the node material version and just plug the value you want in the alpha input of FragmentOutput: Babylon.js Node Material Editor

Yes by design in opacity mode, we do not display in between the lines the idea in this case, is to only draw the grid.

If you want, you can make a PR adding a new mode for it ???

I solved it by adding another plane… https://playground.babylonjs.com/#G8YR0B#2
@Evgeni_Popov, nme looks so powerful, I have to finally take my time to learn it :slight_smile: @sebavan Actually I’d love to do that. How can I start with my first PR? I’ve never done this before.

It all starts here Start Contributing to Babylon.js - Babylon.js Documentation

then you would need to modify Babylon.js/gridMaterial.ts at master · BabylonJS/Babylon.js · GitHub to add a new blend mode and in here Babylon.js/grid.fragment.fx at master · BabylonJS/Babylon.js · GitHub use this blend mode to setup a constant background opacity.

1 Like