面を貼る：Desmosで立体を完成させる

前回は、Desmosグラフ計算機上にワイヤーフレーム（線のみ）の立方体を描きました。今回は、線だけでなく面（polygon）を貼って、立体らしい見た目に仕上げることを目指します。

Desmosには polygon(p_1, p_2, p_3) のように3点を指定して三角形の面を描く機能があります。この機能を使って、立方体の各面を貼り付けていきましょう。

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

🎯 目次

1. Desmosにおける面の描画：polygonの使い方
2. なぜ三角形で分割する必要があるのか
3. 面の描画：三角形による面の貼り付け
4. 陰面処理の基本：裏側の面を非表示にする工夫
5. おわりに

1. Desmosにおける面の描画：polygonの使い方

Desmosでは、3点を指定することで三角形の面を描くことができます。

例えば、以下のような3点があるとします：

$$A=(x_1,y_1),B=(x_2,y_2),C=(x_3,y_3)A\; =\; (x\_1,\; y\_1),\backslash quad\; B\; =\; (x\_2,\; y\_2),\backslash quad\; C\; =\; (x\_3,\; y\_3)$$

3点を囲む図形を描画するには

$$\mathrm{polygon}\left([A,B,C]\right)\backslash operatorname\{polygon\}\backslash left(\backslash left[A,\backslash \; B,\backslash \; C\backslash right]\backslash right)$$

と $\mathrm{polygon}\backslash operatorname\{polygon\}$関数を用います。

では、3D空間上の3点を使い面を描画させるには、

$$A=(x_1,y_1,z_1),B=(x_2,y_2,y_2),C=(x_3,y_3,z_3)\mathrm{polygon}\left(V_{iew}\left([A,B,C]\right)\right)A\; =\; (x\_1,\; y\_1,\; z\_1),\backslash quad\; B\; =\; (x\_2,\; y\_2,\; y\_2),\backslash quad\; C\; =\; (x\_3,\; y\_3,\; z\_3)\backslash \backslash \; \backslash operatorname\{polygon\}\backslash left(V\_\{iew\}\backslash left(\backslash left[A,\; B,\; C\backslash right]\backslash right)\backslash right)$$

とすれば良いです。

2. なぜ四角形の面を三角形に分割する必要があるのか？

さて、面の張り方も理解したので、ついに面付きの立方体の描画を考えます。

立方体の面はご存じの通り四角形です。ですが、四角形を分割し三角形にしたものを使いたいと思います。

理由はいくつかあります。

• 表裏の計算が楽
• 描画や処理が高速で安定
• .objファイルでは、すべての面を三角形に分割して記述することが一般的
  • 任意の3点は常に同一表面上に存在するが、4点以上は平面にならない場合がある

特に一番最後の理由が主です。

• 三脚はなぜ脚が3つなのか分かりますか？
• 4つ脚の机や椅子がたまにグラグラするのはなぜでしょうか？

そういった理由で、3Dエンジンを扱う多くのソフトは三角形で扱うものが多いです。

3. 面の描画：三角形による面の貼り付け

ここで、立方体の面を三角形ポリゴンとして描画する方法を具体的に見てみましょう。

まず、立方体の**8頂点 $VV$**を以下のように定義します：

$$V=(x_1,y_1,z_1)V\; =\; \backslash left(x\_1,\; y\_1,\; z\_1\backslash right)$$

頂点番号	$x_{1}x\_1$	$y_{1}y\_1$	$z_{1}z\_1$
1	1	1	1
2	-1	1	1
3	-1	-1	1
4	1	-1	1
5	1	1	-1
6	-1	1	-1
7	-1	-1	-1
8	1	-1	-1

次に、各三角形の面を構成する頂点インデックスのリストを定義します

面番号	$f_{1}f\_1$	$f_{2}f\_2$	$f_{3}f\_3$
1	1	2	3
2	1	3	4
3	5	8	7
4	5	7	6
5	1	4	8
6	1	8	5
7	2	6	7
8	2	7	3
9	1	5	6
10	1	6	2
11	4	3	7
12	4	7	8

例えば、面番号1は頂点 $VV$ の $1=(1,1,1),2=(-1,1,1),3=(-1,-1,1)1=\; \backslash left(1,\; 1,\; 1\backslash right),\; 2=\; \backslash left(-1,\; 1,\; 1\backslash right),\; 3=\; \backslash left(-1,\; -1,\; 1\backslash right)$番目を選んで面を作るという意味です。
本当にこの頂点番号、面番号を使って立方体が作れるのか試してみましょう。

Desmos 3Dでは $\mathrm{triangle}\backslash operatorname\{triangle\}$関数という専用の関数があるので、

$$\mathrm{triangle}(V\left[f_1\right],V\left[f_2\right],V\left[f_3\right])\backslash operatorname\{triangle\}\backslash left(V\backslash left[f\_\{1\}\backslash right],V\backslash left[f\_\{2\}\backslash right],V\backslash left[f\_\{3\}\backslash right]\backslash right)$$

