📈 Stats.js オーバーレイの運用メモ

midori241では Stats.js を導入した直後で、位置固定やCSSリセットが未整備だった。次のリリースで修正した事項をメモにまとめている。

• DOMへの挿入位置は document.body.appendChild(stats.dom) のままなので、CSS3Dと重ならないように pointer-events:none を追加する。
• スクロールしない固定表示にするため、stats.dom.style.position = "fixed"; と top/right を指定する必要があった。
• canvasとCSS3Dの両方を描画しているため、値を見るときは renderer.render() と css3dRenderer.render() の呼び出し順も確認する。
• midori241の段階ではグラフ更新が60fps前提。90fpsテストをするとエネルギーグラフが追従できず、読みづらくなるのが課題だった。

Stats.js の導入は簡単だが、UIが完成していない段階ではクリックを遮ってしまう。midori242では CSS に統合して意図的に下層へ埋め込んだ。