Shader实现直方图、柱状图

发表于2018-11-15
评论1 1k浏览

想免费获取内部独家PPT资料库?观看行业大牛直播?点击加入腾讯游戏学堂游戏程序行业精英群

711501594
开发中可以使用shader实现很多种特效这个大家都知道,但其实shader还有其他的用法,做一些常见的excel图表,比如说本篇文章给大家介绍的直方图、柱状图,一起来看看吧。

最终效果:

思路

根据uv中的x取数组中的对应下标和uv中的y比较取色。
shader中只支持固定数组,请保持脚本和shader中的数组长度一致。

shader源码:
Shader "QQ/Histogram"
{
	Properties
	{
		_BarColor("Bar Color",Color) = (0.0,0.8,0.0,1.0)
		_BackColor("Back Color",Color) = (0.4,0.4,0.0,0.2)
		_BarSpace("Bar Space",Range(0,1)) = 0.8
	}
		SubShader
	{
		Tags {
		"RenderType" = "Transparent"
		"Queue" = "Transparent"
	}
		LOD 100
		Pass
		{
			Zwrite Off
			Blend SrcAlpha OneMinusSrcAlpha
			CGPROGRAM
			#pragma vertex vert
			#pragma fragment frag
			#include "UnityCG.cginc"
			#define Length 20 //定义你需要多少个数据
			uniform	fixed4 _BarColor;
			uniform	fixed4 _BackColor;
			uniform float _BarSpace;
			uniform float _Values[Length];
			struct appdata
			{
				float4 vertex : POSITION;
				float2 uv : TEXCOORD0;
			};
			struct v2f
			{
				float4 vertex : SV_POSITION;
				float2 uv : TEXCOORD0;
			};
			v2f vert(appdata v)
			{
				v2f o;
				o.vertex = UnityObjectToClipPos(v.vertex);
				o.uv = v.uv;
				return o;
			}
			fixed4 frag(v2f i) : SV_Target
			{
				float center = 1.0 / Length;
				int index = i.uv.x / center;
				fixed4 col = _BackColor;
				if (abs(i.uv.x % center / center - 0.5) / 0.5 < _BarSpace)
					if (i.uv.y < _Values[index])
					{
						//柱颜色的控制
						col = _BarColor;
						col.rgb *= _Values[index]*2;
					}
				return col;
			}
			ENDCG
		}
	}
}

脚本控制代码
public class HistogramControl : MonoBehaviour
{
    //数组长度要符合shader中定义的
    public float[] values;
    Material mat;
    void Start()
    {
        mat = GetComponent<MeshRenderer>().material;
    }
    void Update()
    {
        SetData(values);
    }
    public void SetData(float[] values)
    {
        mat.SetFloatArray("_Values", values);
    }
}

原文链接

著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

如社区发表内容存在侵权行为,您可以点击这里查看侵权投诉指引

标签:

移动官网
公众号
在线反馈
返回顶部