三角ポリゴンの描き方 - How to draw a triangular polygon

三角ポリゴンの描き方
ソラノアナ
SE 兼個人ゲームディベロッパ
Twitter @soranoana_dev
Github Soranoana

目次
1. 自己紹介
2. はじめに
3. ポリゴンとは何か？
4. ポリゴンの原理
5. 三角ポリゴン実装
6. 複数枚ポリゴンの原理
7. 複数枚ポリゴンの実装
8. 複数枚ポリゴンを用いた立体の原理
9. 複数枚ポリゴンを用いた立体の実装
10. 応用して立方体を表示
11. これまでに作ったもの
12. おわりに
22021/1/10 三角ポリゴンの描き方

1. 自己紹介
• 名前ソラノアナ
• 職業 SE 兼個人ゲームディベロッパ
• 最終学歴大学院卒(工学)
• 趣味ゲーム開発(VR、PC、スマホ)、
ツール開発、シミュレータ開発、
研究、ゲーム(プレイ)、漫画、
アニメ etc…
• 苦手なものデザイン
(苦手なのでスライドがモノクロ……)
2021/1/10 三角ポリゴンの描き方 3

2. はじめに(1)
• 今回伝えたい点
• ポリゴンを構成する要素・仕組み
• 普段見かける3DCGや懐かしのゲームのすごさ

2. はじめに(2)
• 今回の内容はあくまで「そういう方法もある」程度の話
• ファイルフォーマットや3Dモデリングツールによっても違う
• ググれば他のやり方も出てくる
• 三角ポリゴンだけの話に限定
（四角ポリゴンなどは別の話）
• 統合開発環境Unity(ver 2020.1.10f1)及びUnity C#での
実装・検証・説明

3. ポリゴンとは何か？(1)
• ポリゴンと言われて思い浮かぶものは？今回はこっちの方の
ポリゴンの話
©Nintendo
©SQUARE ENIX

3. ポリゴンとは何か？(2)
• 「ポリゴン（Polygon）」とは、3点以上の頂点を結んでできた
多角形データのことを指し、曲面を構成する最小単位です。
（デジタルハリウッドスクールより抜粋 https://school.dhw.co.jp/course/3dcg/contents/w_polygon.html）
• ここで浮かぶ疑問
• 3つの頂点だけあればポリゴンになるのか？
• どういう形式で管理・表現しているのか？
• →今回はこれらの疑問の答えを説明していきます。

4. ポリゴンの原理(1)
• ポリゴンは以下のような3点の頂点座標(Vertex)で1セット
• 今回は例として3次元座標系
• 座標値はVector3（float）
（Unityだと）
b (0.5f, 1.0f, 0.0f)
a (0.0f, 0.0f, 0.0f) c (1.0f, 0.0,f 0.0f)

