#はじめに
Safari 12からWebGL Shader Debugging という機能が追加されたようです
公式ページを下に進むと....
このように書いてありました
#とりあえず使ってみる
Developper Toolsを開くと，Canvasタブというのがあります
これをクリックすれば使えるようです
Shadertoy見てみた
こんな感じになってます(右)
この画像でのCanvas 2がメインのCanvasで，他はテクスチャ表示するCanvasですね
これです
とりあえずcanvas 2をクリックします
するとこんな感じになります
左がWebGLContextにリンクされたプログラムですね
右では使用メモリとか属性のonoff,使用している拡張機能が見れるようです
左のプログラムクリックしてみます
glslのコード見れるっぽいです
実際ShaderToyって最終的にこういう形で実行しているんだなあと
コードいじるとリアルタイムに描画結果も変わります
ライブプログラミングできる
すごい
左上の赤丸をクリックしますと，
何やら録画のようなことが行われます
処理が終わるとこのような状態になり，1フレームごとの画像が見れるらしいです
そして例えばフレーム1をクリックすると
こうなります
つまり，そのフレームの時に何がどういう順番で実行されていて，glsl側に具体的にどんな値が送られているか見れるんですね
#所感
WebGLのデバッグツールって今まで使ってこずに開発してたけど，ブラウザの標準で提供されるのめっちゃいいですね，使っていこうと思います