# WebGL drawcalls

**URL:** <https://discourse.threejs.org/t/webgl-drawcalls/24476>\
**Category:** Questions\
**Tags:** webgl-renderer, webgl, performance\
**Created:** [March 17, 2021, 8:16am UTC](https://discourse.threejs.org/t/webgl-drawcalls/24476 "2021-03-17T08:16:20Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![Fyrestar](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fyrestar/32/52793_2.png) [@Fyrestar](https://discourse.threejs.org/u/Fyrestar)\
**Post date:** [March 17, 2021, 9:06am UTC](https://discourse.threejs.org/t/webgl-drawcalls/24476/2 "2021-03-17T09:06:11Z")

</div>

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](https://threejs.org/docs/?q=instanced#api/en/objects/InstancedMesh), this way all instances no matter how many will be just one drawcall.

The [renderer.info.render.calls](https://threejs.org/docs/?q=renderer#api/en/renderers/WebGLRenderer.info) 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.

> [@THREE.DrawCallInspector - visualize draw call cost (experimental)](https://discourse.threejs.org/t/three-drawcallinspector-visualize-draw-call-cost-experimental/22503):
>
> This is a quick experimental attempt of a helper to monitor draw call costs. It could help spotting expensive draw calls caused by costly shaders and geometries. For WebGL1 using a blocking method and for WebGL2 the timer API. (A test gltf scene from sketchfab) The output: The output is a map that renders all objects tinted as a heatmap by how much time they took relative to each other. This means a average scene with equally expensive meshes in view is likely g…

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.

> [@THREE.StaticMesh - Less memory, render faster](https://discourse.threejs.org/t/three-staticmesh-less-memory-render-faster/9611):
>
> This is a lightweight scene object class saving memory and giving a better performance for large scenes. It makes several optimizations without requiring core modifications. You can archive up to 50% better performance regarding computations and culling compared to meshes with matrixAutoUpdate set to false. The benefit increases by the number of meshes and complexity in the scene. This plugin runs out of box without core modifications. Transforming a static mesh like a regular…

---

_[View the full topic](https://discourse.threejs.org/t/webgl-drawcalls/24476)._