WebGL drawcalls

Hello everyone,

I’d like to ask what exactly webgl drawcall is, and is there any way to optimize the drawcall while rendering?

Thanks,
Q.

1 Like

A draw call is when a mesh gets rendered, each mesh in your scene will be a drawcall when visible by the camera (inside the frustum).

Since WebGL in browser has a lot security checks to pass through this can get quite costly with many drawalls, so what you can do to optimize it is keep them low as possible, at modelling stage already try to make them as few geometry pieces and materials as possible, if possible just 1. Another and the most effective way to draw a large amount of objects if they have all the same geometry and material is using InstancedMesh, this way all instances no matter how many will be just one drawcall.

The renderer.info.render.calls property shows you how much drawcalls a frame was.

If you got a larger scene with possibly costly shader or lost overview about the geometries cost you might give this experimental helper a try as it tries to visualize the individual draw call costs by showing a weighted color.

Another thing that can help to reduce the matrices computation and memory cost of meshes in the scene as well as culling test of hierarchies.

4 Likes