Creating a circular, scaling ground grid, with edges that fade?

Hi, I have been looking at this example that I see posted on this forum a few times and I want to do something similar. :cowboy_hat_face:
https://playground.babylonjs.com/#8562J8#1

Background:

Currently we generate random rectangular prisms that start on 0,0,0. And I want to create a measurable, standard-size grid so the user can judge scale. Maybe I will have the grid tick every 100 units or so which corresponds to 100mm in our program.

All the rectangles are different sizes, so I will increase/decrease the size of the ground grid circle accordingly to be maybe 30% larger than the object.

Questions:

  1. Is it possible to make this ground grid into a circle instead of a square?
    1a. I believe I answered my question by finding this topic: https://playground.babylonjs.com/#LAAHD8#1

  2. Is it possible for the actual grid lines to fade-out on the edges?

  3. How can I make the ground grid opacity go to 0% when viewing from underneath?

Thank you! :crossed_fingers:

In PG #8562J8#1 line 75 change false to true;

Do not know about this one. Does not seem to be a parameter of gridMaterial . May be possible by modifying gridMaterial code Babylon.js/materialsLibrary/src/grid at master · BabylonJS/Babylon.js · GitHub

1 Like

You can use the node material version of the grid material and update it to make the edges fade:

Use the FadeFactor property to adjust the fading effect.

2 Likes

Hi Evgeni,

When I go to the Material and Export it as a .JSON then try to import it I am only seeing the diffuse color but no grid or fade. Do you have any idea why?

  1. I open material editor
  2. I go to File > Save. The .Json from that link is 146kb
  3. If I apply to a cube or plane etc. it is always only yellow (diffuse color) with no grid

There are no chrome or any other errors.

It is hard to tell as it works in the PG and it is essentially what it is doing: the BABYLON.NodeMaterial.ParseFromSnippetAsync("#I4DJ9Z#4", scene); call is getting the json form of the node material and parses it.

Also, in this PG I have simply saved the material from the NME (save button) and copied/pasted the content of the file into the PG (line 42):

https://playground.babylonjs.com/#VTSHNV#2

As you can see, it does also work.

Are you using Babylon v5?

I’m using 4.2 because v5.0 is just alpha. Do you think that’s the problem?

It could be. You should try with v5 and see if that fixes the problem.