Surface Shader does not work on UI? Alternatives?

Unity Engine
1

I am trying to color a sliders “workforce” fillbar representing subgroups that make up the total workforce. So I made a surface shader to do this but it does not work correctly with UI elements.
So what can I change? What Shader type to study etc.

2

A regular vertex fragment shader is what you want to use. If you’re making a shader for a UI element, I’d start with the built in default UI shader.

3

Ok I am getting really embarassed I rewrote the Ui Default shader but for some reason the color does not change at the designed points. I am giving values between 0 and 1 but even if I test this without the loop the results are strange.

                uint _SegmentsSize = 0;
                float _Segments[1000];
                uint current = 0;

                fixed4 frag(v2f IN) : SV_Target
                {
                    current = 0;
                    for (int i = 0; i < _SegmentsSize; i++)
                    {
                        if (IN.texcoord.x > _Segments[i]) {
                            current = i+1;
                        }
                    }

                   


                    fixed4 co = fixed4((current) % 3 == 0 ? 1 : 0, (current + 1) % 3 == 0 ? 1 : 0, (current + 2) % 3 == 0 ? 1 : 0, 1);
                    half4 color = (tex2D(_MainTex, IN.texcoord) + _TextureSampleAdd) * IN.color* co;

                    #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;
                }
4

First though, I would reduce the size of the array. Assuming you’re not going to need to represent more groups than there are likely to be pixels used by your UI element, set that to something smaller. 16 maybe?

Then I would pass in an array of colors for each bar, maybe even use the alpha value as the bar % instead of having a separate array. Have each segment value be the full % where the cutoff would be and pre sort the array in c# to be in order of the longest to shortest. Then in the shader test if the current UV.x < that segment, set the color to that segment, iterate over all the segments, and then output the color.

5

^^ well IN.texcoord are the only coordinates I could find.(On the positive side building a new Slider from sprites works good so far)

6

UVs == texcoords

It’s two terms for the same thing. They’re called “UV”s because those are the letters usually used to denote the two components for 2D texture coordinates. Just like position is xyz, texture coordinates are uv (with sometimes a w used for the third component for 3D texture coordinates).

I would suggest trying to get one slider to work with a material property. You’ll need to use a sprite texture that isn’t part of an atlas, otherwise there’s no way to know what the UV range is.