WebGLシェーダープレイグラウンドとは？
GLSLの頂点シェーダーとフラグメントシェーダーを書いて、WebGLで即座にレンダリング結果を確認できます。ローカル環境の構築は不要。シェーダープログラミングの学習やエフェクトのプロトタイピング、GPU高速グラフィックスの実験に使えます。
標準で用意されている uniform はアニメーション用の `u_time`、画面サイズの `u_resolution`、マウス位置の `u_mouse`、レンダリング済みフレーム数の `u_frame`、そしてすぐ使えるタイル可能なノイズテクスチャ `sampler2D u_noise` です。任意の画像をアップロードすると `sampler2D u_texture` として結び付き、フラグメントシェーダから直接サンプリングできます。10 種類のプリセット(gradient wave、plasma、circle SDF、noise tunnel、Mandelbrot、ray march sphere、metaballs、voronoi、starfield、worley cells)に加え、アニメーション速度スライダー、リアルタイムの FPS 表示、自動コンパイルの切替、タイムラインを止められる一時停止ボタン、ソース全体を持ち回せる共有リンク、現在のフレームを PNG として書き出す機能まで揃っています。
使い方
- GLSLフラグメントシェーダーのコードをエディターに入力またはペーストします。デフォルトシェーダーがすでに読み込まれています。
- コードを入力すると、ライブプレビューがリアルタイムで更新されます。ビルトインユニフォームはtime、resolution、マウス位置です。
- シェーダーをPNGスクリーンショットとしてエクスポートするか、自分のWebGLプロジェクトで使用するためにコードをコピーできます。
使用するタイミング
- C++ や Three.js のプロジェクトをローカルで組まずに GLSL の文法を学びたい。
- フラグメントシェーダの効果をゲームエンジンや Web サイトに移植する前に試作する。
- ポートフォリオやスライド、SNS 投稿用にアニメーション背景のスチル画像を作る。
結果
水面の波紋エフェクトをプロトタイピングするゲーム開発者が、サイン波とtimeユニフォームを使ったフラグメントシェーダーを作成。プレビューパネルにアニメーション結果がリアルタイムで表示されます。
よくある質問
- C や CG プログラミングの知識がないと使えませんか?
- GLSL は C 風の小さな言語で、ループや条件分岐、浮動小数点演算が中心です。C、Java、JavaScript を触ったことがあれば馴染みやすく、プリセットはコメント付きなので、まずは値を変えていけば GPU 経験ゼロでも始められます。
- シェーダはコンパイル通過したのにプレビューが真っ黒です。なぜ?
- ありがちな原因は、main 関数の外で `gl_FragColor` に書き込む、`vec4` ではなく `vec3` を返す、ノイズ関数の中でゼロ除算が発生する、などです。ブラウザのコンソールを開くと、コンパイル成功時でも WebGL の警告が表示されます。
- テクスチャをサンプリングしたり、自分の画像を読み込めますか?
- できます。プレビューのバーにある「画像をアップロード」を押せば、任意の PNG や JPG が `sampler2D u_texture` として結び付きます。連動する float の `u_hasTexture` は画像が用意できた瞬間に 1.0 になるので、シェーダ側でテクスチャの有無を分岐できます。Shadertoy のチャンネル入力と同じ作法です。
- WebGL のどのバージョンですか?
- WebGL 1、GLSL ES 1.0 です。`in/out` ではなく `varying`、名前付き出力ではなく `gl_FragColor` を使い、整数テクスチャは扱えません。WebGL 2 やデスクトップ OpenGL 3+ 向けのシェーダはここで動かすには軽い文法調整が必要です。
- サーバに何か送信されますか?
- いいえ。コンパイルも描画もブラウザ越しの GPU で完結します。シェーダのソースはページから出ないので、コピーせずタブを閉じるとコードは失われます。