midori242 のテスト環境 (Chrome 129 / RTX 3070 / Pixel 7) で記録した値を再掲。ClockDisplay の SVG 描画、VideoDisplay の動画転送、CSS3D フロント移動それぞれの平均処理時間と最大レイテンシをまとめました。
| モジュール | 平均処理時間 (ms) | 最大処理時間 (ms) | テストデバイス | 備考 |
|---|---|---|---|---|
| ClockDisplay.update() | 12.4 | 21.3 | Pixel 7 (Chrome) | OffscreenCanvas 1920×1080 + SVG 生成。クリックで色変更時は +3ms。 |
| VideoDisplay.update() | 6.8 | 12.6 | Pixel 7 (Chrome) | updateFrequency 60fps、video.readyState=4。90fps 時は 9.4ms。 |
| animationCallbacks (総和) | 19.2 | 28.7 | RTX 3070 (Chrome) | Clock + Video + Sphere。16.6ms越えフレームは 6000 回中 112 回。 |
| CSS3D moveComponentToFront() | 2.3 | 4.8 | iPad mini (Safari) | pointer-events=auto 切替を含む。portrait 時は距離係数 1.5。 |
| Raycaster handleMeshClick() | 1.6 | 3.1 | Pixel 7 (Chrome) | UV→SVG 変換 + mesh.scale アニメーション。クリック連打 20 回で 0.4ms 増。 |
ClockDisplay の OffscreenCanvas は transferToImageBitmap() で描画転送を行い、VideoDisplay との交互実行でガベージを抑えています。CSS3D 移動は camera.fov と pixelRatio の計算結果を引き継ぎ、距離を 1/3 に縮めて OrbitControls の注視点を更新することで遅延を最小化しました。