📝

Three.js(WebGL)のパフォーマンス計測方法など

2020/09/19に公開

今まであまり意識してこなかったが、WebGLコンテンツのパフォーマンスモニタリングやデバッグはどうすればいいのか調べてみたら以外にも色々整っていたのでメモ。

Three.js Developer Tools

これはThree.jsのリポジトリにも掲載されているのでオフィシャル感のあるツール。ステータスがExperimentalになっているが、一応使えた。分かりづらいが以下の画像のようにマテリアルの色を直接変更することができたりする。(トップの画像と比べると机の色が赤くなっている)

他にも、現在のDrawCall、頂点数などを表示する画面、シーン内のテクスチャやジオメトリが確認できる機能などがありかなり使えるツールとなっている。fbxやgltfローダーでインポートしたシーンにどんなマテリアルが使われているかとか確認したいときに使える。

これは任意のフレームをキャプチャするツールでBabylon.jsのために作られたそうだがWebGL全般に使える(多分)。グラフィックスの開発においてキャプチャツールがあるとかなりデバッグが容易になるがChromeの拡張機能でキャプチャができるのはかなり便利だと思った。

画像の左の一番上のパスはシャドウマップのためのフレームバッファを撮っているな～というところ。Three.jsなどのフレームワークは基本的にこういった影などのためのレンダーパスはフレームワーク内部で行っているのでこういうツールをつかうとちゃんとレンダーパスごとの処理が追えていいと思う。

ちなみにWebGLってRenderDocでもキャプチャできるらしい
参考) https://qiita.com/ukonpower/items/134bdf0c7ebde2a5d547