Canvas, WebGL開発で困るのがデバッグ。 HTML, CSSみたいに開発ツールで状態を確認することもできず、Canvas内がブラックボックスになること。 何がなんでどうなってるのか検討もつかない。 Chrome 拡張機能 WebGL Inspector を追加すると明るい未来が開けます。 WebGL Inspector by benvanik Chrome ウェブストア: WebGL Inspector 拡張機能を追加し有効にするとWebGL を使用していると画面右上に[Capture][UI]と表示されます。 [UI]を押すと画面下側にパネルが開きます。 これで様々状態を知ることができます。 アニメーションを遅くしたり、一時停止したりが可能です。 [Capture]を押すとその時点のスナップショットがとれます。 Githubでソースコードが公開されています。 今も頻繁に更新され
![Chrome extension, WebGL Inspectorが超便利](https://cdn-ak-scissors.b.st-hatena.com/image/square/58e94b3727e96b51007b3008ff05df53a3adaf47/height=288;version=1;width=512/http%3A%2F%2Fwww.inazumatv.com%2Fcontents%2Fwp-content%2Fuploads%2F2013%2F05%2Fd18d345b07cdb94d893a87e71d4f6a57.png)