Auto Lod Simplify - Mesh become transparent zooming out

[Ragash]

Hi guys and nice to meet you.

 

I've been lurking the forum from a while, im very beginner into WebGL and Babylon.js, and i started studing some terrain modification editing and breaking a bit the demo Worldmonger.

 

i was testing the use of bigger heighmap to generate the terrain, and i was thinking to use the new autolod feature to give relieve visualizing the result on older machine.

 

the problem is when i put a basic simplify, the generated terrain become transparent, as i changed some alpha values.

 

the link of my current demo is here

 

what i'am doing wrong? maybe i forget to change some settings into the WORLDMONGER.groundmaterial?

i was thinking to modify the material propriety directly into the callback of the autoLod function, but i've no idea about what insert inside

 

any suggest?

 

thanks for your time guys, this comunity really rocks, i've started messing up with babylon reading you here. have a nice programming

[GameMonetize]

Hey!

 

Welcome! To help you without havong to dig into your code for ages, the best is to submit a repro if possible on the Playground

[Ragash]

Wow! thanks for the ultra fast reply!

 

i though about creating a scene in playground, but i fear the problem is related to the custom shader of worldmonger, so i doub i will be able to replicate the behaviour (i will try in anycases for sure )

 

i just messed up with the dimension of the ground generator, swapping the heigmap as asset, and then added the simplify into "index.js" which is the main generator of worldmonger.

 

thanks in anycases for your time, i will try to follow your suggestion ^^

[GameMonetize]

You can add you own shader in the playground like here..

http://playground.babylonjs.com/#1I0RKU

 

 

[RaananW]

Hi Ragash,

 

wow, that looks really nice :-)

 

The reason the ground disappears is that the ground's vertex data is created async after the image was downloaded. You simplify before the vertex data was initialized and therefore it has nothing to simplify (it also ends rather quickly :-) ).

I documented it here : http://doc.babylonjs.com/page.php?p=24822 (Quirks). What I forgot to document is the fact that a callback was added to the create ground function exactly for that reason. I'll update the documentation soon. The last variable in the create ground is a callback function that is executed after the ground was created. So, in your case :

var ground = BABYLON.Mesh.CreateGroundFromHeightMap("ground", "Assets/heightMap.png", 2049, 1370, 250, 0, 50, scene, true, function() {    ground.simplify([{        distance: 500,        quality: 0.5        }, {        distance: 1000,        quality: 0.2    }],    false, BABYLON.SimplificationType.QUADRATIC, function() {        alert("simplification finished");    });});var groundMaterial = new WORLDMONGER.GroundMaterial("ground", scene, sun);ground.material = groundMaterial;ground.position.y = -2.0;

btw, I am not sure what your "updatable" flag is set but if you only set it for the LOD - it is not needed. Can be set to false. LOD doesn't modify the vertex data, it uses a new one. 

 

Something else - Using LOD on this big area will probably make it rather problematic. The object's position is 0,0,0 (let's say) and the distance is being measured from that point (and not from the nearest distance to the object). meaning that by walking on the surface, LOD might be triggered (even thou the camera is directly ON the object). 

I would rather divide this ground to a few objects (if you want to create LOD for each) or set the first trigger distance to a distance higher than the size of the ground. Maybe I'll try finding a way to make this simpler for HeightMaps , as this is the perfect position for the simplify feature.

[Ragash]

So many thanks for the reply, even if did not used playground!

 

your resolution works like a charm Raanan, so many thanks for the deep explaination: i was already planning to subdivide the big fat plane into a tiled ground, so i (hope it) will take rid of the "distance problem" that let the lod kick in.

in this way i will able to offer more "bigger" hightmap and texture (still deciding if mapping one single big diffuse text, or tiling it and streaming with by camera position in some way) and let the LOD get some relief for the tiles that currently are not being displayed.

 

i am right?

 

p.s. As for the "Update", the script is WorldMonger bases, so the base mesh is suitable to be modified after the initial renderting/instantiation, i'm was thinking to let the base heightmap to be updatable to if the future viewer as some special permission.

 

thanks again for your time and your help!

[RaananW]

I need to check that with tiled ground. I believe tiled ground is still one big mesh, simply divided to more sub-sections/triangles (if anyone can correct me, please do!  )

It would be better to actually divide the ground to different meshes. It is however not that simple. You will however benefit from from frustum rendering and LOD for each part of the ground.

[GameMonetize]

Correct, Tiled Ground is a big mesh

[Ragash]

just a last question, it's possible to load a different height map to every tile of a tiledground?

 

i was thinking modifying the position of the submesh but i've not found any advice for this kind of stuff.

 

thanks again guys

