请选择 进入手机版 | 继续访问电脑版

查看: 6284|回复: 2

[原创] Amplify Shader Editor入门教程

[复制链接]

820

主题

1454

帖子

1万

贡献

管理员

Rank: 9Rank: 9Rank: 9

积分
18775
QQ
发表于 2017-3-1 01:40:50 | 显示全部楼层 |阅读模式
如果您想使用Unity轻松创建AAA级质量的作品,请不要错过本文!我们一起来学习一下Asset Store资源商店上十分畅销的着色器创建工具Amplify Shader Editor的基础使用方法。

我们曾经为大家介绍过Unity中实现AAA级场景的办法,其中着色器的使用是很重要的,想必您也想亲自上手制作一下了。本文我们一起学习使用Amplify Shader Editor这款基于节点的着色器创建工具,实现属于自己的AAA级场景。

Amplify Shader Editor的功能
Amplify Shader Editor是行业领先开放且紧密集成的解决方案,它提供了一个Unity开发者易于上手的开发环境,可以与Unity编辑器和着色器使用无缝融合。通过这款工具,开发者能轻松实现AAA级质量的作品,并能灵活地应用在任何Unity项目开发之中,进而大大缩短了制作团队在美术效果上的迭代时间。而这些也正是其在Asset Store资源商店上如此畅销的重要原因。

1.PNG

b.gif


通过这款插件,您有可能实现一些AAA级场景的惊人效果,例如:

dissolve_burn_fx.gif
溶解(Dissolve Burn Fx)


triplanar_mapping.gif
三维映射(Triplanar Mapping)


translucency.gif
半透明(Translucency)


parallax_mapping.gif
视差映射(Parallax Mapping)

dithering.gif
抖动(Dithering)


fake_interior.gif
Fake Interior


不仅如此,它还含有更多特效等您发现。

c.gif


下载链接:
https://www.assetstore.unity3d.com/en/#!/content/68570

下面就一起来学习一下使用方法吧!

安装

安装Amplify Shader Editor只要以下三步就可以完成。

1. 第一步
打开Unity项目工程,双击您下载好的文件中的Amplify Shader Editor.unitypackage导入工程中。

2.png


或者通过依次点击 Assets → Import Package → Custom Package…,选择Amplify Shader Editor.unitypackage进行导入。

3.PNG

2. 第二步
在Unity解包进度条结束后,在“Importing package”窗口全选所有项目并点击“Import”按钮导入所有资源。

4.png

3. 第三步
为了更好地理解,一起了解一下Amplify Shader Editor目录结构:

4.PNG


从项目目录中我们可以发现,Amplify Shader Editor预先提供了不少着色器示例,每个示例都有单独Scene(场景)做展示,可以供使用者根据自身需要使用。

编辑界面简介

1. 打开Amplify Shader Editor编辑器界面

5.png


依次点击Window → Amplify Shader Editor → Open Canvas打开编辑器画布(Canvas)界面;或者可以双击Amplify Shader Editor(下文简称ASE)材质或着色器自动打开画布界面。

2. 创建Amplify表面着色器(Surface Shader)

6.PNG


在项目(Project)界面选中资源文件夹的情况下,依次点击 Assets → Create → Shader → Amplify Surface Shader创建;或者依次点击右键 → Create → Shader → Amplify Surface Shader进行创建。

3. 打开ASE着色器
双击ASE着色器文件可以在ASE画布中打开它。

7.PNG


或者您可在选择ASE着色器文件的情况下,通过检视面板(Inspector)的“Open in Shader Editor”按钮打开文件。

8.png


4. 着色器文件名命名
您可以直接在节点属性(Node Properties)选项卡的着色器名称(Shader Name)项目进行着色器文件名的设置,可以使用正斜杠(/)分隔符添加自己的类别。

9.PNG


注意:着色器文件名是唯一的,必须在项目(Project)界面中手动设置。实际上,将文件名与实际着色器可以使用不同名称。

5. 定位ASE着色器

10.png


此区域在画布的左下角,显示当前的着色器,单击这块可以将这个ASE着色器在项目界面中定位出来。绿框的边缘显示提示当前打开的着色器。

6. 查看ASE材质
双击ASE材质文件可以在ASE画布中打开它。

11.png


7. 定位ASE材质文件

12.png

