[Shader] Shader Cookbook Shader Graph – 3D[9](完结)

最新推荐文章于 2023-06-25 17:31:33 发布
最新推荐文章于 2023-06-25 17:31:33 发布
阅读量327 收藏
点赞数
分类专栏： Shader Unity 文章标签： unity shader
Unity 同时被 2 个专栏收录
246 篇文章 39 订阅
订阅专栏
Shader
56 篇文章 2 订阅
订阅专栏

  在前一章中，我们介绍了Shader Graph及其在2D游戏中的一些可能的用例。在本章中，我们将探索3D项目中 Shader Graph 的其他用途，并利用高清渲染管道(简称HDRP)

  HDRP只针对高端硬件，如pc和游戏机，如Xbox One/S和PlayStation 4/5。它适用于高保真度的游戏、图像演示、建筑渲染器以及其他需要最佳图像的东西。

  这并不是说HDRP是高性能的。在做复杂的图形处理时，它比标准渲染管道快得多;但如果你想要的是一款更简单的游戏，这可能就有点过头了。另一件需要记住的事情是，通常情况下，HDRP需要做更多的工作才能充分利用它所提供的所有功能。这是因为你将不得不创建几个额外的纹理贴图，除了什么将传统上用于每个材料。这意味着HDRP通常需要更大的团队和更大的预算。如果您是图形工程师，或者您的团队超过5人，建议您只使用HDRP，以适应额外的工作负载。

  必须注意的是，图像和美学是两个独立的东西，让游戏“看起来不错”的往往是美学，而不是所使用的图像硬件。

  HDRP提供的主要好处在于它的照明系统，因为它提供了诸如实时全局照明(模拟照明反射的方式)和体积照明(模拟光通过空气中的粒子)等功能。它还提供了光线追踪，这是一种渲染光、反射和阴影的高级方法，以一种更类似于光在现实生活中的传播方式。这个功能在计算上很昂贵，但是电影工作室经常使用它来创建预渲染的图像。

在本章中，你将学习以下食谱:

  • 实现发光高亮系统
  • Unity中的传送门着色器

实现发光高亮系统

  首先，让我们看一个我们可能会用到的着色器的真实例子。在玩某些类型的游戏时，你可能会注意到，当玩家面对他们可以互动的对象时，该对象可能会发光，例如Dontnod Entertainment的《奇异人生》，the Fullbright Company的《到家》，甚至是最近的手机游戏如Jam City的《哈利波特:霍格沃茨的秘密》。这是我们可以在Shader Graph中很容易做到的事情，这也将允许我们看到一个使用Shader Graph的非平凡的例子。

准备

  确保你已经使用在第13章，Shader Graph - 2D中创建一个基于udp的Shader Graph项目配方中提到的可脚本渲染管道创建了一个项目。为了本章的目的，我们将使用HDRP，所以在创建新项目时，您可以选择High - definition RP/3D Sample Scene (HDRP)而不是URP选项。

NOTE
在新版本的Unity中，选择被分为室内和室外场景。

之后，完成以下步骤:

  1. 创建一个新场景，如果你还没有这样做，通过 File | New Scene。
  2. 之后，我们需要一些东西来显示我们的着色器，所以让我们通过到GameObject | 3D Object | sphere创建一个新的球体。

在这里插入图片描述

怎么做……

我们将开始创建一个简单的 Shader Graph:

  1. 在项目窗口中，通过创建| shader | HD Render Pipeline | Lit shader Graph创建一个新的着色器，并将其命名为GlowGraph。

NOTE
在新版本的Unity中，你可能会看到菜单选项为Create | Shader Graph | HDRP | Lit Shader Graph。

在这里插入图片描述
2. 然后，通过create | material(我将我的命名为GlowGraphMat)创建一个新材料。接下来，通过选择材质来为材质分配着色器，然后，从检查器选项卡中，你应该选择顶部的着色器下拉菜单，然后选择Shader Graphs / GlowGraph。
3. 然后，将材质拖放到场景中的球体对象上，这样我们就可以看到我们的着色器正在被使用。
4. 既然设置已经完成，我们就可以开始创建图形了。如果你选择着色器，你应该会看到，在检查器选项卡中，会有一个按钮说打开着色器编辑器。点击按钮，着色图形编辑器将自动打开。
5. 首先，我们将添加一个名为菲涅耳效应的新节点。要添加它，转到Fragment节点的左边，右键单击并选择Create node。从那里，输入Fresnel，一旦选中，按Enter键。

