WebGLシェーダープレイグラウンドとは？
GLSLの頂点シェーダーとフラグメントシェーダーを書いて、WebGLで即座にレンダリング結果を確認できます。ローカル環境の構築は不要。シェーダープログラミングの学習やエフェクトのプロトタイピング、GPU高速グラフィックスの実験に使えます。
使い方
- GLSLフラグメントシェーダーのコードをエディターに入力またはペーストします。デフォルトシェーダーがすでに読み込まれています。
- コードを入力すると、ライブプレビューがリアルタイムで更新されます。ビルトインユニフォームはtime、resolution、マウス位置です。
- シェーダーをPNGスクリーンショットとしてエクスポートするか、自分のWebGLプロジェクトで使用するためにコードをコピーできます。
結果
水面の波紋エフェクトをプロトタイピングするゲーム開発者が、サイン波とtimeユニフォームを使ったフラグメントシェーダーを作成。プレビューパネルにアニメーション結果がリアルタイムで表示されます。