Jump to content

Reference grid with Babylon.js


Recommended Posts

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.



Link to comment
Share on other sites

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




Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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;
Link to comment
Share on other sites

@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));
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...