feature image

2020年9月21日 | ブログ記事

4次元を覗く

お詫び

この前にUntitledの記事が投稿されてしまいました。お騒がせしました。これが出す予定だった記事です。

どゆこと

僕は3DCGに興味があって、いろいろなことをやっています。例えば以下のようにですね。

レイマーチ#とは
この記事はtraP夏のブログリレー2019 [/tag/summer-blog-relay/] 9月5日の記事です。 やあみんな!レイマーチって知ってる? 知らん人もいるでしょうね。 レイマーチはレイトレーシングの一種です。 違い ラスタライズ法 いわゆる”ポリゴン”を二次元平面に投影する。一般的。3Dモデリングやる人はわかるはず。 この方式では曲面(例えば球)を正確に表現するためにはポリゴンを無限に細分化する必要があり、不可能。また、頂点が決定していないボリュームデータ(CT画像など、空間内の”場”の値で表現されたデータ)の可視化にはひと工夫 [1]必要 レイマーチング法 視点に入っ…

どうでもいいけどこの記事1年前なんすね。はやい。

そんで、この前WebGLのライブラリみたいなの(Three.js的な)を作ったんですけど、普通に3DCGするのに飽きてしまったんですね。

それで、前からやろうと思っていた4次元のレンダリングをしようと思い立ったわけです。

4次元ってどんなの

4次元 - Wikipedia

要は3次元(x, y, z)に次元を一つ足したもの(x, y, z, w)です。今回はWikipedia内にある4次元立方体の回転を見るところまでやります。

そもそも3次元のレンダリングはどうやっているか

今回利用するのは割と簡単に複雑な図形が描画できるレイマーチングという方式を利用します。その方式について、詳しくは僕の過去記事(さっき上げた奴)を参照してください。

普通我々は様々なものに当たって反射した光が目に入ることで世界を知覚するわけですが、目に入ってくる光を何か物体に当たるまで逆算しようというのがレイトレーシングやレイマーチングの考え方なわけです。逆算するときに考える仮想的な光の軌跡を「レイ」と呼び、光の軌跡を逆算することを「レイを飛ばす」と表現します。今回は簡単のため、反射や屈折は考えないことにします。

さて、レイの飛ばす方向はどうすればよいのでしょうか。これは簡単な話で、レイの出発点を原点とし、視線をz+方向に向けたとすると、例えば出力画像(サイズは(W, H)とする)の座標(x, y)の色を求めたかったら、z先の(x - 0.5W, y - 0.5H, z)を通るような方向にレイを飛ばせばよいのです。これは風景画を描く人が手で四角形の枠を作ってその中から覗くようなものです。レイの出発点や視線方向を変えようと思ったらそれを平行移動や回転移動すればよいだけです。私たちが実際に世界を見るときはもっと幅広い方向から光が入ってきますが、CGの世界ではこれでよいのです。

4次元のレンダリング

3次元と大きく考え方が変わるわけではありません。3次元との違いは次元が増えたことだけです。ちなみに出力も2次元から3次元になります。

先ほどと同じように考えます。レイの出発点を原点とし、視線をw+方向に向けたとすると3次元画像(?)(W, H, D)上の点(x, y, z)の色を求めるためにw先の(x - 0.5W, y - 0.5H, z - 0.5D, w)の点を通るような方向にレイを飛ばします。

また、4次元立方体の距離関数も用意しなくてはいけません(距離関数に関しては過去記事参照)。3次元立方体(各辺の長さ1)の距離関数は

float box(vec3 pos) {
    vec3 q = abs(pos) - 1.0;
    return length(max(q,0.0)) + min(max(q.x,max(q.y,q.z)),0.0);
}

なので、4次元立方体の距離関数は

float box4d(vec4 pos) {
    vec4 q = abs(pos) - 1.0;
    return length(max(q,0.0)) + min(max(q.x,max(q.y,max(q.z, q.w))),0.0);
}

となります。これで、4次元立方体は描画できますね。

と言いたいところですが、まだ問題はあります。このままでは3次元に投影されているのです。私たちが普段見てる画面は2次元ですから、次元を落としてやらねばなりません。

そこでどうするか、答えは「もう一度レイトレーシング」です。いま4次元が3次元に投影されているので、普段3次元を2次元に落とし込んでいるようにやればよいのです。ただし、距離関数は無いのでレイマーチングができません。そのためレイを進める距離を一定にして、レイを進めるたびに4次元方向にレイマーチング、何にもぶつからなかったらレイトレーシング続行、というようにやります。ここの負荷が結構でかいです。

回転

4次元での回転はどのように扱えばよいのでしょうか。それを考えるために2次元、3次元での回転を考えてみます。

ある点を原点中心に回転させる場合、2次元の回転では、原点を中心として回転させる、というのは直観的にわかると思います。同様に3次元の回転ではx, y, z軸を軸として回転させます。この時、ある点の座標は二つだけが変換され、その他は変化しない、という性質があります。例えば(0, 0, 1)の点をθ回転させると、(0, sinθ, cosθ)となり、x成分は変化しません。このことを考えると4次元での回転は平面を固定する、という考えになります。4つの次元から固定する成分2つの選び方は6通りあるので、回転平面も6つあることになります。これが4次元での回転です。

今回は冒頭でも述べた回転を再現するため、y,z成分を固定するように回転させました。

ライティング

CGではライティングも重要です。物体が光に当たっているように見せる処理です。今回は簡単にlambert法でライティングします。lambert法では物体の法線を求める必要があります。

vec3 calcNorm(vec3 pos)
{
    vec2 d = vec2(0.0001, 0.0);
    vec3 grad = vec3(
        map(pos+d.xyy)-map(pos-d.xyy),
        map(pos+d.yxy)-map(pos-d.yxy),
        map(pos+d.yyx)-map(pos-d.yyx)
    );
    return normalize(grad);
}

これが3次元での法線の求め方です。距離関数のx, y, z方向の微分を取ったものですね。まぁ当然4次元では

vec4 calcNorm4d(vec4 pos)
{
    vec2 d = vec2(0.0001, 0.0);
    vec4 grad = vec4(
        map4(pos+d.xyyy)-map4(pos-d.xyyy),
        map4(pos+d.yxyy)-map4(pos-d.yxyy),
        map4(pos+d.yyxy)-map4(pos-d.yyxy),
        map4(pos+d.yyyx)-map4(pos-d.yyyx)
    );
    return normalize(grad);
}

となりますね。lambertは簡単で、ライト方向と法線方向の内積を取るだけです。

float lighting4d(vec4 pos)
{
    return saturate(dot(calcNorm4d(pos), -LIGHT_VECTOR));
}

できた

上で述べたことをいろいろやると4次元立方体の回転を見ることができます。デモは以下。(重めなのでお気を付けください。参考程度にいうとRadeon Graphics(CPU内臓)で35fpsぐらいでした)

Shadertoy

マウスでいろいろな角度から見れると思います。

(縞模様が見えるかもしれませんがそれはレンダリングの過程で生じるものです。どうしても消せなかった...)

まとめ

4次元での投影楽しいですね。暇があったらラスタライズ法でも4次元できるようにしたさはあります。あと最近は非ユークリッド幾何の投影も気になっているのでやるかもしれません。

明日はNABE君の線画交換会の話らしいです。お楽しみに。

Fogrex icon
この記事を書いた人
Fogrex

シェーダーとVRやってます レイマーチ楽しい(゚∀。)

この記事をシェア

このエントリーをはてなブックマークに追加
共有

関連する記事

2017年11月17日
そばやのワク☆ワク流体シミュレーション~MPS編~
sobaya007 icon sobaya007
2020年9月17日
鯨飼いになろう講習会をやった話
mazrean icon mazrean
2019年8月27日
曲が...曲が出来ていくぞ!!!!
kashiwade icon kashiwade
2019年8月26日
ゲームを作ろう!
Kanagu icon Kanagu
2019年4月21日
CPCTF visualizer2019
uynet icon uynet
2018年9月15日
論文の紹介【Universal Transformers】
hukuda222 icon hukuda222
記事一覧 タグ一覧 Google アナリティクスについて