Canvas, WebGL開発で困るのがデバッグ。
HTML, CSSみたいに開発ツールで状態を確認することもできず、Canvas内がブラックボックスになること。
何がなんでどうなってるのか検討もつかない。
WebGL Inspector
Chrome 拡張機能 WebGL Inspector を追加すると明るい未来が開けます。
WebGL Inspector by benvanik
Chrome ウェブストア: WebGL Inspector
拡張機能を追加し有効にするとWebGL を使用していると画面右上に[Capture][UI]と表示されます。
[UI]を押すと画面下側にパネルが開きます。
これで様々状態を知ることができます。
アニメーションを遅くしたり、一時停止したりが可能です。
[Capture]を押すとその時点のスナップショットがとれます。
Githubでソースコードが公開されています。
今も頻繁に更新されているようです。
github: benvanik / WebGL-Inspector
助かります、感謝!