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