与ASE着色器操作相同的是,单击左下角也能定位对应ASE着色器文件,单击右下角可以定位对应ASE材质文件,而且ASE材质的话是蓝色框体的边缘显示。

画布的UI交互

1. 节点属性界面

13.png


14.png
选中着色器主节点的节点属性


15.png
选中发射器(Emission)的灰烬颜色(Ember Color Tint)节点的节点属性


通过单击画布中的各个节点(Node),被选中的节点会呈现橙色框高亮状态。该节点的属性就会在画布左侧的节点属性界面中显示出来,您可以根据需要调整节点的属性。如果未选择节点或多个节点,则显示主节点的属性。

如有需要,可以通过点击界面右上角的“-”按钮,将界面最小化;通过点击“方块”按钮将界面恢复。

node-properties-min-open.gif
打开与最小化节点属性界面


2. 画布顶端区域
画布左上区域 — 四个基本操作按钮:
17.png 保存按钮:手动保存/更新着色器数据。修改着色器名称只有在点击这个按钮之后才会正式生效。
18.png 自动切换按钮:切换自动保存/更新着色器数据。
19.png 清除按钮:删除已经断开连接的节点。
20.png 文本编辑按钮:将着色器文件在文本编辑器中打开

画布中间顶端区域 — 显示该着色器的类别与名称:

21.png


画布右上区域 — 两个界面调整按钮:
22.png 回归按钮:选中并定位主节点
23.png 定位按钮:定位原选中的节点。如果原来没有选择节点,将会定位整个节点集合。

您也可以通过双击左键或者双击键盘“F”键,进行画布界面的自动缩放。

3. 节点选项板界面

24.png


位于画布右侧的节点选项板界面是个可搜索节点类型的列表,您可以在其中找到所需要的节点类型,并直接将其拖放到画布区域。同左侧的节点属性界面一样,也可以点击“-”按钮将界面最小化。

在画布上点击右键,也可以打开快捷节点选项板界面,进行节点的选择使用。

25.png


4.快捷键直接创建节点
画布上还有一个重要操作就是可以按住快捷键,然后单击画布上的任意位置以创建新节点。一般在节点选项板界面中快捷键会显示对应节点名称右侧的“[]”内。比如:数字键“1”用于浮点(Float)节点,数字键“5”则是创建颜色(Color)节点。

26.png


5. ASE处理数据流

27.jpg


从上图我们可以发现,ASE的数据流处理是从左至右的,即输入端口 → 处理数据 → 输出端口。只有直接或间接连接到主节点的节点才会被分析,并用于最终生成着色器指令。如果节点包含未连接的输入端口,ASE将在处理阶段使用内部数据,而这些内部数据值可以通过节点属性界面进行编辑。

6. 可视化编辑重要元素

28.jpg


  • 选择节点:节点可以通过单击左键或左键拖动框选择。 通过按住“Shift”键并单击它,可以从选择中添加或删除节点。可以按“CTRL/CMD + A”进行全选。您也可通过在节点画布上的空白处单击左键来取消选择所有内容。按住左键并拖动则可以移动所选节点。当节点不需要的时候,可以选中节点按键盘delete键进行删除。

  • 连线:通过按住“Alt”键并单击节点端口,或将连接拖动到画布空白处再点击左键,就可以删除连线。当连线有完整的前后端口连接,它就会高亮显示,表示它拥有从左至右完整的数据流。

  • 连接:单击左键就可以创建连接,拖拽连线从输出端口到输入端口,或者从空输入端口到输入端口就可以完成连接。您还可以点击完整连线的端口进行切断,并拖到另一个端口形成新的连接。将连线拖到画布空白空间,会自动弹出快捷节点选项板界面,可以根据需要选择节点类型建立新的连接。

  • 端口:输出端口可以连接多个输入端口,但是输入端口只接受单个输入。连线还会自动捕捉到鼠标光标附近的端口。有效端口的区域很大,使得操作更为舒适。您甚至可以直接将连线放到端口名称上。

  • 视图:按住右键或者中键可以平移整个画布的视图。当选中的框体或节点离开了可视范围后,画布将自动滚动。您还可通过滚轮放大或缩小视图显示,缩放的大小是根据画布上节点布局而定的。

  • 两侧界面:当ASE整体界面的宽度小于750px时,节点属性界面和节点选项板界面会自动最小化。


