こんにちわ、Unityエンジニアのオオバです。

前回からの続きです。

Unityで作成したメッシュをテーマにした
初心者向けの3Dプログラミング 解説記事。

前々回 スクリプトでメッシュの作成

前回 シェーダーを使った単色メッシュ描画 をしました。

今回は3Dプログラミングの定番処理
画像(テクスチャ) を貼り付けてみます。

UV座標の概念を理解をしよう

【超基本編】UV座標を理解して三角形に画像を貼る_0

本記事の肝は UV座標 です。
これを理解しないと、
画像がなぜ貼られるのかわかりません。

UV座標のポイントをまとめます。

UV座標がどういうロジックなのか、
記事を通して理解していきましょう。

以前の記事で作ったスクリプト生成の三角形メッシュに
次の画像を貼りつけていきます。

【超基本編】UV座標を理解して三角形に画像を貼る_1

画像ファイルはUnityプロジェクトに
追加しておきましょう。

この記事の内容

Unlit/Textureシェーダーを使用

テクスチャを貼るために
Unlit/Texture シェーダーを使用します。

Unlit/Textureとは ライトを反映しない
指定した 画像を張る ことができるシェーダーです。

Unlit とはライトを反映しないシェーダーです。
つまりライトがなくても表示されます。

新たにMaterialを追加して
Unlit/Textureを使いましょう。

【超基本編】UV座標を理解して三角形に画像を貼る_2

三角形にテクスチャを貼り付けてみましょう。

前回使用したC#のソースコードをそのまま使います。

👉 C#ソースコードはコチラをクリック

【超基本編】UV座標を理解して三角形に画像を貼る_3

今回作成したMaterial(TextureMaterial)を
DynamicCreateMeshのマテリアルにセット。

Unityを実行してみます。

【超基本編】UV座標を理解して三角形に画像を貼る_4

すると青単色の三角形が表示されます。

ここでUV座標の登場です。

UV座標がテクスチャの座標を決める

なぜ青い三角形が表示されたのか、
それは各頂点に対して、
UV座標が設定されていなかったから です。

UV座標とはテクスチャの各ピクセルが
メッシュのどの位置に描画するの指定
です。

【図解】 UV座標を理解しよう

まずは各頂点にUV座標を指定してみましょう。

【超基本編】UV座標を理解して三角形に画像を貼る_5

三角形の各頂点に対して、
↑のようにUV座標を指定します。

ソースコードで表すと以下。

💻ソースコード : 三角形メッシュの各頂点にUV座標をセット
mesh.uv = new Vector2[] {  
    new Vector2(0.5f, 1f),  
    new Vector2(1f, 0f),  
    new Vector2(0f, 0f)  
};  

Meshuvプロパティに Vector2型の配列 をセットします。

UV座標は 横軸がU縦軸がV と2つの値で表せます。
Unityでは Vector2型 を使用します。

【超基本編】UV座標を理解して三角形に画像を貼る_6

この状態でUnityを実行すると、
この通りテクスチャが意図した形で貼られました。

このUV座標の設定が画像に対して
どういう影響を与えたのかを解説します。

【超基本編】UV座標を理解して三角形に画像を貼る_7

図解するとこんな感じです。

つまり 頂点に設定したUV座標が画像を切り出す位置の指定 ということです。

Vector2型の配列でMeshに渡す

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

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

画像の一部を表示させてみる

UV座標を理解するために、
値を調整して画像の一部を表示させてみましょう。

【超基本編】UV座標を理解して三角形に画像を貼る_8

↑このようにピンク色で
塗られた部分の画像をを貼ってみます。

UV座標の計算方法

繰り返しになりますが、UV座標は 0.0 ~ 1.0 で表現します。
つまり 画像のサイズ と、 頂点座標の位置 の2つがあれば
割合からUV座標を割り出せる のです。

オオバ
オオバ
わかりやすく図にしますね

【超基本編】UV座標を理解して三角形に画像を貼る_9

割合からUV座標が算出できるために、
以下のようになります。

【超基本編】UV座標を理解して三角形に画像を貼る_10

幅と高さで各座標を除算すると、
UV座標が計算できます。

ソースコードにするとこのような感じです。

float texSize = 256f;  
mesh.uv = new Vector2[] {  
 new Vector2 (31f / texSize, 234f / texSize),  
 new Vector2 (241f / texSize, 66f / texSize),  
 new Vector2 (64f / texSize, 27f / texSize),  
};  

※C#ソースコード全文はコチラ
UV座標を書き換えてUnityを実行してみましょう。

【超基本編】UV座標を理解して三角形に画像を貼る_11

このように三角形は描画されます。
UV座標の設定次第でゆがんだ画像表現も可能なのです。

オオバ
オオバ
UV座標は面白いですね〜

まとめ : UV座標を理解して三角形に画像(テクスチャ)を貼る

【超基本編】UV座標を理解して三角形に画像を貼る_12

記事の内容を簡単にまとめます。

こんな感じです。

自分で作った三角形に無事画像を貼り付けることができました。
UV座標を理解していないと難しかったかも知れません。
本記事を読み返して理解を深めてもらえればと思います。

もしここが分かりづらい、こういう解説をしてほしいなどありましたら、
Twitterで連絡ください。

自分で三角形を作り、色を塗り、画像を貼る。
この一連の処理を自分で書くと理解が深まりますね。

引き続き3Dプログラミングの基礎を学習していきましょう。

復習したい方は↓↓↓コチラから↓↓

このブログの内容が 分からない
分かりづらい 、などありましたら、
お気軽にTwitterでDMをください。

最後まで読んでいただきありがとうございました!
すばらしい3Dプログラミングライフをお過ごしください。

期間限定 最大95%オフセール
効率UPメガバンドル開催中!最大95%オフ!!!
期間 : 11月1日午後15時59分まで
オススメ記事
検証環境