NOTE
菲涅尔效应常用于为物体提供边缘照明。有关它的更多信息，请查看 https://docs.unity3d.com/Packages/com.unity.shadergraph@12.0/manual/Fresnel-Effect-Node.html

  1. 一旦创建，连接出菲涅耳效应节点到策略路由主节点的 Emission 属性。

  2. 为了更容易地判断每个节点的功能，单击Albedo属性左侧的灰色，并将其更改为不同的颜色，例如亮粉色
    在这里插入图片描述
    注意菲涅尔效应是如何应用在反照率颜色上的，因为它使用了 Emission 属性的值。

  3. 我们只想让对象的边缘发光，因此将菲涅耳效应节点的Power属性更改为4。目前，物体周围的光是白色的，但我们可以通过乘以一种颜色来改变它的颜色。

  4. 要做到这一点，转到Blackboard，点击+图标，然后选择颜色，创建一个新的颜色。创建完成后，给它一个名称(HoverColor)，然后转到图形检查器，将模式更改为HDR。十，设置默认颜色为其他颜色;我用了浅蓝色。请确保将A设置为255。
    在这里插入图片描述
    记住要注意名称HoverColor，因为我们将在后面的代码中使用它; 如果不完全相同，代码将无法正常工作。

  5. 创建之后，按照前面的方法将属性拖放到菲涅耳效应节点下
    在这里插入图片描述

  6. 现在，我们需要把这些乘在一起。通过从节点创建菜单中选择Math | Basic | Multiply在它们之间创建一个新节点。连接菲涅耳效应节点的外到乘法节点的A。然后，连接HoverColor属性到Multiply节点的B。之后，连接出乘法节点到发射属性。
    在这里插入图片描述

  7. 保存图表并回到Unity Editor中。在这一点上，如果你返回场景，你可能会注意到悬停效果没有显示。HDRP场景灯光是基于物理的，这意味着灯光比默认的发射重量要强得多。考虑到这一点，我们将需要增加效果，以便看到它。
    在这里插入图片描述

  8. 回到Shader图形编辑器。创建Power节点。A输入输入10,B输入输入4。然后，创建一个Multiply节点。从电源节点外连接到乘法节点的A。然后，将前一个Multiply节点的Out连接到新创建节点的B。最后，将这个新的Out连接到 Emission 通道。
    在这里插入图片描述

  9. 保存图形并返回到Scene视图。您应该注意到，效果确实如预期的那样工作。

  10. 在Project选项卡中，选择我们已经创建的GlowGraph着色器。注意，Inspector选项卡包含了shader中使用的属性信息。
    在这里插入图片描述

  11. 创建一个新的c#脚本HighlightOnHover。双击它进入您的IDE，并使用以下代码:

using UnityEngine;
using UnityEngine. EventSystems;
public class HighlightOnHover : MonoBehaviour,
IPointerEnterHandler,
IPointerExitHandler
{
	public Color highlightColor = Color. red;
	private Material material;
	// Use this for initialization
	void Start()
	{
		material =
		GetComponent<MeshRenderer>() . material;
		// Turn off glow
		OnPointerExit(null) ;
	}
	public void OnPointerEnter(PointerEventData eventData)
	{
		material.SetColor("HoverColor", highlightColor) ;
	}
	public void OnPointerExit(PointerEventData eventData)
	{
		material.SetColor("HoverColor", Color.black) ;
	}
}
  1. 保存脚本并返回到Unity编辑器。从那里，把组件连接到你的球体。
  2. 接下来，单击MainCamera组件。在检查器窗口中，单击添加组件，并选择物理Raycaster选项。
  3. 之后，点击GameObject | UI | Event System。创建完成后，选择它，并从Inspector窗口中单击Replace with InputSystemUIInputModule。
    在这里插入图片描述
  4. 保存你的场景并开始游戏。
    在这里插入图片描述
    现在，当我们用鼠标高亮该对象时，我们将看到悬停效果，但除此之外，它会自动旋转!
它是如何工作的……

  Emission 属性反射物体接收到的光。如果发射是白色的，它将被完全照亮的颜色。如果是黑色，它就会表现得好像它不存在一样。我们通过默认使用黑色来利用这一点。

  默认情况下，HDRP模板项目使用Unity的新输入系统，它不再允许调用OnMouseOver和OnMouseUp函数。因此，我们添加了一个physicsaycaster来对场景中的3D对象执行每一帧的光线投射。它允许将消息发送到实现事件接口的3D物理对象，这是我们在继承自的MonoBehaviour类之后添加IPointerEnterHandler和IPointerExitHandler时做到的。

  然而，为了真正触发事件，我们还需要场景中的事件系统，这也需要转换为使用Unity的新输入系统。

  添加了这些更改后，如果我们将鼠标放在对象上，OnPointerEnter函数将会触发，导致它使用上面提到的颜色。

