Reference grid with Babylon.js

[sparkbuzz]

I want to draw a flat ground plane with a reference grid and I'm wondering what would be the best technique to use with Babylon.js.

 

I've considered creating a fragment shader, but I'm not familiar with GLSL and struggling with things like anti-aliasing. I've been fiddling with some code I got from a StackOverflow question, but I'm afraid I don't have enough experience with GLSL to take things further to solve issues with broken lines and aliasing.

 

precision mediump float;varying vec2 vUV;void main(void) {    if(fract(vUV.x / 0.1) < 0.01 || fract(vUV.y / 0.1) < 0.01) {        gl_FragColor = vec4(0.25, 0.5, 1.0, 1.0);    } else {        gl_FragColor = vec4(0.9, 0.9, 0.9, 1.0);    }}

Here's what the result looks like:

 

 

Other solutions I came across while Googling about included using a texture material, and using the Canvas 2D API to dynamically draw the grid, meaning I could make the grid adaptive as the view distance changes. I just think, however, a texture consumes much more memory than a shader would, and perhaps a shader would be faster.

 

Another, and I bet poorer, solution I considered included just creating line objects in the scene.

 

 

[GameMonetize]

This is always a tough question. Using lines could be interesting a performance wise it should be ok

[sparkbuzz]

Well, shader wise, here's what I come up so far:

 

http://www.babylonjs.com/cyos/#IBHRN#1

[sparkbuzz]

Here's the result of the above shader in my application. I'm not sure how to get rid of the gaps caused by aliasing.

 

[sparkbuzz]

Another iteration: http://www.babylonjs.com/cyos/#IBHRN#2

 

#extension GL_OES_standard_derivatives : enableprecision highp float;varying vec2 vUV;void main(void) {    float divisions = 10.0;    float thickness = 0.01;    float delta = 0.05 / 2.0;        float x = fract(vUV.x / (1.0 / divisions));    float xdelta = fwidth(x) * 2.5;    x = smoothstep(x - xdelta, x + xdelta, thickness);        float y = fract(vUV.y / (1.0 / divisions));    float ydelta = fwidth(y) * 2.5;    y = smoothstep(y - ydelta, y + ydelta, thickness);        float c = clamp(x + y, 0.1, 1.0);        gl_FragColor = vec4(c, c, c, 1.0);}

No more gaps, but still weird artifacts. Not really sure how to get the lines perfectly smooth...

 

 

[jahow]

If you want your grid lines to have actual thickness (as if they were drawn on the ground), your best bet is to use a tiled texture with mip mapping. Using a shader for this will be too much trouble and I don't think there is any real advantage.

 

If you don't care having lines with a constant thickness, using lines meshes as DK suggested would be a very simple solution. Whichever solution you decide to go by, performance should not be a concern for you.

[Dad72]

That's what I did on my editor. the use of a transparent texture with a grid that repeats and the result is pretty good.
 

                var grid = BABYLON.Mesh.CreateGround("GridLevelWater", 100, 100, 1, scene, false);		var materialGrid = new BABYLON.StandardMaterial("textureGrid", scene);		materialGrid.diffuseTexture = new BABYLON.Texture("Images/grid.png", scene);		materialGrid.diffuseTexture.hasAlpha = true;		materialGrid.diffuseTexture.uScale = 5.0;		materialGrid.diffuseTexture.vScale = 5.0;		grid.material = materialGrid;		grid.position.y = -0.05;

[sparkbuzz]

Mmm, I like jahow's idea of the lines being constant thickness, no matter the distance from the camera. I'm going to do some A-B testing with a texture as well, as I might want to render some text on the texture later on.

[sparkbuzz]

@dad72, here's the result when using a 64x64 PNG texture, I'm seeing lines being broken, but I think the problem here is mipmapping. Just need to figure out how to turn that on.

 

 

I tried using a post process filter to add fxaa anti-aliasing, but I'm not sure if I'm doing it right, not seeing any difference:

var camera:BABYLON.ArcRotateCamera = new BABYLON.ArcRotateCamera('main_camera', Math.PI / 4, Math.PI * 0.3, 18, BABYLON.Vector3.Zero(), this.scene);camera.attachControl(canvas, true);camera.inertia = 0;camera.angularSensibility = 250;camera.attachPostProcess(new BABYLON.FxaaPostProcess("fxaa", 1.0, camera, BABYLON.Texture.TRILINEAR_SAMPLINGMODE, engine, true));

[sparkbuzz]

I'm seeing something really weird. It doesn't matter if I turn anti-aliasing on/off on the following call:

var engine:BABYLON.Engine = new BABYLON.Engine(canvas, true);

the second parameter doesn't appear to make any difference on the texture?

 

EDIT: Scrap that, I see that AA only affects geometry, not textures, so how do I apply AA to textures?

[jahow]

First of all, please note that if you can transpose your problem into a playground, it will be easier to help you.

 

Now, I don't think AA is what you're looking for (and neither is the smoothing parameter in engine creation). What you experience is exactly what MIP mapping was invented for

 

There is a parameter in the texture creator to enable mip mapping: http://doc.babylonjs.com/page.php?p=25221

Mip mapping is on by default I think, so in theory you shouldn't even have to worry about it...

 

For the record:

- FXAA operates in screen space and smoothes pixels next to each other (not sure how exactly that works though!), but it won't bring you back "missing" ones on the far grid lines

- Engine smoothing (on by default) operates on the edges of rendered polygons, and draws antialiased edges instead of hard ones

 

EDIT: actually I realized my answer was incomplete: in this case, anisotropic filtering might also help you. Still, this should be enabled by default, so again, without a live example it's hard to tell where you issue may be.

[sparkbuzz]

My code's written in Typescript, and I'm not sure if the playground will allow me to upload my texture image, but that's definitely a good suggestion.

 

I think the ultimate solution is just going to be to create a mesh with a bunch of line mesh children. So far the result is much better than the texture approach, and I like the fact that the lines remain the same thickness despite the camera distance.

[jahow]

Uploading won't work, but loading data from an external resource should be possible.

 

Feel free to drop a screenshot here once you're satisfied with the result no shame in boasting.

[sparkbuzz]

Here's the result using BABYLON.LineMesh, much better...

 

To get the center lines thicker I'll use planes, and perhaps scale them based on camera distance, to keep their width uniform.