(sim) ベガス・スフィアのためのシェーダー作成

 (whenistheweekend.com)
1 ポイント 投稿者 GN⁺ 2023-12-01 | 1件のコメント | WhatsAppで共有
  • The Sphere ページは、5つの例とGLSLシェーダー断片を通じて、球体表面の色をどのように計算するかを示している
  • シェーダー入力は time、vUv、vNormal で構成され、時間とUV座標が色の変化の中心となる
  • main() は gl_FragColor に vec4(...) を入れて、各ピクセルの最終色を計算する
  • RGB値は cos(time + vUv.xyx + vec3(0., 2., 4.)) を基に生成され、時間ベースの変化を表現している
  • 宣言された vNormal は、提示されたコード断片内では使われておらず、現在の色計算には影響しない

The Sphere ページ構成

  • タイトルは The Sphere
  • 本文には example 1 から example 5 までの例の表記がある
  • 続いて、GLSLと思われるシェーダーコードが配置されている

GLSLシェーダーコードの流れ

  • 入力変数は time、vUv、vNormal の3つ
    • time は uniform float
    • vUv は varying vec2
    • vNormal は varying vec3
  • main() 関数が gl_FragColor を設定する
  • 色は 0.5 + 0.5 * cos(...) の形で計算される
  • cos() の入力には 時間値、vUv.xyx、vec3(0., 2., 4.) が一緒に入る
  • アルファ値は 1. に固定される

関連記事

1件のコメント

 
GN⁺ 2023-12-01
Hacker News のコメント

  • Matrix 風のエフェクトを動くようにした。
    球の上部が見えるように UV を調整しようとして諦めたが、three.js の uniform である projectionMatrix と modelViewMatrix は、GLSL の先頭で宣言しておくだけで参照できた。

  • 静的な Penrose タイリングを作った: https://gist.github.com/vjeranc/265db912d4004c7c0b0f16ae5fda...
    球は無限ではないので非周期タイリングを使う実用的な意味はないが、それでも見た目はよい。
    無限の円錐をタイリングできる似たタイル集合や単一タイルがあるのかは、まだ分からない。

    • 物理的なタイルなら、曲率が合わないので不可能に見える。
      興味深い問いは残るだろうが、どの投影に意味があるのかが十分明確ではなく、これ以上掘り下げにくい。
    • 球を無限の非周期タイル平面の間でゆっくり動かすように見せても面白そう。

  • 少し話題からそれるが、The Sphere が実際にどれほど大きな工学プロジェクトなのかが魅力的だ。
    構造物そのものから、球の内外にある数千枚の LED パネルの同期、ラスベガスの暑さの中での冷却、内部の 18,000 席を十分涼しく換気された状態に保つことまで、すべてが含まれる。
    普通のオフィスビルでも、まともに換気できていないところは多い。

    • それだけの労力と資源を注ぎ込んで、結局はより多くの視線を広告に釘付けにしておくためだけなのだ。
    • Sphere の内部では特殊効果用に冷たい風も作れるらしい。本当にすごい。

  • 簡単な smiley.frag を作ってみた: https://gist.github.com/nickbarth/4ec5147bd1288fd2bcfc4c5b46...

  • プロジェクトがとても良い。
    各コードに個別の URL があると共有しやすそう。URL の中にコードを埋め込む方式でもよさそうだ。

  • 大きなスマイル顔シェーダーを作った。
    sdRing で口を作り、左右対称を利用して目を一度に処理したうえで黄色で出力する GLSL コードだ。

  • シェーダーを初めて触って、回転するスイカを作った。
    RGB タプルを扱っていて、fract() が剰余演算のように見え、その値を二乗して足すことで滑らかな帯を作っている、という程度は分かるが、シェーダーが正確にどう動いているのか、vUv が何なのか、gl_FragColor がどこに代入されるのかはまだ不透明だ。

    • GPU はモデル空間のオブジェクト、つまり三角形の頂点リストとカメラ位置、そしてそれをスクリーン空間へ変換する頂点シェーダーを受け取る。
      その後、三角形をフラグメント、つまりピクセルに分割し、各フラグメントごとにフラグメントシェーダーを実行する。
      ここでは、すべてのフラグメントに同じ値として入る time uniform と、頂点から出力された後に三角形内で線形補間される vUv が入力で、vUv は球上のピクセル座標に相当する。
      gl_FragColor はそのフラグメントに適用される RGBA 色の出力だ。
      一般的なゲームや Google Earth のシェーダーなら、ここにテクスチャリングとライティングが加わる。GPU の実行モデルはピクセルを 1 つずつコーディングしているように見えるが、実際には SIMT なので、NVIDIA は 32 個、AMD は 64 個のピクセルを同時に処理する。
      条件文はおおむね、両方の分岐を実行する条件付き演算に変わると考えればよい。
    • キャンバスのすべてのピクセルに対してコードを実行する方式だ。
      https://www.shadertoy.com/ も気に入ると思う。

  • https://www.glslsandbox.com のシェーダーも見る価値がある。
    ただし、そこには未熟な人たちが NSFW シェーダーを頻繁に投稿していて、管理者がそこまで細かく見ているわけではなさそうなので注意が必要だ。

    • GLSL 数百行で身体を作るのもすごいが、たった 11 行で乱交シーンを構成するのは別次元だ。
      「NSFW GLSL コンテンツ」のコルモゴロフ複雑性がどの程度なのか気になる。
      https://www.glslsandbox.com/e#108133.0
    • これは純粋な天才性だ。
      NSFW: https://www.glslsandbox.com/e#108230.3
      コードのコメントには、ChatGPT に体をもっと太くし、背景のスクロール線を追加し、色を変え、特定の身体部位を追加するよう求めるプロンプトが残っている。
    • そこにハーケンクロイツを投稿していた人たちよりは、ずっとましな状態だ。

  • とても良い。
    私の isocity プロジェクトに誰かが投稿した解法を見ると、作った都市を URL で共有できるようにしている。
    似た方式を実装できそうだ: https://github.com/victorqribeiro/isocity/commit/c6588171e37...

  • The Sphere はデモパーティーを開くのに素晴らしい場所になりそうだ。
    https://en.wikipedia.org/wiki/Demoscene#Parties