そろそろShaderをやるパート4 Unite 2017の動画を見る(プロパティ、透明度)
そろそろShaderをやります
そろそろShaderをやります。そろそろShaderをやりたいからです。
パート100までダラダラ頑張ります。10年かかってもいいのでやります。
100記事分くらい学べば私レベルの初心者でもまあまあ理解できるかなと思っています。
という感じでやってます。
※初心者がメモレベルで記録するので
技術記事としてはお力になれないかもしれません。
下準備
下記参考
そろそろShaderをやるパート1 Unite 2017の動画を見る(基礎知識～フラグメントシェーダーで色を変える)
Unite 2017の動画
社の強い人に入門動画を教えてもらいました。
少し古い動画ですが、たぶん大丈夫だと思います。
【Unite 2017 Tokyo】シェーダープログラミング入門！カスタムシェーダー、作るで！
こんな人におすすめ
・シェーダーを使用してビジュアル改良方法を学びたいプログラマー
・Unityのグラフィックスの仕組みやカスタムシェーダーで何が達成できるか知りたいアーティスト
・シェーダーの基本構造と使用方法を理解したい学生
受講者が得られる知見
・Unityのグラフィックス・パイプラインの仕組みとUnity シェーダーの基本構造
・カスタムシェーダーの作成方法
・頂点シェーダーとフラグメントシェーダーで使用される基本的な数学的コンセプト
今回はプロパティと動画にはあまり関係ない透明度について学びます。
Shaderサンプル
Shader "UniteAsia/Shader04"
{
Properties
{
//ここに書いたものがInspectorに表示される
_RedValue("Red Value", float) = 0.5
_GreenValue("Green Value", float) = 0.5
_BlueValue("Blue Value", float) = 0.5
}
SubShader
{
Pass
{
Tags { "RenderType"="Opaque" }
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#include "UnityCG.cginc"
//変数の宣言 Propertiesで定義した名前と一致させる
float _RedValue;
float _GreenValue;
float _BlueValue;
struct v2f
{
float4 pos : SV_POSITION;
};
v2f vert(appdata_base v)
{
v2f o;
o.pos = UnityObjectToClipPos(v.vertex);
return o;
}
half4 frag(v2f i) : COLOR
{
//RGBにそれぞれのプロパティを当てはめてみる
return float4(_RedValue, _GreenValue, _BlueValue, 1);
}
ENDCG
}
}
}
プロパティで定義した値はInspectorで参照できます。
せっかくなので色のプロパティをInspectorに表示して
透明度も変更できるようにしてみました。
Shader "UniteAsia/Shader04"
{
Properties
{
//ここに書いたものがInspectorに表示される
_Color("MainColor",Color) = (0,0,0,0)
}
SubShader
{
Pass
{
Tags { "RenderType"="Tranparent" }
//不当明度を利用するときに必要 文字通り、1 - フラグメントシェーダーのAlpha値 という意味
Blend SrcAlpha OneMinusSrcAlpha
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#include "UnityCG.cginc"
//変数の宣言 Propertiesで定義した名前と一致させる
half4 _Color;
struct v2f
{
float4 pos : SV_POSITION;
};
v2f vert(appdata_base v)
{
v2f o;
o.pos = UnityObjectToClipPos(v.vertex);
return o;
}
half4 frag(v2f i) : COLOR
{
//RGBAにそれぞれのプロパティを当てはめてみる
return half4(_Color);
}
ENDCG
}
}
}
プロパティにColorを設定すれば
カラーパレットをInspectorで操作できるようになります。
透明度
Blend SrcAlpha OneMinusSrcAlphaを書いて透明度を計算できるようにしています。
この1行でブレンドモードが変更され、アルファブレンドが行われるそうです。
設定を追記しているようなイメージです。
難しい計算は中で勝手にやってくれているということですね。
この1行はどうやって色が出力されるか計算している
という要点だけ覚えておきます。
SrcAlphaは フラグメントシェーダから出力されたα値
OneMinusSrcAlphaは 1 – フラグメントシェーダから出力されたα値
最終的に出力される色
フラグメントシェーダの出力 * α値 + 既に画面に描画されている色 * (1 – α値）
Discussion