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