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

时间:2022-05-26 11:12:03

一、闲言碎语唠叨两句

原文转载请注明出处点击打开链接 有了前面的几章的基础,接下来我们就可以编写一些案例来训练和强化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);
}


得到的效果如图所示,代码中根据坐标来划分屏幕,并且使用了不同的颜色来进行渲染。 Unity&Shader基础篇-绘图2D图形

三、使用屏幕参数来控制

将片段着色器的代码部分替换成如下代码:
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);
}
得到的效果如图所示:
Unity&Shader基础篇-绘图2D图形

四、绘制线段

知道了怎么在屏幕上划分不同区域,其实就很容易绘制线段了。思路就是将要绘制的线段的区域规划出来,填充于颜色就好。将片段着色器代码替换成如下所示的代码:
// 绘制垂线和横线
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&Shader基础篇-绘图2D图形

五、绘制一个棋盘网格

首先,需要将坐标轴反转过来,将左下角的点定义为我们的零点,而不是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);
}
得到的效果图如图所示:
Unity&Shader基础篇-绘图2D图形
原文转载请注明出处点击打开链接