• プログラム的には以下(C#にて一部部分のみ記載)
• このプログラムには順番も大事となっている。
Vector3[] Vertex = new Vector3[3];
Vertex[0] = new Vector3(0.0f, 0.0f, 0.0f); //a
Vertex[1] = new Vector3(0.5f, 1.0f, 0.0f); //b
Vertex[2] = new Vector3(1.0f, 0.0f, 0.0f); //c
// ※Vector3型はUnityでは以下のように
// 定義されている構造体。
// Vector3.Vector3(float x, float y, float z);
b (0.5f, 1.0f, 0.0f)
a (0.0f, 0.0f, 0.0f) c (1.0f, 0.0,f 0.0f)

• 時計回り • 反時計回り
• ポリゴンの組合せを記載する面情報(Face)整数配列を用意する。
• 記載するのは頂点の配列番号。
• 順番は原則時計回りに定義する必要がある。
• 反時計回りだと見たい方向からポリゴンが表裏反転してしまう。
int[] Face = new int[3] { 0, 1, 2 }; //a, b, c int[] Face = new int[3] { 0, 2, 1 }; //a, c, b
b (0.5f, 1.0f, 0.0f)
a (0.0f, 0.0f, 0.0f) c (1.0f, 0.0,f 0.0f)
b (0.5f, 1.0f, 0.0f)
a (0.0f, 0.0f, 0.0f) c (1.0f, 0.0,f 0.0f)
実際には枠すら
見えない……

• 法線ベクトル（Normal）を
設定することで、ポリゴンの表裏とは
別にポリゴンの向きを設定できる。
• 法線とは頂点から表向き方向に
向くベクトル。
• 任意の方向からの光線に対し、
影や反射の計算に用いられる。
デジタル・フロンティア記事より画像を転載
https://dftalk.jp/?p=20271
112021/1/10 三角ポリゴンの描き方 ©デジタル・フロンティア
©デジタル・フロンティア

• プログラム的には以下
• または以下のAPIでまとめてUnity側で法線を計算させられる。
MeshFilter meshFilter;
meshFilter.mesh.normals = new Vector3[3] {
new Vector3(0, 0, -1),
new Vector3(0, 0, -1),
new Vector3(0, 0, -1)
};
// ※MeshFilter型はUnityでは
// ポリゴン周りの情報(Mesh)を扱う
// クラスとして定義されている。
MeshFilter meshFilter;
meshFilter.mesh.RecalculateNormals();

5. 三角ポリゴン実装(1)
• ここまでの内容をプログラムに起こす。
• 合わせて、キャプションや、Unity独自の記載なども記載して
いく。
• 次頁にて、説明した箇所は赤枠で囲ってある。

• 裏表を正しくポリゴンを表示
• 動画
• https://youtu.be/LdAE5tDEl48

• 静止画
エディタ画面実行（ビルド時）画面

• 表裏反対のポリゴンを表示
• 動画
• https://youtu.be/Ml4uwl3oDAk

• 静止画
エディタ画面（表）
実行（ビルド時）画面
エディタ画面（裏）

6. 複数枚ポリゴンの原理
• 基本はポリゴン一枚のときの拡張。
• 頂点座標は4か所。
• 面情報の配列長は6。
• 他は同じ
b (0.0f, 1.0f, 0.0f)
a (0.0f, 0.0f, 0.0f) c (1.0f, 0.0,f 0.0f)
d (1.0f, 1.0f, 0.0f)
Vertex[0] = new Vector3(0, 0, 0); //a
Vertex[1] = new Vector3(0, 1, 0); //b
Vertex[2] = new Vector3(1, 0, 0); //c
Vertex[3] = new Vector3(1, 1, 0); //d
int[] Face = new int[6] { 0, 1, 2, //a, b, c
1, 3, 2 }; //b, d, c

7. 複数枚ポリゴンの実装(1)

• ポリゴン2枚で正方形を表示
• 動画
• https://youtu.be/2laY4hT4XNQ

• 静止画

8. 複数枚ポリゴンを用いた立体の原理(1)
• 基本はポリゴン複数枚のときと同じ……ではない。
• 以下は結論から記載していく。
• 頂点座標は8か所。
Vertex[0] = new Vector3(0, 0, 0); //a
Vertex[1] = new Vector3(0, 1, 0); //b
Vertex[2] = new Vector3(1, 0, 0); //c =g
Vertex[3] = new Vector3(1, 1, 0); //d =h
Vertex[4] = new Vector3(1, 0, 1); //e
Vertex[5] = new Vector3(1, 1, 1); //f
Vertex[6] = new Vector3(1, 0, 0); //g =c
Vertex[7] = new Vector3(1, 1, 0); //h =d
a (0.0f, 0.0f, 0.0f) c, g (1.0f, 0.0,f 0.0f)
d, h (1.0f, 1.0f, 0.0f)
f (1.0f, 1.0f, 1.0f)
e (1.0f, 0.0f, 1.0f)
b (0.0f, 1.0f, 0.0f)

8. 複数枚ポリゴンを用いた立体の原理(2)
• 面情報の配列長は12。
• 面情報はそのままだが、
頂点情報が特殊。
• 頂点情報は、法線の違う面同士で
共有できない。
• そのため、同じ座標にある別の頂点を
設定する必要がある。
• 共有すると法線が
わかりやすく死ぬ。
int[] Face = new int[12] { 0, 1, 2, //a, b, c
1, 3, 2, //b, d, c
6, 7, 5, //g, h, f
6, 5, 4, };//g, f, e
a (0.0f, 0.0f, 0.0f) c, g (1.0f, 0.0,f 0.0f)
d, h (1.0f, 1.0f, 0.0f)
f (1.0f, 1.0f, 1.0f)
e (1.0f, 0.0f, 1.0f)
b (0.0f, 1.0f, 0.0f)

9. 複数枚ポリゴンを用いた立体の実装(1) –失敗ver-

9. 複数枚ポリゴンを用いた立体の実装(2)-失敗ver-
• 6頂点で失敗する様子
• 動画
• https://youtu.be/BZoYbsJWMMc

9. 複数枚ポリゴンを用いた立体の実装(3)-失敗ver-
• 静止画

9. 複数枚ポリゴンを用いた立体の実装(4) –成功ver-

9. 複数枚ポリゴンを用いた立体の実装(5)-成功ver-
• 8頂点で成功する様子
• 動画
• https://youtu.be/inQSEL2C_uI

9. 複数枚ポリゴンを用いた立体の実装(6)-成功ver-
• 静止画

9. 複数枚ポリゴンを用いた立体の実装(7)-比較-
• エディタ画面で比較
• 頂点を分けると、法線が正しく計算され、ぱきっとした見た目
になる。
失敗ver（頂点情報6つ）成功ver（頂点情報8つ）

10. 応用して立方体を表示(1)
• ここまでの内容を応用すると、どんな3Dモデルでもスクリプト
で記載可能になる。
• 線形、円、三角関数、放物線、
n次関数などを組み合わせれば、
より自然で滑らかな図形を
簡単に量産できる。
• ポリゴンの設計や、座標、法線を
把握できるので、エフェクトや
メモリ管理も容易。
• 次頁以降でこれまでの応用で立方体を
表示する。

• 応用していくと立方体でも表示できる
• 動画
• https://youtu.be/rLtMP4dinYw

• 静止画

11. これまでに作ったもの(1)
• 今回の内容を応用し、これまでに作ったものを紹介する。
• 先日作った三角関数をグラフっぽく表示するもの。
• 立方体の表示はそのままに、縦横高さなどの編集機能を加えた。
• プログラムは長いため割愛する。
詳しくは以下Githubへ……
• Soranoana - 3dAndVrUserInterfaces
https://github.com/Soranoana/3dAndVrUserInterfaces

• waveCube
• 動画
• https://youtu.be/3Zo8rehra-U

• 静止画

• 大学院の研究で開発した仮想キーボード。
• 円柱ではなくバームクーヘンのひとかけらを作って表示する
ような設計。
• 円、分割数、円の滑らかさなどのパラメータから
”半”動的にモデルを変更できる。
※このプログラムでは実行前にのみパラメータの変更・反映が可能。
• プログラムは長いため割愛する。
詳しくは以下Githubへ……
• Soranoana - RadiallyInterface
https://github.com/Soranoana/RadiallyInterface

• RadiallyInterface
• 動画
• https://youtu.be/5mAZyWpCqFg

• 静止画

12. おわりに(1)
• 今回はポリゴンの原理と、プログラムによる再現を行った。
• ポリゴンには3頂点と、その裏表を表す面情報、
法線情報が必要。
• 向き（法線）の異なる面同士では頂点を共有できないため、同
じ座標にある別の頂点を設定する必要がある。

12. おわりに(2)
所感
• 現代ではもうほぼ意識する必要のない技術ではある。
• 大体は開発環境やエンジン、3Dモデリングツールがやってくれる。
• 普段PCやスマホで見ているポリゴンがどう動いているのかを
知ることで、飲み会などの場で話題になれば幸いです。
• スパゲッティコードを整理するいい機会になった。

参考・出典・画像元
• Soranoana - 3dAndVrUserInterfaces (今回のプログラム)
https://github.com/Soranoana/3dAndVrUserInterfaces
• Soranoana - RadiallyInterface
https://github.com/Soranoana/RadiallyInterface
• ポケモンずかん
https://zukan.pokemon.co.jp/detail/137
• ゲーム2chまとめピコピコ通信
https://stkn-games.net/18959.html
• デジタルハリウッドスクールより抜粋
https://school.dhw.co.jp/course/3dcg/contents/w_polygon.html
• デジタル・フロンティア記事
https://dftalk.jp/?p=20271

ご清聴ありがとうございました。

補足資料(1)
• マテリアル（色、柄、テクスチャなどの設定）を忘れた場合
• 一応表示される。
• 色は蛍光ピンクで固定
• Unity使ってる人はこれを見ると
卒倒するらしい……

三角ポリゴンの描き方 - How to draw a triangular polygon

Recommended

Recommended

More Related Content

Featured

Featured (20)

三角ポリゴンの描き方 - How to draw a triangular polygon