Fix for GridMaterial line intersections

For the GridMaterial, the places where grid lines intersect was too bright and it was really annoying me LOL, like below.

GridMaterial with default settings: https://playground.babylonjs.com/#2KKVBH#113

Currently the contribution of each axis is added together. If instead we use the max axis contribution then the issue of overlapping lines being too bright is resolved. :slight_smile:

Below is from the same playground using the updated GridMaterial.

Here’s a PR to update GridMaterial’s fragment shader with this fix.

Also here’s the NME grid material updated with this fix as well. :beers:
https://nme.babylonjs.com/#P3W42V

2 Likes

cc @sebavan

I kinda liked the dots :slight_smile:

joking aside I think this is a breaking change and I wonder if you could add it under a special #define ?

1 Like

Okay I’ll model it after fogEnabled with a define and property then. Hmm what to call the flag thou, maxAxisEnabled?

1 Like

I am super dumb with names… :slight_smile:

could be as simple as

#ifdef MAXLINES
    // Create the grid value from the max axis.
    float grid = clamp(max(max(x, y), z), 0., 1.);
#else
    float grid = clamp(x + y + z, 0., 1.);
#endif

and MAXLINES would map to a property named as you see best fit :slight_smile:

2 Likes

Yep that’s what I was thinking too, then model the property mapping after fogEnabled. :slightly_smiling_face: Maybe just maxLinesEnabled for the name then unless inspiration strikes. :wink:

2 Likes

Okay all done (I think). I went with calling the property useMaxLine and distinguished it from using the sum of the lines for the documentation. :slight_smile:

1 Like

Nailed it, thanks a lot !!!

1 Like