🌈

そろそろShaderをやるパート53 四角錐を作りながらポリゴン、メッシュを理解する

2022/02/19に公開

そろそろShaderをやります

そろそろShaderをやります。そろそろShaderをやりたいからです。
パート100までダラダラ頑張ります。10年かかってもいいのでやります。
100記事分くらい学べば私レベルの初心者でもまあまあ理解できるかなと思っています。

という感じでやってます。

※初心者がメモレベルで記録するので
 技術記事としてはお力になれないかもしれません。

下準備

下記参考
そろそろShaderをやるパート1 Unite 2017の動画を見る(基礎知識~フラグメントシェーダーで色を変える)

デモ

ラスタライズの記事で少し触れた、Shaderの前の基礎理解にはなりますが、
ポリゴン、メッシュについて言語化してなかったのでメモします。

以下はランライムで四角錐のメッシュを生成するサンプルです。

C#スクリプト

using System.Collections.Generic;
using UnityEngine;

/// <summary>
/// メッシュをランタイムで生成する
/// </summary>
[RequireComponent(typeof(MeshFilter))]
[RequireComponent(typeof(MeshRenderer))]
public class MeshGenerate : MonoBehaviour
{
    private void Start()
    {
        FourSidedPyramid();
    }
    
    /// <summary>
    /// 四角錐を生成
    /// </summary>
    private void FourSidedPyramid()
    {
        //四角錐の頂点を作成する
        //シンプルだからまだいいけど、本来は図解しないとキツイ
        var vertices = new List<Vector3>() {
            // 0,1,2,3
            new Vector3(0f, 0f, 0f),
            new Vector3(1f, 0f, 0f),
            new Vector3(1f, 0f, 1f),
            new Vector3(0f, 0f, 1f),
            // 4,5,6
            new Vector3(0f, 0f, 0f),
            new Vector3(0.5f, 1f, 0.5f),
            new Vector3(1f, 0f, 0f),
            // 7,8,9
            new Vector3(1f, 0f, 0f),
            new Vector3(0.5f, 1f, 0.5f),
            new Vector3(1f, 0f, 1f),
            // 10,11,12
            new Vector3(1f, 0f, 1f),
            new Vector3(0.5f, 1f, 0.5f),
            new Vector3(0f, 0f, 1f),
            // 13,14,15
            new Vector3(0f, 0f, 1f),
            new Vector3(0.5f, 1f, 0.5f),
            new Vector3(0f, 0f, 0f),
        };

        //頂点のインデックスを整える
        //この順番を参照して面ができあがる
        var triangles = new List<int>
        {
            //底面
            3, 0, 1, 3, 1, 2,
            //側面
            4, 5, 6,
            7, 8, 9,
            10, 11, 12,
            13, 14, 15,
        };

        //メッシュを作成
        var mesh = new Mesh();
        //初期化
        mesh.Clear();
        //メッシュに頂点を登録
        mesh.SetVertices(vertices);
        //メッシュにインデックスリストを登録する 
	//第二引数はサブメッシュ(複数マテリアル割り当てる場合に使われるメッシュ)指定用
        mesh.SetTriangles(triangles, 0);
        //法線の再計算
        mesh.RecalculateNormals();
        // 作成したメッシュを適応
        var meshFilter = GetComponent<MeshFilter>();
        meshFilter.mesh = mesh;
    }
}

ポリゴン

ポリゴンとは複数の頂点と頂点を線で繋げた図形のことを指します。
Unityでは基本的に三角形で1つのポリゴンを成します。
また、時計回り側を表面とします。

メッシュ

複数のポリゴンをまとまったものをメッシュと言います。
メッシュには頂点情報の他に、頂点インデックス(何番目の頂点か)や法線情報(ポリゴンの表面に対して垂直な直線)、頂点カラーなどが含まれます。

試しにメッシュ経由で頂点に色情報を付与してみます。

//メッシュにインデックスリストを登録する 第二引数はサブメッシュ(複数マテリアル割り当てる場合に使われるメッシュ)指定用
mesh.SetTriangles(triangles, 0);
//各頂点に色の情報を付与
mesh.colors = new []  
{
    Color.red,      
    Color.green,    
    Color.blue,     
    Color.gray,     
    Color.red,      
    Color.green,    
    Color.blue,     
    Color.gray,     
    Color.red,      
    Color.green,    
    Color.blue,     
    Color.gray,
    Color.red,      
    Color.green,    
    Color.blue,
    Color.gray
};
//法線の再計算
mesh.RecalculateNormals();

各頂点に色情報が付与され、ラスタイズ(ピクセル間同士の色の補間)が行われました。

参考リンク

Example: creating a quad
【連載】Unity時代の3D入門 – 第2回「トーラスを描画してみた」

Discussion