Add web tools

Author: codefl0w

web-tools/fps.html

@@ -0,0 +1,86 @@
+---
+layout: default
+title: Refresh Rate Test
+---
+
+<style>
+  body {
+    margin: 0;
+    background: #000;
+    overflow: hidden;
+  }
+
+  #gl {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 0;
+  }
+
+  #fps {
+    position: fixed;
+    top: 0;
+    right: 0;
+    padding: 2.5rem;
+    z-index: 9999;
+    transform: scale(1);
+    transform-origin: top right;
+  }
+
+  main {
+    padding: 0;
+  }
+</style>
+
+<main>
+  <div id="fps"></div>
+  <canvas id="gl"></canvas>
+
+  <script src="https://cdn.jsdelivr.net/npm/three@0.152.2/build/three.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/stats.js@0.17.0/build/stats.min.js"></script>
+
+  <script>
+    const canvas = document.getElementById("gl");
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+
+    const renderer = new THREE.WebGLRenderer({ canvas });
+    renderer.setSize(window.innerWidth, window.innerHeight);
+    renderer.setPixelRatio(window.devicePixelRatio);
+
+    const scene = new THREE.Scene();
+    const camera = new THREE.PerspectiveCamera(
+      75,
+      window.innerWidth / window.innerHeight,
+      0.1,
+      1000
+    );
+    camera.position.z = 3;
+
+    const geometry = new THREE.BoxGeometry();
+    const material = new THREE.MeshNormalMaterial();
+    const cube = new THREE.Mesh(geometry, material);
+    scene.add(cube);
+
+    const stats = new Stats();
+    stats.showPanel(0);
+    document.getElementById("fps").appendChild(stats.dom);
+
+    function animate() {
+      stats.begin();
+      cube.rotation.x += 0.01;
+      cube.rotation.y += 0.01;
+      renderer.render(scene, camera);
+      stats.end();
+      requestAnimationFrame(animate);
+    }
+
+    animate();
+
+    window.addEventListener("resize", () => {
+      camera.aspect = window.innerWidth / window.innerHeight;
+      camera.updateProjectionMatrix();
+      renderer.setSize(window.innerWidth, window.innerHeight);
+    });
+  </script>
+</main>

web-tools/index.md

@@ -0,0 +1,12 @@
+---
+layout: default
+title: Web Tools
+---
+
+
+<div class="dashboard">
+  <a class="card" href="/web-tools/fps.html">
+    <h2>🖥️ Frame Rate Tester</h2>
+    <p>Render a simple cube to observe the current refresh rate of a device.</p>
+  </a>
+</div>