ワイヤーフレームで3D空間に形を置く

前回までで、Desmos上に3D的な視点と投影を導入する準備が整いました。今回は、実際に3D空間上にオブジェクトを置くことに挑戦します。

まずは、ワイヤーフレーム（骨組み）だけの立体を設置し、まるで空間内に構造物が存在しているかのような視覚表現を目指します。

この記事は、第106話？？？ 【グラフ計算機／Desmos】 をテキスト化したものです。

---

🎯 目次

1. ワイヤーフレームとは何か
2. 立方体を3D空間に置く
3. その他の例
4. おわりに

---

1. ワイヤーフレームとは何か

ワイヤーフレームとは、立体の辺（エッジ）だけを線で描いた構造です。ポリゴンの「面」が貼られていないので、構造がよく見える特徴があります。

CGの開発初期では、軽量かつ構造がわかりやすいために広く使われていました。

Screenshot of gameplay; the screen at the top shows the player's view of a space station, while the bottom half of the screen displayed details about the ship's position and direction.
Spasim(March 1974) - wiki

2. 立方体を3D空間に置く

点と点を結ぶ

3D空間上にワイヤーフレームを表示するために、Desmos既存機能である点と点を繋ぐ点のリストを活用します。

$V_{iew}\left(p\right)V\_\{iew\}\backslash left(p\backslash right)$ は3D空間上の点 $pp$ をカメラ視点から見た点が（Desmosグラフ計算機の2Dキャンバス上に）描画されます。2点 $p_1,p_{2}p\_1,\; p\_2$ を上記の画像のように点で繋げたいのであれば、

$$V_{iew}\left([p_1,p_2]\right)V\_\{iew\}\backslash left(\backslash left[p\_1,\; p\_2\backslash right]\backslash right)$$

のように、リストで囲めば良いです。これをたくさんつなげれば3Dオブジェクトができます。

立方体を描画

まずは、最もシンプルなワイヤーフレームオブジェクトとして、立方体を描画します。

       4 ----- 3
     / |     / |
    1 ----- 2  |
    |  |    |  |      z
    |  8 ---|- 7   x _|
    | /     | /      /
    5 ----- 6       y

立方体は次の8頂点と、

合計12本の辺からなります。各辺は2つの頂点を結んだ線分として定義されます。

Desmosでの描画例

今回のように少ない辺で構成されているモノであれば、3D座標を順にリストとして並べ、線で結ぶのが効率的です。

Desmosのテーブルを用い、点のリストを作成します。複数の線を描画する場合、線と線を途切れさせたい場所に $(0\mathrm{/}0,0\mathrm{/}0)(0/0,\; 0/0)$ のような不定形の座標を挿入するのが効果的なテクニックです。これにより、Desmosは描画を中断し、次の有効な座標から新しい線として描画を再開します。

例えば、以下のように頂点を繋いでいくことで、立方体の全12本の辺を描画できます。

$b_{oxX}b\_\{oxX\}$	$b_{oxY}b\_\{oxY\}$	$b_{oxZ}b\_\{oxZ\}$	備考
$11$	$11$	$11$
$-1-1$	$11$	$11$
$-1-1$	$-1-1$	$11$
$11$	$-1-1$	$11$
$11$	$11$	$11$	上面
$0\mathrm{/}00/0$	$0\mathrm{/}00/0$	$0\mathrm{/}00/0$	途切れ
$11$	$11$	$-1-1$
$-1-1$	$11$	$-1-1$
$-1-1$	$-1-1$	$-1-1$
$11$	$-1-1$	$-1-1$
$11$	$11$	$-1-1$	下面
$0\mathrm{/}00/0$	$0\mathrm{/}00/0$	$0\mathrm{/}00/0$	途切れ
$11$	$11$	$11$
$11$	$11$	$-1-1$	v1-v5
$0\mathrm{/}00/0$	$0\mathrm{/}00/0$	$0\mathrm{/}00/0$	途切れ
$-1-1$	$11$	$11$
$-1-1$	$11$	$-1-1$	v2-v6
$0\mathrm{/}00/0$	$0\mathrm{/}00/0$	$0\mathrm{/}00/0$	途切れ
$-1-1$	$-1-1$	$11$
$-1-1$	$-1-1$	$-1-1$	v3-v7
$0\mathrm{/}00/0$	$0\mathrm{/}00/0$	$0\mathrm{/}00/0$	途切れ
$11$	$-1-1$	$11$
$11$	$-1-1$	$-1-1$	v4-v8

---

3. その他の例

立方体の例では、点と点を結んでワイヤーフレームを表現していたため、点が視界の裏側 に行ってしまうと、点が消えてしまい辺が表示されなくなってしまいます。（上記のデモでカメラを立方体の内部へ移動させてみてください）

