合わせ鏡のレイトレーシング
— 鏡の部屋に浮かぶ、4次元の光の立方体

すべての壁が鏡の暗い部屋に、LED の光の粒でできた4次元の超立方体を浮かべ、光が鏡で何十回も反射する様子をブラウザ上でリアルタイムにレイトレーシングしています。見ている自分(カメラを持ったドローン)も鏡の中に映り込みます。鏡の配置を変えると、像の並び方が「無限の格子」「一列」「万華鏡」「8つだけ」と変わり、鏡の球や凹面鏡では、像が歪んだり逆さまに浮かんだりします。

レイトレーシング 合わせ鏡 インフィニティ・ミラー 鏡映群 4次元・正多胞体 WebGPU
読み込み中…
WebGPU に対応したブラウザ(Chrome / Edge の最新版など)で動きます。キー操作は、デモを一度クリックしてから行ってください。 全画面で開く ↗
01

操作方法

How to Use
移動と視点(見ている自分=ドローン)
ドラッグあたりを見回す
WASD前後左右に移動する(Shift で速く)
R / F下がる/上がる
ホイール向いている方向へ進む・戻る
上のバー
Bounces光を鏡で何回まで反射させて追いかけるか(0〜64)
Room / Sphere / Concave / Mirage / Tunnel / Kaleido / Corner鏡の配置。切り替えると、明るい状態から暗くなって光が灯り直す
5-cell / Tesseract / 16-cell / 24-cell浮かべる4次元の正多胞体
✦暗闇から点灯し直す
☀明るくする(Room は客電、ほかは昼に戻す)/暗くする。鏡の枠と配置が見える
⏸4次元回転を止める/再開
⚙ 設定パネル
Reflect / Green鏡1回あたりの反射率/反射を重ねるほど緑がかる度合い
WaterRoom の床の水面のさざ波
Color / Glow / LEDs / Halo光の色(Wave・Warm・Ice)、明るさ、辺の上の光の粒の細かさ、にじみ
ViewNormal=通常/Compare=左右でラスタライズとレイトレーシングを比べる(境界はドラッグで動かせる)/Depth=鏡で何回反射した光かを色で表示
Speed4次元回転の速さ
02

合わせ鏡はなぜ無限に見えるのか

Infinite Reflections

鏡に映る像は、鏡の向こう側に同じ部屋がもう一つあるように見えます。2枚の鏡を向かい合わせると、鏡の向こうの部屋にも鏡があるので、その向こうにまた部屋があり……と、像は奥へ奥へと続いていきます。光が鏡の間を往復するたびに、新しい像が一つずつ生まれるのです。

ただし、実際の鏡は光を100%は反射しません。家庭用の鏡の反射率はおよそ9割で、残りはガラスや銀の膜に吸収されます。また、鏡のガラスはわずかに緑がかっています。そのため、奥の像ほど暗く、緑色を帯びていきます。このデモでもその性質を再現していて、⚙ の Reflect(反射率)と Green(緑がかり)で変えられます。反射率を 0.99 まで上げると、像はほとんど暗くならずに続きます。

見ている自分も、もちろん鏡に映ります。このデモでは、視点をカメラ付きのドローンとして表していて、ドローンは直接は見えず、鏡の中にだけ映ります。鏡に近づいて向き合うと、無数のドローン=無数の自分が奥へ並んでいるのが見えます。

03

レイトレーシングと、ふだんのリアルタイム描画

Ray Tracing vs Rasterization

ゲームなどのリアルタイム描画(ラスタライズ)は、立体を形づくる三角形を一つずつ画面に塗っていく方式です。とても速い一方で、「その点から見て何が映っているか」を調べるのが苦手です。そのため鏡は、鏡の向こう側からもう一度シーンを描いた画像を貼り付ける(平面反射)か、画面にすでに描かれている情報だけを使って反射らしく見せる(スクリーンスペース反射)、といった工夫で表現します。反射の中の反射まで描くには描画を何重にも繰り返す必要があるので、ふつうは1回程度で打ち切り、その先は前もって撮っておいた周囲の画像(環境マップ)で代用します。

レイトレーシングは逆に、画面の画素ごとに、目に届く光の道すじを逆向きにたどる方式です。光線が鏡に当たったら、反射の向きに曲げて追いかけ続けるだけなので、何十回の反射も同じ仕組みで自然に扱えます。合わせ鏡は、レイトレーシングが最も得意とし、ラスタライズが最も苦手とする場面の一つです。

⚙ の View を Compare にすると、画面の左が「平面反射1回+環境マップ」の描き方、右がレイトレーシングになります。左では、1回目の反射の先が暗い環境マップで止まってしまい、無限の奥行きが生まれないことがわかります。Depth にすると、各画素の光が鏡で何回反射してきたかを色で表示します。部屋の中ではほとんどの画素が上限の回数まで反射しているのに対し、万華鏡では上下に抜ける光はすぐに空へ出ていくことが見えます。

レイトレーシングとラスタライズの違いそのものは、Explorables の「ラスタライズ vs レイトレーシング」で、もっと基本から体験できます。

04

鏡の配置と像の数

Reflection Groups

鏡の枚数と角度を変えると、像の並び方ががらりと変わります。

Room(6面の部屋)向かい合う3組の鏡で、像が3次元の格子状に、上下左右前後のすべての方向へ無限に並ぶ
Tunnel(平行な2枚)像が一直線に無限に並ぶ。いわゆる合わせ鏡
Kaleido(60°の3枚)正三角形の筒。像が平面を正三角形で埋め尽くすように並ぶ(万華鏡)
Corner(直角の3枚)箱の角のような3枚の鏡。像はちょうど8つ(本物を含む)で、無限には増えない

像がきれいに規則正しく並ぶのは、鏡どうしの角度が 180° を整数で割った値(90° = 180°/2、60° = 180°/3)のときです。このとき、鏡による折り返し(鏡映)を何度組み合わせても、像はぴったり重なり合います。こうした鏡映の組み合わせ全体を、数学では鏡映群(コクセター群)と呼びます。Corner の8つの像は、3枚の鏡それぞれで折り返すかどうかの 2×2×2 通りに対応し、Kaleido の並び方は、平面の対称性を分類した17種類の壁紙群のうちの一つ(p3m1)にあたります。

各配置に切り替えた直後は、まず明るい状態で鏡の枠と配置が見え、その後、日が沈むように(Room では照明が落ちるように)暗くなってから光が灯ります。配置がわからなくなったら、☀ でいつでも明るくできます。

04+

曲面の鏡 — レイトレーシングでしか描けない反射

Curved Mirrors

平らな鏡だけの合わせ鏡は、実は「鏡の向こうに同じ部屋が規則正しく並んでいる」と考えれば、光線を1回ずつ追いかけなくても描くことができます。ところが鏡が曲がっていると、場所ごとに鏡の向きが違うので、鏡の向こうの世界も歪み、そうした置き換えはできません。こうした場面こそ、光線を1本ずつたどるレイトレーシングの出番です。

Sphere(鏡の球)鏡の部屋の中心、光の超立方体の内側に、半径 0.8m の鏡の球を置く。まわりの光と無限に続く部屋が球面に縮んで映り込み、さらに球と壁の鏡の間で反射が往復する
Concave(凹面鏡)曲率半径 4m(焦点距離 2m)の球面の凹面鏡。超立方体は焦点と曲率中心の間にあるので、上下も左右も逆さまで約2倍に拡大された像が、鏡の手前の空中に浮かぶ(実像)。昼は空と地面が逆さまに映る
Mirage(ミラスコープ)同じ放物面鏡2枚を、口を合わせて重ねた光学玩具。それぞれの焦点が相手の頂点に来るように置くと、底に置いた小さな超立方体の光は上の鏡で平行な光になり、下の鏡で上の穴に集まって、穴の上の空中に像が浮かぶ。斜め上から見ると、つかめそうなのにつかめない像が見える

ふだんのリアルタイム描画では、鏡の球は「球の中心から撮っておいた周囲の画像」を貼り付けて表現するのが一般的です。これでは、球に映るものの位置のずれも、反射の中の反射も再現できません。凹面鏡やミラスコープがつくる空中の像も、光線が鏡で折れ曲がって1点に集まる様子を、実際に光線ごとに計算して初めて現れます。球面の鏡は、光を1点に集める性質がわずかに不完全です(球面収差)。放物面の鏡は、軸に平行な光を焦点の1点に正確に集めるので、ミラスコープのような装置には放物面が使われます。

曲面の鏡で反射した光線の束は、凸面なら広がり、凹面なら狭まります。このデモでは、光の粒のちらつきを抑えるために使っている「1画素が受け持つ範囲(レイコーン)」も、鏡の曲がり具合に合わせて反射のたびに広げたり狭めたりしています。こうしないと、鏡の球に映る光の粒がざらついて見えます。

05

4次元の正多胞体と鏡

Regular Polytopes

浮かんでいる光の立方体は、4次元の立方体=超立方体(テッセラクト)を3次元に投影した影です。3次元の立方体を紙に描くと、正方形が2つ重なった絵になるのと同じように、4次元の立方体を3次元に写すと、立方体の中に立方体が入った形になります。4次元の中で回転させると、内側と外側の立方体が入れ替わるように動いて見えます。

3次元の正多面体が5種類であるのに対して、4次元の正多胞体は6種類あります。このデモでは、そのうち4種類を選べます。

5-cell {3,3,3}
頂点 5・辺 10
Tesseract {4,3,3}
頂点 16・辺 32
16-cell {3,3,4}
頂点 8・辺 24
24-cell {3,4,3}
頂点 24・辺 96

{4,3,3} のような記号はシュレーフリ記号と呼ばれ、「正方形(4)が1つの頂点に3つ集まって立方体をつくり、その立方体が1つの辺に3つ集まる」という作り方を表しています。残りの2種類(120-cell と 600-cell)は辺が720〜1200本もあり、そのすべてを数十回の反射ごとに計算するとリアルタイムでは重すぎるため、今回は入れていません。

実は、正多胞体と鏡には深いつながりがあります。正多胞体の対称性は、4次元空間に置いた4枚の「鏡」(3次元の超平面)による鏡映群で表されます。その4枚の鏡がつくる小さな部屋の適切な位置(部屋の角)に1点を置き、鏡で折り返していくと、正多胞体の頂点がすべて現れます(ワイトホフの構成)。合わせ鏡が像を無限に増やすのと同じ仕組みで、正多胞体そのものが「鏡でできている」のです。

光が灯る順序にも、形のつながりが表れています。最初に1つの頂点が灯り、そこから辺に沿って導火線のように光が伝わり、何本の辺をたどって着くかの順に頂点が灯っていきます。超立方体なら4段で、反対側の頂点まで届きます。

06

しくみ(技術メモ)

Technical Notes
描画
全画素レイトレーシング(WebGPU)
反射回数
最大 64 回
鏡
有限の正方形の平面+アルミの枠
光の粒
解析的なにじみ+レイコーン
ドローン
距離関数(SDF)+球追跡
解像度
GPU の処理時間で自動調整

光の粒は、光線が当たったかどうかで描くと、遠くの反射像では1画素より小さくなって激しくちらつきます。そこで、光線が光の粒のそばを通った距離から、なめらかなにじみを数式で計算しています。さらに、1画素が受け持つ範囲(レイコーン)の広がりを考えます。平面鏡では、この範囲は反射しても形を変えず、たどった道のりに比例して広がるだけなので、遠い反射像ほど粒を太く・暗く描くことで、ちらつきを抑えています。

ドローンは、形を「各点から表面までの距離」の式(距離関数)で表し、光線を少しずつ進めて表面を探す球追跡で描いています。機体は移動の向きに傾きますが、カメラはジンバルで水平に保たれているので、画面は揺れません。屋外の配置では、太陽の高さに合わせて空の色を補間し、鏡が地面に落とす影も計算しています。

07

参考文献

References
  1. T. Whitted: An Improved Illumination Model for Shaded Display, Communications of the ACM, 23(6), 1980.
  2. J. Amanatides: Ray Tracing with Cones, Computer Graphics (Proc. SIGGRAPH '84), 18(3), 1984.
  3. H. S. M. Coxeter: Regular Polytopes, 3rd ed., Dover, 1973.
→

関連するページ

Related