コースティック・プール シェーダーデザイン

発光する水のフィールド

Caustic Poolは、画面の連続としてではなく、1枚の完成したキャンバスとして提示される、公式のOpenDesign WebGL2サンプルです。制作者による見出し「CAUSTIC POOL」は、淡く枝分かれするフィラメントが広がる深いティール色のフィールド上、左下に配置されています。2行の大きなタイトルがまず主題を確立し、補足説明がその効果を「domain-warped ripples」と「caustic filaments」として示します。

この読み順により、インタラクションが始まる前から作品を理解できます。上端には左側の「OPENDESIGN · WEBGL PREVIEW」と右側の「REAL-TIME · GPU」が配置され、抽象的な表面に簡潔な技術的フレームを与えています。これは意図的なトレードオフです。ラベルは見る人の方向付けに役立つ一方、途切れのない雰囲気と固定オーバーレイがわずかに競合します。

01

技法より先にタイトルを置く

「CAUSTIC POOL」は説明文でドメインワープ・リップルを紹介する前にビジュアルの世界を示すため、効果を純粋に技術的なものではなく表現的なものとして保てます。

02

端に置かれた指示

「CLICK THE WATER ↗」はタイトルブロックから離れた右下に配置され、主要な読みの流れを妨げずに参加への誘いを発見できるようにしています。

この構成が適する場所

このデザインは、動きが補助的な装飾ではなく主題となる文脈に適しています。クリエイティブコーディングの研究では、リップルフィールドと光の集中を比較するために使えます。インタラクティブなランディングページでは、同じ構造によって短いメッセージに空間性を与えられます。スキャンすべきプロダクトインターフェースがない場合、フルキャンバスは特に有用です。

この構成は、周囲の体験がGPUで描画されたサーフェスに対応できるなら、イベント、インスタレーション、実験的なWeb機能のビジュアル背景としても機能します。主な制約は焦点です。静的マークアップに制作者による操作コントロールがないため、インタラクションは意図的に限定され、コミュニケーションの大部分をビジュアルが担います。

リップルと文字が空間を共有する方法

キャプチャーは別々の画面ではなく、視覚状態が変化する1つの完成したキャンバスを示しています。各状態でティール色の背景は連続したまま、淡いネットワークの位置と密度が変化します。この連続性によって、動きはページ遷移ではなく水のフィールドの性質として感じられます。その結果、穏やかで持続する表面が生まれます。一方で、状態の変化は明示的なステータステキストではなく、微妙なパターンの動きによって伝えられるというトレードオフがあります。

シェーダーは、折り返した座標の計算を5ラウンド行うことで、明るいネットワークを形成します。ポインターを押すと、リップルの位置と経過時間がリセットされます。その後、正弦波による放射状の波がサンプリング座標を曲げ、距離と経過時間に応じて薄れていきます。これにより、メッシュ、外部テクスチャー、物理流体ソルバーを使わずに、水と光の印象を生み出します。固定された左下のタイトルと反対側の端にある指示によって、見る人は変化するフィールドを安定したテキストと比較できます。

1. 基準を置く

   タイトルと説明文を左下の安定したブロックに保ち、変化するシェーダー状態を固定された基準と比較できるようにします。

2. コントラストを付ける

   暗いティール色のフィールドに明るいフィラメントを配置し、チャート、コントロール、装飾パネルを追加せずに屈折ネットワークを読みやすくします。

3. 誘う

   反対側の下端に簡潔なポインター指示を1つ配置し、ローカルなジェスチャーを目に見える水のメタファーに結び付けます。

1つのサーフェス、複数の状態

別のキャプチャーでも、同じラベル、タイトル、説明、クリックの手がかりを保ちながら、発光するラインだけが変化します。この繰り返されるオーバーレイがコンテンツとアニメーション状態を分離するため、見る人はインターフェースを学び直さずにフィールドを比較できます。再現する場合は、この安定したエディトリアルレイヤーを維持しつつ、その下でシェーダー出力を変化させるべきです。

機能の境界

ソースは、ローカルなWebGL2レンダリング、ポインターを押したときの入力、リサイズ処理、描画ループを実装しています。押すたびに前のリップルが置き換えられ、複数の独立した波が蓄積されることはありません。リップルの経過時間はアニメーションフレームごとに1/60増加するため、減衰のタイミングは実際のフレームレートに依存します。3つのキャプチャーは1つのキャンバスの状態を示していますが、記録された入力トレースがないため、クリックへの反応を個別に実証するものではありません。

これは検証済みの水シミュレーションではなく、視覚的なコースティック近似です。ソースからは、接続されたサービス、保存されたユーザーデータ、測定済みのGPUパフォーマンス、普遍的な入力互換性、最初に使用された生成モデルは確認できません。本番環境へ応用する場合は、GPUラベルや制作者による水のメタファーを受け入れ基準の証拠として扱うのではなく、意図する環境でローカル入力とタイミングの挙動をテストしてください。