Search Unity

  1. Megacity Metro Demo now available. Download now.
    Dismiss Notice
  2. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

Does anyone know why this UI shader has on odd behavior with masks?

Discussion in 'Shaders' started by Afropenguinn, Apr 28, 2019.

  1. Afropenguinn

    Afropenguinn

    Joined:
    May 15, 2013
    Posts:
    305
    So here is the shader I wrote, it's for a stacked bar graph:
    Code (CSharp):
    1. Shader "Custom/StackedBarGraph"
    2. {
    3.     Properties
    4.     {
    5.         [PerRendererData] _MainTex("Sprite Texture", 2D) = "white" {}
    6.         _Color("Tint", Color) = (1,1,1,1)
    7.  
    8.         _StencilComp("Stencil Comparison", Float) = 8
    9.         _Stencil("Stencil ID", Float) = 0
    10.         _StencilOp("Stencil Operation", Float) = 0
    11.         _StencilWriteMask("Stencil Write Mask", Float) = 255
    12.         _StencilReadMask("Stencil Read Mask", Float) = 255
    13.  
    14.         _ColorMask("Color Mask", Float) = 15
    15.  
    16.         [Toggle(UNITY_UI_ALPHACLIP)] _UseUIAlphaClip("Use Alpha Clip", Float) = 0
    17.     }
    18.  
    19.     SubShader
    20.     {
    21.         Tags
    22.         {
    23.             "Queue" = "Transparent"
    24.             "IgnoreProjector" = "True"
    25.             "RenderType" = "Transparent"
    26.             "PreviewType" = "Plane"
    27.             "CanUseSpriteAtlas" = "True"
    28.         }
    29.  
    30.         Stencil
    31.         {
    32.             Ref[_Stencil]
    33.             Comp[_StencilComp]
    34.             Pass[_StencilOp]
    35.             ReadMask[_StencilReadMask]
    36.             WriteMask[_StencilWriteMask]
    37.         }
    38.  
    39.         Cull Off
    40.         Lighting Off
    41.         ZWrite Off
    42.         ZTest[unity_GUIZTestMode]
    43.         Blend SrcAlpha OneMinusSrcAlpha
    44.         ColorMask[_ColorMask]
    45.  
    46.         Pass
    47.         {
    48.             Name "Default"
    49.             CGPROGRAM
    50.          
    51.             #pragma vertex vert
    52.             #pragma fragment frag
    53.             #pragma target 2.0
    54.  
    55.             #include "UnityCG.cginc"
    56.             #include "UnityUI.cginc"
    57.  
    58.             #pragma multi_compile_local _ UNITY_UI_CLIP_RECT
    59.             #pragma multi_compile_local _ UNITY_UI_ALPHACLIP
    60.  
    61.             struct appdata_t
    62.             {
    63.                 float4 vertex   : POSITION;
    64.                 float4 color    : COLOR;
    65.                 float2 texcoord : TEXCOORD0;
    66.                 UNITY_VERTEX_INPUT_INSTANCE_ID
    67.             };
    68.  
    69.             struct v2f
    70.             {
    71.                 float4 vertex   : SV_POSITION;
    72.                 fixed4 color : COLOR;
    73.                 float2 texcoord  : TEXCOORD0;
    74.                 float4 worldPosition : TEXCOORD1;
    75.                 UNITY_VERTEX_OUTPUT_STEREO
    76.             };
    77.  
    78.             sampler2D _MainTex;
    79.             fixed4 _Color;
    80.             fixed4 _TextureSampleAdd;
    81.             float4 _ClipRect;
    82.             float4 _MainTex_ST;
    83.  
    84.             float _GraphWidth;
    85.             float _Spacing;
    86.             float _BarWidth;
    87.             float _Offset;
    88.             int _Layers;
    89.             fixed4 _LayerColors[8];
    90.             int _Bars;
    91.             float _Values[256];
    92.  
    93.             v2f vert(appdata_t IN)
    94.             {
    95.                 v2f OUT;
    96.                 UNITY_SETUP_INSTANCE_ID(IN);
    97.                 UNITY_INITIALIZE_VERTEX_OUTPUT_STEREO(OUT);
    98.                 OUT.worldPosition = IN.vertex;
    99.                 OUT.vertex = UnityObjectToClipPos(OUT.worldPosition);
    100.  
    101.                 OUT.texcoord = TRANSFORM_TEX(IN.texcoord, _MainTex);
    102.  
    103.                 OUT.color = IN.color * _Color;
    104.                 return OUT;
    105.             }
    106.          
    107.             fixed4 frag(v2f IN) : SV_Target
    108.             {
    109.                 float x = IN.texcoord.x * _GraphWidth;
    110.                 float y = IN.texcoord.y;
    111.  
    112.                 int index = -1;
    113.                 for (int i = 0; i < _Bars; i += 1)
    114.                 {
    115.                     float left = _Spacing + _Offset + i * (_Spacing + _BarWidth);
    116.                     float right = left + _BarWidth;
    117.  
    118.                     if (x >= left && x <= right)
    119.                     {
    120.                         float min = -1;
    121.                         for (int j = 0; j < _Layers; j += 1)
    122.                         {
    123.                             float value = _Values[i * _Layers + j];
    124.  
    125.                             if (y <= value && (value <= min || min == -1))
    126.                             {
    127.                                 min = value;
    128.                                 index = j;
    129.                             }
    130.                         }
    131.  
    132.                         break;
    133.                     }
    134.                 }
    135.  
    136.                 half4 color;
    137.                 if (index != -1)
    138.                 {
    139.                     color = _LayerColors[index];
    140.                 }
    141.                 else
    142.                 {
    143.                     color = (tex2D(_MainTex, IN.texcoord) + _TextureSampleAdd) * IN.color;
    144.                 }
    145.  
    146.                 #ifdef UNITY_UI_CLIP_RECT
    147.                 color.a *= UnityGet2DClipping(IN.worldPosition.xy, _ClipRect);
    148.                 #endif
    149.  
    150.                 #ifdef UNITY_UI_ALPHACLIP
    151.                 clip(color.a - 0.001);
    152.                 #endif
    153.  
    154.                 return color;
    155.             }
    156.             ENDCG
    157.         }
    158.     }
    159. }
    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:
    Code (CSharp):
    1. this.barGraphImage.material.SetFloat(this.graphWidthId, this.rectTransform.rect.width);
    2. this.barGraphImage.material.SetFloat(this.spacingId, this.Spacing);
    3. this.barGraphImage.material.SetFloat(this.barWidthId, this.barWidth);
    4. this.barGraphImage.material.SetFloat(this.offsetId, this.offset);
    5. this.barGraphImage.material.SetInt(this.barsId, this.bars.Count);
    6.  
    7. int barIndex = 0;
    8. int layerIndex = 0;
    9. int maxIndex = Mathf.Min(this.bars.Count * this.Layers.Length, MaxShaderValues);
    10. float[] values = new float[256];
    11. for (int i = 0; i < maxIndex; i += 1)
    12. {
    13.     values[i] = this.bars[barIndex].Values[layerIndex];
    14.  
    15.     layerIndex += 1;
    16.     if (layerIndex >= this.bars[barIndex].Values.Length)
    17.     {
    18.         barIndex += 1;
    19.         layerIndex = 0;
    20.     }
    21. }
    22.  
    23. this.barGraphImage.material.SetFloatArray(this.valuesId, values);
    24.  
    25. this.isDirty = false;
    And the color is only set once in Awake:
    Code (CSharp):
    1. this.graphWidthId = Shader.PropertyToID("_GraphWidth");
    2. this.spacingId = Shader.PropertyToID("_Spacing");
    3. this.barWidthId = Shader.PropertyToID("_BarWidth");
    4. this.offsetId = Shader.PropertyToID("_Offset");
    5. this.barsId = Shader.PropertyToID("_Bars");
    6. this.valuesId = Shader.PropertyToID("_Values");
    7.  
    8. this.barGraphImage.material.SetInt(Shader.PropertyToID("_Layers"), this.layers.Length);
    9. this.barGraphImage.material.SetColorArray(Shader.PropertyToID("_LayerColors"), this.Layers);
    10. this.barGraphImage.material.SetFloatArray(this.valuesId, new float[MaxShaderValues]);
     
  2. Afropenguinn

    Afropenguinn

    Joined:
    May 15, 2013
    Posts:
    305
    Another odd behavior:
    Removing "#ifdef UNITY_UI_CLIP_RECT" (and it's "#endif") causes the RectMask2D to work perfectly. That shouldn't be the case, since Unity should be defining that.

    EDIT:
    Even more strange behaviour:
    If I set each variable manually in the shader, it displays correctly, meaning for some reason the variables just aren't being set while it is in a mask. Does "material.SetX" only work when the material is not in a mask?
     
    Last edited: Apr 29, 2019
  3. Afropenguinn

    Afropenguinn

    Joined:
    May 15, 2013
    Posts:
    305
    UPDATE:
    I managed to fix it! Turns out masking causes a new material to be created on the fly, so the variables weren't being set in the right material. I changed "this.barGraphImage.material" to this.barGraphImage.materialForRendering" and everything worked perfectly. Though, I also have to update the color every frame as well now. Not a huge deal. Still no workaround for UNITY_UI_CLIP_RECT not being defined. For now I just removed the ifdef check and it works fine.
     
  4. yagodar

    yagodar

    Joined:
    Oct 10, 2016
    Posts:
    17
    Hello!
    Interesting topic.
    I faced similar problem. Does anyone know, where can I read about UNITY_UI_CLIP_RECT?