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

[Majeed Siddiqui]

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

Playground: http://www.babylonjs-playground.com/#1VGWP9#9

Thanks in advance.

[jerome]

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

example : http://www.babylonjs-playground.com/#1YCYTA

maybe some LOD would be useful here 

[chicagobob123]

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. 

http://www.babylonjs-playground.com/#2MSLK#4

 

 

[Majeed Siddiqui]

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

example : http://www.babylonjs-playground.com/#1YCYTA

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? 

[NasimiAsl]

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);
		plan.material = new BABYLONX.ShaderBuilder()
		    .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

http://www.babylonjs-playground.com/#Q87ZR#4

[Majeed Siddiqui]

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);
		plan.material = new BABYLONX.ShaderBuilder()
		    .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

http://www.babylonjs-playground.com/#Q87ZR#4

This one has almost 60 fps! Thanks a lot!

[NasimiAsl]

you welcome

[chicagobob123]

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.