WebGLシェーダープレイグラウンドとは?

リアルタイムでGLSL頂点シェーダーとフラグメントシェーダーを記述し、WebGLでレンダリングされた視覚的な出力を即座に確認できるライブシェーダーエディターです。ローカル環境のセットアップなしで、シェーダープログラミングの学習、ビジュアルエフェクトのプロトタイピング、GPUアクセラレーテッドグラフィックスの実験に最適です。

使い方

  1. GLSLフラグメントシェーダーのコードをエディターに入力またはペーストします。スタート地点として使えるデフォルトシェーダーが用意されています。
  2. 入力と同時にリアルタイムでライブプレビューが更新されます。time、resolution、マウス位置などのビルトインユニフォームが利用可能です。
  3. シェーダーをPNGスクリーンショットとしてエクスポートするか、自分のWebGLプロジェクトで使用するためにコードをコピーできます。

結果

水面の波紋エフェクトをプロトタイピングするゲーム開発者が、サイン波とtimeユニフォームを使ったフラグメントシェーダーを作成し、プレビューパネルでアニメーションの結果がリアルタイムで更新されるのを確認しています。

関連ツール