This post is about monitoring rendering performance within three.js.
It presents a small standalone extension called
It collect information from three.js renderer and display it live.
It is very usefull to diagnose performance issues while developping.
The API is exactly the same as stats.js
so it is easy for you to include in your own stuff.
What Is It ?
It is inpired from
See a screenshot on the left.
Webgl renderer keeps some internal statistics on the scene being renderered and update it at every frame.
It is accessible in a property
threex.rendererstats just gather this information and display it nicely on your screen.
How Is It Useful ?
It is a very nice tool to monitor performances of WebGL rendering. As it is updated realtime, you can identify performance issues at various moments within your game We have seen canvas inspection recently in Debugging With Chrome’s Canvas Inspection. canvas inspection is directly at webgl level. threex.rendererstats remains at three.js level to give you another kind of information on the renderer.
Lets details those information There is 2 sections one for the memory, another for the renderer. For the memory, you got
info.memory.geometry: number of geometry currently in memory
info.memory.programs: number of shaders currently in memory
info.memory.texture: number of texture currently in memory
For the render, you got
info.render.calls: number of draw calls currently used to render
info.render.vertices: number of vertices currently rendered
info.render.faces: number of triangles currently renderered
info.render.points: number of particles currently rendered
How To Use It ?
threex.rendererstats.js with the usual
then you initialize the object.
You likely need to position it on the page with css. You may use something along this line
1 2 3 4
finally you update it at every frame in your rendering loop or when you do
And you are done. Quite easy to include! Now you can monitor your own three.js scenes.
We have seen how to monitor performance information withing three.js.
How to display and use the statistics collected by
The information may appear a bit raw but it is live.
So unexpected performance changes can be detected very early.
That’s all for today! have fun :)