[#5] Adjust render resolution dynamically

package.json

@@ -19,6 +19,7 @@
     "ajv": "^8.17.1",
     "ajv-formats": "^3.0.1",
     "awesome-ajv-errors": "^5.1.0",
+    "lodash": "^4.17.21",
     "next": "15.3.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
@@ -28,6 +29,7 @@
   "devDependencies": {
     "@eslint/eslintrc": "^3",
     "@tailwindcss/postcss": "^4",
+    "@types/lodash": "^4",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",

src/components/scene/Scene.tsx

@@ -8,6 +8,7 @@ import {
   Text,
   Html,
   type PerspectiveCameraProps,
+  PerformanceMonitor,
 } from "@react-three/drei";
 import {
   animated as threeAnimated,
@@ -25,11 +26,10 @@ import {
   Suspense,
   useCallback,
   type JSX,
-  type Dispatch,
-  type SetStateAction,
 } from "react";
+import round from "lodash/round";
 import Stack from "@/util/stack";
-import { Canvas, useFrame } from "@react-three/fiber";
+import { Canvas } from "@react-three/fiber";
 import { mdiArrowLeftBold } from "@mdi/js";
 import { Icon } from "@mdi/react";
 import { PDF } from "../util/PDF";
@@ -51,28 +51,6 @@ const AnimatedButton = webAnimated.button as React.ComponentType<
   React.ButtonHTMLAttributes<HTMLButtonElement> & { children?: React.ReactNode }
 >;
 
-function FpsUpdater({
-  onUpdate,
-}: {
-  onUpdate: Dispatch<SetStateAction<number>>;
-}) {
-  const fpsRef = useRef([0]);
-  useFrame((_, delta) => fpsRef.current.push(1 / delta));
-
-  useEffect(() => {
-    const id = setInterval(() => {
-      const avg =
-        fpsRef.current.reduce((a, b) => a + b, 0) / fpsRef.current.length;
-      fpsRef.current = [];
-      onUpdate(avg);
-    }, 1000);
-
-    return () => clearInterval(id);
-  }, [onUpdate]);
-
-  return null;
-}
-
 export function Scene(props: JSX.IntrinsicElements["group"]) {
   const { nodes, materials } = useGLTF("/scene.glb") as unknown as GLTFResult;
   const { width, height } = useWindowSize();
@@ -80,6 +58,7 @@ export function Scene(props: JSX.IntrinsicElements["group"]) {
 
   // States
   const [fps, setFps] = useState(0);
+  const [dpr, setDpr] = useState(2);
   const [pendingView, setPendingView] = useState<View | null>(null);
   const [backHovered, setBackHovered] = useState(false);
   const [backClicked, setBackClicked] = useState(false);
@@ -134,7 +113,6 @@ export function Scene(props: JSX.IntrinsicElements["group"]) {
       precision: 0.0001,
       friction: 80,
       mass: 10,
-      clamp: true,
     },
   });
 
@@ -147,10 +125,10 @@ export function Scene(props: JSX.IntrinsicElements["group"]) {
   // Scene
   return (
     <main className="h-screen w-screen overscroll-none touch-none bg-[#1b1b1b]">
-      <Loader />
       {isWebGL2Available() ? (
         width >= 1.5 * height ? (
           <>
+            <Loader />
             <div className="pointer-events-none fixed z-[999999999] size-full">
               <AnimatedButton
                 style={{
@@ -178,16 +156,27 @@ export function Scene(props: JSX.IntrinsicElements["group"]) {
               </AnimatedButton>
               <div className="min-w-12 text-white bottom-0 right-0 absolute m-3 p-1 text-xs text-right text-stroke-2 text-stroke-black paint-sfm">
                 <Info />
-                {fps > 0 && <>{fps.toFixed(0)} fps</>}
+                {fps > 0 && (
+                  <>
+                    {fps.toFixed(0)} fps | {dpr}x
+                  </>
+                )}
               </div>
             </div>
             <Canvas
               shadows
+              dpr={dpr}
               gl={{ localClippingEnabled: true, antialias: true, alpha: true }}
             >
               <Suspense fallback={null}>
                 <group {...props} dispose={null}>
-                  <FpsUpdater onUpdate={setFps} />
+                  <PerformanceMonitor
+                    ms={100}
+                    onChange={(api) => {
+                      setFps(api.fps);
+                      setDpr(round(1.5 * api.factor + 0.5, 1));
+                    }}
+                  >
                     <Environment preset="apartment" />
                     <AnimatedCam makeDefault {...cameraSpring} />
                     <Buttons
@@ -230,7 +219,7 @@ export function Scene(props: JSX.IntrinsicElements["group"]) {
                           occlude="blending"
                           className="w-[1452px] h-[810px] bg-[#0e1838]"
                           scale={10}
-                        position={[0, 170, 0.25]}
+                          position={[0, 170, 0.5]}
                           raycast={
                             currentView === View.DesktopView
                               ? () => null
@@ -313,7 +302,7 @@ export function Scene(props: JSX.IntrinsicElements["group"]) {
                           }
                           occlude="blending"
                           className="w-[1008px] h-[1614px] bg-blue-100"
-                        position={[0, 2.8, 0]}
+                          position={[0, 2.85, 0]}
                           rotation={[-Math.PI / 2, 0, Math.PI / 2]}
                           raycast={
                             currentView === View.CellphoneView
@@ -370,6 +359,7 @@ export function Scene(props: JSX.IntrinsicElements["group"]) {
                       </Text>
                     )}
                     <StaticMeshes nodes={nodes} materials={materials} />
+                  </PerformanceMonitor>
                 </group>
               </Suspense>
             </Canvas>
@@ -380,9 +370,9 @@ export function Scene(props: JSX.IntrinsicElements["group"]) {
               config.fallbackUrl ? "pt-12" : ""
             } flex flex-col space-y-6 w-screen h-screen text-center justify-center items-center text-white text-4xl`}
           >
-            <p>Screen too small, please rotate</p>
+            <p className="mx-8">Screen too small, please rotate</p>
             {config.fallbackUrl && (
-              <p className="text-base">
+              <p className="text-base mx-8">
                 or visit the{" "}
                 <a
                   href={config.fallbackUrl}

src/components/ui/Credits.tsx

@@ -15,7 +15,7 @@ export const Credits = ({ currentView }: CreditsProps) => {
       occlude="blending"
       className="w-[1452px] h-[810px] bg-neutral-400"
       scale={10}
-      position={[0, 170, 0.25]}
+      position={[0, 170, 0.5]}
       raycast={currentView === View.CreditsView ? () => null : undefined}
       distanceFactor={10}
     >

yarn.lock

@@ -1021,6 +1021,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/lodash@npm:^4":
+  version: 4.17.16
+  resolution: "@types/lodash@npm:4.17.16"
+  checksum: 10c0/cf017901b8ab1d7aabc86d5189d9288f4f99f19a75caf020c0e2c77b8d4cead4db0d0b842d009b029339f92399f49f34377dd7c2721053388f251778b4c23534
+  languageName: node
+  linkType: hard
+
 "@types/node@npm:^20":
   version: 20.17.30
   resolution: "@types/node@npm:20.17.30"
@@ -3868,6 +3875,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lodash@npm:^4.17.21":
+  version: 4.17.21
+  resolution: "lodash@npm:4.17.21"
+  checksum: 10c0/d8cbea072bb08655bb4c989da418994b073a608dffa608b09ac04b43a791b12aeae7cd7ad919aa4c925f33b48490b5cfe6c1f71d827956071dae2e7bb3a6b74c
+  languageName: node
+  linkType: hard
+
 "loose-envify@npm:^1.0.0, loose-envify@npm:^1.4.0":
   version: 1.4.0
   resolution: "loose-envify@npm:1.4.0"
@@ -4535,6 +4549,7 @@ __metadata:
     "@react-three/drei": "npm:^10.0.7"
     "@react-three/fiber": "npm:^9.1.2"
     "@tailwindcss/postcss": "npm:^4"
+    "@types/lodash": "npm:^4"
     "@types/node": "npm:^20"
     "@types/react": "npm:^19"
     "@types/react-dom": "npm:^19"
@@ -4544,6 +4559,7 @@ __metadata:
     awesome-ajv-errors: "npm:^5.1.0"
     eslint: "npm:^9"
     eslint-config-next: "npm:15.3.0"
+    lodash: "npm:^4.17.21"
     next: "npm:15.3.0"
     react: "npm:^19.1.0"
     react-dom: "npm:^19.1.0"