材质模式与着色器模式

29.jpg


您可以选中使用ASE的着色器模式或者材质模式,这主要取决于您加载着色器文件的方式。通过画布的框体轮廓颜色来判断,绿色轮廓代表着色器模式,蓝色则为材质模式。

30.jpg


在着色器中设置的值通常称为默认值(Default Value)。对任何给定着色器的默认值所做的任何更改将自动影响使用它的所有材料。当同时编辑材质和着色器时,请密切注意哪些值正在被改变。

31.jpg


与着色器中的默认值不同,材质值可以是唯一的。 材料值仅在材料模式(材质和着色器打开)下工作时显示。只有表示变量(颜色Color,浮点数Float,整数型Int,向量Vector,矩阵Matrix)的节点有一个Parameter Type下拉菜单,可以设置为Property。选择属性或统一参数类型时,默认值始终复制到材质值。每种材料都可以调整,以便创建无限数量的变化,同时仍然使用相同的着色器。您可以将材质视为着色器实例,每个实例都是唯一的,但使用相同的默认值集创建。

32.jpg


如上图所示,您可以使用相同的ASE着色器在材质之间进行属性值的复制与粘贴。“Open in Shader Editor”按钮也提供了快速打开Amplify Shader Editor去编辑着色器和材质的方法。

33.jpg


除了通过“Open in Shader Editor”按钮以ASE编辑着色器,您还可以选择点击“Open in Text Editor”按钮,使用文本编辑器来修改着色器。

可视化调试模式

启用这个模式的方式是,按住键盘P键,就可使用可视化调试模式查看节点网络。双击P键进行切换。

主节点详解
其中大部分内容参考Unity着色器官方文档:
https://docs.unity3d.com/Manual/SL-Reference.html

1.主属性(Main Properties)

33.jpg


  • 着色器类型(Shader Type):此区域显示所使用的当前着色器类型。

  • 着色器名称(Shader Name):可编辑文本框,定义着色器的名称和路径。使用正斜杠“/”定义其类别和名称,例如UserSamples / EnvironmentGradient。请注意,此框中显示的名称与文件名不同,必须单独设置。

  • 光照模型(Light Model):定义表面如何反射光,通常称为所使用的着色器类型。 ASE目前提供标准(金属 Standard(Metallic))、标准镜面(Standard Specular)、Lambert和Blinn Phong。

  • 着色器模型(Shader Model):当编写表面着色器或常规着色器程序时,HLSL源可以编译成不同的“着色器模型”。更高的着色器编译目标允许使用更多的现代GPU功能,但可能使得着色器不能在较旧的GPU或平台上工作。

  • 精度(Precision):定义内部计算的精度,使用较低类型提供了额外的性能提升以换取一些精度。默认设置为Float。

  • 剔除模式(Cull Mode):Front – 剔除前向几何体,Back – 剔除后向几何体,关闭 - 禁用剔除(双面材料)。默认情况下设置为Back。

  • 渲染路径(Render Path):允许您定义着色器支持哪种模式(提前Forward / 延时Deferred)。默认设置为全部。

  • 投射阴影(Cast Shadows):定义使用着色器的对象是否投射阴影。

  • 接收阴影(Receive Shadows):定义使用着色器的对象是否接收阴影,这包括自阴影(只有使用正向渲染)。

  • 队列索引(Queue Index):渲染队列偏移值,接受正(较晚)和负(较早)整数。

  • 自定义编辑器(Custom Editor):自定义检查器允许您自定义ASE材料检查器。


2. 混合模式(Blend Mode)

