EN中文
开发者社区 > 程序

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

发表于2016-11-18
评论1 2.2k浏览
一、闲言碎语唠叨两句
　　原文转载请注明出处凯尔八阿哥专栏
　　有了前面的几章的基础，接下来我们就可以编写一些案例来训练和强化Shader编程。本章和接下来的几章都会是在屏幕上绘制2D的图像，因此需要建立一个绘制的平面，类似于UI系统的一个Panel。代码如下：


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

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

二、将屏幕分成两边，每一边颜色不同
　　将shader代码的片段着色器方法的代码替换成如下代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
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);
}
　　得到的效果如图所示，代码中根据坐标来划分屏幕，并且使用了不同的颜色来进行渲染。


三、使用屏幕参数来控制
　　将片段着色器的代码部分替换成如下代码：

　　得到的效果如图所示：


四、绘制线段
　　知道了怎么在屏幕上划分不同区域，其实就很容易绘制线段了。思路就是将要绘制的线段的区域规划出来，填充于颜色就好。将片段着色器代码替换成如下所示的代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 绘制垂线和横线
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默认的右上角。将顶点着色器的代码替换成如下的代码即可：
1
2
3
4
5
6
7
8
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;
    }
　　接着将下面的代码替换片段着色器的代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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);
    }
　　得到的效果图如图所示：


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

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

标签：

游戏开发UnityListMonoXML渲染