So here is the shader I wrote, it’s for a stacked bar graph:
Shader "Custom/StackedBarGraph"
{
Properties
{
[PerRendererData] _MainTex("Sprite Texture", 2D) = "white" {}
_Color("Tint", Color) = (1,1,1,1)
_StencilComp("Stencil Comparison", Float) = 8
_Stencil("Stencil ID", Float) = 0
_StencilOp("Stencil Operation", Float) = 0
_StencilWriteMask("Stencil Write Mask", Float) = 255
_StencilReadMask("Stencil Read Mask", Float) = 255
_ColorMask("Color Mask", Float) = 15
[Toggle(UNITY_UI_ALPHACLIP)] _UseUIAlphaClip("Use Alpha Clip", Float) = 0
}
SubShader
{
Tags
{
"Queue" = "Transparent"
"IgnoreProjector" = "True"
"RenderType" = "Transparent"
"PreviewType" = "Plane"
"CanUseSpriteAtlas" = "True"
}
Stencil
{
Ref[_Stencil]
Comp[_StencilComp]
Pass[_StencilOp]
ReadMask[_StencilReadMask]
WriteMask[_StencilWriteMask]
}
Cull Off
Lighting Off
ZWrite Off
ZTest[unity_GUIZTestMode]
Blend SrcAlpha OneMinusSrcAlpha
ColorMask[_ColorMask]
Pass
{
Name "Default"
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#pragma target 2.0
#include "UnityCG.cginc"
#include "UnityUI.cginc"
#pragma multi_compile_local _ UNITY_UI_CLIP_RECT
#pragma multi_compile_local _ UNITY_UI_ALPHACLIP
struct appdata_t
{
float4 vertex : POSITION;
float4 color : COLOR;
float2 texcoord : TEXCOORD0;
UNITY_VERTEX_INPUT_INSTANCE_ID
};
struct v2f
{
float4 vertex : SV_POSITION;
fixed4 color : COLOR;
float2 texcoord : TEXCOORD0;
float4 worldPosition : TEXCOORD1;
UNITY_VERTEX_OUTPUT_STEREO
};
sampler2D _MainTex;
fixed4 _Color;
fixed4 _TextureSampleAdd;
float4 _ClipRect;
float4 _MainTex_ST;
float _GraphWidth;
float _Spacing;
float _BarWidth;
float _Offset;
int _Layers;
fixed4 _LayerColors[8];
int _Bars;
float _Values[256];
v2f vert(appdata_t IN)
{
v2f OUT;
UNITY_SETUP_INSTANCE_ID(IN);
UNITY_INITIALIZE_VERTEX_OUTPUT_STEREO(OUT);
OUT.worldPosition = IN.vertex;
OUT.vertex = UnityObjectToClipPos(OUT.worldPosition);
OUT.texcoord = TRANSFORM_TEX(IN.texcoord, _MainTex);
OUT.color = IN.color * _Color;
return OUT;
}
fixed4 frag(v2f IN) : SV_Target
{
float x = IN.texcoord.x * _GraphWidth;
float y = IN.texcoord.y;
int index = -1;
for (int i = 0; i < _Bars; i += 1)
{
float left = _Spacing + _Offset + i * (_Spacing + _BarWidth);
float right = left + _BarWidth;
if (x >= left && x <= right)
{
float min = -1;
for (int j = 0; j < _Layers; j += 1)
{
float value = _Values[i * _Layers + j];
if (y <= value && (value <= min || min == -1))
{
min = value;
index = j;
}
}
break;
}
}
half4 color;
if (index != -1)
{
color = _LayerColors[index];
}
else
{
color = (tex2D(_MainTex, IN.texcoord) + _TextureSampleAdd) * IN.color;
}
#ifdef UNITY_UI_CLIP_RECT
color.a *= UnityGet2DClipping(IN.worldPosition.xy, _ClipRect);
#endif
#ifdef UNITY_UI_ALPHACLIP
clip(color.a - 0.001);
#endif
return color;
}
ENDCG
}
}
}
It draws bars that have different values, each associated with a color. The material goes in an image component. It still draws the image in the background of the bar graph. Lowest bar value is drawn first so that all stacks on each bar are visible. Here is what it looks like in game.
When I put it in a mask, however, only the background image is drawn. If I put it in a RectMask2D, then it works, but it only culls it once the entire graph is out of view. Even stranger, if I replace “color = (tex2D(_MainTex, IN.texcoord) + _TextureSampleAdd) * IN.color;” (which draws the default image) with “color = _LayerColors[0];” (which is the first bar color) it doesn’t draw anything at all. Would anyone be able to explain to me what is going on here so I can attempt to fix it?
Also, this is my first shader, so any critiques or general tips would be greatly appreciated!
EDIT:
Oh, and this is the code run every frame in the actual BarGraph script to pass the materials the values:
this.barGraphImage.material.SetFloat(this.graphWidthId, this.rectTransform.rect.width);
this.barGraphImage.material.SetFloat(this.spacingId, this.Spacing);
this.barGraphImage.material.SetFloat(this.barWidthId, this.barWidth);
this.barGraphImage.material.SetFloat(this.offsetId, this.offset);
this.barGraphImage.material.SetInt(this.barsId, this.bars.Count);
int barIndex = 0;
int layerIndex = 0;
int maxIndex = Mathf.Min(this.bars.Count * this.Layers.Length, MaxShaderValues);
float[] values = new float[256];
for (int i = 0; i < maxIndex; i += 1)
{
values[i] = this.bars[barIndex].Values[layerIndex];
layerIndex += 1;
if (layerIndex >= this.bars[barIndex].Values.Length)
{
barIndex += 1;
layerIndex = 0;
}
}
this.barGraphImage.material.SetFloatArray(this.valuesId, values);
this.isDirty = false;
And the color is only set once in Awake:
this.graphWidthId = Shader.PropertyToID("_GraphWidth");
this.spacingId = Shader.PropertyToID("_Spacing");
this.barWidthId = Shader.PropertyToID("_BarWidth");
this.offsetId = Shader.PropertyToID("_Offset");
this.barsId = Shader.PropertyToID("_Bars");
this.valuesId = Shader.PropertyToID("_Values");
this.barGraphImage.material.SetInt(Shader.PropertyToID("_Layers"), this.layers.Length);
this.barGraphImage.material.SetColorArray(Shader.PropertyToID("_LayerColors"), this.Layers);
this.barGraphImage.material.SetFloatArray(this.valuesId, new float[MaxShaderValues]);