feat: device performance optimization

.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">

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;
+}

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>

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);
 

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');
+    }
+}

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));
     }
 }