[RaananW]

Submeshes have no position, so you couldn't change it.

It is not possible with the functions available, but you could create a function that takes the image, divides it to N*M parts and creating from those parts N*M (ground)meshes. Should be very interesting to implement 

[reddozen]

We are creating out terrains in 3DS and then breaking down the mesh from there and exporting it into chunks.

[RaananW]

This works - http://www.babylonjs-playground.com/#UVE2P , I have extended the create ground function to have two more variables, width parts and height parts.

Adding diffuse texture to that would be your job :-)

The callback function gives you back the array of the meshes created. plenty of room for improvements, but it's a start.

[Ragash]

that's really close to what im looking for but the point it's to load a different tiled heightmap for each tile of the ground, in that way i could improve the detail for each portion of terrain i will go to generate.

 

thanks you kindly raanan for the code and for your time, i will surely start from that

[RaananW]

Hola,

 

well - this is kind'a what you describe. I have fixed a small bug in yesterday's function - http://www.babylonjs-playground.com/#UVE2P#1 . This ground is now divided to 16 different meshes, all created from one single height map. Here is the same with decimation for each part - http://www.babylonjs-playground.com/#UVE2P#2 . Actually not bad for ground maps If you look from above you will see some missing triangles, but for a game where the actor is walking on the surface, this would be really great.

[Ragash]

my bad Raanan, i did not explain it correctly twice

 

what i mean to do after splitting a plane into smaller meshes (what your give script do perfectly) is to use a different image as heighmap for every given tile ground.

 

In fact i wonder, if i can provide a greater resolution image(for example: x0_y0.jpg, x1_y1.jpg and so on...) for every tile (which will have even a bigger number of vertex) the final result will be more smooth and detailed (and even work with the autoLOD feature i think).

 

thanks again for your reply, i will start to make something about it and post it here

[Ragash]

Well i modified a bit your script and it work as intendeed:

var createCustomGround = function (name, url, width, height, subdivisions, minHeight, maxHeight, scene, updatable, onReady, heightParts, widthParts) {        var ground = new BABYLON.GroundMesh(name, scene);	ground._setReady(false);                                var groundArray = [];            			        for(var w = 0; w < widthParts; ++w) {	   for(var h = 0; h < heightParts; ++h) {                	   var g = BABYLON.Mesh.CreateGroundFromHeightMap(name, url+"test_x"+ w +"_y"+ h +".png", width/widthParts, height/heightParts, subdivisions >> 0, minHeight, maxHeight, scene, true,           function() {              g.simplify([ {              distance: 300,              quality: 0.1    	      }],    	   false, BABYLON.SimplificationType.QUADRATIC, function() {                   alert("simplification finished");    	          });           });                               	   g.parent = ground;	   g.position.x  = -(width/4) + (width / widthParts) * (w) - width/(heightParts*2)	   g.position.z = -(height) + (height/heightParts) * (heightParts+h) -(height/2.68);	   groundArray.push(g);				           }                         }	            console.log(subdivisions/(heightParts*widthParts))           	        ground._setReady(true);                    if (onReady) {           onReady(ground, groundArray);        }                    return ground;    };

that's the costructor of the custom function, now the call:

var ground = createCustomGround("ground", "../../tiles/", 2048, 1368, 250, 0, 50, scene, false, function(ground, groundArray) {        console.log(groundArray);      }, 4,4);

material for now are gone, but i will fix that later, now my concern are mostly in performance.

 

on my old machine i get around 12-10 fps, and i've already tried to apply the LOD to the ground entity, but as "expected" it not work as intended.

 

i'm sorry to not have provided a playground setting, but i've no idea how to provide my custom heightmaps to the scene (however the link into the first post is now updated to the new modifications).

 

suggest? i've looked for a sort of "frustum culling" into babylon,js but did not find nothing unfurtunatly, there are some resource, or example i can use as guide?

 

edit: at this point i start to think that it's "simplier" to create mesh of the terrain directly in blender and then import it into babylon.js...

[RaananW]

I would lower the subdivisions per tile. 250 is wonderful for a large map (as in the playground demo), you are creating 16 tiles with 250 subdivisions each. Which is quite a lot

 

Your x/z position calculations are interesting - why : (height/2.68) ?

[Ragash]

As said im still a beginer, but i noticed that the generated terrain will not align correctly with the plane and the water lever which had the same dimension (and both generated at the origin).

 

so i tweaked a bit the reposition of the gen mesh to ensure that each "level" will perfectly fit on each other (if you go in wireframe mode and zoom out you will notice better what i mean).

 

anyway im making some build in blender now, i will try to upload the result asap, an see which one will perform better.