add tri and draw call counters to stats panel

src/components/stats.ts

@@ -0,0 +1,28 @@
+import Stats from 'three/addons/libs/stats.module.js';
+import { getSceneObjects } from '../setup';
+
+let statsPanel: Stats;
+let trisPanel: Stats.Panel;
+let drawsPanel: Stats.Panel;
+let renderer: THREE.WebGLRenderer;
+
+export function addStatsPanel() {
+  statsPanel = new Stats();
+  trisPanel = new Stats.Panel('TRIS', '#E8F', '#222');
+  drawsPanel = new Stats.Panel('DRAWS', '#FC4', '#222');
+
+  statsPanel.addPanel(trisPanel);
+  statsPanel.addPanel(drawsPanel);
+  document.body.appendChild(statsPanel.dom);
+
+  statsPanel.showPanel(0);
+
+  renderer = getSceneObjects().renderer;
+}
+
+export function updateStatsPanel() {
+  const { triangles, calls } = renderer.info.render;
+  trisPanel.update(triangles, 10000);
+  drawsPanel.update(calls, 1000);
+  statsPanel.update();
+}

src/setup.ts

@@ -1,5 +1,4 @@
 import * as THREE from 'three';
-import Stats from 'three/addons/libs/stats.module.js';
 import { MapControls } from 'three/addons/controls/MapControls.js';
 import { CSS2DRenderer } from 'three/addons/renderers/CSS2DRenderer.js';
 import {
@@ -9,6 +8,7 @@ import {
   createRoom,
 } from './components/mapObjects';
 import { getMaterial, initMaterials } from './components/materials';
+import { addStatsPanel, updateStatsPanel } from './components/stats';
 
 import { type CSS2DObject } from 'three/addons/renderers/CSS2DRenderer.js';
 import { DoorData, PathData, PortalData, RoomData } from './types';
@@ -33,7 +33,6 @@ let renderer: THREE.WebGLRenderer;
 let labelRenderer: CSS2DRenderer;
 let raycaster: THREE.Raycaster;
 let pointer: THREE.Vector2;
-let stats: Stats;
 
 const roomObjects: THREE.Mesh[] = [];
 const doorObjects: THREE.Mesh[] = [];
@@ -68,8 +67,7 @@ export function setupScene() {
 
   // Add Stats panel
   if (import.meta.env.DEV) {
-    stats = new Stats();
-    document.body.appendChild(stats.dom);
+    addStatsPanel();
   }
 
   // Set up camera controls
@@ -166,6 +164,35 @@ export function getMapObjects() {
   };
 }
 
+export function getSceneObjects() {
+  return {
+    renderer,
+  };
+}
+
+export function resetCamera() {
+  cameraControls.reset();
+}
+
+export function render() {
+  requestAnimationFrame(render);
+
+  if (featureConfig.raycasterOn) {
+    raycaster.setFromCamera(pointer, camera);
+    const hitObjects = raycaster.intersectObjects(scene.children, true);
+    if (hitObjects.length > 0) {
+      console.log(hitObjects[0].object.name);
+    }
+  }
+
+  cameraControls.update();
+  renderer.render(scene, camera);
+  labelRenderer.render(scene, camera);
+  if (import.meta.env.DEV) {
+    updateStatsPanel();
+  }
+}
+
 function initMapObjects<T>(
   data: T[],
   createObjFunc: (object: T, id: number) => boolean,
@@ -178,10 +205,6 @@ function initMapObjects<T>(
   }
 }
 
-export function resetCamera() {
-  cameraControls.reset();
-}
-
 function onPointerDown(event: MouseEvent) {
   pointer.x = (event.clientX / window.innerWidth) * 2 - 1;
   pointer.y = (event.clientY / window.innerHeight) * 2 - 1;
@@ -197,20 +220,3 @@ function onWindowResize() {
   renderer.setSize(window.innerWidth, window.innerHeight);
   labelRenderer.setSize(window.innerWidth, window.innerHeight);
 }
-
-export function render() {
-  requestAnimationFrame(render);
-
-  if (featureConfig.raycasterOn) {
-    raycaster.setFromCamera(pointer, camera);
-    const hitObjects = raycaster.intersectObjects(scene.children, true);
-    if (hitObjects.length > 0) {
-      console.log(hitObjects[0].object.name);
-    }
-  }
-
-  cameraControls.update();
-  renderer.render(scene, camera);
-  labelRenderer.render(scene, camera);
-  stats.update();
-}