レイマーチング立体Raymarched Forms
距離関数で定義した3D立体をレイマーチングで描き、球が溶け合ったり、箱がねじれたり、トーラスが回ったりする様子に陰影を付けるアニメーションです。
距離関数で表した3D立体に光と影を付けて描く。球が溶け合い、ねじれた箱やトーラスが回る（WebGL2）
このシーンで作るパラメータ、色、エフェクトを変えて、GIF・APNG・WebP・MP4・WebM で書き出せます。
どう計算しているか
- 立体は距離関数（空間の点が立体の表面からどれだけ離れているかを返す関数）で表します。球なら |p| − 半径です。箱とトーラスも、それぞれ専用の式で距離を返します。
- 画面の画素ごとにカメラから視線を飛ばし、その地点の距離ぶんだけ前に進む操作を最大96回繰り返します（レイマーチング）。距離がほぼ0になった点を表面とします。
- 表面の向き（法線）は、距離関数を少しずらした位置で差を取って求めます。光の方向との内積で明るさを、視線に対する角度で縁の光と反射のハイライトを計算します。「トゥーン（段階）」では明るさを3段階に丸めて塗ります。
- 「溶け合う球」は5個の球を sin/cos で動かし、なめらかな最小値（境目を丸くつなぐ min）で合成します。つなぎの幅は「溶け具合」で変わります。「ねじれた箱」は高さに比例した角度で断面を回し、「球 ↔ 箱」は2つの距離関数を 0.5 − 0.5·cos(2πt) の割合で混ぜます。
- 立体全体を縦軸まわりに「1ループの回転数」ぶん回します。「ねじれ」は、箱のねじれ量とトーラスの表面のうねりの強さを変えます。
d(p) = smin(|p − cᵢ(t)| − rᵢ), pos += dir·d(pos)·0.9ループがつながる理由
時間 t は、2π·t に整数を掛けた sin/cos と回転角の中だけに出てきます。球の軌道は1倍か2倍の周波数、トーラスのうねりは2倍の周波数です。そのため t = 1 のときの形と向きは t = 0 と同じになります。
調整できるパラメータ
形
| 立体 | 溶け合う球・ねじれた箱・トーラス・球 ↔ 箱 |
|---|---|
| 陰影 | なめらか・トゥーン（段階） |
| 大きさ | 0.3 〜 1.6（初期値 1） |
| 溶け具合 | 0.01 〜 1（初期値 0.35） |
動き
| 1ループの回転数 | 0 〜 3（初期値 1） |
|---|---|
| ねじれ | 0 〜 3（初期値 1.2） |
同じ分類のシーン（立体・擬似3D）
- 擬似3D・階段Iso Columns斜め上から見た四角い柱が格子状に並び、中心から外へ伝わる波に合わせて高さが上下するアニメーションです。
- 擬似3D・六角形Cube Turn六角形に見える立方体を敷き詰め、それぞれを120°ずつ回して面の色を入れ替え、凹凸が反転して見える錯視です。
- 階段Endless Stairs平行に並んだ階段をボールが一段ずつ跳ねて降り、カメラも同じ速さで追いかけるので、終わりなく続いて見える階段です。
- 転がる多角形Rolling Polygons正多角形が地面に接した角を支点に一辺ぶんずつ倒れて転がり、行ごとに時間差をつけて進んでいくアニメーションです。
- 多面体ワイヤーWire Solids正多面体の頂点と辺を3次元で回転させて画面に投影し、ワイヤーフレームとして描くアニメーションです。
- トーラスTorusドーナツ形（トーラス）の表面に並べた点や線を3次元で回転させて投影し、表面の模様を流すアニメーションです。
- 積み木の塔Block Towerアイソメトリックで描いた積み木の塔に上から1つずつ積み木が落ちて跳ね、塔全体が1段沈んで元の高さに戻るアニメーションです。
- ルービックキューブ風Cube Puzzle3×3の立体パズルの面をランダムに90°ずつ回して崩し、同じ手順を逆にたどって揃った状態に戻るアニメーションです。
- 球面の点Dot Sphere球面に均等に並べた点を回転させ、緯度に沿った波で表面を脈打たせながら色の縞を流すアニメーションです。