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

これは[Three.js Advent Calendar 2019](https://qiita.com/advent-calendar/2019/threejs)の14日目の記事です。

3年前に以下の記事を読んで[WebGL Inspector](http://benvanik.github.io/WebGL-Inspector/)を使い、デバッグ処理でWebGL Inspectorに凄くお世話になりました。

[WebGLの開発やデバッグに便利なブラウザ拡張機能をつかってみよう](https://qiita.com/rootx/items/4f7401d1a6d22cb589c9)

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

[Three.jsフォーラム - Does three.js has some “scene debug mode” or plugin? (like babylon.js DebugLayer)](https://discourse.threejs.org/t/does-three-js-has-some-scene-debug-mode-or-plugin-like-babylon-js-debuglayer/2713)

# 消失したデバッグツール
**[WebGL Inspector](https://github.com/benvanik/WebGL-Inspector)**

- 最終更新日（github）：2017/02/22
- 去年はまだChromeウェブストアにあったけど消失した
- 開発者のBen VanikさんはGoogleの中の人
- [WebGL Fundamentals](https://webglfundamentals.org/)や[Three.js Fundamentals](https://threejsfundamentals.org/)を書いてる[Greggman](https://github.com/greggman)さんがPRしまくってた
<img width="944" alt="スクリーンショット 2019-12-14 15.30.54.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15028/cc82ebe6-a48b-c65b-b515-6ee2ff5c5191.png">


**[FirefoxのShader editor、Canvas debugger](https://developer.mozilla.org/en-US/docs/Tools/Deprecated_tools)**

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

# 更新停止したデバッグツール
以下のツールはWebGLサイトによって動いたり動かなかったりします。

**[three.js inspector](https://chrome.google.com/webstore/detail/threejs-inspector/dnhjfclbfhcbcdfpjaeacomhbdfjbebi)**

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

**[Shader Editor](https://chrome.google.com/webstore/detail/shader-editor/ggeaidddejpbakgafapihjbgdlbbbpob)**

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

**[Three.js Editor Extension](https://chrome.google.com/webstore/detail/threejs-editor-extension/fbgbekpggeldiacgjkacbkkcbjhmakea)**

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

# 更新あるデバッグツール（少し動作が不安定）
**[WebGL Insight](https://chrome.google.com/webstore/detail/webgl-insight/djdcbmfacaaocoomokenoalbomllhnko)**

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

# オススメのデバッグツール
**[Three.js Developer Tools](https://chrome.google.com/webstore/detail/threejs-developer-tools/ebpnegggocnnhleeicgljbedjkganaek)**

 - 最終更新日（Chromeウェブストア）：2019/08/26
 - MeshやGeometryの情報が見れたり、Materialの情報を変更できる
 - [three.js r106以上](https://discourse.threejs.org/t/three-js-developer-tools/8477/5)が必要
 - 開発者のJordan Santellさんは[THREE.IK](https://qiita.com/naotaro0123/items/13f297fa52a92af36d37)ライブラリも作ってる人


**Materialを変更してる所**
<img width="1400" alt="devtool.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15028/548e4689-200a-4f68-862d-8202b13c5810.png">

**[Spector.js](https://chrome.google.com/webstore/detail/spectorjs/denbgaamihkadbghdceggmchnflmhpmk)**

 - 最終更新日（Chromeウェブストア）：2019/09/18
 - Babylog.jsが提供してるツール。レンダリング結果や頂点情報など様々な情報が見れる
 - Shader Editor機能もある
 - WebGL2.0も対応してる
 
**Three.jsでInstancingしてキャプチャした所**
<img width="1278" alt="スクリーンショット 2019-12-14 16.31.22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15028/c43923bd-4983-632d-196d-03256e405d8e.png">

**[WebXR API Emulator](https://chrome.google.com/webstore/detail/webxr-api-emulator/mjddjgeghkdijejnciaefnkjmkafnnje)**

- 最終更新日（Chromeウェブストア）：2019/11/25
- XRデバイスを使用せずにエミュレートできる。VRカメラをグリグリ動かしたり、コントローラー操作ができる
- 開発者はMozillaのTakahiroさんで日本の人。Three.jsのMMD周りも担当されたと思います。
![screenshot.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15028/e944c489-4903-bac9-041b-d59bec1e7a09.gif)

**[Babylon.js Inspector](https://github.com/BabylonJS/Babylon.js/tree/master/inspector)**

- 最終更新日：2019/12/14
- Chromeウェブストアで公開してるものでなく、Babylon.jsの機能
- 使い方はBabylon.jsのプロジェクトで `scene.debugLayer.show()` を1行いれるだけ
- スクショや動画が撮れたり、GLB形式に出力できたりマテリアルを変更したり、バウンディングボックスを表示したり強すぎる！
 
**1行コードを入れると左のSCENE EXPLORER、右のINSPECTORが表示される**
<img width="1280" alt="スクリーンショット 2019-12-14 16.57.50.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15028/6a2b5f8c-049a-8a0e-f5af-2fd4c1c87bd8.png">

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

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