シェーダエディタで、WebGL で使用するバーテックスシェーダおよびフラグメントシェーダの参照や編集ができます。
WebGL は、プラグインを使用せずにブラウザでインタラクティブな 3D グラフィックスや 2D グラフィックスをレンダリングするための JavaScript API です。WebGL では、OpenGL レンダリングパイプラインの適切なステージで名付けられている、"シェーダ" というプログラムを 2 つ提供します。ひとつはバーテックスシェーダであり、これは描画する各頂点の座標を提供します。もうひとつはフラグメントシェーダであり、こちらは描画する各ピクセルの色を提供します。
これらのシェーダは OpenGL Shading Language、別名 GLSL で記述します。WebGL では、それらをさまざまな方法でページに含めることができます。JavaScript のソース内にハードコードする、<script> タグでインクルードする別ファイルに書き込む、プレーンテキストとしてサーバから取得する、といった方法があります。それらはページで実行する JavaScript コードによって、コンパイルのために WebGL API を使用して送出され、そしてデバイスの GPU で実行されます。
シェーダエディタでは、バーテックスシェーダおよびフラグメントシェーダのソースを調査および編集できます。
こちらは複雑なアプリケーション (Unreal Engine のデモ) でシェーダエディタをどのように使用できるかを示したスクリーンキャストです:
シェーダエディタを開く
シェーダエディタはデフォルトで無効です。有効にするには開発ツールのオプションを開いて、"標準の Firefox 開発ツール" で "シェーダエディタ" にチェックを入れてください。これで、ツールバーに "シェーダエディタ" が現れます。これをクリックすると、シェーダエディタが開きます。
始めはページの再読み込みを求めるボタンが表示された、ブランクのウィンドウが現れます:
作業を始めるには、WebGL コンテキストを生成するページおよびプログラムを読み込みます。以降のスクリーンショットは、Unreal Engine のデモを使用して取得しました。
3 つのペインに分割されたウィンドウが現れます。左側はすべての GLSL プログラムのリスト、中央は選択したプログラムのバーテックスシェーダ、右側は選択したプログラムのフラグメントシェーダです:
プログラムの制御
左側のペインでは、現在の WebGL コンテキストで使用しているすべてのプログラムを一覧表示します。リストの項目にマウスポインタを載せると、そのプログラムで描画したジオメトリを赤色でハイライトします:
プログラム項目の左側にある目玉のアイコンをクリックすると、そのプログラムを無効化します。これは特定のシェーダに注目したり、重なっているジオメトリを隠したりするのに役立ちます:
項目をクリックすると、そのバーテックスシェーダとフラグメントシェーダが他の 2 つのペインに表示され、編集ができます。
シェーダの編集
中央および右側のペインでは、選択したプログラムのバーテックスシェーダおよびフラグメントシェーダを表示します。
これらのプログラムは編集することが可能であり、編集結果は次に WebGL コンテキストが再描画されるとき (例えば次のアニメーションフレーム) で確認できます。例えば、色を変更できます:
エディタは、コード中の構文エラーをハイライトします:
エラーがある行の横に表示される×印にマウスポインタを載せると、詳しい問題点を確認できます:
