Unity着色器训练营:入门篇(上)

关于着色器shader的干货在这里!

着色器对于游戏开发者一直充满神秘感,但是一旦你真正理解它,你会发现它不是特别复杂,可以帮你实现奇思妙想。今天Unity大中华区技术经理鲍健运将为大家分享,如何由浅入深学习撰写Unity着色器脚本,实现美妙有趣的画面效果,带领大家叩开着色器开发的大门。

概述

0b0f7544-bff2-4cf3-b88a-16deb2d437c9_image.png

便于大家的理解,我列举一个现实生活中的例子。这个大家一眼应该就能马上辨认出来,梵高的名画《向日葵》。它实在是太过有名,以至于不少人喜欢搞一件仿制品挂在墙头,为房间的装饰增添美感。

2bf3677a-cc77-4947-bf9a-597d53314f10_image.png

但是仿制品的生产依靠的是血汗工厂,因为制作这样一幅油画,需要一笔笔画出每个部分,非常地耗时耗力,因此我不得不以5倍速去播放它的绘制过程。如果观察右边的这幅《向日葵》,你会发现它是原有画作三角化的效果,分分钟从印象派风格变成了马赛克风格,而这个画面表现实际就是Unity着色器的效果。

0c1c182e-efce-42f5-8adc-7ab775176683_image.png

事实上,着色器与中国古代四大发明之一的活字印刷术有点渊源。最早的活字印刷术虽然诞生于中国,但是兴盛与欧洲。因为字母文字系统得天独厚的优势,只需准备一些金属字模,然后根据文本的需求进行排布,就可高效无误地印刷安排工整书页。这种内容编排与批量印刷的过程,与着色器实现渲染的过程是极其相似的,即批量将像素绘制到屏幕上。

7f6a3e8e-6bac-48ca-a944-dc549daa1f37_image.png

这个画面应该不少开发者碰到过吧,非常令人讨厌的粉红色Mesh。它意味着你的着色器出问题了。可能是着色器没有正确加载到,或者是设备太差而该着色器设置过高不适用等等。想要知道它为什么出错,就需要去了解什么是着色器,应该如何去写。

fdc15d20-12fe-4705-965a-952aeb1f9d8b_image.png

但是由于着色器会牵涉到些图形学和线性代数的知识,出现一个大家不太熟知的数学公式,很可能会给大家造成“Shader貌似非常复杂”的感觉。当然,写出复杂画面表现的Shader会耗费不少功夫,但是大家不需要担心,因为我们会带领大家以比较舒适的方式进入这个世界。

学习Shader的优势

  1. 內建Unity Shader仅仅是“通用”用例。这些通用的范式基本可以涵盖60%左右的需求和情况,但是不以满足你所有的画面表现需求。

  2. 一旦掌握Shader,可以为游戏/应用创造独一无二的视觉享受。根据实际需求,为游戏和应用实现特定功能的Shader。

  3. 仅仅通过少量代码,就能实现非常有趣的效果。有时候,单单只是需要稍微处理一下顶点或片元函数。

  4. 它能大大帮助性能优化,因为通过Shader可以控制渲染什么以及如何渲染。

  5. 撰写Shader的能力对于游戏团队非常重要,掌握Shader技能的开发一直是炙手可热的职位。现在一个不争的事实就是技术美术永远是各大厂商的稀缺资源。

  6. 如果你已经掌握其他语言的编程,Shader对你而言不会很复杂。因为它本身不会比其他编程语言多些内容,主要处理的还是一些变量与方法。

Unity Shader 典型案例

ffbc583f-3f96-429a-a405-d9e87e6e0008_image.png

让我们看看实际的案例吧。这款游戏就是大家非常熟知的暴雪大作《炉石传说》。

它是暴雪第一款正式的移动游戏,也是Made With Unity的游戏。这里展示的就是Unity Shader的特效效果。卡牌的绿色勾边,角色爆炸的感觉,中间桌面轮廓的星河以及产生流动感的各种绚丽效果都是通过着色器实现出来的。给玩家带来的是不是一种非常震撼的享受?

介绍了这么多,那么Shader到底是什么呢?事实上,它是“一个告诉计算机以某种方式描绘物体的程序”。

Unity着色器构成

Unity着色器是怎么写的呢?到现在我们还没看到它的真面目。从编程语言层面来说,它所使用的是NVIDIA CG语言或微软的HLSL语言去编写,而它们都集合到我们专门的ShaderLab语言中。在应用中,点击T键可以切换显示。

a29af381-82c3-48c1-be06-46d549028b80_image.png

这里就是一个典型的Unity Shader文件,包含了所有的基本元素。该脚本的整体其实就是ShaderLab代码内容,而其中被这个CGPROGRAM和ENDCG包裹的部分就是CG\HLSL语言部分。

常用 Shader 类型

029d0ee4-99f9-4a63-95c4-3c34eeb0870c_image.png

自Unity 5.x起基本常用的Shader就是这上图三种类型,原来还有针对一些旧型号GPU的固定函数着色器已经被时代所淘汰。

1.Vertex & Fragment Shader:顶点/片元着色器。它是最基本,也是非常强大的着色器类型。一般用于2D场景、特效之类的。从上图左边部分,大家可以看到它绘制出一个蜘蛛机器人的纹理,但是不受任何光线的影响。

2.Surface Shader:表面着色器。它拥有更多的光照运算,其实在系统内部它会被编译成一个比较复杂的顶点/片元着色器。从上图中间部分,与左边的比较我们不难发现,这个3D的蜘蛛机器人有明亮的部分,也有阴影,甚至还带有一定的金属光泽。

3.Standard Shader:标准着色器。它是表面着色器升级的版本,因为它使用了Physically Based Rendering(简称PBR)技术,即基于物理的渲染技术。所以在这个着色器中开放了更多处理光照与材质的参数。仔细观察上图右边部分的蜘蛛机器人,更多不同质感的部件被表现出来。机器人自带灯的光照,足部的金属质的甲片,机壳略微的锈迹丰富了这个物件的画面呈现。

创建Shader

a5f11ad7-5978-4a6c-8b94-b848f8a465f3_image.png

Unity內建了一些Shader范式模板,开发者可以通过它们去创建所需类型的Shader,以此为基础开始撰写。点击Create → Shader我们便可以找到它们(不仅限于前面所提到的三种,在以后的系列文章中,将有机会分析其他类型的着色器,敬请大家期待)。

  1. 如果你想创建一个Vertex/Fragment Shader,可以选择Unlit Shader(无光照着色器),它是一个不包含光照(但包含雾效)的基本顶点/片元着色器。

  2. 如果你想创建一个Surface Shader,可以选择Standard Surface Shader(标准表面着色器),它是一个包含了标准光照模型的表面着色器模板。

  3. 如果你想使用Standard Shader,很可惜不能自行撰写,但是可以通过选择的方式去使用。找到检视窗口(Inspector)中所需渲染对象的材质(Material),展开Shader选项卡,第一个Standard就是PBR的Standard Shader;第二个有Specular Setup的就是预制高光运算的Standard Shader。

1e931395-0d92-47d2-bada-774b4a42b9fb_image.png

Vertex/Fragment Shader 流程图

作为Unity着色器系列课程的入门,这篇主要介绍的是顶点/片元着色器,因为它是一切的基础。下面我们就具体拆解这个Shader的实现流程。

第一步:数据引入

8c4c72d7-831c-428c-a589-8757963790d8_image.png

在世界三维空间中,一开始传入Shader处理的数据其实就是网格数据(Mesh Data)。

在演示应用按T键,切换到下面的画面效果。

499402ef-cded-4aba-8ad9-1c87f6c251df_image.png

但是一般情况下,光是网格数据不能满足我们处理画面的需求,这时就需要引入一些常数属性数据(Properties)。点击打开“常数属性数据”窗口。

dc43542d-7292-4f67-bebd-6d7c1955b728_image.png

这些“属性”就是Shader的变量,可以有资源(Assets)、脚本(Scripts)和动画数据(Animation Data)来驱动表现效果,甚至是粒子系统(Particle System)也能作用(详见《Unity粒子遇上着色器》),而这些数据可在顶点(Vertex)函数和片元(Fragment)函数中使用。

属性的声明规则如下:

_Name(“Display Name”, type) = defaultValue[{options}]

  1. _Name 是属性的名字,也就是变量名,在之后整个Shader代码中将使用这个名字来获取该属性的内容 ,切记要添加下划线。

  2. Display Name 这个字符串将显示在Unity的Inspector中作为Shader的使用者可读的内容 ,即显示的名称。

  3. type 属性的类型。常用的有这个几种:Color颜色,一般为RGBA的数组;2D纹理,宽高为2的幂次尺寸;Rect纹理,对应非2的幂次尺寸;Cube立方体,即6张2D纹理组成;Float和Range,都是浮点数,但是Range要求定义最大值和最小值,以Range(min,max)形式显示;Vector四维数。

  4. defaultValue 默认值,与类型直接挂钩。一开始赋予该属性的初始值,但是在检视窗口中调整过属性值之后,不在有效。Color 以0~1定义的rgba颜色,比如(1,1,1,1);2D/Rect/Cube,对于纹理来说,默认值可以为一个代表默认tint颜色的字符串,可以是空字符串或者“white”,“black”等中的一个;Float和Range 为某个指定的浮点数;同样,Vector的是一个四维数值,写为(x,y,z,w)的形式。

  5. Options 可选项,它只对2D,Rect或者Cube纹理有关,一般填入OpenGL中TexGen的模式,这篇的内容暂未涉及,就先以{}形式。

