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