From 23cff070e22d8174b4a8d28b7111feceb06c2252 Mon Sep 17 00:00:00 2001
From: Cdm2883 <Cdm2883@hotmail.com>
Date: Sat, 10 Aug 2024 23:03:46 +0800
Subject: [PATCH] feat: device performance optimization

---
 .idea/watcherTasks.xml           |  2 +-
 docs/assets/stylesheets/home.css |  8 ++++++
 overrides/home.html              |  4 +++
 src/index.js                     |  6 +++++
 src/loading.js                   | 28 +++++++++++++++++++++
 src/world-viewport.js            | 42 +++++++++++++++++++++++++++++---
 6 files changed, 86 insertions(+), 4 deletions(-)
 create mode 100644 src/loading.js

diff --git a/.idea/watcherTasks.xml b/.idea/watcherTasks.xml
index d4c875c..ba36fc2 100644
--- a/.idea/watcherTasks.xml
+++ b/.idea/watcherTasks.xml
@@ -7,7 +7,7 @@
       <option name="description" />
       <option name="exitCodeBehavior" value="ERROR" />
       <option name="fileExtension" value="*" />
-      <option name="immediateSync" value="true" />
+      <option name="immediateSync" value="false" />
       <option name="name" value="dev-server-rebuild" />
       <option name="output" value="$ContentRoot$/site/" />
       <option name="outputFilters">
diff --git a/docs/assets/stylesheets/home.css b/docs/assets/stylesheets/home.css
index 6cb7644..925a061 100644
--- a/docs/assets/stylesheets/home.css
+++ b/docs/assets/stylesheets/home.css
@@ -16,3 +16,11 @@
     height: 100%;
     pointer-events: none;
 }
+
+#fullscreen-loading {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    /*pointer-events: fill;*/
+    pointer-events: none;
+}
diff --git a/overrides/home.html b/overrides/home.html
index 07d0a2e..3fc0875 100644
--- a/overrides/home.html
+++ b/overrides/home.html
@@ -16,6 +16,10 @@
 
 <div id="pseudo-3d-layer"></div>
 
+<div id="fullscreen-loading">
+
+</div>
+
 <script src="assets/javascripts/home.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 7f68e6b..8df6146 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,14 +1,20 @@
 import WebGL from "three/examples/jsm/capabilities/WebGL.js";
 import WorldViewport from "./world-viewport.js";
 import Pseudo3DLayer from "./pseudo-3d-layer.js";
+import FullscreenLoading from "./loading.js";
 
 if (!WebGL.isWebGL2Available()) {
     location.replace('./webgl-less.html');
     throw 0;
 }
 
+const loading = new FullscreenLoading();
+// setTimeout(() => loading.loading(), 1000);
+// setTimeout(() => loading.loaded(), 10000);
+
 const canvas = document.getElementById('three-viewport');
 const world = new WorldViewport(canvas);
+world.loadingIndicator = loading;
 world.setup();
 console.log(world);
 
diff --git a/src/loading.js b/src/loading.js
new file mode 100644
index 0000000..06fde27
--- /dev/null
+++ b/src/loading.js
@@ -0,0 +1,28 @@
+export default class FullscreenLoading {
+    counter = 0;
+    isLoading = false;
+    loading() {
+        if (++this.counter > 0 && !this.isLoading) {
+            this.isLoading = true;
+            this.onLoading();
+        }
+    }
+    loaded() {
+        if (--this.counter <= 0 && this.isLoading) {
+            this.isLoading = false;
+            this.onLoaded();
+        }
+    }
+
+    constructor() {
+        this.container = document.getElementById('fullscreen-loading');
+    }
+
+    onLoading() {
+        console.log('onLoading');
+    }
+
+    onLoaded() {
+        console.log('onLoaded');
+    }
+}
diff --git a/src/world-viewport.js b/src/world-viewport.js
index e8a67a4..96f9b95 100644
--- a/src/world-viewport.js
+++ b/src/world-viewport.js
@@ -34,7 +34,28 @@ const motionBlurShader = {
     `,
 };
 
+class FpsProfiler {
+    count;
+    static NowProvider = performance || Date;
+    static Now = () => FpsProfiler.NowProvider.now();
+    prevTime = FpsProfiler.Now();
+    frames = 0;
+    end() {
+        this.frames++;
+        const time = FpsProfiler.Now();
+        if (time >= this.prevTime + 1000) {
+            this.count = (this.frames * 1000) / (time - this.prevTime);
+            this.prevTime = time;
+            this.frames = 0;
+        }
+
+        console.log(`fps: ${this.count}`);
+    }
+}
+
 export default class WorldViewport {
+    fps = new FpsProfiler();
+    highQuality = true;
     /** @param {HTMLCanvasElement} canvas */
     constructor(canvas) {
         this.canvas = canvas;
@@ -53,9 +74,10 @@ export default class WorldViewport {
     }
     resize() {
         const { innerWidth: width, innerHeight: height } = window;
-        this.renderer.setPixelRatio(window.devicePixelRatio);
+        const dpi = this.highQuality ? window.devicePixelRatio : 1;
+        this.renderer.setPixelRatio(dpi);
         this.renderer.setSize(width, height);
-        this.composer.setPixelRatio(window.devicePixelRatio);
+        this.composer.setPixelRatio(dpi);
         this.composer.setSize(width, height);
         this.camera.aspect = width / height;
         this.camera.updateProjectionMatrix();
@@ -72,16 +94,23 @@ export default class WorldViewport {
         this.composer.addPass(this.bloomPass);
     }
 
+    /** @type FullscreenLoading */
+    loadingIndicator;
+
     setup() {
         const loader = new GLTFLoader();
+        this.loadingIndicator.loading();
         loader.load("assets/models/website_viewport_1.glb", data => {
             const scene = data.scene;
             this.scene.add(scene);
+            this.loadingIndicator.loaded();
         });
+        this.loadingIndicator.loading();
         loader.load("assets/models/website_viewport_2.glb", data => {
             const scene = data.scene;
             scene.position.set(0, 0, 64);
             this.scene.add(scene);
+            this.loadingIndicator.loaded();
         });
 
         {
@@ -255,7 +284,11 @@ export default class WorldViewport {
 
     renderPseudo;
     animate() {
-        requestAnimationFrame(this.animate.bind(this));
+        const highQuality = this.highQuality;
+        if (highQuality && this.fps.count < 25) this.highQuality = false;
+        else if (!highQuality && this.fps.count >= 40) this.highQuality = true;
+        // this.highQuality = this.fps.count >= 25;
+        if (highQuality !== this.highQuality) this.resize();
 
         this.velocity.set(this.camera.position.z - this.previousCameraPosition.z, 0);
         this.previousCameraPosition.copy(this.camera.position);
@@ -277,6 +310,9 @@ export default class WorldViewport {
         if (this.renderPseudo) this.renderPseudo();
 
         this.composer.render();
+
+        this.fps.end();
+        requestAnimationFrame(this.animate.bind(this));
     }
 }