General Guidance : How to build realistic landscape

[dsman]

This is general guidance question. How to build detailed landscapes like the image below?

Trees can be modeled within lower poly count. But how about grass and micro plants?

I can see bloom, fog and lens flare are essential to create such a scene.  

 

[Dad72]

To make dense grass like on your image, can be use fureMaterial and add a grass texture. You can also use sprites to create taller grass variants.

http://doc.babylonjs.com/extensions/fur

For flowers, you can do it with low poly 3d models or sprites.

http://doc.babylonjs.com/babylon101/sprites

For the reflection, you have lens-flare.

http://doc.babylonjs.com/how_to/how_to_use_lens_flares

Fog can be easily added with Babylon.

http://doc.babylonjs.com/babylon101/environment

Babylon can allow you to do this kind of scene with a little bit of optimization.

But for the grass I recommend using FureMaterial which will give a realistic effect

Do not need to merge objects that have the same materials to optimize. 

http://doc.babylonjs.com/how_to/how_to_merge_meshes

Using instances, clone can also help optimize your scene

[waverider]

Fur material tends to have some performance issue when using it as a grassland..I've used it before it gives me about 8 fps to 10fps

[V!nc3r]

Another technique for grass is to use textures meshes, like in this example.

[waverider]

Here's a procedural tree generation algorithm 

https://github.com/supereggbert/proctree.js/

I'll make a PG if I have spare time

[Guest]

For lens effects I recommend:

- The default rendering pipeline https://www.babylonjs-playground.com/frame.html#Y3C0HQ#103

or

- the lens rendering pipeline: http://www.babylonjs.com/demos/dof/

[V!nc3r]

Yeah, I had never play with lens effect, here a try with the cornell box scene, very nice implementation!

[dsman]

Thank you all for the inputs.
I just saw Threejs bloom post process (which they say is inspired by UE) https://threejs.org/examples/webgl_postprocessing_unreal_bloom.html

In that example, the bloom is applied to the material, not to the frame. That one is more realistic. Most quality Unreal Engine visualizations use it heavily I think. 

As far I as I can tell, Babylon doesn't have it. Right?

[dsman]

Also, I think the above image also has those sun rays (I guess called "God Rays" in 3D graphics terminology). We do that in Babylon using volumetric light scattering?

[BitOfGold]

@dsman That Three js bloom is really cool...

 

[V!nc3r]

I just tried to copy the Three.js scene in the playground, here you have: https://www.babylonjs-playground.com/#11N7QC#4

I think I'm not far away from the desired result.

[V!nc3r]

And as for the volumatric lights, here another try: https://www.babylonjs-playground.com/#J5E230#31

... but it seems to render in a weird way (volumetric light seems to be placed where are supposed to be the shadows!), so did I make a mistake in my use?

[edit] After re-trying to tweak volume light, I can't sucess to get the result I want. I take the liberty to ping you @Deltakosh, maybe I spot a bug? [/edit]

[Guest]

Pinging @Luaacro for VLS

Regarding bloom, we will soon have a far better one. Stay tuned to this PR: https://github.com/BabylonJS/Babylon.js/pull/3956

[waverider]

@dsmani

this pine tree looks almost realistic

 

https://www.babylonjs-playground.com/#LG3GS#179

[V!nc3r]

@Luaacro, may I ping you about my message above? http://www.html5gamedevs.com/topic/36530-general-guidance-how-to-build-realistic-landscape/?do=findComment&comment=209397

 

[julien-moreau]

Hey @V!nc3r have you tried to use http://doc.babylonjs.com/how_to/using_the_volumetric_lightscattering_post-process instead of Standard Rendering Pipeline for VLS effect ?

[V!nc3r]

Here my try: https://www.babylonjs-playground.com/#J5E230#58

About the doc, I made a PR with an updated PG But I'm wondering if the Base demo linked at the bottom of the doc page is the correct one? Because it's not talking at all about VLS

 

[julien-moreau]

That looks cool !