そろそろShaderをやるパート3 Unite 2017の動画を見る(ラスタライズ)
そろそろShaderをやります
そろそろShaderをやります。そろそろShaderをやりたいからです。
パート100までダラダラ頑張ります。10年かかってもいいのでやります。
100記事分くらい学べば私レベルの初心者でもまあまあ理解できるかなと思っています。
という感じでやってます。
※初心者がメモレベルで記録するので
技術記事としてはお力になれないかもしれません。
下準備
下記参考
そろそろShaderをやるパート1 Unite 2017の動画を見る(基礎知識～フラグメントシェーダーで色を変える)
Unite 2017の動画
社の強い人に入門動画を教えてもらいました。
少し古い動画ですが、たぶん大丈夫だと思います。
【Unite 2017 Tokyo】シェーダープログラミング入門！カスタムシェーダー、作るで！
こんな人におすすめ
・シェーダーを使用してビジュアル改良方法を学びたいプログラマー
・Unityのグラフィックスの仕組みやカスタムシェーダーで何が達成できるか知りたいアーティスト
・シェーダーの基本構造と使用方法を理解したい学生
受講者が得られる知見
・Unityのグラフィックス・パイプラインの仕組みとUnity シェーダーの基本構造
・カスタムシェーダーの作成方法
・頂点シェーダーとフラグメントシェーダーで使用される基本的な数学的コンセプト
今回はラスタライズを見ていきます。
サンプルコード
フラグメントシェーダーの補間機能を知るためのサンプルを見ていきます。
まずは動的に板ポリを作成するコードです。
【参考リンク】：UnityEngine.Meshの内部構造解説
using UnityEngine;
public class MeshGenerator : MonoBehaviour
{
public Material mat;
// Use this for initialization
void Start ()
{
MeshRenderer meshRenderer = gameObject.AddComponent<MeshRenderer>();
meshRenderer.material = mat;
Mesh mesh = new Mesh();
//We create a simple quad in space, so we need for vertices that will become 2 triangles
mesh.vertices = new Vector3[]
{
new Vector3(-0.5f, -0.5f, 0f), //0
new Vector3(0.5f, -0.5f, 0f), //1
new Vector3(0.5f, 0.5f, 0f), //2
new Vector3(-0.5f, 0.5f, 0f) //3
};
//We can read/write the color of a vertex, from code or from a 3D modeling software
mesh.colors = new Color[] //ここで頂点に色の情報を付与している
{
Color.red, //0
Color.green, //1
Color.blue, //2
Color.gray //3
};
//We define the triangles, in this case we share the vertex number 0
mesh.triangles = new int[]
{
0, 2, 1,
0, 3, 2
};
mesh.RecalculateBounds();
MeshFilter meshFilter = gameObject.AddComponent<MeshFilter>();
meshFilter.mesh = mesh;
}
}
フラグメントシェーダーの補間機能を確認するために頂点に色の情報を付与しています。
mesh.colors = new Color[]
{
Color.red, //0
Color.green, //1
Color.blue, //2
Color.gray //3
};
Shader
作成したメッシュの頂点カラーを利用したいのでShaderは下記のようになります。
Shader "UniteAsia/Shader03"
{
SubShader
{
Pass
{
Tags { "RenderType"="Opaque" }
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#include "UnityCG.cginc"
struct v2f
{
float4 pos : SV_POSITION;
half4 color : COLOR0;
};
v2f vert(appdata_full v)
{
v2f o;
o.pos = UnityObjectToClipPos(v.vertex);
o.color = v.color;
return o;
}
half4 frag(v2f i) : COLOR
{
//メッシュから受け取った頂点の色情報をそのまま利用する
return i.color;
}
ENDCG
}
}
}
実行すると下記画像のようになります。
先ほどのC#のコードで書いた各頂点の座標を画像内に赤字で書き込んでいます。
Color.red, //0
Color.green, //1
Color.blue, //2
Color.gray //3
頂点から頂点の間の色がグラデーションしていることが見て取れます。
頂点と頂点の間の色はUnityで勝手に補間してくれているそうです。
これをラスタライズって言うらしいです。
Discussion