とすれば、立方体が試せます。

4. 陰面処理の基本：裏側の面を非表示にする工夫

さて、Desmos 3Dで立方体が確認できたので、独自の3D空間でも確認します。

何かがおかしいですよね？Desmos 3Dと見比べてみてください。

単に $\mathrm{polygon}\backslash operatorname\{polygon\}$関数を使ってすべての面を描いてしまうと、裏側の面まで表示されてしまいます。それでは本当の3Dらしく見えません。
そこで必要なのが陰面処理です。

方法1：Backface Culling（裏面除去）

三角形の3点 $\mathbf{A},\mathbf{B},\mathbf{C}\backslash mathbf\{A\},\; \backslash mathbf\{B\},\; \backslash mathbf\{C\}$ から面の法線ベクトルを求めます。

1. 辺ベクトルを計算：

$$\mathbf{u}=\mathbf{B}-\mathbf{A},\mathbf{v}=\mathbf{C}-\mathbf{A}\backslash mathbf\{u\}\; =\; \backslash mathbf\{B\}\; -\; \backslash mathbf\{A\},\backslash quad\; \backslash mathbf\{v\}\; =\; \backslash mathbf\{C\}\; -\; \backslash mathbf\{A\}$$

2. 法線ベクトルを外積で計算：

$$\mathbf{n}=\mathbf{u}\times \mathbf{v}\backslash mathbf\{n\}\; =\; \backslash mathbf\{u\}\; \backslash times\; \backslash mathbf\{v\}$$

イメージ図は以下です。2番目の計算で三角形の表・裏が決められます。

3. カメラ方向ベクトル $\mathbf{d}\backslash mathbf\{d\}$ と法線の内積を取る：

$$d=P_{os}-\mathbf{A}\cos \theta =\frac{\mathbf{n}\cdot \mathbf{d}}{\mathrm{\mid }\mathbf{n}\mathrm{\mid }\mathrm{\mid }\mathbf{d}\mathrm{\mid }}d=P\_\{os\}-\backslash mathbf\{A\}\backslash \backslash \; \backslash cos\; \backslash theta\; =\; \backslash frac\{\backslash mathbf\{n\}\; \backslash cdot\; \backslash mathbf\{d\}\}\{|\backslash mathbf\{n\}||\backslash mathbf\{d\}|\}$$

この内積が正か負かで、面がカメラに向いているか、裏向きかがわかります。負であれば、その面はカメラに背を向けているので、描画はしません。
矢印が反対方向を向いていると負になるのがわかります。

3行目に三角形の面が正面を向いているのかのフィルターを作っています。

$$f_{ace}\{c>0\}f\_\{ace\}\backslash left\backslash \{c>0\backslash right\backslash \}$$

方法2：Zバッファ法（Z-buffering）

ピクセルごとにz値（奥行き） を記録して、最も手前の面だけを描画する方法。しかし、Desmosではそのようなピクセルごとの描画ができないので、オブジェクト（三角形）ごとにカメラとの距離を計算します。オブジェクトを奥→手前の順に描くことで、優先して手前のオブジェクトが表示されます。

今回は、三角形の重心を面の中心として、カメラとの距離を計算します。重心は、

$$g=\frac{V\left[f_1\right]+V\left[f_2\right]+V\left[f_3\right]}{3}g\; =\; \backslash frac\{V\backslash left[f\_\{1\}\backslash right]+V\backslash left[f\_\{2\}\backslash right]+V\backslash left[f\_\{3\}\backslash right]\}\{3\}$$

カメラとの距離は、

$$d=\mid P_{os}-g\mid d=\backslash left|P\_\{os\}-g\backslash right|$$

距離 $dd$ を用い、$\mathrm{sort}\backslash operatorname\{sort\}$関数と組み合わせて、三角形の描画順番を変えます。（$\left[\mathrm{12...1}\right]\backslash left[12...1\backslash right]$ で逆順にする必要はあります。）

$$\mathrm{sort}(f_{ace},d)\left[\mathrm{12...1}\right]\backslash operatorname\{sort\}\backslash left(f\_\{ace\},d\backslash right)\backslash left[12...1\backslash right]$$

第一引数（今回は $\mathrm{polygon}\backslash operatorname\{polygon\}$関数の三角形）をitem, 第二引数をkeyとして、keyが小さい順になるようにitemの順番を変えるルールです。

おわりに

今回は、ワイヤーフレームだけだった立体に面を貼り、視覚的に3Dを完成させる方法を学びました。

• 三角形に分割して面を作る
• 裏側の面を消す工夫（陰面処理）を加える

これらにより、より立体らしく、そして現実に近い3Dの見せ方が可能になります。

3D空間で物体を見るためには、「カメラ」の役割が欠かせません。カメラの位置（x, y, z）と向き（ピッチ、ヨー、ロール）を操作することで、空間を見渡すことができるようになります。

しかし、操作する変数は6つもあるのです。次回は、これらのカメラ制御をシンプルに扱うための工夫や視点制御の方法について解説します。