玉虫色の液体シェーダーデザイン

数学でつくる水面の油膜のような表現

Iridescent Liquid は、アプリ画面の集合ではなく単一の WebGL プレビューを軸にした OpenDesign の公式サンプルです。見出し「LIQUID IRIDESCENCE」は、紫、シアン、ピンク、ローズの形が流れる彩度の高いフィールドの上に表示されます。構成はキャンバスを主役にしつつ、説明文を左下の読み筋の近くに置いています。

補足文はこの効果を「living oil-on-water field」と呼んでいます。実装は球体メッシュや写真テクスチャではなく、手続き型ノイズを用いたフルスクリーン三角形を描画します。そのため、具体的な物体を描かずに流体のような素材感を示せます。この素材表現は視覚的な比喩であり、物理的に正確な油や水のシミュレーションの証拠ではありません。

上部の「OPENDESIGN · WEBGL PREVIEW」は文脈を示し、「REAL-TIME · GPU」はレンダリング方式を示します。これらのラベルは大きなタイトルを読む前に鑑賞者を方向づけますが、説明的なインターフェース文言として扱うべきで、計測済みのフレームレートや本番環境での性能を示すものではありません。

01

連続したキャンバス

ビジュアルフィールドが構成全体を満たすため、動きが別パネルの背景ではなく主要なコンテンツとして残ります。

02

質感のあるコントラスト

大きな白い文字が密な色面からエディトリアルなメッセージを切り離しますが、背景が変化しても配置は安定させる必要があります。

このデザインが適する場面

この作品は、インタラクティブなビジュアル背景、ジェネラティブアートの習作、クリエイティブコーディングのデモの参考として特に役立ちます。短い説明、大きなタイトル、直接的な操作の合図だけで、視覚的な実験を伝えられることを示しています。動くサーフェスが小さなラベルや詳細な内容と競合するため、情報量の多いインターフェースにはあまり向きません。

「MOVE THE CURSOR ↗」という呼びかけは、鑑賞者を受け身の観察者から参加者に変えます。提示された各状態では、同じキャンバスの色の境界とリップルの配置が異なる一方、オーバーレイは一貫しています。この組み合わせにより状態変化が読み取りやすくなります。構成は変わっても、読むための配置は変わりません。

構図とモーション

このデザインは強い縦方向の読み順を採用しています。上部に文脈ラベル、左下付近に特大の見出し「LIQUID IRIDESCENCE」、その下に説明文、右下にカーソル操作の案内です。これにより横長のキャンバス全体に注意を分散させつつ、主要なメッセージを読みやすい1つのまとまりに保っています。

キャプチャは独立した画面ではなく、同じシェーダーキャンバスの3つの状態を示しています。そのなかで見出しと補足文は位置を保ち、周囲の流れはシアン主体の領域から、よりマゼンタ、ピンク、ティール、オーカーの部分へと移ります。安定したオーバーレイはモーションの基準点になりますが、その代わりに背景が文章の一部の背後でコントラストを下げることがあります。

フラグメントシェーダーは、連鎖する2つのワープフィールドを通した6層のノイズを使います。ポインターからの距離に応じた引力がサンプリング座標を歪ませ、コサインパレットと明るい稜線の項が玉虫色の流れをつくります。両方のポインター座標は、各フレームで目標値との差に0.06を掛けた分だけ目標へ近づき、経過時間によってもフィールドは変化し続けます。右下の案内はクリック可能なコントロールではなく、固定テキストです。

構造としての色

パレットは単一のグラデーションではありません。淡く光る輪郭で縁取られた、広い色の流れとして構成されています。シアンとティールは支配的なマゼンタと紫のフィールドの中に涼しい切れ目を与え、淡いピンクの線は流れの向きを示します。この変化により、具体的な幾何形状を加えなくてもキャンバスに奥行きが生まれます。

安定した読みやすい配置

繰り返されるオーバーレイは実用的なインタラクションパターンを示します。タイトルと案内を保ち、作品側は変化させるというものです。再現する際もこの関係を維持し、そのうえで選んだパレットがテキストの下に十分なコントラストを残すかを確認してください。

対応範囲の境界

このアーティファクトはデザインとレンダリングの例です。提供された根拠が裏付けるのは、可視の WebGL キャンバス状態、ローカルのポインター応答処理、リサイズ、アニメーションループです。外部サービス連携、ストレージ、本番デプロイ、計測済みのフレームレート、元の生成モデルは検証されていません。したがって3つのキャプチャは1つの構成の視覚的な状態として読むべきであり、別々のワークフローや検証済みの性能を示す証拠ではありません。

応用の仕方

新しいバージョンでは、手続き型モーションとエディトリアルなフレーミングの関係を保ち、パレット、リップルのスケール、タイトルの配置、ポインターの影響のうち、一度に1つの変数だけを変えます。変更はキャンバス上で観察できるようにし、提案する挙動は既存の機能としてではなく、提案として説明してください。