これを回避するために、辺を媒介変数で用いる方法があります。

媒介変数で線を引く

媒介変数表示で引いた線は、点と点を結ぶ方法とは違います。イメージとしては、連続した点が細かく描画されて線が出来上がるようで、端が描画外に行っても、途中の線は描かれます。

上記のデモでは、 $(t,t,t)(0\le t\le 1)\backslash left(t,t,t\backslash right)\; \backslash \; \backslash left(0\backslash le\; t\backslash le1\backslash right)$ が描画されています。同じ線を引くために、

$$V_{iew}\left((t,t,t)\right)V\_\{iew\}\backslash left(\backslash left(t,t,t\backslash right)\backslash right)$$

とすれば、

3D空間上に描くことができます。これをたくさん集めれば3Dオブジェクトができます。

球体ワイヤーフレーム

緯線、経線それぞれ媒介変数表示で曲線を描き球体を表現できます。

$$V_{iew}\left(((\cos t)(\sin v),(\cos t)(\cos v),\sin t)\right)\mathrm{for}v=\frac{\left[\mathrm{0...9}\right]}{10}2\pi (0\le t\le 2\pi )V_{iew}\left(((\cos u)(\sin t),(\cos u)(\cos t),\sin u)\right)\mathrm{for}u=\frac{[-\mathrm{4...4}]}{10}\pi (-\pi \le t\le \pi )V\_\{iew\}\backslash left(\backslash left(\backslash left(\backslash cos\; t\backslash right)\backslash left(\backslash sin\; v\backslash right),\backslash left(\backslash cos\; t\backslash right)\backslash left(\backslash cos\; v\backslash right),\backslash sin\; t\backslash right)\backslash right)\backslash operatorname\{for\}v=\backslash frac\{\backslash left[0...9\backslash right]\}\{10\}2\backslash pi\; \backslash \; \backslash left(0\; \backslash le\; t\; \backslash le\; 2\backslash pi\backslash right)\backslash \backslash \; V\_\{iew\}\backslash left(\backslash left(\backslash left(\backslash cos\; u\backslash right)\backslash left(\backslash sin\; t\backslash right),\backslash left(\backslash cos\; u\backslash right)\backslash left(\backslash cos\; t\backslash right),\backslash sin\; u\backslash right)\backslash right)\backslash operatorname\{for\}u=\backslash frac\{\backslash left[-4...4\backslash right]\}\{10\}\backslash pi\; \backslash \; \backslash left(-\backslash pi\; \backslash le\; t\; \backslash le\; \backslash pi\backslash right)\backslash \backslash$$

ワイヤーフレーム？

まるで1層1層積むかのような3D表現のやり方もあります。

円錐

$$c_{one}=1-t{V}_{iew}\left((c_{one}\cos 20\pi t+2,c_{one}\sin 20\pi t,t)\right)c\_\{one\}=1-t\backslash \backslash \; V\_\{iew\}\backslash left(\backslash left(c\_\{one\}\backslash cos20\backslash pi\; t+2,c\_\{one\}\backslash sin20\backslash pi\; t,t\backslash right)\backslash right)$$

しずく

$$d_{rop}=(1-t)\sqrt{t}{V}_{iew}\left((d_{rop}\cos 20\pi t,d_{rop}\sin 20\pi t,t)\right)d\_\{rop\}=\backslash left(1-t\backslash right)\backslash sqrt\{t\}\backslash \backslash \; V\_\{iew\}\backslash left(\backslash left(d\_\{rop\}\backslash cos20\backslash pi\; t,d\_\{rop\}\backslash sin20\backslash pi\; t,t\backslash right)\backslash right)$$

双円錐

$$b_{icone}=\frac{1}{2}-\mid t-\frac{1}{2}\mid V_{iew}\left((b_{icone}\cos 20\pi t-2,b_{icone}\sin 20\pi t,t)\right)b\_\{icone\}=\backslash frac\{1\}\{2\}-\backslash left|t-\backslash frac\{1\}\{2\}\backslash right|\; \backslash \backslash \; V\_\{iew\}\backslash left(\backslash left(b\_\{icone\}\backslash cos20\backslash pi\; t-2,b\_\{icone\}\backslash sin20\backslash pi\; t,t\backslash right)\backslash right)$$

---

おわりに

今回は、Desmos上にワイヤーフレームの立方体オブジェクトを設置することで、実際の3D空間に構造物を描く第一歩を踏み出しました。線のつながり方や奥行きの感じ方を通して、空間の中に物体が存在する感覚を得ることができたはずです。

次回は、このワイヤーフレームに「面」を貼っていきます。単に面を描くだけでなく、裏側の面を非表示にする陰面処理にも踏み込み、よりリアルな視覚表現を目指します。