🌈
そろそろShaderをやるパート41 Imageコンポーネントの色変更に対応したShader
そろそろShaderをやります
そろそろShaderをやります。そろそろShaderをやりたいからです。
パート100までダラダラ頑張ります。10年かかってもいいのでやります。
100記事分くらい学べば私レベルの初心者でもまあまあ理解できるかなと思っています。
という感じでやってます。
※初心者がメモレベルで記録するので
技術記事としてはお力になれないかもしれません。
下準備
下記参考
そろそろShaderをやるパート1 Unite 2017の動画を見る(基礎知識～フラグメントシェーダーで色を変える)
デモ
まず問題定義です。
Unlit/TextureのShaderを適用したMaterialを用意します。
そのMaterialをImageコンポーネントのMaterialに適用します。
適用してColorを変更したものが下記GIFです。
色を変更しても反応がありません。
Shader側で適切な記述を行うと上手くいきました。
下記GIFはMaterialのみアタッチした場合とSpriteのみアタッチした場合を比較したものです。
マテリアルをアタッチしたImageコンポーネントのColorの変更がSpriteのみアタッチした場合と同様にしっかりと反映されました。
Shaderサンプル
Shader "Custom/WorkOnImageComponent"
{
Properties
{
_MainTex ("Texture", 2D) = "white" {}
}
SubShader
{
Tags
{
"RenderType"="Tranparent"
}
Blend SrcAlpha OneMinusSrcAlpha
Pass
{
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#include "UnityCG.cginc"
struct appdata
{
float4 vertex : POSITION;
float2 uv : TEXCOORD0;
float4 color : COLOR;
};
struct v2f
{
float2 uv : TEXCOORD0;
float4 vertex : SV_POSITION;
float4 color : COLOR;
};
sampler2D _MainTex;
v2f vert(appdata v)
{
v2f o;
o.vertex = UnityObjectToClipPos(v.vertex);
o.uv = v.uv;
o.color = v.color;
return o;
}
fixed4 frag(v2f i) : SV_Target
{
float4 finalColor = tex2D(_MainTex,i.uv);
//頂点カラーを使用する
float4 vertexColor = i.color;
return finalColor * vertexColor;
}
ENDCG
}
}
}
やっていることは非常にシンプルで、頂点カラーをフラグメントシェーダーで利用して、最終的に出力されるピクセルに乗算しているだけです。
ImageコンポーネントのColorは頂点カラーを変更しているということなのでしょうね。
参考リンク
Access UI Image Color in Shader
Discussion