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


こんにちは，@rootxです．WebGLデバッグしてますか？
今日は，WebGLやThree.jsのデバッグに便利な機能（ブラウザ拡張機能）を紹介してみるね．

WebGLを始めてみたんだけれど「なんだかよくわからないけど動かないよう」「なかなか思ったような描画結果にならないっす」という方は使ってみると幸せになれるかもしれません．

あと，気になるWebGLサイトを見つけたら，紹介するような機能をささっと使って，先人たちの工夫を参考にすることもできちゃうよ．やったね．


[WebGL Inspector](http://benvanik.github.io/WebGL-Inspector/)
-------------

* [Chrome用](https://chrome.google.com/webstore/detail/webgl-inspector/ogkcjmbhnfmlnielkjhedpcjomeaghda?hl=ja)
* [Firefox用](https://addons.mozilla.org/ja/firefox/addon/webgl-inspector/)

みんな入れてる拡張です？ これがあれば，だいたいなんとかなります！

### できること

* frameのキャプチャ
* 呼出しログや無効なコールの警告表示
* ピクセルのヒストリ
* GLステートの表示
* テクスチャ，バッファ，プログラムのリソースブラウザ

### 使い方
拡張をインストール後に，WebGLを利用したページにアクセスすると，アドレスバーに次のようなアイコンが表示されます．
<img width="111" alt="2" src="https://qiita-image-store.s3.amazonaws.com/0/18711/901c1465-7346-bc33-8130-0f0d35c9201c.png">

クリックするとページ右上に **Capture** と **UI**というボタンが現れます．
<img width="150" alt="3" src="https://qiita-image-store.s3.amazonaws.com/0/18711/81ae797e-f6a7-224c-9c0c-f75fda7acf4c.png">

だいたい次のようなイメージです：
<img width="975" alt="webgl_inspetor_trace.png" src="https://qiita-image-store.s3.amazonaws.com/0/18711/e702562e-64ab-74b6-9839-1099f9b0826b.png">


適当なタイミングで右上に出ていた**Capture**を押すと，その瞬間の状態をキャプチャして詳細を確認できます．

#### Traceタブ

選択したキャプチャの実行されたWebGL命令が真ん中のペインにリストアップされます．
適当な行を選択すると，その命令を実行した時点のスクリーンショットが右側に表示されます．まるわかりすぎる！

![WebGLInspector.gif](https://qiita-image-store.s3.amazonaws.com/0/18711/aec2d869-97a5-5dc5-4ac9-d6a6e6648482.gif)
（みんな大好き [WebGL 開発支援サイト wgld.org](https://wgld.org/) さんのです．'Z'押すと背景動くよ！ 知ってた？）

チェックボックスをONにすると無効な呼出しをハイライト表示できます．
あまり神経質になる必要はありませんが，極限までチューニングするときは気にかけても良いかもしれません．

次のキャプチャの例では，33行目でBuffer0がバインドされていて，途中でバインドバッファが変更されていないのに42行めで再びバインドしているためにハイライトされています（細かい！）．

<img width="620" alt="5" src="https://qiita-image-store.s3.amazonaws.com/0/18711/d6df5546-97d5-6a39-6e0e-9159f85d1a92.png">

ピクセルヒストリという，1つのピクセルがどのように変化してきたか，をたどる機能もあります．
右側のスクリーンショットでクリックすると，どのドローコールによって描画されたのかが分かります．
Depthテストの結果，描画されなかったドローコールやブレンディング情報も表示されていますね．なるほどです！

![WebGLInspectorPixelHistory.gif](https://qiita-image-store.s3.amazonaws.com/0/18711/4e4e7a91-eba8-07d7-2d54-4c7c1413e9cb.gif)


#### Timelineタブ

パフォーマンスを取得できるよ．でもこれ，あんまり訳に立たない気がします．

たぶん開いた直後は無効化された状態なのでペインの右上の方にある "Timeline disabled - click to enable"と書かれているリンクを押してね．

そうするとリロードされてパフォーマンスの推移が見られると思います．
左側にずらっと並んだリストで表示のON/OFFを個別に切り替えできるっぽい．っぽい！


#### Stateタブ

各種GLオプションやバインド状態を確認できるよ！
設定し間違えていないかよく確認しよう．
あと，たまにクリックするとタブが切り替わって詳細を見られたりするみたい．
値をここで変更できたら便利なのにね．

<img width="839" alt="Screen Shot 2016-02-17 at 20.36.35.png" src="https://qiita-image-store.s3.amazonaws.com/0/18711/e281f65d-17fc-2ca1-b556-1d05dcf13f8c.png">

#### Textureタブ

いま使ってるテクスチャが見られるっす．
`TEXTURE_WRAP_*`や`TEXTURE_*_FILTER`の指定も確認できるぞ．

テクスチャの切り替え履歴も見られるような気がする．

#### Buffersタブ

バッファの中身が見えるんだって！ まじでー！
正直なところ，できそうなのは'BUFFER_SIZE'や実際の値を1つ2つの確認するくらいでしょうか．

#### Shaderタブ

後述のShaderEditorのほうが多機能なので使わないかなあ．
uniform attributeのインデックスやtypeをさらっと確認するのに使いましょう．



[Shader Editor](https://github.com/spite/ShaderEditorExtension)
-------------------

* [Chrome用](https://chrome.google.com/webstore/detail/shader-editor/ggeaidddejpbakgafapihjbgdlbbbpob)
* Firefoxは標準搭載

リアルタイムにブラウザ上でシェーダを編集できる拡張機能です．これで勝てますね！

Mozillaの開発者向けサイトの記述が詳しいので，そちらを参照してください．
 [シェーダエディタ - 開発ツール | MDN](https://developer.mozilla.org/ja/docs/Tools/Shader_Editor)

左側のリストに並んだプログラム（シェーダプログラム）にマウスカーソルを合わせると，そのプログラムを用いて描画されている箇所が赤くハイライトするのが素敵ですね．

シェーダを編集するとリアルアイムに反映してくれるので，細かい調整するのに便利！

### Firefoxの設定について
> シェーダエディタはデフォルトで無効です。有効にするには開発ツールのオプションを開いて、"標準の Firefox 開発ツール" で `シェーダエディタ` にチェックを入れてください。これで、ツールバーに `シェーダエディタ` が現れます。これをクリックすると、シェーダエディタが開きます。

ということなので使えるように設定してね．


[Canvas Debugger](https://hacks.mozilla.org/2014/03/introducing-the-canvas-debugger-in-firefox-developer-tools/)
-----------------------
Firefox専用だよ！
だいたい WebGL Inspectorと同じような機能だけれど，標準搭載なのが嬉しいね！ でもmozillaのサイトに全然説明がないです．
WebGLだけじゃなくて，2d canvasもデバッグできるみたい．

flim stlipと呼ばれるドローコール毎のスクリーンショットサムネイルが並ぶUIが良いですね．クリックすると対応するドローコールの該当行に飛ぶよ．

あとは，次のドローコールに移動，ステップ実行，ステップイン．ステップインを押すとjs debuggerに飛べますよ．

setInterval()で呼び出されているアニメーションループには対応していないみたいです．

#### 初期設定
"標準の Firefox 開発ツール" で `Canvas` にチェックを入れる．



Three.js用の拡張機能
====================

もはやWebGLフレームワークのデファクトスタンダートと化しているThree.jsですが，Three.js専用のブラウザ拡張も存在します．
現在，Chrome向けでは2種類のThree.js用の拡張機能を確認できます:

* Three.js Editro Extension
* Three.js Inspector

Firefox用の拡張は，ないっぽいです．残念だね！
ちなみに A-Frame (WebVR用フレームワーク)もthree.jsで動作しているのでいけるかな，と思ったけれど，使えませんでしたー．


Three.js Editor Extension
-------------------------

* [Chrome用](https://chrome.google.com/webstore/detail/threejs-editor-extension/fbgbekpggeldiacgjkacbkkcbjhmakea)
    * [Github](https://github.com/jeromeetienne/threejs-inspector)

この拡張機能は，上で紹介したChrome用のGLSL Shader Editorと同じ方がつくってます！ つよい！


<img width="710" alt="three_js_webgl_-_cloth_simulation.png" src="https://qiita-image-store.s3.amazonaws.com/0/18711/4a7d80de-8ef4-811d-b5a1-32b4cee5664f.png">
（試したページ [three.js webgl - cloth simulation](http://threejs.org/examples/webgl_animation_cloth)）

### できること
* メッシュやライトの可視・不可視，影のキャスト/レシーブの有効・無効
* メッシュやライトの位置やスケールの変更
* ライトの色や強度の変更
* UUIDの確認

iframeで表示されている場合は，リロードしても有効にならない点だけ注意かな．
Data（Three.jsの`Object3D`クラスのuserDataプロパティだと思うんだけど未確認です）が見えるのでデバッグ用にIDなどを仕込んでおくのも良いかもですね．


[Three.js Inspector](http://learningthreejs.com/blog/2015/07/30/three-dot-js-inspector-in-chrome-devtools/)
--------------------

* [Chrome向け](https://chrome.google.com/webstore/detail/threejs-inspector/dnhjfclbfhcbcdfpjaeacomhbdfjbebi)
    * [Github](https://github.com/jeromeetienne/threejs-inspector)


こちらは，http://learningthreejs.com/ を運営されている方が作成しているものです．
Three.js Editorと同じようなことができるけれど，もっと高機能です！ つよすぎる！

![three_js_webgl_-_cloth_simulation 2.png](https://qiita-image-store.s3.amazonaws.com/0/18711/5723f5a3-429a-5701-70b6-a2e44c32039d.png)


### できること
* Three.js Editorと同じようなこと
* スケールをXYZ同時に変更できる
* 幾つかのアクションが可能： 複製(clone)，削除，子メッシュをぶら下げる，など
* ジオメトリの情報表示
* マテリアルの編集
    * 標準マテリアルタイプの切替え (e.g. MeshPhongMaterial -> MeshNormalMaterial)
    * 色，ワイヤフレーム表示
    * detphtestのON/OFF
* three.jsのマニュアル表示


[![Three.js Inspector youtube video](http://img.youtube.com/vi/0GQlp9IdLjM/0.jpg)](http://www.youtube.com/watch?v=0GQlp9IdLjM)


その他
==========


ちょっとしたツール
-----------------

### TaskManagerでGPUメモリ使用率をチェック(Chrome)

#### 使い方

1. バーガーメニューから "More Tools" -> "Task Manager"
2. タイトルを右クリックする "GPU Memory"でGPUメモリ使用率が出せます．

後述のFPSカウント（Chrome）でも確認できるし，最初のうちは大量のGPUメモリを使うことは少ないかも．

### FPS Counter (Chrome)

Chromeではブラウザ機能としてFPSカウンタを表示することができます．
![DisplayFPSCounter.png](https://qiita-image-store.s3.amazonaws.com/0/18711/82547bfa-55b5-2917-545b-113088e81de3.png)
（試したページ [Stanford Bunny](http://oos.moxiecode.com/js_webgl/stanford_bunny/)）

現在のFPS，最小/最大FPS，GPUのメモリ使用量が分かります．


#### 使い方
2つ方法があるようです：
1. Chrome `chrome://flags/`で`FPS counter`をチェックON 
    * FPSとGPUメモリがチェックできる．けど，Chrome再起動必要で全部のページに出ちゃうのであんまりおすすめしません↓
2. ChromeのDeveloperToolsの `More tools` > `Rendering Settings` > `Show FPS meter`をONにしましょう．

<img width="384" alt="FPSCounter1.png" src="https://qiita-image-store.s3.amazonaws.com/0/18711/d57b3b88-99d4-2ecb-936b-5957d333c08e.png">

<img width="223" alt="FPSCounter2.png" src="https://qiita-image-store.s3.amazonaws.com/0/18711/c21b9e92-5f9c-716f-285b-a2d3b429ba6d.png">


### [Canvas Inspector](http://www.html5rocks.com/en/tutorials/canvas/inspection/) for Chrome

FirefoxのCanvas Inspectorと同じような機能かな？
2015年に無くなっちゃったみたいです．かなしいね……．


### [WebGL Report](http://webglreport.com/)

こんな感じに現在のGPU/ブラウザで対応しているWebGLの情報を確認できるんだね．
対応している拡張や最大テクスチャサイズだとかは要注目だね．

<img width="734" alt="WebGL_Report.png" src="https://qiita-image-store.s3.amazonaws.com/0/18711/e91ac7db-cdc8-93ba-eb7c-ee6ee2054756.png">


 
読んでおくと良いかも
=====================


WebGL API
----------------

上で紹介したような便利な機能やサイトがあるので，直接使うことは少ないかもしれないけれど，知っておくと役に立つシーンがあるかもです．

* 変換後のシェーダを取得
    * [WEBGL_debug_shaders - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/WEBGL_debug_shaders)
* GPU情報など
    * [WEBGL_debug_renderer_info - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/WEBGL_debug_renderer_info)


Canvas解像度を変えてためそう
----------------

ChromeやFirefoxのレスポンシブデザインツールは異なるキャンバス解像度のプロファイルを使うことができます．
キャンバスサイズを変更して，（特にフラグメントシェーダの）負荷を確認したりしてね．

##### やり方
Chromeの場合は，開発者ツールを起動して`Device Mode`に入って，解像度あるいはデバイスを選択してね．リサイズもできるよ．
Firefoxの場合，レスポンシブデザインビュー(Responsive Design View)を開いて，解像度選択やリサイズしてね．


上級者向け? Tips
-------------------

* [`Chrome:tracing` でプロファイリング](http://www.html5rocks.com/en/tutorials/games/abouttracing/)
* `chrome://gpu/` でGPU状況の確認 (ドライバや有効な拡張，ANGLERの動作状況)
* WindowsならANGLEをいじろう．HLSLに変換されたコードを読もう！
* (Windowsのみ) ANGLEをバイパスしてネイティブOpenGLを使う
    * Chromeの場合: `--use-gl=desktop` をつけて起動
    * Firefoxの場合: `about:config` から `webgl.prefer-native-gl` を有効にする



追記(2016/03/18)
===========

つい先日 WebGL Insightという便利なChrome拡張が公開されていたので紹介を追加します！
（名前があの書籍と同じなので少しわかりにくいね）


WebGL Insight 拡張
-------------------

* [Chrome向け](https://chrome.google.com/webstore/detail/webgl-insight/djdcbmfacaaocoomokenoalbomllhnko)


### 特徴
* 各ピクセルが何回描画されたかわかる Overdraw Inspector
* テクスチャのミップマップレベルの確認 Mipmap Inspector
* Depth表示 Depth Inspector
* コールスタックと統計 Call Stack Timeline and Statistics
* シェーダプログラムの利用カウント Program Usage Count
* 重複したプログラム利用の検出 Duplicate Program Usage Detector
* シェーダソース確認 Program Viewer
* フレーム操作（コマ送り） Frame Control
* ステート変数の編集 State Variable Editor
* リソースビューア Resource Viewer

### この拡張が最強かもしれません！

他のWebGL系の拡張と重複した機能もありますが，これは！と思った機能をいくつかご紹介です！　ありがとう御座います！！

#### 描画箇所のヒートマップが出せる！

![Screen Shot 2016-03-18 at 19.50.16.png](https://qiita-image-store.s3.amazonaws.com/0/18711/b5348687-802e-33ca-5453-7261704e845a.png)
（試したページ [Spring](http://oos.moxiecode.com/js_webgl/spring/)）


#### GLステートを一部その場で変更できる！？

![Screen Shot 2016-03-18 at 20.02.52.png](https://qiita-image-store.s3.amazonaws.com/0/18711/e6a93273-1d72-840b-6eb3-ee00a809d08c.png)

カリングとかブレンドとか変更できちゃう！！

#### 呼び出し回数ヒストグラム表示でわかりやすい！

![Screen Shot 2016-03-18 at 20.00.57.png](https://qiita-image-store.s3.amazonaws.com/0/18711/d4cb8308-6c98-f3ce-28e0-f060493f8142.png)

#### その他の機能

詳しくは，こちらを参照してくださいませ： [3Dparallax/insight: A helpful Chrome extension for WebGL development](https://github.com/3Dparallax/insight/)

こんな拡張が公開されて，WebGL開発者の皆様はウハウハですね！！！



参考文献
============

* [Real-Time Rendering · WebGL Debugging and Profiling Tools](http://www.realtimerendering.com/blog/webgl-debugging-and-profiling-tools/)
    * だいたいこれ読めば，この記事必要ない気がする．
    * ちなみに，このサイトはRealTimeRenderingという徳の高い本のサポートサイトなのですけれど，[OpenGLでガチで戦っている人達にとって有益な情報がありすぎです](http://www.realtimerendering.com/index.html)．
* [CIS565-Fall-2015/WebGL-Profiling-Lab](https://github.com/CIS565-Fall-2015/WebGL-Profiling-Lab/blob/master/README.md)
    * ペンシルバニア大学にはWebGLのいろんなエンジンをプロファイルする授業があるらしい．
    * この授業の成果物でこんなのもありました (https://github.com/terrynsun/WebGL-Fragment-Shader-Profiler)
* [Introducing the Canvas Debugger in Firefox Developer Tools ★ Mozilla Hacks – the Web developer blog](https://hacks.mozilla.org/2014/03/introducing-the-canvas-debugger-in-firefox-developer-tools/)
    * 本文でも紹介したFirefoxのCanvas Debuggerの説明ページ．
* [WebGL Profiling Tips](https://cesiumjs.org/2014/12/01/WebGL-Profiling-Tips/)
    * cesiumの人の記事．ちょっとマニア向けかな．
    * それはともかく，cesiumのデモも面白いので見たことない人はぜひ．GoogleEarth的な地形やビルの3D表示が得意なライブラリです．
* [Google Web Tracing Framework](http://google.github.io/tracing-framework/)
    * ちゃんと調べてないのでよくわかんないです．でもいくつかのサイトで紹介されてたので．
        * [Chrome用](https://chrome.google.com/webstore/detail/web-tracing-framework/gmdhhnlkjmknaopofnadmoamhmnlicme)
        * [Firefox用(xpiファイル)](https://tracing-framework.appspot.com/CURRENT/web-tracing-framework.xpi)
* 
[WebGL best practices - Web API インターフェイス | MDN](https://developer.mozilla.org/ja/docs/Web/API/WebGL_API/WebGL_best_practices)
* [[&] WebGL Performance Tuning](http://www.andoh.org/2015/02/webgl-performance-tuning.html)
    * yukio_andoh さんが AKQA Winterlands の発表をまとめてくださっています．お役立ちです！
    * [このスライドも読みやすくていいよ](http://www.slideshare.net/yukio.andoh/webgl-performance-tuning-tips)