Unity 動的にメッシュを生成してゴニョゴニョする : 超基本編

f:id:esakun:20150730215258g:plain:w450

仕事で実践することはほぼ無いですが、Unityで動的にメッシュを生成してみます。「実際に手を動かしてやってみよう！」というかなり初心者向けの記事になります。

1.三角形メッシュを1つ表示させてみる

メッシュの最小単位は三角形です。三角形を描画してみることが3Dプログラムの基礎と言っても過言ではありません。

僕は基礎学習を重要視しているため、WebGL、DirectXそれぞれライブラリを使わずに*1三角形描画をやりました。

ライブラリを使わずWebGLで三角形描画をしてみた記事
生のWebGLで三角形を描画するショートコード - 渋谷ほととぎす通信
C#で書くDirectXで三角形描画をしてみた記事
C#でDirectX11 SlimDXで三角形を描画する - 渋谷ほととぎす通信

三角形メッシュの描画処理を自力で書いてみると、Unityが当たり前のようにやってくれている3Dモデルの表示の仕組みが分かってきます。これを発展させていくことでゲームに限りませんが、プロダクトを開発する上での表現方法の広がり、パフォーマンスチューニングの知識を得ることができるのではないかと考えています。

ということで、Unityで1個の三角形メッシュを動的に表示させてみます。

何はともあれ三角形なのです。

そもそもメッシュとは

メッシュというのは一般的にポリゴンメッシュの事を指します。
ポリゴンメッシュとは3Dオブジェクトを表す「頂点・辺・面」の集合体の事です。

一般的に表示できるメッシュは3点もしくは4点を結んだ三角形メッシュ、四角形メッシュです。Unityは三角形メッシュと四角形メッシュ両方に対応しています。

描画する三角形の仕様

f:id:esakun:20151129152423p:plain:w200

こんな感じの1辺2メートルの三角形メッシュを表示してみます。
※Unityの単位はメートルです

三角形を描画する方法はいくつかあります。
今回はシンプルな1つの三角形を描画するために1つのGameObjectを使う方法を取ります。

動的に三角形を描画する準備としてMonoBehaviourを継承したDynamicCreateMeshクラスというものを作成しました。Start関数に三角形描画に関する処理を全て書いているため、Unity再生時このコンポーネントをGameObjectにAddComponentすると三角形が描画されるます。

三角形を動的に描画するDynamicCreateMesh.cs

処理の大きな流れとしてはこんな感じです。

Meshインスタンスを作成
Meshに頂点座標配列を渡す
Meshに頂点の順番を渡す
MeshFilterにMeshを渡す

1つ1つ処理の内容を見ていきましょう。

1-1. Meshクラスでメッシュを生成

動的にメッシュを作成するためにMeshクラスをnewして作ります。

var mesh = new Mesh ();

作成したメッシュには最低限、頂点座標と頂点の順の情報が必要なのでセットしていきます。

頂点座標配列

三角形を作るので、頂点は3つ必要なので、頂点は配列で渡します。
Meshクラスのverticesプロパティに頂点座標配列をセットします。

mesh.vertices = new Vector3[] {
    new Vector3 (0, 1f),
    new Vector3 (1f, -1f),
    new Vector3 (-1f, -1f),
};

またMeshに渡す頂点座標配列はGameObjectを原点にしたローカル座標であることに注意してください。

頂点の順番配列

メッシュを正しく描画させるためには頂点の描画順を指定する必要があります。それがMeshクラスのtrianglesプロパティです。

trianglesに先の頂点座標配列のインデックス配列を渡します。

mesh.triangles = new int[] {
    0, 1, 2  
};

頂点を結ぶ順番配列(trianglesプロパティ)はメッシュを正しく表示させるためにとても重要な情報で、いわゆるインデックスバッファです。

Unityは時計回りに頂点を結んだ面が前面(法線の向き)になります。シェーダのカリング設定がデフォルトであれば前面にメッシュが表示されます。

もしメッシュが表示されない、表示がおかしいなどあれば、この頂点を結ぶ順番、またはシェーダを見直すと良いです。

19行目辺り

// 法線ベクトルの再計算処理
mesh.RecalculateNormals ();

またRecalculateNormalsメソッドで法線方向の再計算を行います。これを呼ばないと法線方向が(0, 0, 1)固定になってしまうので、特に理由がない場合は必ず呼ぶことになるでしょう。

1-2. メッシュを表示するために必要なもの

Unityでメッシュを表示させるためにはMeshRendererクラス、またはSkinnedMeshRendererクラスが必要です。今回のメッシュはスキニングされていないため、MeshRendererクラスを使用することになります。 ※スキニングメッシュとはボーンを使って頂点を動的に動かすことが出来るメッシュのことです。例えばUnity-chanはスキニングされたメッシュで動いています。

MeshRendererに加えMeshFilterクラスも必要です。

