Safari
WebGL
WebGLDay 6

Safari 12でサポートされたWebGL Shader Debuggingについて

はじめに

Safari 12からWebGL Shader Debugging という機能が追加されたようです

公式ページを下に進むと....
 2018-12-05 20.45.40.png
このように書いてありました

とりあえず使ってみる

Developper Toolsを開くと,Canvasタブというのがあります
 2018-12-05 20.51.04.png
これをクリックすれば使えるようです

Shadertoy見てみた

 2018-12-05 20.58.40.png

こんな感じになってます(右)
この画像でのCanvas 2がメインのCanvasで,他はテクスチャ表示するCanvasですね
これです
 2018-12-05 20.59.34.png

とりあえずcanvas 2をクリックします
するとこんな感じになります
 2018-12-05 21.01.20.png
左がWebGLContextにリンクされたプログラムですね
右では使用メモリとか属性のonoff,使用している拡張機能が見れるようです

左のプログラムクリックしてみます
 2018-12-05 21.16.44.png
glslのコード見れるっぽいです
実際ShaderToyって最終的にこういう形で実行しているんだなあと
output.gif
コードいじるとリアルタイムに描画結果も変わります
ライブプログラミングできる
すごい

左上の赤丸をクリックしますと,

output2.gif

何やら録画のようなことが行われます

 2018-12-05 21.55.18.png

処理が終わるとこのような状態になり,1フレームごとの画像が見れるらしいです
そして例えばフレーム1をクリックすると

 2018-12-05 21.56.50.png

こうなります
つまり,そのフレームの時に何がどういう順番で実行されていて,glsl側に具体的にどんな値が送られているか見れるんですね

所感

WebGLのデバッグツールって今まで使ってこずに開発してたけど,ブラウザの標準で提供されるのめっちゃいいですね,使っていこうと思います