Translations: English

ドローコール数などの指標を取得する (three.js)

ここでは、3D空間でのパフォーマンスを最大限に引き出すために欠かせない、
フレームレートやドローコール数の取得方法についてご紹介いたします。

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

参考

• WebGLRenderer | THREE.js