Geometry instancing in WebGL about three.js HOT 9 CLOSED

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

GeometryUtils::merge does the consolidation thing already.

from three.js.

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.

from three.js.

Yeah, I have VBO reuse on my TODO list.

from three.js.

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.

from three.js.

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

from three.js.

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.

from three.js.

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...?

from three.js.

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

from three.js.

On TODO list. Closing...

from three.js.