34.jpg


  • 混合模式(Blend Mode):所选模式自动调整可用参数;不透明(Opaque),遮罩(Masked),透明(Transparent),Alpha预乘(Alpha  Transparent)或自定义(Custom)。

  • 渲染类型(Render Type):该标记将着色器分为几个预定义组。可用标签:不透明(Opaque),透明(Transparent),透明抠出(Transparent Cutout),背景(Background),覆盖(Overlay),不透明树(Tree Opaque),透明树剪出(Tree Transparent Cutout),布告板树(Tree Billboard),草和布告板草皮(Grass and Grass Billboard)。

  • 渲染队列(Render Queue):为了获得最佳性能,通过几何体渲染队列排布,从而优化对象的绘制顺序。所有其他渲染队列按距离对对象进行排序,从最远的那些开始渲染,并以最接近的结束。可用选项有背景、几何、Alpha测试、透明和覆盖。

  • 掩码片段值(Mask Clip Value):要与不透明度alpha比较的默认值。 0完全不透明,1完全掩蔽。默认设置为0,常用于透明抠出(Transparent Cutout)材质。

  • 混合RGB和混合Alpha(Blend RGB and Blend Alpha):当渲染图形时,在所有着色器执行并且所有纹理都应用后,像素被写入屏幕。它们如何与已经存在的内容组合由Blend命令控制。 ASE目前提供定制、Alpha混合(Alpha Blend)、预乘(Premultiplied)、加法(Additive)、软加法(Soft Additive)、乘法(Multiplicative)和2x乘法(2x Multiplicative)模式。

  • 混合因子(Blend Factor)(SrcFactor & DstFactor):以下所有属性都适用于混合命令中的SrcFactor&DstFactor。源指的是计算的颜色,目标是已经在屏幕上的颜色。如果BlendOp使用逻辑运算,则忽略混合因子。


36.PNG


  • 混合操作RGB和混合操作Alpha(Blend Op RGB & Blend Op Alpha):添加(Add)、子(Sub)、修改子(Rev Sub)、最小(Min)和最大(Max)。

  • 颜色蒙版(Color Mask):设置颜色通道写入蒙版,将其全部关闭使其不可见。


3.模板缓冲(Stencil Buffer)

35.jpg


模板缓冲器可以用作每像素掩模的通用目的,用于保存或丢弃像素。它通常是每个像素8位整数。该值可以写入、递增或递减。 后续绘制调用可以根据该值进行测试,以决定是否应该在运行像素着色器之前丢弃该像素。

  • 参考(Reference):要比较的值和/或要写入缓冲区的值(如果Pass,Fail或ZFail设置为替换)。范围是0-255整数。

  • 读取掩码(Read Mask):作为0-255整数的8位掩码,用于将参考值与缓冲区(referenceValue&readMask),比较方法comparisonFunction(stencilBufferValue&readMask)的内容进行比较。默认值是255。

  • 写掩码(Write Mask):8位掩码,作为0-255整数,写入缓冲区时使用。默认值是255。

  • 比较(Comparison):用于将参考值与缓冲区的当前内容进行比较的函数。默认值是always。

  • 通过(Pass):如果模板测试(和深度测试)通过,对缓冲区的内容做什么。默认值是keep。

  • 失败(Fail):如果模板测试失败,对缓冲区的内容做什么。默认值是keep。

  • ZFail(ZFail):如果模板测试通过,则缓冲区的内容如何处理,但深度测试失败。默认值是keep。


4. 曲面细分(Tessellation)

36.jpg


  • 冯氏曲面细分(Phong):修改细分面的位置,使得生成的面稍微跟随网格法线,默认设置为OFF。

  • 类型(Type):定义所使用的技术,基于距离、固定、边长和边长Cull。

  • 曲面细分因子(Tess):范围是1-32。

  • 最小值(Min):最小细分距离。

  • 最大值(Max):最大细分距离。


5. 深度(Depth)

37.jpg


  • ZWrite模式(ZWrite Mode):控制来自此对象的像素是否写入深度缓冲区(默认为开)。如果你画的是实体对象,请保持此状态。如果您绘制半透明效果,请切换到ZWrite Off。

  • ZTest模式(ZTest Mode):如何进行深度测试。默认值为LEqual(将对象从现有对象或远距离绘制为现有对象;隐藏其后面的对象)。 ASE提供ZTest 小于(Less)、大于(Greater)、小于等于(LEqual)、大于等于(GEqual)、等于(Equal)、不等于(NotEqual)和通常(Always)。

  • 偏移(Offset):允许您使用两个参数指定深度偏移 — 因子和单位。因子相对于多边形的X或Y缩放最大Z斜率,单位缩放最小可分辨深度缓冲区值。这允许您强制一个多边形绘制在另一个顶部,虽然它们实际上在相同的位置。例如,偏移(0,-1)拉动多边形更接近相机忽略多边形的斜率,而偏移(-1,-1)将拉近多边形,看看掠角。

  • 因子(Factor):相对于多边形的X或Y,缩放最大Z斜率。

  • 单位(Units):单位缩放最小可分辨深度缓冲区值。