Unity中的传送门着色器

  传送门是游戏中经常使用的工具，它可以让用户快速到达不同的地点。它们也给了我们一个机会，看看我们可以如何利用时间来调整我们的着色器，并利用Twist和Voronoi节点的伟大效果。

准备

确保你已经使用在第13章，Shader Graph - 2D中创建一个基于udp的Shader Graph项目配方中提到的可脚本渲染管道创建了一个项目。为了本章的目的，我们将使用HDRP，所以在创建新项目时，您可以选择High - definition RP/3D Sample Scene (HDRP)而不是URP选项。然后，完成以下步骤:

  1. 创建一个新场景，如果你还没有这样做，通过 File | New Scene。
  2. 之后，我们需要一些东西来显示我们的着色器，所以让我们通过进入GameObject | 3D Object | plane创建一个新平面。然后，旋转平面面向相机。
    在这里插入图片描述
怎么做……

我们将开始创建一个简单的着色图:

  1. 在项目窗口中，通过创建| shader | HD Render Pipeline(或HDRP) | Lit shader Graph创建一个新的着色器，并将其命名为PortalGraph。

  2. 之后，通过Create | Material (我将我的命名为PortalGraphMat)创建一个新材料。选中材料后，在检查器窗口的“表面选项”下，选中“Double-Sided”选项，将“表面类型”设置为“透明”。接下来，通过选择材质来为材质分配着色器，然后，从检查器选项卡中，你应该选择顶部的着色器下拉菜单，并选择 Shader Graphs/PortalGraph 。然后，将材质拖放到场景中的球体对象上，这样我们就可以看到我们的着色器正在被使用。
    在这里插入图片描述

  3. 既然设置已经完成，我们就可以开始创建图形了。如果你选择着色器，你应该会看到，在检查器选项卡中，会有一个按钮说打开着色器编辑器。点击按钮，着色图形编辑器将自动打开。

  4. 首先，向图中添加一个Twirl节点。然后，添加一个Voronoi节点。从Twirl节点连接到Voronoi节点的UV输入。
    在这里插入图片描述

  5. 这提供了一个很好的静态传送门，但是我们希望传送门能够移动。打开Blackboard并添加一个名为PortalSpeed的Float变量，然后从Graph Inspector中将其默认值设置为0.25。

  6. 在Twirl节点的左侧，添加PortalSpeed变量和Time节点。在这两个新创建的节点的右侧，添加一个Multiply节点。将PortalSpeed值连接到Multiply节点的A，并将Time输出连接到B输入

  7. 从Multiply节点连接到Twirl节点的offset。如果一切顺利，您应该会注意到Voronoi节点的预览以类似传送门的方式扭曲。
    在这里插入图片描述

  8. 为了隐藏边缘和屏蔽效果，添加一个Texture Sample 2D(或Sample Texture2D)节点。将纹理属性更改为默认粒子纹理。然后，添加一个Multiply节点，将Texture Sample 2D节点的RGBA值连接到Multiply节点的a输入，并将Out of Voronoi节点连接到B输入。
    在这里插入图片描述

  9. 现在，我们希望传送门有颜色。打开黑板并添加一个名为PortalColor的颜色变量，然后从图形检查器中将其默认值设置为绿色，并将模式设置为HDR。

  10. 将PortalColor变量引入图中。然后，创建另一个Multiply节点，将遮罩的结果乘以新颜色。
    在这里插入图片描述

  11. 就像前面的方法一样，我们需要缩放效果来在HDRP项目中很好地工作。为此，创建一个Power节点，然后将值设置为10和2。然后，创建一个Multiply节点，并组合出电源节点和出最后一个Multiply节点。把这个final取出并连接到Fragment的基础颜色，Emission和Alpha通道。
    在这里插入图片描述

  12. 保存图形并返回到场景。你应该注意到plane上有微弱的透明度。要删除它，选择材质，从检查器窗口，取消选中保留镜面照明选项。保存场景并返回Unity Editor。它可能需要一点时间来编译，所以它可能出现在坚实的浅蓝色在一开始，但一旦它完成，继续play。
    在这里插入图片描述

它是如何工作的……

  将着色器标记为双面的意味着它将显示在平面的两边; 这对于传送门如何在游戏中运行非常有用。

  Twirl节点应用的扭曲效果类似于受到黑洞的影响。

