レイマーチング彫刻シェーダーデザイン

ピクセルから作るヒーロー

レイマーチング彫刻シェーダーデザインは、深いネイビーの背景に大きな緑のプロシージャルな形状を配置します。見出し「3D that lives in a fragment shader.」は、この画像を従来の3Dアセットではなくレンダリングスタディとして位置づけます。この組み合わせにより、訪問者は彫刻の表面を細かく見る前に技術的な前提を理解できます。

フラグメントシェーダーは、中心が時間とともに周回する5つの球の距離場のスムーズユニオンをスフィアトレーシングします。2本目の短いトレースでソフトシャドウを推定し、有限差分で求めた法線がハイライトとフレネル風のリムを支えます。ゆっくりした自動カメラ周回によって視点が変わります。緑の形状は彫刻のように見えますが、彫刻メッシュ、画像テクスチャ、流体シミュレーションは使われていません。

デザインでは、技術説明を特大タイトルの下に置いています。「No meshes」からレンダリング手法、続いて周回するモーションの説明へと進みます。この順序により視覚的なアイデアが一目で伝わりますが、その代わりシェーダー用語にはグラフィックスプログラミングへの一定の知識が前提となります。

この構図が合う場面

このデザインは、緻密なナビゲーションよりも雰囲気と技術的アイデンティティが重視されるファーストビューのヒーローに向いています。彫刻が視野の大半を占め、左下のラベルと段落が、何を見ているのか知りたい読者の入口になります。

提供された3つの状態では、同じテキスト構成のまま描画される形状の配置が変わります。ある状態では大きな丸い形状が中央にあり、別の状態では形状が重なり、3つ目では明るいエッジの形状が上部の領域を横切ります。コピーが繰り返されるため、コントロールや別々のシーンのギャラリーを用意せず、モーションそのものが主題になります。

状態バッジの読み方

右上のバッジは GPU と Raymarch のラベルを保ち、ローカルで計算したFPS推定値を追加します。この環境では3つのキャプチャすべてが2FPSと表示される一方、説明コピーは60fpsと述べています。これらは同等の根拠ではありません。カウンターはキャプチャ時の再描画頻度を示すもので、ソースの文言がどのデバイスでも通用する性能保証を示すわけではありません。

光とスケールによる構図

彫刻は意図的に特大にされています。最初のキャプチャでは、丸みを帯びた本体が上端と右端から入り込み、タイポグラフィの周りにネイビーの余白を残します。後の状態では複数の形状がより近づきます。形状をビューポートの境界で切ることで、オブジェクトがページより大きく感じられますが、読者が確認できる輪郭は減ります。

緑からほぼ黒へのシェーディングが、主な奥行きの手がかりになります。明るい点は形状の左上または右上の縁に置かれ、淡いリムが一部の輪郭に沿っています。これにより、暗い形状の周りに視線の道筋ができます。トレードオフはコントラストです。ネオングリーンは視覚的に強いため、控えめな技術説明の段落は短く、慎重に配置する必要があります。

エディトリアルレイヤーは、小さな大文字の「RAYMARCHED HERO」ラベル、非常に大きな2行タイトル、コンパクトな説明段落で構成されます。ラベルがカテゴリを示し、タイトルがアイデアを述べ、段落が技法を示します。各テキスト層が一般的なヒーローではなくレイマーチング彫刻を直接指しているため、この3段階の流れはこの作例ならではのものです。

1. 場から始める

   ダークネイビーのキャンバスと特大の緑の形状を1つ置き、他の形状が注意を奪う前にライティングモデルを読み取れるようにします。

2. 量感の手がかりを加える

   ソフトシャドウ、集中したハイライト、控えめなフレネルエッジを使い、メッシュ特有のディテールを加えずに符号付き距離関数の形状を表現します。

3. 説明を配置する

   カテゴリラベル、メインステートメント、技術的な一文をこの順に保ち、モーションを止めたときにもビジュアル実験が理解できるようにします。

機能の境界

この公式OpenDesignの例には、見た目だけのモックではなく、実際のローカルWebGL2実装が含まれています。フルスクリーントライアングルが、ピクセルごとに最大90ステップのスフィアトレースを実行し、距離しきい値0.001または範囲8超で停止し、ソフトシャドウには最大24ステップを使います。これらはソース上の事実であり、本番環境での準備完了や外部サービスへの接続を証明するものではありません。

シーンとカメラは自動でアニメーションします。入力イベントはリサイズのみで、描画DPRは1.5に制限され、ピクセルごとの負荷を抑えています。ポインター、キーボード、カメラ操作、マテリアル編集、パラメーターのコントロールはありません。ローカルのFPS推定値は約半秒ごとのウィンドウで更新されます。この値もソースの60fpsという文言も、デバイス間のベンチマークを示すものではありません。