6. 渲染平台(Rendering Platforms)
定义支持哪些平台, 默认设置为全部。

38.jpg


7. 可用属性(Available Properties)
设置为属性(Property)的变量将在此部分中列出,您可以通过拖动它们来调整它们的位置。

39.jpg

动手实现第一个ASE着色器

40.jpg


1. 第一步
在项目窗口右键 → Create → Shader → Amplify Surface Shader创建ASE着色器,并重命名为MyShader。右键 → Create → Material创建材质,重命名MyMaterial。选中MyShader,在检视面板(Inspector)点击“Open in Shader Editor”打开ASE编辑器。在“节点属性界面”将着色器的名称修改为“MyCollection/Shader1”并保存。您可以将材质拖到画布的“Material”上建立关联。

37.jpg


2.第二步
修改“光照模型”为Standard Specular。

38.jpg


3.第三步
在画布右键打开“快捷节点选项板界面”,输入“Lerp”,点击生成Lerp节点,将其输出节点连接到主节点的Albedo的输入端口上。

39.jpg


4.第四步
键盘按下5键,左键单击画布,快捷生成Color节点;或者可以在右边的“节点选项板界面”搜索Color,找到并添加到画布上。

40.jpg


5.第五步
选中新生成的Color节点,点击”CTRL / CMD + D”复制它。将两个节点连接到Lerp输入端口。将第一个节点设置为灰色连接到A节点,将第二个节点设置为更鲜艳的颜色连接到B节点。

41.jpg


6.第六步
通过右边的“节点选项板界面”再创建一个Float节点,将其连接到Lerp节点的Alpha端口。将这个节点属性的最小值设置为0,将最大值设置为1。请注意,浮点现在可以由滑块控制。不要忘记将其Parameter Type(参数类型)设置为Property(属性),这样您就可以直接在材质中更改它。现在把它命名为Color Mix。

42.jpg

7. 第七步
创建一个新的浮点并将其连接到主节点的Smoothness(平滑)输入端口,将其最小值设置为0,最大值设置为1,将其类型设置为Property,并将其命名为Smoothness Level。 创建另一个浮点并将其连接到Specular(高光)输入端口,将其最小值设置为0,最大值设置为1。将其类型设置为Property,并将其命名为Specular Level。



43.jpg

8. 第八步
另外再找一张发现贴图Brushed,直接从拖到画布上,这样就生成了一个法相贴图的节点,将它连接到主节点的Normal(法线)输入端口上。因为这张法线贴图有种拉丝的金属质感,所以我们得到的着色器会有这样的效果。

恭喜您!我们成功构建了第一个着色器。不要忘记通过单击位于左上角的更新按钮定期保存您的工作,或者您可以在启用LIVE模式的情况下编辑着色器,任何更改都会立即保存和更新。根据着色器的复杂性,LIVE模式可能需要一秒左右的时间来更新。与默认着色器值相反,对材质属性所做的任何更改都会立即显示。

总结
希望本篇入门教程可以帮助您获得更多的启发,如果您亲自动手创建好了着色器,不妨和大家一起展示您的作品,或者如果想要了解更多相关文章,欢迎访问Unity官方平台。


默认标题--设计创建于创客贴 (2).png

更多Unity相关教程
Unity 2D技术与实例教程集锦
在Unity 5中创建3A级场景
Unity中的Daydream开发与实例
Unity实时阴影实现图解
使用Unity进行增强现实中的光照和阴影的渲染

近期活动
活动一:2017 Unity技术路演 — 华南站将于3月6日开启,仅剩4天!报名从速。详情请关注2017 Unity技术路演正式启动,3月华南区报名开启

活动二:Unite 2017 Shanghai将于5月11 - 13日在上海国际会议中心举行!不到5折的超值早鸟票现已开售!赞助商招募已经开始!详情请关注“再一次问候” - Unite 2017 Shanghai 正式开启

19.PNG

8

主题

117

帖子

1365

贡献

中级UU族—2级

Rank: 5Rank: 5

积分
1360
发表于 2017-3-1 02:42:03 | 显示全部楼层
太棒了,学习下,谢谢

0

主题

1

帖子

10

贡献

初级UU族—1级

Rank: 1

积分
10
发表于 2017-7-3 11:01:36 | 显示全部楼层
帅气的编辑器
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表