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

原文: http://www.manew.com/thread-96453-1-1.html
本章和接下来的几章都会是在屏幕上绘制2D的图像，因此需要建立一个绘制的平面，类似于UI系统的一个Panel。代码如下：

using UnityEngine;
using System.Collections;

[ExecuteInEditMode]
public class Panel: MonoBehaviour
{
    public Material mat;

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

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

Shader "Unlit/Scenes_001"
{
    SubShader
    {
        Tags { "RenderType"="Opaque" }
        LOD 100
        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代码的片段着色器方法(frag)的代码替换成如下代码：

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);
}

得到的效果如图：

对_ScreenParams不理解的同学可以查看博主写的shader基础知识：

http://www.manew.com/thread-96200-1-1.html

绘制线段

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

// 绘制垂线和横线
fixed4 frag(v2f i) : SV_Target
{
        fixed3 backgroundColor = fixed3(0.5, 0.5, 0.5);
        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);
        }

效果如图：

---

好了，感谢原作者的分享。

每天进步一点点!!!