Unity&Shader基础篇-绘图2D图形

一、闲言碎语唠叨两句

原文转载请注明出处点击打开链接

有了前面的几章的基础，接下来我们就可以编写一些案例来训练和强化Shader编程。本章和接下来的几章都会是在屏幕上绘制2D的图像，因此需要建立一个绘制的平面，类似于UI系统的一个Panel。代码如下：

using UnityEngine;
using System.Collections;

[ExecuteInEditMode]
public class Panel : MonoBehaviour
{

    public Material mat;
    // Use this for initialization
    void Start()
    {

    }

    // Update is called once per frame
    void Update()
    {


    }
    void OnRenderImage(RenderTexture src, RenderTexture dest)
    {
        Graphics.Blit(src, dest, mat);
    }
}

将段代码挂到Camera上，之后创建一个材质，将材质赋给代码中的“mat”变量。新建的材质的shader代码如下：

Shader "Unlit/Chapter1"
{
	SubShader
	{
		// No culling or depth
		Cull Off ZWrite Off ZTest Always

		Pass
	{
		CGPROGRAM
#pragma vertex vert
#pragma fragment frag

#include "UnityCG.cginc"

		struct appdata
	{
		float4 vertex : POSITION;
		float2 uv : TEXCOORD0;
	};

	struct v2f
	{
		float2 uv : TEXCOORD0;
		float4 vertex : SV_POSITION;
	};

	v2f vert(appdata v)
	{
		v2f o;
		o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
		o.uv = v.uv;
		return o;
	}


	fixed4 frag(v2f i) : SV_Target
	{
		return fixed4(1.0, 1.0, 0.5, 1.0);
	}
		ENDCG
	}
	}
}

这段Shader代码什么也没有干，只是将这个面板的颜色设置成了下面这个样子，如图是覆盖了整个屏幕

二、将屏幕分成两边，每一边颜色不同

将shader代码的片段着色器方法的代码替换成如下代码：

fixed4 frag (v2f i) : SV_Target
{
    fixed3 color1 = fixed3(0.886, 0.576, 0.898);
    fixed3 color2 = fixed3(0.537, 0.741, 0.408);
    fixed3 pixel;
//屏幕的坐标范围为0~1
    if(i.uv.x > 0.5){
        pixel = color2;
    } else {
        pixel = color1;
    }

    return fixed4(pixel, 1.0);
}

得到的效果如图所示，代码中根据坐标来划分屏幕，并且使用了不同的颜色来进行渲染。

三、使用屏幕参数来控制

将片段着色器的代码部分替换成如下代码：

fixed4 frag (v2f i) : SV_Target
{
    fixed3 color1 = fixed3(0.886, 0.576, 0.898);
    fixed3 color2 = fixed3(0.537, 0.741, 0.408);
    fixed3 pixel;

    float dis = 50;

    if(i.uv.x * _ScreenParams.x > dis){
        pixel = color2;
    } else {
        pixel = color1;
    }

    return fixed4(pixel, 1.0);
}

得到的效果如图所示：

四、绘制线段

知道了怎么在屏幕上划分不同区域，其实就很容易绘制线段了。思路就是将要绘制的线段的区域规划出来，填充于颜色就好。将片段着色器代码替换成如下所示的代码：

// 绘制垂线和横线
fixed4 frag(v2f i) : SV_Target
{
	fixed3 backgroundColor = fixed3(1.0, 1.0, 1.0);
fixed3 color1 = fixed3(0.216, 0.471, 0.698); // blue
fixed3 color2 = fixed3(1.00, 0.329, 0.298); // red
fixed3 color3 = fixed3(0.867, 0.910, 0.247); // yellow

fixed3 pixel = backgroundColor;

// line1
float leftCoord = 0.54;
float rightCoord = 0.55;
if (i.uv.x < rightCoord && i.uv.x > leftCoord) pixel = color1;

// line2
float lineCoordinate = 0.4;
float lineThickness = 0.003;
if (abs(i.uv.x - lineCoordinate) < lineThickness) pixel = color2;

// line3
if (abs(i.uv.y - 0.6) < 0.01) pixel = color3;

return fixed4(pixel, 1.0);

得到的效果如图所示：

五、绘制一个棋盘网格

首先，需要将坐标轴反转过来，将左下角的点定义为我们的零点，而不是Unity默认的右上角。将顶点着色器的代码替换成如下的代码即可：

v2f vert(appdata v)
	{
		v2f o;
		o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
		o.uv = v.uv;
		o.uv.y = 1 - o.uv.y; //加入这行代码将坐标轴反转
		return o;
	}

接着将下面的代码替换片段着色器的代码：

fixed4 frag(v2f i) : SV_Target
	{
		fixed3 backgroundColor = fixed3(1.0, 1.0, 1.0);
	fixed3 axesColor = fixed3(0.0, 0.0, 1.0);
	fixed3 gridColor = fixed3(0.5, 0.5, 0.5);

	fixed3 pixel = backgroundColor;

	const float tickWidth = 0.1;
	for (float lc = 0.0; lc< 1.0; lc += tickWidth) {
		if (abs(i.uv.x - lc) < 0.002) pixel = gridColor;
		if (abs(i.uv.y - lc) < 0.002) pixel = gridColor;
	}

	// 画坐标轴
	if (abs(i.uv.x)<0.005) pixel = axesColor;
	if (abs(i.uv.y)<0.006) pixel = axesColor;

	return fixed4(pixel, 1.0);
	}

得到的效果图如图所示：