リキッドメタルシェーダーデザイン

画像テクスチャを使わないクローム調の表面

Liquid Metal は、キャンバス全面を一つのシェーダー構成で見せる OpenDesign 公式のグラフィック例です。見出し「Molten chrome, zero textures.」が中心となる制約を示しており、表面は画像素材で組み立てたイラストではなく、素材のスタディとして提示されています。

補足文は、金属として陰影をつけたドメインワープのノイズフィールド、流れる鏡面ハイライト、虹色の薄膜パレットを説明しています。この表現は、キャプチャに見られる折りたたまれた流動的な帯、鋭い白い反射、ラベンダーやバイオレットからシアン、グリーン、マゼンタへ移るカラーとそのまま対応します。

このデザインが合う場面

大きなインタラクションの仕組みと競合せずに、視覚的な面で雰囲気を担わせたいときに最も役立ちます。途切れのないキャンバスは、WebGL のヒーロー表現、ジェネラティブアートの検証、モーション主体のビジュアルアイデンティティの参考になります。

操作用のコントロールがないため、描画されたフィールドに注意が向きます。そのため研究しやすい一方、プロダクトに応用する場合は、これらがすでに解決済みだと考えず、インタラクション、アクセシビリティ、コンテンツとの関係を自分で定義する必要があります。

構成はどう変化するか

三つのフレームには、小さな緑の LIQUID METAL のキッカー、はるかに大きい「Molten chrome, zero textures.」の見出し、補足説明、右上の WebGL2 バッジが共通して残ります。その固定された階層の下でシェーダーが変化します。6層のノイズが高さフィールドを形づくり、近傍の高さのサンプルから表面の法線を推定します。動く光源、鋭い鏡面項、虹色のパレットがクロームのような見た目を生みます。

view-1 では淡いラベンダーと白が支配的で、細い青とバイオレットの筋がフィールドを横切ります。view-2 はより暗い緑と青の帯へ移り、表面に方向性と細長さが出ます。view-3 では、より強いマゼンタ、オリーブ、くすんだグレーの領域が現れます。これらはキャプチャした別々の状態であり、ユーザーが選べるパレットや計測済みのパフォーマンスモードがあることを示すものではありません。

01

View-1

ラベンダーとバイオレットが支配的で、密な白いハイライトが柔らかなクローム調の見た目をつくります。

02

View-2

緑と深い青の筋がより目立ち、方向性のある長い帯が生まれます。

03

View-3

マゼンタ、オリーブ、くすんだグレーが色の変化の感覚を高めます。

固定された文字と変化するフィールド

大きな白いタイトルはビジュアルフィールドの低い位置にあり、その前に短い緑の LIQUID METAL ラベルが置かれます。この順序により、長い素材の説明を読む前に主題を把握できます。一方で、文字が作品のかなりの面積を占めるため、シェーダーの表面を遮られずに確認できる範囲は狭まります。

反射のコントラスト

明るく細いハイライトが、歪んだ形を繰り返しなぞります。これが磨かれた金属という視覚的な手がかりになり、暗い溝がハイライトの辿る縁を与えます。この効果はコントラストに依存するため、落ち着いたパレットやハイライトの弱さは、一部で文字のコントラストが改善されても、素材の読み取りやすさを下げる可能性が高いでしょう。

見えている挙動と境界

ソースは、自動の WebGL2 レンダリング、経過時間によるアニメーション、キャンバスのリサイズを実装しています。ポインター、クリック、キーボードの操作は登録されていません。ローカルで推定したフレームレートが約半秒ごとに WebGL2 バッジで更新されますが、これはこの描画セッションのものであり、GPU の性能を保証するものではありません。この効果はクロームを手続き的に視覚近似したもので、物理的な溶けた金属のシミュレーションではありません。

静的なマークアップには作者が用意したコントロールがなく、提供された根拠からは、接続されたサービス、保存されたユーザーデータ、本番デプロイ、入力操作、元の生成モデルのいずれも確認できません。再現時にこれらの機能を提案することはできますが、このデザイン自体が検証している範囲の外です。

1. キャンバスをローカルに保つ

   シェーダーは自己完結した視覚レイヤーとして扱い、外部アプリケーションの挙動は別に定義します。

2. キャプチャと指標を分ける

   三つのフレームは視覚的なバリエーションの議論に使い、実行時のパフォーマンスは想定環境で別途測定します。