rendering stats

webclient/src/components/layers/DebugLabelsLayer.tsx

@@ -1,5 +1,6 @@
 import { observer } from "mobx-react-lite";
+import { measuredRenderTime } from "../../utils/layerTimings";
 
-export const DebugLabelsLayer = observer(function () {
+export const DebugLabelsLayer = observer(measuredRenderTime("DebugLabels", function () {
     return null; //TODO
-});
+}));

webclient/src/components/layers/LayeredThreeView.tsx

@@ -1,7 +1,7 @@
 import { observer } from "mobx-react-lite";
 import { ObjectGeometriesLayer } from "./ObjectGeometriesLayer";
 import { Canvas } from "@react-three/fiber";
-import { SceneEditorCameraLayer } from "./SceneEditorGameraLayer";
+import { SceneEditorCameraLayer } from "./SceneEditor/SceneEditorGameraLayer";
 import { LightsLayer } from "./LighsLayer";
 import { StatsLayer } from './StatsLayer';
 

webclient/src/components/layers/LighsLayer.tsx

@@ -1,8 +1,9 @@
 import { observer } from "mobx-react-lite";
+import { measuredRenderTime } from "../../utils/layerTimings";
 
-export const LightsLayer = observer(function () {
+export const LightsLayer = observer(measuredRenderTime("Lights", function () {
     return <>
         <ambientLight intensity={0.5} />
         <directionalLight position={[5, 5, 5]} intensity={1} />
     </>;
-});
+}));

webclient/src/components/layers/ObjectGeometriesLayer.tsx

@@ -4,9 +4,9 @@ import { ObjectGeometryList } from "../../rendering/ObjectGeometryList";
 import { observer } from "mobx-react-lite";
 import { state } from "../../state";
 import { useLayerFrame } from "../../utils/hooks/useLayerFrame";
+import { measuredRenderTime } from "../../utils/layerTimings";
 
-export const ObjectGeometriesLayer = observer(function () {
-
+export const ObjectGeometriesLayer = observer(measuredRenderTime("ObjectGeometries", function () {
     const geometries = state.view.objectGeometries;
 
     const threeScene = useThree(s => s.scene);
@@ -24,4 +24,4 @@ export const ObjectGeometriesLayer = observer(function () {
     useLayerFrame("ObjectGeometries", () => list.current?.tick());
 
     return null;
-});
+}));

webclient/src/components/layers/SceneEditor/SceneEditorGameraLayer.tsx

@@ -1,12 +1,13 @@
 import { OrbitControls } from "@react-three/drei";
-import { state } from "../../state";
+import { state } from "../../../state";
 import { useRef } from "react";
-import { useSyncCamera } from "../../utils/hooks/useSyncCamera";
+import { useSyncCamera } from "../../../utils/hooks/useSyncCamera";
 import { MOUSE } from "three";
 import { observer } from "mobx-react-lite";
-import type { V3 } from "../../types";
+import type { V3 } from "../../../types";
+import { measuredRenderTime } from "../../../utils/layerTimings";
 
-export const SceneEditorCameraLayer = observer(function () {
+export const SceneEditorCameraLayer = observer(measuredRenderTime("Camera", function () {
     const controlsRef = useRef<React.ComponentRef<typeof OrbitControls>>(null);
 
     useSyncCamera(() => state.view.camera?.camera);
@@ -38,4 +39,4 @@ export const SceneEditorCameraLayer = observer(function () {
         rotateSpeed={0.2}
         enableDamping={false}
     />;
-});
+}));

webclient/src/components/layers/StatsLayer.tsx

@@ -49,12 +49,20 @@ export const StatsLayer = function () {
             ];
 
             for (const [name, entry] of Object.entries(layerTimings)) {
-                if (entry.frames > 0) {
-                    const avg = (entry.acc / entry.frames).toFixed(3);
-                    lines.push(`${name} ${avg} ms`);
+                const parts: string[] = [];
+                if (entry.frame.frames > 0) {
+                    parts.push(`frame ${(entry.frame.acc / entry.frame.frames).toFixed(3)}`);
                 }
-                entry.acc = 0;
-                entry.frames = 0;
+                if (entry.render.frames > 0) {
+                    parts.push(`render ${(entry.render.acc / entry.render.frames).toFixed(3)}`);
+                }
+                if (parts.length > 0) {
+                    lines.push(`${name}  ${parts.join("  ")} ms`);
+                }
+                entry.frame.acc = 0;
+                entry.frame.frames = 0;
+                entry.render.acc = 0;
+                entry.render.frames = 0;
             }
 
             if (divRef.current) {