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

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

スクリプトからメッシュを作って描画するまでの手順は
前回かなり丁寧に解説しているのでオススメです。

今回は作った三角形メッシュに色を塗っていきます。
色を塗るとはどういうことか? を学びながら
最終的には三角形を単色で塗っていきます。

オオバ
オオバ
シェーダーが登場します。

色を塗るとはピクセルの色を指定するということ

【超基本編】Unityで動的に作った三角形に色を塗る方法_0

結論、主役はシェーダーです。

何かが表示されてるということは、
何かしらのシェーダーが実装されている
ということなのです。

【超基礎】ひとことで「シェーダー」とは何なのか?まとめ

3Dオブジェクトをディスプレイに映し出されているということは、
何かしらのシェーダーが実装されているということ。

今回、三角形に色を塗りますが、
それは三角形の範囲のピクセル色を指定する
ということと同じです。

そしてシェーダーが各ピクセルの色を指定するのです。

  1. カスタムシェーダーのセットアップ
  2. Materialにシェーダーをセット
  3. MeshRendererにMaterialを渡す
  4. 単色シェーダーの作成して描画

この4ステップで解説します。

この記事の内容

1.カスタムシェーダーのセットアップ

前回三角形メッシュを
スクリプトから作りました。
その三角形に色を塗っていきます。

【超基本編】Unityで動的に作った三角形に色を塗る方法_1

前回表示された三角形はピンク色でした。

このピンク色は Unity内部エラーが起きた証拠 😰
つまりシェーダーがセットされていなかったため、
エラーが起きていたということです。

今回はメッシュに対して正しく着色していきましょう。

シェーダーファイルの作成

【超基本編】Unityで動的に作った三角形に色を塗る方法_2

Create > Shader > Unlit Shaderを選んで、
シェーダーファイルを作ります。

【超基本編】Unityで動的に作った三角形に色を塗る方法_3

ColorShader と名付けました。
このシェーダーで三角形に色を塗っていきます。

2.Materialにシェーダーをセット

シェーダーをメッシュに適用するためには
Materialが必要です。

【超基本編】Unityで動的に作った三角形に色を塗る方法_4

Unityの仕様でシェーダーをメッシュに渡す事はできません。

【超基本編】Unityで動的に作った三角形に色を塗る方法_5

このようにシェーダーをMaterialにセットして
メッシュに適用します。

Materialの作成

【超基本編】Unityで動的に作った三角形に色を塗る方法_6

Create > MaterialからMaterialを作成。

【超基本編】Unityで動的に作った三角形に色を塗る方法_7

ColorMaterialと名付けました。

Materialにシェーダーをセット

InspectorからMaterialにシェーダーをセットします。

【超基本編】Unityで動的に作った三角形に色を塗る方法_8

↑こんな感じで。

3.MeshRendererにMaterialを渡す

作成したMaterialをメッシュに反映させたいですが、
直接MeshにMaterialをセットする事はできません。

【超基本編】Unityで動的に作った三角形に色を塗る方法_9

MaterialはMeshRendererを通して
メッシュにシェーダーを適用
します。

[SerializeField] Material _colorMaterial;  

↑Materialをスクリプトから取得できるように
_colorMaterialという変数を定義しました。

【超基本編】Unityで動的に作った三角形に色を塗る方法_10

インスペクタにMaterialをセットしておきましょう。

💻ソースコード : MeshRendererにMaterialをセットする
var meshRenderer = GetComponent<MeshRenderer>();  
meshRenderer.material = _colorMaterial;  

MeshRenderermaterialプロパティに
Materialをセットします。

するとメッシュにシェーダーが適用されるのです。
C#のソースコードは全文はコチラからどうぞ。

4.単色シェーダーの作成して描画

ここまでのステップで
シェーダーを適用する準備は整いました。

さっそく単色シェーダーを作っていきます。
さきほど作成した ColorShader を編集していきますが、
とりあえず何も考えずに以下のコードを入力して下さい。

※詳しい解説はあとで
💻ソースコード : 単色シェーダー ColorShader.shader
Shader "Unlit/ColorShader"  
{
    Properties  
    {
        _CustomColor ("色", Color) = (1, 1, 0, 1)  
    }

    SubShader  
    {
        Pass  
        {
            CGPROGRAM  
            #pragma vertex vert_img  
            #pragma fragment frag  
            #include "UnityCG.cginc"  

            fixed4 _CustomColor;  

            fixed4 frag (v2f_img i) : SV_Target  
            {
                return _CustomColor;  
            }
            ENDCG  
        }
    }
}

この状態でUnityを実行してみましょう。

【超基本編】Unityで動的に作った三角形に色を塗る方法_11

ピンク色ではなく、黄色の三角形が描画されました。
正常にシェーダーが適用された証拠です。

【超基本編】Unityで動的に作った三角形に色を塗る方法_12

このようにMaterialのカラーを調整すれば
三角形の色がリアルタイムに変えられます。

シェーダーの解説

ここから単色シェーダーの解説に入ります。

オオバ
オオバ
できるだけ図を入れてわかりやすく解説しています

フラグメントシェーダーでピクセルの色を決める

【超基本編】Unityで動的に作った三角形に色を塗る方法_13

最も重要なのはフラグメントシェーダーの処理です。

【超基本編】Unityで動的に作った三角形に色を塗る方法_14

三角形のすべてのピクセルに_CustomColorという色を
塗っているということになります。

シェーダーの外からカラーを指定する方法

【超基本編】Unityで動的に作った三角形に色を塗る方法_15

Propertiesブロックに定義した変数は
シェーダーの外側からセットできるようになります。

※publicプロパティのようなイメージです

【超基本編】Unityで動的に作った三角形に色を塗る方法_16

Propertiesに定義した_CustomColor
外側からセット可能なカラープロパティになりました。

これにより三角形の色をリアルタイムで
変更できるようになったというわけです。

【超基本編】Unityで動的に作った三角形に色を塗る方法_17

まとめ : Unityで動的に作った三角形に色を塗る方法

【超基本編】Unityで動的に作った三角形に色を塗る方法_18

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

こんな感じです。

パット見の成果物(単色の三角形)はショボく見えますが、
3Dプログラミングの基礎は着々と身についています。

オオバ
オオバ
自信をもってください!

次回はこの三角形に画像を貼り付けます。
ここから面白くなりますよ!

ぜひ読んでみてください。
↓↓↓次回記事↓↓↓


フォローすると UIデザイナー力の上がるTwitter やってます!
今日から使えるテクニックを発信中。
ぜひフォローしてみてください!
👉フォローはこちら!

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

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