Translations: Japanese

Obtain draw call count and other metrics (three.js)

This section is essential to maximize performance in the 3D space,
This section describes how to obtain the frame rate and number of draw calls, which are essential to maximize performance in the 3D space.

let prevTime = performance.now();
let frames = 0;
renderer.info.autoReset = true;
renderer.setAnimationLoop(() => {
	...
	
	frames++;
  const time = performance.now();
  if (time >= prevTime + 1000) {
    window._fps = (frames * 1000) / (time - prevTime);
    prevTime = time;
    frames = 0;
  }
});

const updateStats = () => {
  setTimeout(updateStats, 500);
  const info = renderer.info;
  stats.innerText = `
FPS: ${Math.round(window._fps||0)}
[Memory]
Geometries: ${info.memory.geometries}
Textures: ${info.memory.textures}
[Render]
Frame: ${info.render.frame}
Calls: ${info.render.calls}
Triangles: ${info.render.triangles}
Points: ${info.render.points}
Lines: ${info.render.lines}
`;
};
updateStats();


Live Demo

Reference

Last Updated: