add renderer stats on fps hover

src/kiri/init.js

@@ -210,17 +210,22 @@
         if (self.debug !== true) {
             return;
         }
-        let { div, fps, rms } = UI.stats;
+        let { div, fps, rms, rnfo } = UI.stats;
         div.style.display = 'flex';
         setInterval(() => {
             const nfps = SPACE.view.getFPS().toFixed(2);
             const nrms = SPACE.view.getRMS().toFixed(2);
+            const rend = SPACE.renderInfo();
+            const { memory, render } = rend;
             if (nfps !== fps.innerText) {
                 fps.innerText = nfps;
             }
             if (nrms !== rms.innerText) {
                 rms.innerText = nrms;
             }
+            if (rnfo.offsetParent !== null) {
+                rnfo.innerText = JSON.stringify({ ...memory, ...render }, null, 4);
+            }
         }, 100);
     }
 
@@ -1534,6 +1539,7 @@
                 fps:            $('fps'),
                 rms:            $('rms'),
                 div:            $('stats'),
+                rnfo:           $('rnfo'),
             },
 
             load:               $('load-file'),

web/kiri/index.css

@@ -1793,6 +1793,19 @@ th, tr, td, label {
 .dark #stats {
     color: #888;
 }
+#stats:hover #rnfo {
+    display: flex;
+}
+#rnfo {
+    display: none;
+    position: absolute;
+    bottom: 100%;
+    right: 0;
+    border: 1px solid black;
+    border-radius: 3px;
+    padding: 5px;
+    white-space: pre;
+}
 #tool-info {
     position: fixed;
     white-space: pre;

web/kiri/index.html

@@ -507,6 +507,7 @@
     <div id="stats">
         <div id="rms"></div>
         <div id="fps"></div>
+        <div id="rnfo"></div>
     </div>
     <div id="layer-animate" class="f-col a-center"></div>
     <div id="layer-toolpos" class="f-row a-center"></div>