这样我们可以尝试解读上图中的那些属性声明的是什么了。比如_MainTex(“A Texture”, 2D) = “”{},就是声明了一个变量名为_MainTex的2次幂尺寸纹理,它在检视窗口中显示的名称是A Texture,默认是空的。

点击打开“网格数据”

f88f55f8-c1ee-4cc5-9dcd-f365b21cf903_image.png

Mesh网格如上图右边所示,它的数据需要组织成结构体(Struct)形式输入给顶点函数(Vertex Function)。而左边的就是输入结构体appdata,可以根据需要命名变量与类型,当然不能忘记添加冒号以及后面的语义。

语义是什么,语义(Semantics)是附加到着色器输入或输出的字符串,其传达关于参数的预期使用的信息。 对于在着色器级之间传递的所有变量,都需要语义。通常,在流水线级之间传递的数据是完全通用的,并且不被系统唯一地解释;允许任意语义没有特殊意义。 详细请看这里

将右边图片向上滑动:

f638d00f-b010-442a-97b0-6baf398db90b_image.png

如果要将网格数据直接渲染出来,我们应该可以看到像上图右边机器人顶点显示的效果。

第二步:顶点函数

点击“顶点函数”:

66c3956b-cf05-4edc-805f-a120347dba48_image.png

顶点函数是用来“构建”对象的,输入的是appdata,即组织好的网格数据。经过一定处理后,输出的将是顶点到片元结构体,即Vertex to Fragment,一般简称v2f。当然,这里的结构体与用于输入顶点函数的结构体都可以随便命名,只不过这里习惯以这种命名方式。

输入的顶点数据是需要从对象空间转换到屏幕空间,而顶点渲染到屏幕空间上就会以上图右边的情况显示出来。在Unity 5早期版本一般使用 mul(UNITY_MATRIX_MVP, IN.vertex)方式去处理,即 Model * View * Projection获得顶点对应到屏幕上的位置。但是这种方式效率不高,现在使用UnityObjectToClipPos函数方式直接处理顶点(vertex)信息。调用这个方法一般需要引入UnityCG.cginc预定义文件,通过#include “UnityCG.cginc”实现。向左滑动可以看到这个函数的具体实现方式。

第三步:顶点到片元结构体

点击“顶点到片元结构体”

b6532a3d-1544-4eb0-9770-1c9b9700b38c_image.png

这个结构体是中间数据,用于存储从顶点函数(Vertex Function)输出到片元函数(Fragment Function)输入的数据。这个结构体也可以添加其他的变量,比如normalAngle,calculatedLightingColor等。

向左滑动:

0b0dc8b2-8b63-48e7-b7bf-d7533a2a206e_image.png

到这里你们应该会发现,用在Shader中的变量有些特殊,比如float就有float4,float3,float2等。数字就对应的维度数量,像float4代表这是一个四维的浮点数变量,对应的四个值可以分别对应X,Y,Z,W,或者是颜色值R,G,B,A。

再向左滑动:

4734feaf-2379-490a-897d-6976aa7477ae_image.png

浮点数也因精度的不同可以设置不同的变量。float是高精度的,一般为32位;half是中精度的,一般为16位;fixed是低精度的,一般为11位。在实际开发中,会根据性能需要选用合适的精度。比如颜色值RGBA,每个值域是0~1,而fixed值域是0~2,因此使用fixed4足够表现所有颜色值。

第四步:片元函数

点击“片元函数”:

d81b5035-69e1-416f-afa1-f4b8e69834ab_image.png

片元函数(Fragment Function),通常用于将对象描绘到屏幕上,它输入的是v2f结构体数据,而输出的就是像素点。使用CG方法tex2D,输入参数纹理及UV坐标,就可以获得每个UV对应点的纹理的颜色。最后我们就可以看到如上图右边的机器人效果了。

今天就为大家分享到这里,后面还将继续为大家揭开着色器的神秘面纱,请保持关注!

 

下期预告:

Unity着色器训练营:入门篇(下)

转载于:https://my.oschina.net/u/4102687/blog/3026509

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值