Mesh Filter はアセットからメッシュを取得し、画面上でのレンダリングするために、メッシュレンダラーに渡します。
メッシュフィルター - Unity マニュアルより

マニュアルに記載されているように、MeshFilterクラスはMeshデータをMeshRendererに渡すために必要です。メッシュデータを直接レンダラーに渡さない仕様にしているのは、MeshFilterを通すことでMeshRenderer、SkinnedMeshRendererをフィルタリングして事故を減らしてくれているのではないかと勝手に思っています。

var filter = GetComponent<MeshFilter> ();
filter.sharedMesh = mesh;

このようにMeshFilterに先ほど作成したMeshインスタンスを渡します。

[RequireComponent (typeof(MeshRenderer))]
[RequireComponent (typeof(MeshFilter))]

念のための処理ですが、MeshFilterコンポーネントとMeshRendererコンポーネントは、GameObjectでメッシュを表示するためには必ず必要なので、RequeireComponentアトリビュートを使ってDynamicCreateMeshコンポーネントをAddComponentした時に自動でアタッチするようにしています。

f:id:esakun:20151129153339p:plain:w200
この段階ではピンク色になってしまいますが、三角形が無事に表示されました。

2.メッシュを着色する

三角形ポリゴンは表示されましたが、ピンク色になってしまいました。ポリゴンの色を設定する必要があります。

ここでシェーダが登場します。

シェーダとは「3Dオブジェクトをディスプレイに映し出すためのプログラム」です。このシェーダを使ってメッシュを着色します。

UnityではシェーダをMaterialというオブジェクトに内包します。MaterialをMeshRendererに渡してポリゴンの描画を行います。

ちなみに、UnityはMaterialの設定が無い場合、親切にこのようなアラート (ピンク色で描画) 表示をしてくれます。

余談になりますがWebGLやDirectXでは、シェーダを設定していないメッシュは何も表示されません。 何が原因なのかを探らねばならないためデバッグにとても時間を取られますが、Unityでは、先のようにピンク色でアラート表示してくれるため、原因がすぐわかります。このことからUnityは神だと言えます。

Materialの設定

Materialを使って、この三角形にシェーダを正しくアサインする作業をしていきます。

f:id:esakun:20190102025845p:plain
Project > Createボタン > MateiralsからSampleMaterialという名前でMaterialオブジェクトを作成します。

f:id:esakun:20151129162853p:plain

SampleMaterialを選択状態にして、ShaderをUnityのビルトインシェーダUnlit/Colorに設定し、Main Colorに適当な色を設定します。

ちなみにUnlit/Colorシェーダとは、ライト反映、陰影処理などしない、指定したカラーでピクセルを塗るだけのシンプルなシェーダです。

DynamicCreateMeshクラスのソースを一部変更し、Materialを反映できるようにします。

DynamicCreateMesh

f:id:esakun:20151129162716p:plain
SampleMaterialをDynamicCreateMeshコンポーネントにアタッチできるようになります。

f:id:esakun:20151129163335p:plain:w200
この状態で実行すると、このように黄色い三角形メッシュが表示されるようになりました。

頂点カラーを使った描画もあわせてどうぞ

3.画像を貼ってみる

頂点カラーで三角形を表示していましたが、テクスチャマッピングに移ります。

f:id:esakun:20151129164400p:plain:w200

この画像(テクスチャ)をメッシュに貼り付けてみようと思います。

f:id:esakun:20151129164546p:plain:w200

先ほど作ったSampleMaterialを選択し、シェーダをUnlit/Textureに変更してテクスチャを設定します。

実行！！

f:id:esakun:20151129164930p:plain:w200

すると予想に反して青い三角形が表示されます。

UV座標の設定

なぜテクスチャが表示されず青い三角形が表示されたのかというと、各頂点に対してUV座標が設定されていなかったからです。

テクスチャを貼る場合は各頂点に対しUV座標を設定する必要があるため、コードに変更を加えます。

DynamicCreateMesh.cs

修正箇所はmeshのuvプロパティにVector2型の配列を渡しているところです。

mesh.uv = new Vector2[] {
    new Vector2 (0.5f, 1f),
    new Vector2 (1f, 0),
    new Vector2 (0, 0),
};

これが何を指すかを説明していきます。

f:id:esakun:20151129172803p:plain

UV座標とは貼り付けるテクスチャの座標のことで、原点(0.0, 0.0)は画像の左下、右上が(1.0, 1.0)となり横がU座標、縦がV座標で、0.0〜1.0の範囲です。

先のuvプロパティに代入しているVector2型の配列は画像の三角形が丁度収まるようにUV座標を設定しています。

f:id:esakun:20151129174004p:plain

では、次のようなUV座標を代入してみるとどうなるでしょうか。

float texSize = 256f;
mesh.uv = new Vector2[] {
    new Vector2 (86f / texSize, 100f / texSize),
    new Vector2 (116f / texSize, 42f / texSize),
    new Vector2 (60f / texSize, 42f / texSize),
};