2019年のWebGLデバッグツール状況

これはThree.js Advent Calendar 2019の14日目の記事です。

3年前に以下の記事を読んでWebGL Inspectorを使い、デバッグ処理でWebGL Inspectorに凄くお世話になりました。

WebGLの開発やデバッグに便利なブラウザ拡張機能をつかってみよう

「Three.jsにBaylon.jsみたいなDebug modeある？」という議論を見つけて気になったので、現状のWebGLデバッグツール状況を調べてみました。

Three.jsフォーラム - Does three.js has some “scene debug mode” or plugin? (like babylon.js DebugLayer)

消失したデバッグツール

WebGL Inspector

• 最終更新日（github）：2017/02/22
• 去年はまだChromeウェブストアにあったけど消失した
• 開発者のBen VanikさんはGoogleの中の人
• WebGL FundamentalsやThree.js Fundamentalsを書いてるGreggmanさんがPRしまくってた

FirefoxのShader editor、Canvas debugger

• 最終更新日：Firefox 67でRemove（2019/05/21に消失）
• ユースケースのニーズに対応してない事、バグ修正されずメンテされてない事が原因
• 個人的にはシェーダーを見たり、レンダリング画像のキャプチャして便利なツールだった
• Shader EditorやCanvasキャプチャ機能の人気が下火なので、Safariも消えるような気がします
  • Safari 12でサポートされたWebGL Shader Debuggingについて

更新停止したデバッグツール

以下のツールはWebGLサイトによって動いたり動かなかったりします。

three.js inspector

• 最終更新日（Chromeウェブストア）：2016/10/05
• three.jsの様々な情報を可視化し、リアルタイムに変更できるツール
• ChromeウェブストアのレビューみてもNot workingが多い

Shader Editor

• 最終更新日（Chromeウェブストア）：2016/04/07
• Shader EditorはVs Codeのプラグインがあるのでその役割を終えたかも
• 開発者の人は最近はWebVRに注力してそう

Three.js Editor Extension

• 最終更新日（Chromeウェブストア）：2015/07/25
• こちらもthree.jsの様々な情報を可視化し、リアルタイムに変更できるツール
• 開発者の人は最近はWebARに注力してそう

更新あるデバッグツール（少し動作が不安定）

WebGL Insight

• 最終更新日（Chromeウェブストア）：2019/04/26
• シェーダーソースやDepth情報、リソースなど様々な情報が見れるツール
• 更新されてるけど動かない事が多い。ChromeウェブストアのレビューみてもNot workingが多い
• 開発者のAaron Moraisさんは決済サービスで有名なstripeの中の人

オススメのデバッグツール

Three.js Developer Tools

• 最終更新日（Chromeウェブストア）：2019/08/26
• MeshやGeometryの情報が見れたり、Materialの情報を変更できる
• three.js r106以上が必要
• 開発者のJordan SantellさんはTHREE.IKライブラリも作ってる人

Materialを変更してる所

Spector.js

• 最終更新日（Chromeウェブストア）：2019/09/18
• Babylog.jsが提供してるツール。レンダリング結果や頂点情報など様々な情報が見れる
• Shader Editor機能もある
• WebGL2.0も対応してる

Three.jsでInstancingしてキャプチャした所

WebXR API Emulator

• 最終更新日（Chromeウェブストア）：2019/11/25
• XRデバイスを使用せずにエミュレートできる。VRカメラをグリグリ動かしたり、コントローラー操作ができる
• 開発者はMozillaのTakahiroさんで日本の人。Three.jsのMMD周りも担当されたと思います。
  

Babylon.js Inspector

• 最終更新日：2019/12/14
• Chromeウェブストアで公開してるものでなく、Babylon.jsの機能
• 使い方はBabylon.jsのプロジェクトで scene.debugLayer.show() を1行いれるだけ
• スクショや動画が撮れたり、GLB形式に出力できたりマテリアルを変更したり、バウンディングボックスを表示したり強すぎる！

1行コードを入れると左のSCENE EXPLORER、右のINSPECTORが表示される

まとめ

他にもPixiJS devtoolsやA-Frame Inspector、three.js editorなどもありますが、とりあえずオススメしたいのは以上です。
ちなみにiframeだと動作しないものもあり、公式のthree.js examplesではデバッグツールが動作しないのでご注意下さい（Spector.jsやWebXR API Emulatorは動作可能）
調べた事から学ぶ教訓はメンテされないツールは、バグを抱えて淘汰されていく運命という事ですね（あとツールのユースケースや存在意義は大事！）

また、こんなツールや機能もあるよ！など教えて頂けると助かります。
以上、読んで頂きありがとうございました。