# How to implement large probably 1000x1000 grid. Not necessarily 3D?

## Recommended Posts

How to implement large probably 1000x1000 grid. Not necessarily 3D?

##### Share on other sites

if you just need to draw a grid without any logic on a plane, you could use the grid material : http://doc.babylonjs.com/extensions/Grid

if you need to draw a grid as crossed lines in one draw call, you could use the LineSystem : http://doc.babylonjs.com/tutorials/Mesh_CreateXXX_Methods_With_Options_Parameter#linesystem with 1000 x 1000 orthogonal lines

maybe some LOD would be useful here

##### Share on other sites

You may want to look at a Canvas2D Here is a thread I started some time ago. I was talking about text handling for numbering a parking lot.

Later they showed how you can draw anything you want onto the canvas.

##### Share on other sites

On 8/4/2016 at 6:14 PM, jerome said:

if you just need to draw a grid without any logic on a plane, you could use the grid material : http://doc.babylonjs.com/extensions/Grid

if you need to draw a grid as crossed lines in one draw call, you could use the LineSystem : http://doc.babylonjs.com/tutorials/Mesh_CreateXXX_Methods_With_Options_Parameter#linesystem with 1000 x 1000 orthogonal lines

maybe some LOD would be useful here

Thank you so much for your response!

As you mentioned do you want to do any processing? I would like to create boxes of random size that should align with grid squares. For example, if grid is 8x8 square and there is a box of size 2x3 then it should exactly take 2x3=6 square on grid. Is there any way to force this? Actually I want have drag and drop for those boxes that's why this restriction is needed. Or do I have to do maths stuff to force this?

##### Share on other sites

hi

may be this help

i use shader for tile generator

http://www.babylonjs-playground.com/#Q87ZR#2  100x200   without smooth

http://www.babylonjs-playground.com/#Q87ZR#3  1000x1000 smooth

``````var plan = BABYLON.Mesh.CreateGround("a", 200, 200, 1, scene);
.SetUniform('plansize','vec2')
.SetUniform('gridSize','vec2')
.SetUniform('smoothPower','vec2')
.InLine('float fg = length(pos-camera)/60. ;\n\
float smooth_px = ((sin(pos.x*(1./plansize.x)*gridSize.x *3.141592)));\n\
float smooth_pz = ((sin(pos.z*(1./plansize.y)*gridSize.y *3.141592)));\n\
float px = abs(floor(sin(pos.x*(1./plansize.x)*gridSize.x *3.141592)));\n\
float pz = abs(floor(sin(pos.z*(1./plansize.y)*gridSize.y *3.141592)));\n\
if(px+pz > 1.95 || px+pz < 0.05 ) result = vec4(1.); \n\
else result = vec4(0.);\n\
fg = min(smoothPower.x,max(0.,pow(fg,0.5)*smoothPower.y));\n\
vec3 smooth = vec3((pow(smooth_px *smooth_pz,0.8)*(1.-fg) ));\n\
result = vec4( result.xyz*pow((1.-fg),2.)+ smooth, 1.); ')
.BuildMaterial(scene);
plan.material.setVector2('plansize',{x:200,y:200})
plan.material.setVector2('gridSize',{x:1000,y:1000})
plan.material.setVector2('smoothPower',{x:0.9,y:2.8})

smoothPower
x : [0< x < 1.]  => 0 no smooth  .. 1 : no Grid
y : [1. < y < ... ] =>  1. : liner smooth , 2.8   arc smooth``````
##### Share on other sites

21 hours ago, NasimiAsl said:

hi

may be this help

i use shader for tile generator

http://www.babylonjs-playground.com/#Q87ZR#2  100x200   without smooth

http://www.babylonjs-playground.com/#Q87ZR#3  1000x1000 smooth

```
```var plan = BABYLON.Mesh.CreateGround("a", 200, 200, 1, scene);
.SetUniform('plansize','vec2')
.SetUniform('gridSize','vec2')
.SetUniform('smoothPower','vec2')
.InLine('float fg = length(pos-camera)/60. ;\n\
float smooth_px = ((sin(pos.x*(1./plansize.x)*gridSize.x *3.141592)));\n\
float smooth_pz = ((sin(pos.z*(1./plansize.y)*gridSize.y *3.141592)));\n\
float px = abs(floor(sin(pos.x*(1./plansize.x)*gridSize.x *3.141592)));\n\
float pz = abs(floor(sin(pos.z*(1./plansize.y)*gridSize.y *3.141592)));\n\
if(px+pz > 1.95 || px+pz < 0.05 ) result = vec4(1.); \n\
else result = vec4(0.);\n\
fg = min(smoothPower.x,max(0.,pow(fg,0.5)*smoothPower.y));\n\
vec3 smooth = vec3((pow(smooth_px *smooth_pz,0.8)*(1.-fg) ));\n\
result = vec4( result.xyz*pow((1.-fg),2.)+ smooth, 1.); ')
.BuildMaterial(scene);
plan.material.setVector2('plansize',{x:200,y:200})
plan.material.setVector2('gridSize',{x:1000,y:1000})
plan.material.setVector2('smoothPower',{x:0.9,y:2.8})

smoothPower
x : [0< x < 1.]  => 0 no smooth  .. 1 : no Grid
y : [1. < y < ... ] =>  1. : liner smooth , 2.8   arc smooth``````

This one has almost 60 fps! Thanks a lot!

you welcome

##### Share on other sites

Where do you learn how to write shader code in babylon? Or just shader code in general because I see code but don't understand how it all flows.

I know its a chunk of code that executes on the gpu but thats about it.

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

×   Pasted as rich text.   Paste as plain text instead

Only 75 emoji are allowed.