サイケデリック・グラフィックス 0: 紹介

 (benpence.com)
1 ポイント 投稿者 GN⁺ 2025-01-25 | 1件のコメント | WhatsAppで共有
  • サイケデリックなアニメーションやゲームビジュアルを作るための入門編で、事前知識がなくても追えるように UVと色の計算 から始める
  • 3Dモデルへの色付けでは、2D画像領域を3D面に結び付ける UVマッピング／テクスチャリング を理解することが重要
  • UV座標はテクスチャ上の位置を表す 0.0〜1.0の範囲 の2つの値で、(0.5, 1.0) は横50%、縦100%の地点に当たる
  • グラフィックスの色は通常 RGB の3つの値で表され、UVのX・Yを赤・緑に変換すると、座標の変化が色のグラデーションとして見える
  • サンプルコードは画面全体を覆う1枚の3D面で ピクセルごとの独立計算 によって色を決めるため、一般的なプログラム作成とは異なる考え方が必要になる

シリーズの目標と前提

  • サイケデリック・グラフィックス・シリーズ は、アニメーションやゲームに使える サイケデリックなビジュアル の作り方を扱う
  • グラフィックスやプログラミングの事前知識は不要だが、三角法とプログラミング経験があると理解の助けになる
  • 目標は、映像サンプル で使われているサイケデリック・グラフィックスの基本原理を身に付けること
  • 映像の大半は Blender で作られているが、このシリーズの手法はほかの環境にも移しやすく、Blenderは part 3 で扱う
  • 第0回と part 1 は、Web上で実行されるサンプルへ向けて進んでいく

3DモデルとUVマッピング

  • 3Dモデルは点と面でできた表面

    • コンピュータグラフィックスは3Dのように見えるが、グラフィックスコードを書くときは 2Dとして考える 必要がある場面が多い
    • 3D編集ソフトでモデルを作るとき、実際に作っているのは空間に浮かぶ点である頂点(vertices)と、それらの頂点をつないだ面(faces)
    • モデルは中身の詰まっていない表面であり、画面に見えるのも表面だけ
    • ゲームやアニメーションのほぼすべての3D形状は、このような点と面に行き着く
    • 滑らかに見えるモデルでも、点と面が十分に多いため境界が分かりにくいだけということが多い

  • テクスチャは3D表面に貼る2D画像

    • 3D表面に色を加える標準的な方法として UVマッピング／テクスチャリング が使われる
    • 地球の2D投影図が一部の領域で引き伸ばされたり歪んで見えたりするように、3Dモデルの色を2Dに展開した画像も歪むことがある
    • 展開された2D画像は、後で3Dモデル表面に適用する色を含む テクスチャ(texture)
    • 画像テクスチャを作る方法の1つは、空の画像ファイルを作成し、その後3Dオブジェクトの各面ごとに画像のどの部分を使うかを決めること
    • 異なる3D面が同じテクスチャ領域を共有してもよく、左右対称のボディのように片側だけを塗って両側の面に同じ領域を割り当てる方法はよくある
    • 各面が使うテクスチャ領域は、実際の3D面と大きさや比率が同じである必要はない

テクスチャペイントとUV座標

  • テクスチャに塗るとモデルに現れる

    • テクスチャの上に塗ったものはすべて 3Dモデル 上に表示される
    • 多くのソフトウェアは、3Dモデルに直接ペイントすると、その代わりに画像テクスチャを塗ってくれる機能を提供している

  • UV座標はテクスチャ上の2D位置

    • 3Dモデルの各面に対して確保されたテクスチャ領域が UVマップ であり、画像テクスチャの一部と3Dモデルを結び付けるデータ
    • UVは、画像テクスチャ上の位置を表す 2D座標 と見なせる
    • 各3D面は複数の点で定義され、それらの点が画像テクスチャ上に配置されることで、それぞれの点がUV座標を持つ
    • (0.5, 1.0) において、最初の値 0.5 は左右方向の中間地点、2番目の値 1.0 は縦方向の最上部を意味する
    • UV値は両方とも通常 0.0から1.0 の間で、主に (0, 0) と (1, 1) に囲まれた長方形内の座標空間を使う
    • ピクセル位置の代わりに0と1を使うことで、左右・上下にどれだけ移動したかを比率で表せ、100を掛ければパーセントのように理解できる
    • 実際の2つの次元名はUとVであり、X・Y・Zはすでに3D位置に使われているため、UVという名前を使う

