咨询电话:400-810-1418服务与监督电话:400-006-6572

Shader图文教程制作一只妙蛙种子

发布时间:2020-01-07 09:07:57

Hello,大家好!这次带来了一份Shader图文教程,制作一只妙蛙种子。面向有意了解Shader模块的美术端的同学,基于ASE,不包含程序优化,所以本文不会涉及很多程序内容,只介绍一些简单的Shader编写基础。

1.webp.jpg

首先,我准备了模型和贴图,网上下载的,链接在最下面。

我们将模型贴图文件导入Unity,取消材质动画摄像机等导入勾选。并且在Scene内搭建一个实时平行光源和一个点光照暗面。

2.webp.jpg

光照强度为1.25

新建一个Amplify Shader(基于表面着色器)和一个材质球,然后双击Shader弹出ASE编辑器。

左侧设置如下图,

Shader Name设置你的名称和路径,斜杠代表子目录,(脚本内原理相同)

Light model选择自定义灯光模型

剔除背部

前向渲染

Shader LOD   200

Render type/Queue为不透明的几何体

以上就是我们的Tags标签设置,我们来看一下代码

3.webp.jpg

代码内引用了一些带有.cginc的内置文件,如果您想看这些文件,可在Unity官网下载源码包,找到这些文件。看看在辅助代码中到做了啥。

4.webp.jpg

除此以外,我还勾选了Outline描边,同样的,我们来看看Tags

5.webp.jpg

外描边剔除了正面(即摄像机正对的面),并且定义了一堆不要的东西。

好,正文开始

我们首先新建一个World normal(世界空间法线)和World Space Light Dir(世界空间光)节点,再新建一个Texture sample节点,引入我们的法线贴图(记得法线贴图导入要将类型选为法线,否则不认的)

6.webp.jpg

6-2.webp.jpg

这里我们要把贴图类型标明为Bump,勾选Unpack。这里对于标记为Unpack小科普:在检查器中将法线贴图标记为法线贴图时,法线贴图会丢失其alpha通道,但是,在牺牲Alpha通道的同时,可以极大地提高压缩质量,从而提高了法线贴图的保真度,从而减少了压缩伪影,使整体法线贴图看起来更好。

7.webp.jpg

我们可以将法线理解为一个三维向量,如果你想提高法线强度,让他和一个数值相乘就可以。

好,废话少说,我们对这两个得到的值进行第一次计算,将他们Dot(点积)

这里我们就得到了第一个值,该值的公式(点积公式)为:Nx*Lx+Ny*Ly+Nz*Lz

8.webp.jpg

8-2.webp.jpg

接下来,我们继续创建一个世界空间法线和一个View Dir(查看方向)节点然后点积。

这个节点由“ 空间”参数定义的坐标空间上输出当前摄像机查看的视图方向。

我们用来做菲涅尔效果,脑补一下菲涅尔啥样,不会的去拖出去枪毙五分钟。虽然有现成的菲涅尔节点。

9.webp.jpg

下面,我们创建一个Scale and Offset(缩放和偏移),按1快捷键创建一个Float,同一个值控制两个参数,并且刚才世界法向量和世界空间光向量点积值。然后对其进行钳制输出不要大于1。

10.webp.jpg

创建两个Tex类型的Properties,一个用来放贴图,一个用来放卡通独有的强烈明暗交接

11.webp.jpg

我们观察一下塞尔达传说的光照,是由强烈的明暗交接的,这里可以自己写一个,我这里就效仿官方Demo内的方式,直接用一个强明暗交接过渡的贴图,长这样(卧槽还有中文,没错命名我都懒得改,最近在公司改的快吐了,有因必有果,我的报应就是我)

12.jpg

然后相乘一下(那一天,人类回忆起了被向量乘法支配着的恐怖,以及被被矩阵变换折磨的屈辱。)。

13.webp.jpg

OK,这里扔着不管了

接下来我们要细化一下菲涅尔和细化一下光照

新建一个值控制菲涅尔的强度,然后钳制输出在1内,最后用1减去这个值。

14-1.webp.jpg

14-2.webp.jpg

放着先不管,我们再新建一个Light Color光色和一个Light Attenuation光线衰减还有一个Indirect DiffuseLight间接漫反射

我们来看看这个光色节点,这货获取了我们空间内的灯光颜色和强度,RGBA通道输出的是下面两个乘积的结果。

15-1.webp.jpg

15-2.webp.jpg

然后将他们相加,我们就得到了一个带有背面GI感觉的光照模型,舒服。

Ops,还没有颜色,那就在和颜色相乘一下吧。

16.webp.jpg

如果你感觉不够强烈,还可以反向一波和颜色相乘补一补光,这个就看个人喜好吧,每个人的审美不一样

17.webp.jpg

现在长这样了,恶龙咆哮有没有?

18.webp.jpg

最后我们来细化细化一下菲涅尔。

没什么要说的了,就是接入世界空间光,控制菲涅尔强度和颜色相乘就完事了。

19.webp.jpg

最后将他们汇总到一个return里面,接入自定义光照,完美!

20.webp.jpg

我们来看一下整体节点流程图和效果图

21.webp.jpg

最后反复调整,加上后处理修饰修饰,什么的,能堆的就堆,什么性能不性能的,就是怼。

22.webp.jpg

来源:Thepoly