CODEWITHSUNDEEP
javascriptthree.jswebgl
backspaces
backspaces

Reputation: 3952

How many webgl.draw calls does Three.js make for a given number of geometries/materials/meshes

How would I calculate the number of drawArrays/drawElements calls THREE.renderer.render(scene, camera) would make?

I'm assuming one call per geometry, with attributes for the materials/mesh properties. But that could easily be wrong or incomplete.

Also, would using the BufferGeometry etc make a difference?

Upvotes: 1

Views: 3246

Answers (2)

xxxx
xxxx

Reputation: 189

enter image description here

rstats is what i am using, it's pretty cool, you can get almost all important information: framerate, memory, render info, webgl drawcall...

it really helps in threejs performance.

a great work from Jaume Sanchez

here is tutorial: https://spite.github.io/rstats/

Upvotes: 2

pailhead
pailhead

Reputation: 5431

Per WestLangley's comment, i'd search the THREE.WebglRenderer for renderer.info and look at the logic there.

The drawcalls themselves differ a bit. If you have one geometry, lets say cubeGeometry, one material cubeMaterialRed, and five cube nodes [c1,c2...,c5], youll have five draw calls. I believe three.js would then bind the geometry once, and do five consecutive draw calls, with the same shader, and mostly the same uniforms (only the position/rotation/scale matrix should change, while the color red could be bound once).

If you have five different materials [cMatRed, cMatBlue... cMatPink], youll have five draw calls with the same geometry, but the uniform for the color of the material will be set differently for each one.

If you have five different geometries, in five different nodes, the geometry will have to be bound before every draw call.

This can be reduced by using instancing when supported. In the second example, it would bound the geometry to be instanced once, and set up attributes containing the position/rotation/scale and colors, one draw call would be issued with these properties, rendering 5 geometries, in the locations and color provided by the attribute.

Three.js currently does not do any batching and optimization along those lines so instancing would be done manually.

This all means that it's pretty much 1:1 relation to the number of nodes that contain geometry. Object3D->Object3D->Mesh would result in three nodes, but one draw call.

Upvotes: 2

Related Questions