グラフィックスにおける色とデータ型

  • RGBは3つの値で色を表す

    • コンピュータグラフィックスの色は通常 RGB、つまり赤・緑・青で表される
    • 単一の色の赤・緑・青の量は、通常0.0から1.0までの値
    • 赤は (1.0, 0.0, 0.0)、黒は (0.0, 0.0, 0.0)、白は (1.0, 1.0, 1.0) として表される
    • Webグラフィックスで使う 0xff0000 のような16進表記も、同じ情報を別の方法で表したもの

  • UVを色として見ると座標が見える

    • UV座標を可視化するときは、慣例的に最初の値であるXを赤、2番目の値であるYを緑にし、青は 0.0 のままにする
    • UV (0, 1) は色 (0.0, 1.0, 0.0) となり、緑に見える
    • UV (1, 0) は色 (1.0, 0.0, 0.0) となり、赤に見える
    • 長方形をUV位置に応じて塗り分けると、左上へ行くほど緑が強くなり、右下は赤になる
    • 左下は赤も緑も0なので黒になり、右上は赤と緑の両方が入るので黄色になる

  • float, vec2, vec3

    • float は1つの 小数の数値、つまり浮動小数点数
    • vec はベクトルを意味し、vec2 は2つの小数の組、vec3 は3つの小数のまとまり
    • RGB色は赤・緑・青の3つの値を持つため vec3 で表される
    • UVはXとYの2つの値を持つため vec2 に当たる

サンプルのグラフィックスコードの実行方式

  • このシリーズのコード例では、別個の3Dモデルは使わず、画面全体を占める 1枚の3D面 を使う
  • 画像テクスチャで色を加えるのではなく、コードが画像テクスチャ上の色を直接決める
  • 処理の流れは次のとおり
    • 3Dシーンのカメラが、どの3D面が見えているかを計算する
    • 各面に割り当てられたテクスチャ領域、つまり UVマッピング を使ってUV座標を計算する
    • 計算されたUV座標や3D位置などの情報をコードに渡す
    • コードがその位置の色を決定する
  • こうした処理は、1秒間に数百万回行われるものとして理解できる
  • グラフィックスコードは、画面上のある点から別の点まで連続した線を直接描く方式ではなく、各位置が選ばれたときにその位置の色を答える方式に近い
  • 書くコードは全体の色を作るために1回だけ実行されるのではなく、画面の小さな部分である 各ピクセルごとに実行 される
  • 他の画面領域の色を確認できないという制約があるため、グラフィックスプログラミングには、一般的なプログラミング経験があっても別の考え方が必要になる
  • part 1 では、こうした制約の中でも興味深いビジュアルを作る方法へと続いていく

関連記事

