Geometry instancing in WebGL

[525c1e21-bd67-4735-ac99-b4b0e5262290]

I'm going to take a stab at establishing support for geometry instancing in three.js (applicable to the WebGL renderer only).

At the same time I will be adding support for consolidating very large numbers of static meshes into a single mesh (to reduce the amount of draw calls) for efficient drawing.

This is scratching a personal itch as it will facilitate the creation of games like Minecraft/Cubelands/Blockland/Infiniminer in three.js but I am sure others will find these features useful in the future

[mrdoob]

Yeah, I think alteredq was going to take a look at improving the instancing.

GeometryUtils::merge does the consolidation thing already.

[525c1e21-bd67-4735-ac99-b4b0e5262290]

Oh wicked. This makes what I was trying to do super-easy.

I don't want to step on alteredq's toes and don't even need instancing ATM so I'll leave that for now.

[alteredq]

Yeah, I have VBO reuse on my TODO list.

[525c1e21-bd67-4735-ac99-b4b0e5262290]

fabricasapiens (via email) wanted to know why "the engine gets pretty choppy when I output 900 objects" and how to fix it...

GeometryUtils::merge will join the cubes into a single mesh (and therefor single VBO for giving to WebGL) which will reduce you draw calls from hundreds down to one (which is the reason for your low FPS).

Of course you lose some flexibility here (it's slower and more difficult to animate/manipulate individual cubes) but it's a necessary evil when facilitating "infinite" chunk-based worlds.

[mrdoob]

I'm getting confused. Where did fabricasapiens asked that? I don't see him in this conversation... ?

[525c1e21-bd67-4735-ac99-b4b0e5262290]

It was via email. I thought I'd post it here since it's relevant.

Using GeometryUtils::merge his FPS rose from <10 to the full 60.

~40FPS with 4000+ cubes.
~30FPS with 16000+ cubes.
~15FPS with 65000+ cubes.

alteredq - I'm not expert at the materials in three.js but do these cubes have two materials applied? One for the green and one for the lines? If so...does that mean they require two passes or draws?

http://d.pr/GrLX

At reasonably low numbers of cubes (<10000) it's the fillrate not the drawrate that's slowing down fabricasapiens's app.

So here is 'Fabricasapiens' himself ;-)

( Sorry if I'm asking noobish questions. I don't have experience with 3D engines, and try as best as I can to understand what is going on... )

What is the difference between drawrate and fillrate?
And why (technically) is one large object faster to render than a bunch individual objects? I understand that reading more objects takes more time, but the large object still has all the same vertices present, so what differnce is there in rendering...?

[mrdoob]

https://github.com/mrdoob/three.js/wiki/%22infinite%22-chunk-based-worlds

[525c1e21-bd67-4735-ac99-b4b0e5262290]

On TODO list. Closing...