diff --git a/examples/editor/index.html b/examples/editor/index.html index 4ffbdbe..e41c41d 100644 --- a/examples/editor/index.html +++ b/examples/editor/index.html @@ -54,7 +54,8 @@ "three": "/examples/js/vendor/three/build/three.module.js", "three/addons/": "/examples/js/vendor/three/examples/jsm/", "@forge-gfx/forge": "/dist/forge.module.js", - "lil-gui": "../node_modules/lil-gui/dist/lil-gui.esm.js" + "lil-gui": "../node_modules/lil-gui/dist/lil-gui.esm.js", + "stats.js": "../node_modules/stats.js/build/stats.min.js" } } @@ -66,6 +67,7 @@ import * as THREE from "three"; import { OrbitControls } from "three/addons/controls/OrbitControls.js"; import { GUI } from "lil-gui"; + import Stats from "stats.js"; import { constructGrid, ForgeControls, ForgeRenderer, SplatMesh, textSplats, dyno, transcodeSpz } from "@forge-gfx/forge"; import { getAssetFileURL } from "/examples/js/get-asset-url.js"; @@ -104,6 +106,10 @@ grid.opacity = 0; scene.add(grid); + const stats = new Stats(); + document.body.appendChild(stats.dom); + stats.dom.style.display = "none"; + const gui = new GUI({ title: "Settings", container: document.getElementById("main-gui") @@ -129,6 +135,7 @@ const guiOptions = { highDevicePixel: false, + stats: false, resetOnLoad: true, loadOffset: 0, openCv: true, @@ -453,6 +460,9 @@ renderer.setSize(width, height, false); console.log("Render size", canvas.width, canvas.height); }); + gui.add(guiOptions, "stats").name("Show frame stats").onChange((value) => { + stats.dom.style.display = value ? "block" : "none"; + }); gui.add(grid, "opacity", 0, 1, 0.01).name("Grid opacity").listen(); const normalColor = dyno.dynoBool(false); @@ -675,6 +685,7 @@ renderer.setAnimationLoop(function animate(time) { const deltaTime = time - (lastTime || time); lastTime = time; + stats.begin(); if (guiOptions.autoRotate) { frame.rotation.y += deltaTime / 5000; @@ -687,6 +698,8 @@ } renderer.render(scene, camera); + + stats.end(); });