1件のコメント

 
GN⁺ 2025-01-25
Hacker News のコメント

  • David Tristram です。1990年代のコンピュータグラフィックス・パフォーマンスグループ Raster Masters の創設メンバーで、@hopkins が言っていたように、高性能な Silicon Graphics ワークステーションで Grateful Dead、Herbie Hancock、Graham Nash などのライブ音楽に合わせた合成映像を作っていました
    何度かの変遷を経て、現在は主に2D映像処理環境である Resolume Avenue と TouchDesigner で作業しています。こちらのリンク群には刺激を受けます

    • Raster Masters の他のメンバーが誰だったのか、Grateful Dead の公演で起きたとんでもない逸話が気になります
      最近は発表時にノートPCへプロジェクターをつなぐだけでも画面が出るか毎回サイコロを振るような気分でストレスなのですが、当時、バンドの上のスクリーンに ライブの高解像度 SGI 映像を映すには、どんなプロジェクター、補正、準備が必要だったのかも気になります
    • 見られる作品リンクがあるのか気になります
    • 1992年ごろ、いくつかの Dead の公演で作品を見た気がします

  • あまり低レベルに踏み込みすぎずに サイケデリック・グラフィックスを触ってみたいなら、hydra がよいです。JavaScript ベースのライブコーディング環境で、学習曲線も緩やかです

    • 音楽入力をサポートするものもあるのか気になります。Winamp 時代のビジュアライゼーションプラグインが好きだったのですが、最近はそういうアートが死んでしまったように見えます
    • dwitter.net にも JavaScript 製の サイケデリック・グラフィックスの例がたくさんあります

  • 原文の文書と UV 座標について言うと、昔は四角形メッシュの各頂点に対する UV テクスチャ座標を面白く変位させる方法をよく探っていました
    当時は頂点ごとの色を使っていて、今なら ShaderToy にあるようなフラグメント（ピクセル）シェーダーを使うでしょう。特に面白い手法は、流れ場（flow field）に沿ってテクスチャ座標を移流（advection）させることです。任意の2Dベクトル場を使い、各座標に反復的に変位を適用すればよいです。不正確な陽的手法だけでも結果は良好です
    座標が大きく歪むと画像は判別できなくなりますが、簡単な解法は、座標に元の位置へ戻ろうとする「復元」力を与えることです。すると鏡面ホイルの破片を伸ばすように、元の場所へ弾かれて戻ります
    今はこうした変位効果とフィードバックを併用しています。ごく小さな変位を反復適用すると、流体の流れにかなり似た動きになります

    • Jeremy Huxtable が作った PostScript の melt も同じ方式でした。彼はもともと NeWS の “Big Brother” Eyes を作った人で、それが XEyes に影響を与えました
      任意の四角形を選び、任意のオフセットでコピーする処理を繰り返すと、非常にデジタル的で四角く鋭い効果も、少しのランダム性（ディザリング）によって滑らかで有機的な効果に変わります。白黒でもうまく動作し、結局はただの PostScript でした
      https://www.donhopkins.com/home/archive/news-tape/fun/melt/m...
      Jeremy の元の “Big Brother” eye.ps もあります。丸い NeWS の目玉ウィンドウを見せる典型的なデモでした
      https://www.donhopkins.com/home/archive/news-tape/fun/eye/ey...
    • Kai Power Goo の、シンプルで直接操作する楽しさを思い出します
      LGR: Kai's Power Goo – Classic 90s Funware for PC!
      https://www.youtube.com/watch?v=xt06OSIQ0PE

  • HTML で画像に作用する シェーダーを簡単に使える点がいいですね。この分野での腕前は平凡ですが、人々がどこまで押し広げるのかを見るのは楽しいです
    簡単な深度マップの近似を与えるだけでも、結果はずっと面白くなります。数年前、似た手法で画像間を「面白い効果」とともに滑らかにクロスフェードするプロジェクトを行い、記事とデモがあります
    https://sheep.horse/2017/9/crossfading_photos_with_webgl_-_b...

  • 正直、この文章と一緒にある Rolling Hills の記事のほうがずっと興味深いです
    特に中ほどで、静止画像に以下のコードを適用する部分が印象的です
    uv.x = uv.x + sin(time + uv.x * 30.0) * 0.02;
    uv.y = uv.y + sin(time + uv.y * 30.0) * 0.02;
    複数のサイケデリック体験をした立場からすると、少なくとも低めの非英雄的な用量では、実際の視覚体験に最も近く見えます。波を少し遅くし、動きの範囲を少し小さくすると、さらに近くなりそうです
    公演向けの派手な視覚効果より、サイケデリック物質が誘発する視覚的幻覚を再現することにより関心があります。もちろん、どちらのアーティストも尊重しています
    現代的なツールでサイケデリック映像を見事に作るアーティストがいるのですが、アカウント名がどうしても思い出せません。見つけたら下に残します
    Rolling Hills の記事のこの部分と比べると、『Midsommar』のマッシュルームティーの場面、とくに樹皮の場面を思い出します。物が「呼吸」して流れる効果は本当に独特な視覚体験で、さまざまな方法で実装されるのを見るのは良いものです

    • そのアカウントではないかもしれませんが、この YouTube アカウントは 視覚体験をうまく再現しつつ、他の効果も扱っています
      自然を見るときの映像、幾何学的パターンが形成され始める様子、そして「呼吸する」効果が強力です。複数の物質を扱っており、表面がわずかに呼吸したり脈打ったりする程度から、DMT のような物質で生じる完全な幾何学的な「世界」まで幅広く見せています
      https://www.youtube.com/@josikinz

  • 90年代初頭、Todd Rundgren が Mac アプリ Flowfazerをリリースした。体験をシミュレートするものではなかったが、注意を別のところへ向けてフローを保つ助けにはなっていた
    自分の創作のためのガイドとして使う人もいた
    [1] https://grokware.com/
    [2] https://m.youtube.com/watch?v=3Z4X4FmIhIw
    当時はスクリーンセーバーとパレットアニメーションの時代だった

  • こういうものが好きで、ミュージシャン Tipper の公演で Fractaled Visions が映像を担当しているのを見る機会があるなら、ものすごい体験になるはず
    これまで見たサイケデリックなアーティファクトの視覚的表現の中で、最も正確だった。昨年、彼らが一緒にやる公演を見たが、人生最高のアート体験だった。Fractaled Visions の映像は、豊かさと複雑さがほとんど信じられないほどだった
    シェーダープログラミングなどをかなり知っていても、いくつかのエフェクトは「いったいどうやっているんだ」と思った。下のセット動画は体験を完全には伝えきれないが、雰囲気は伝わる。4K 60fps で見たものはまったく別次元だった
    https://youtu.be/qMcqw12-eSk?si=R5mCaIbR01w3Tbyv

  • ここには ShaderToy のリンクが必要: https://www.shadertoy.com

  • この分野の古い Flash の名作 Flashback.swf を思い出す。動画レンダリングはこちら: https://m.youtube.com/watch?v=KaSqrx93rS0

    • Flash 時代に、この動画のおかげで電子音楽グループ Shpongle を知った
      このアニメーションでは Divine Moments of Truth のリミックスが使われていて、おそらく “Russian Bootleg” バージョンだと思う。それ以前にも電子音楽は聴いていたが、このジャンルの電子音楽を初めて聴いたときは、本当に頭が吹き飛ぶような感覚だった

  • 今週、仕事で WebGL シェーダーを書き、物理カメラのエフェクトのように見えるよう細部を調整していた
    ところが、たまに何かを間違って作ると、この記事に出てくるものに似た結果になり、正直なところ標準的な画像エフェクトよりずっと面白い
    視覚的に使える場面は限られるかもしれないが、コンピュータグラフィックスが動作する仕組みについて自分たちが作ったモデルで遊ぶことは、各システムを学ぶのにとても良い方法だ。グラフィックスだけでなく、プログラミングの基礎数学、GPU の動作の仕方とメモリ・CPU とのつながり、目の仕組み、アニメーションや時間の扱い方まで学べる