Three.js: Vertex Array Objects (VAO) usage in THREE.

Created on 21 Apr 2016 · 7Comments · Source: mrdoob/three.js

What is the current position of THREE.renderer concerning the usage of VAO's?

OES_vertex_array_object extension is supported on majority of devices and is going to be in core of WebGL 2.0 (According to WebGL Stats and WebGL 2.0 Spec).

I've found #5849 issue on that topic, but it seems to have no continuation.

Could it be something like mentioned in that issue emulation level? (renderer acts like VAO is always available and interacting with it through THREE.VertexArrayObjectSomething which handles cases). Or should it be done by a separate renderer somehow? Or if the case is THREE doesn't need it, why it is so?

Thanks in advance.

Enhancement WebGL2

Source

mlknz

Most helpful comment

I'm making VAO support PR and gonna send soon. We can test and discuss the performance benefit on it.

takahirox on 25 Jul 2018

👍3 ❤1

All 7 comments

Yeah, I think we are at a point that we could try implementing it.

mrdoob on 21 Apr 2016

They can add a fair bit of complexity and might not provide much of a benefit. I think it would be good to get some real-world-ish benchmarks proving their worth before adding them to ThreeJS.

Relevant tweet by Aras Pranckevičius (Unity graphics engineer).
https://twitter.com/aras_p/status/609471507731976194

mattdesl on 22 Apr 2016

@Oletus mentioned in WebGL Insights:

_For binding resources, there are a few distinct ways to reduce API calls. Often the simplest way is to use vertex array objects, or VAOs, that can significantly improve performance on mobile devices. They are an API construct developed specifically to enable optimization, and are not to be confused with vertex buffer objects, or VOBs. In our CPU-bound drawing test, FPS increase from using VAOs was 10%-13%._

Besides, other 3D engines like babylon.js or Turbulenz make use of VAOs. It think we should put this issue on our ToDo list.

Mugen87 on 21 Apr 2017

👍1

I agree that the complexity should be weighted against the benefits. I think its safe to assume that three.js is cpu bound, all the calls need to be validated and such, reducing them should provide a performance benefit.

Three does little in terms of optimizing for draw calls, my understanding is that it primarily deals with overdraw when doing the sorting. With this approach, bundling everything in a VAO would probably make sense. It's been a while since i tried using it, i forgot how user friendly they are :)