Voronoi, Worley, noise 是通过计算像素和点阵之间的距离产生的。通过用一个伪随机数来偏移这些点(由输入角度偏移控制)，就可以生成一个单元群集，根据我们的目的，允许我们有一个程序纹理来处理。

NOTE
欲了解更多信息，请查看: mailto:https://docs.unity3d.com/Packages/com.unity.shadergraph@12.0/manual/Voronoi-Node.html

Unity尧明
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Unity Shader CookBook
09-03
Unity Shader CookBook 英文pdf 绝对的文字版 学习特效的好书
【Unity Shaders】《Unity Shaders and Effects Cookbook》总结篇
weixin_34072637的博客
09-24 277
我的唠叨不知不觉，从发表第一篇关于《Unity Shaders and Effects Cookbook》已经快十个月了。一开始的初衷就是学习笔记，毕竟将来回过头去看的时候，再看英文难免有种急躁感。从一开始几乎只有我一个人在奋斗，到现在时不时有人学习留言或者发邮件鼓励我，能有人和我一起学习我已经很开心了。谢谢所有鼓励和支持我的人~我先说下我的博客里这个系列的特点~首先声明，这不是纯翻译，我的插...
Unity Shaders and Effects Cookbook (1-1) 基本的表面着色器 (Surface Shader)
Hello Captain
03-15 2383
在 Shader 中，对指定的 _EmissiveColor 进行了 以 _EmissivePowValue 为指数的求幂。 在编辑器中对 EmissiveColor 指定的值是 0-255 范围的，这个值在 Shader 中被 规格化为 0-1 。 所以随着 EmissivePowValue 的值越来越大，c=pow(_EmissiveColor,_EmissivePowValue); 这个求的值里面的 RGBA 是越来越小，逼近 0 ，所以慢慢得，方块就变成了黑色。
[UnityShaderCookbook 读书笔记] [01] Unity Shader 基础
Hine的专栏
07-26 732
· 创建 Shader一个好的Shader总是从一个基本的 diffuse 光照模型开始 因此，我们从 Diffuse 入手开始写 Shader ~Shader 中的 Diffuse 部分描述从一个表面上向各个方向反射的光在Unity中创建 Shader 并打开 得到了一个 Unity 的 Shader 模板Shader
Unity 5.x Shader and Effects Cookbook(2nd) (Alan Zucconi Kenneth Lammers 著)
weixin_34216036的博客
02-24 103
1. Creating Your First Shader 2. Surface Shaders and Texture Mapping 3. Understanding Lighting Models 4. Physically Based Rendering in Unity 5 5. Vertex Functions 6. Fragment Shaders and Grab Pas...
ShaderGraphCookBookSample:ShaderGraph CookBook示例数据
04-07
在"Unity ShaderGraph CookBook第1卷"中，你可能会发现一系列逐步的教程，涵盖从基础到进阶的ShaderGraph使用技巧。这些教程通常会解释如何构建各种着色器，如基本的颜色变换、光照模型、纹理映射以及更复杂的效果，...
unity shader book(5.x cookbook + 2018 shader effect)
12-10
Unity Shaders and Effects Cookbook is the first of its kind to bring you the secrets of creating Shaders for Unity3D—guiding you through the process of understanding vectors, how lighting is ...
unity shaders and effects cookbook资源和代码
08-23
《Unity Shaders and Effects Cookbook》是一本专门为Unity开发者准备的实战指南，专注于Shader技术和特效的实现。这本书通过一系列具体的示例，深入浅出地讲解了如何在Unity引擎中创建各种逼真的视觉效果。资源和...
Unity Shaders and Effects Cookbook eBook及实例代码
最新发布
02-19
《Unity Shaders and Effects Cookbook》是一本专注于Unity引擎中Shader技术与特效实现的专业书籍，它为读者提供了丰富的实例代码，帮助开发者深入理解并掌握Shader在游戏开发中的应用。Shader是计算机图形学中的一...
Unity 5.x Shaders and Effects Cookbook(2nd).pdf
10-20
Unity 5.x Shaders and Effects Cookbook(2nd).pdf
ShaderGraph节点详解完整版20191221.pdf
01-29
https://blog.csdn.net/nicepainkiller/article/details/104108444 ShaderGraph节点详解完整版 ShaderGraph节点详解完整版 https://blog.csdn.net/nicepainkiller/article/details/104108444
SampleScene.unity
12-04
建模课设制作的小型场景，可以实现场景切换与水下特效。其中场景切换和水下特效是自己另外写的脚本，这里未附上，如有需要可以私信我。
Unity 物体边缘发光 shader
08-01
放到工程文件夹里面，让物体（gameObject）的材质（material）添加这个shader，就行。
ShaderGraph学习(HDRP)
llhswwha的专栏
06-16 1595
对于HDRP和URP，我的理解是，PC和游戏主机用HDRP，手机和网页用URP，所以我选择HDRP。 两个都支持ShaderGraph，但是稍微学习了一下ShaderGraph就发现不一样了。 物体高亮（周围高亮）Highligh效果，跟着教程（https://www.bilibili.com/video/BV1wx41197MN?p=3）做在HDRP中没有效果，URP有效果，查询后发现需要把颜色设置为HDR，并设置强度大于1。 参考：https://forum.unity.com/threads/s
HDRP中ShaderGraph自发光的一个小坑
大智_Unity探路者
04-11 1869
本文首发公众号洪流学堂。洪流学堂，让你快人几步。你好，我是你的技术探路者大智。 问题描述 在Unity中使用HDRP管线时，在ShaderGraph中制作自发光效果可能会遇到这么一个问题，直接将颜色连到主节点的Emission上没效果。如下图： 上图是一个常见的边缘光效果，Fresnel节点的具体讲解可以到《节点手册》中查阅。 解决方法 如何解决呢？ HDRP的ShaderGraph有一个专门的Emission节点来处理自发光。 这样连完，通过Emission节点处理一下，自发光就有了！ 原因：H.
用shader写伪3D
恬纳微晰
04-06 1986
用shader写伪3D之一 用shader写伪3D，其实是件非常棒的事情，如果用用纯3D数学只在fragment shader中实现，那么要经过顶点 数据模拟、切线空间的计算、投影、遮挡处理、阴影等一系列有点繁琐的问题，但最关键的问题是这是在 fragment中啊，每个像素都要~~~~亲！你耗得起吗？~~~~~~说说伪3D 当无法满足于性能时，于是伪3D特效就有了，它的用处在游
ShaderJoy —— 妙用深度图制作伪 3D 效果
ShaderJoy 的兴趣技术杂货铺
10-23 2056
效果图 前期准备 首先我们准备一张原图 原图 然后，我们需要再为它准备一张深度贴图。构建深度贴图的主要原则是，我们必须根据 Z 分量位置（深度信息）来分离出图像的某些部分，即，能分辨是远是近，因此将前景和背景就被分离开来了。 为此，我们可以在 Photoshop 中打开以上原图，然后在其上绘制灰色区域，结果如下: 深度图 当然水平高超的读者也可以使用其他方法来获得深度图像，比如深度学习 这张图片展示了一些山脉，在那里你可以看到，物体离相机越近，在深度图中绘制的区...
Unity使用Ray Tracing操作总结
YFHYLM的博客
11-15 1548
unity中使用实时光线追踪
Unity | HDRP高清渲染管线学习笔记：HDRP光照系统（二）
该用户还没想到好的昵称的博客
06-25 3345
1.如何使用Light Layer； 2.使用Light Probe Group光照探针和Reflection Probe反射探针（包括Planar Reflection Probe）。 3.混合(Mixed)模式下投射的混合阴影。
如何学习osg shader
05-23
如果你想学习 OpenSceneGraph（OSG）中的 shader，建议先学习以下基础知识： 1. OpenGL：熟悉 OpenGL 编程，包括 GLSL 语言、渲染管线等。 2. OSG：了解 OSG 中的节点、状态设置、事件处理等基础概念。 3. OSG shader：熟悉 OSG shader 的编写方式、语法和使用方法。 具体的学习路径可以是： 1. 学习 OpenGL：可以从 OpenGL 入门教程开始学起，建议先学习 OpenGL ES 2.0 或 3.0 版本，这样可以更好地理解 OSG 中的 shader。 2. 学习 OSG：可以阅读 OSG 官方文档或者相关的书籍，比如《OpenSceneGraph 3.0 Beginner's Guide》或者《OpenSceneGraph Quick Start Guide》等。 3. 学习 OSG shader：可以先学习 OSG 中的固定管线渲染方式，然后再学习如何使用 shader 进行自定义渲染。可以参考 OSG 官方文档中的 Shader 示例，或者阅读相关书籍，比如《OpenSceneGraph 3.0 Cookbook》中的 Shader 章节。 总之，学习 OSG shader 需要有一定的编程基础和对图形学的理解，建议慢慢来，循序渐进地学习。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值