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 Babylon.js/materialsLibrary/src/grid at master · BabylonJS/Babylon.js · GitHub

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.

2 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.