Sprite occlusion for performance - Part II

[simon_bg]

Hi peeps, I've already published a similar topic not a while ago, but we couldn't really reach any conclusion:
http://www.html5gamedevs.com/topic/32079-sprite-occlusion-for-performance/

I have this demo: http://devel.arinnova.com/tests/3dmaps/babylon_demo/

I'm trying to get a similar forest to this three.js scene: https://www.piste.io/#!/cortina . Notice how the forest is really dense and the FPS are really good.

What I've already tried without success: 

1) Loading meshes instead of sprites and applying LOD mechanism resulted in very low FPS.
2) Using mesh instances instead of sprites, still very low FPS 
2) Temechon kindly helped me and coded a LOD function for sprites, but unfortunately it was more or less the same FPS as without the LOD.
4) Showing all the 54k trees, but using a particle system instead of sprites, which helped to reduce the draw calls, but the FPS were still low.
5) I've implemented a "poor man's LOD". I separated the 54k trees into 9 chunks, each chunk corresponding to a specific area. Then at every frame I calculated the distance from the camera to the central point of each area. If it was close enough to the camera, I showed the area trees and if not, I removed them. This way at each frame I had to calculate distances to only 9 points instead of 54k points, which helped but visually it was not pretty at all. Even applying a brown texture on the terrain underneath the trees, the chunks of trees appearing and disappearing all at once are very noticeable.
6) I also reduced the tree image size to 128x128, just in case, but I'm not sure it had an effect on FPS.

Using an image of a pine tree or a leafy tree would create much more perception of a dense forest, but unfortunately I can't use those. The scene is a winter map of a specific real-world area with leafless trees and I'm trying to be as realistic as possible.
A silly idea I've also tried was using an image of a group of trees instead of an image of a single tree. It obviously looked fake, especially when rotating the camera.  

Some other ideas that I've had but have not tried: 
    Solid Particle System -> as it has more effect on performance than a simple particle system and I've already tried that.
    Octrees -> could this help me? I've read the tutorial but I'm not sure I understand how could I apply it to sprites. 
    I don't know how camera.maxZ works internally, but is there possibly any way to apply it only to sprites, so the nearest sprites only are visible?   Could I implement my own camera that does this?

tldr; I'd like to show ~200.000 trees in my scene with minimal performance drawback.

Thanks a lot in advance!
    

[GameMonetize]

Let's be faire. You won't be able to do that WITHOUT a custom shader.

As I was pretty sure, they use this technique, I looked into the example you gave on piste.io. 

To better understand what they are doing, I highly recommend that you install Spector.js extension on your browser. Then just go to the page and do a capture.

Here is a quick summary of what I found:

- The trees are rendered in one call with 98304 vertices:

The custom vertex shader is really smart and is mostly responsible to prepare data to render the correct sprites and ground and snow  basically the technique used by my WorldMonger demo but instead of a grass texture they generate small trees with shadow.

All the interesting code appends in the custom pixel shader.

 

 

[simon_bg]

Thanks a lot, Deltakosh!
I'll try and have a look at those interesting shaders then