Help us understand the problem. What is going on with this article?

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 FundamentalsThree.js Fundamentalsを書いてるGreggmanさんがPRしまくってた スクリーンショット 2019-12-14 15.30.54.png

FirefoxのShader editor、Canvas debugger

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

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

以下のツールは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を変更してる所
devtool.png

Spector.js

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

Three.jsでInstancingしてキャプチャした所
スクリーンショット 2019-12-14 16.31.22.png

WebXR API Emulator

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

Babylon.js Inspector

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

1行コードを入れると左のSCENE EXPLORER、右のINSPECTORが表示される
スクリーンショット 2019-12-14 16.57.50.png

まとめ

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

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away