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

Questions
1

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:

2

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 https://github.com/BabylonJS/Babylon.js/tree/master/materialsLibrary/src/grid

1 Like
3

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.

3 Likes
4

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.

5

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?

6

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

7

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