作者: Charlene Altamirano
作者网站：https://www.artstation.com/charlenesville/blog

更多精彩图片 请登录

[micxp_wxonkey]wxv_2632519817681534976[/micxp_wxonkey]

更多精彩图片 请登录

更多精彩图片 请登录

更多精彩图片 请登录

欢迎来到我的第一篇博文！
技术动画研究暂停 - 复习游戏着色器的数学运算。我一直想了解更多关于着色器和纹理的知识，而在游戏艺术方面，我只是在学习和应用数学方面表现出色。
当我在思考我的第一个着色器和纹理将是什么时，我提出了一个常见的问题，“什么是好的破冰船？”，所以我想，为什么不与冰直接相关呢？因此，我决定创建：
1, 100% Substance Designer Snow 和 Frozen River 纹理，用于输入2, 提供体积深度和模糊效果的着色器3, 具有顶点绘制功能的着色器我的目标是：
1, 重燃我的爱并很快为 Substance Designer 创建工具。2,要了解有关虚幻引擎 5 中着色器的更多信息。3,找乐子！你可以在这里看到我研究的最终渲染。

.
规划                                
这些是我的参考资料：

更多精彩图片 请登录

当然，从最受期待的游戏之一《战神：诸神黄昏》中揭示的 DualSense 控制器中，诸神诸神黄昏

更多精彩图片 请登录

[micxp_wxonkey]wxv_2632480873686335489[/micxp_wxonkey]
.
着色器                                 
1.反射和折射矢量：
对于这个着色器，我使用反射和折射矢量的概念来获得表面以下的深度错觉。随着相机向量的移动，表面上方的纹理也随之移动。但不是让表面上方 的纹理随着相机矢量的移动而移动，而是让表面下方 的纹理移动。为此，我们使用折射矢量的概念。该向量表示光在穿过表面时弯曲了多少。
为了更好地形象化，这里有一个来自 Ben Cloward 的插图：

更多精彩图片 请登录

这是概述 （与蓝图不同，在缩小时无法禁用评论气泡）：

更多精彩图片 请登录

Blues : Frozen Fuzzy River 相关节点Whites : Snow 相关节点Pinks : Snow +Frozen Fuzzy River 相关节点

• 使用自定义反射向量节点：
  

更多精彩图片 请登录

2.下方裂缝的凹凸偏移

更多精彩图片 请登录

3. 使用 HeightLerp 设置的多材质：我还创建了一个参数来控制 Snow 和 Frozen Fuzzy River 之间的对比度。
    1. A - Frozen Fuzzy River Texture Samples    2. B - Snow Texture Samples    3. Transition Pass - Vertex Color Channel Red    4. Height Texture    5. Contrast - From Contrast 参数：

更多精彩图片 请登录

出于组织目的，我在每帧中结合了 Snow 和 Frozen River 节点。这是一个例子：

更多精彩图片 请登录

4. Snow's Tiling 控制从 Snow 到 Frozen River 过渡的平滑度：[micxp_wxonkey]wxv_2632487124071710720[/micxp_wxonkey]

更多精彩图片 请登录

[micxp_wxonkey]wxv_2632487959526735877[/micxp_wxonkey]

更多精彩图片 请登录

.
纹理                                
我将在我的下一篇博文中进行纹理分解，但这里有一个概述：
A. 雪：

更多精彩图片 请登录

凹凸偏移的划痕：

更多精彩图片 请登录

关于Substance 3D Designer 制作破冰材质小苏推荐丨-作者：Abderrezak Bouheddahttps://gamesartist.co.uk/frozen-material-abderrezak-b/

更多精彩图片 请登录

更多精彩图片 请登录

.
第一步                                

首先，在您做任何事情甚至启动 Substance .exe 之前，您需要收集一些关于您愿意创建的参考资料，信息和形状阅读是创建任何类型的作品、道具、环境、人物、材料。没有食谱你不能做食物，对吧？参考是你的工艺的配方，所以这里有一个例子。

更多精彩图片 请登录

我不只是收集随机参考，您在参考中需要的最重要的是从一个角度的参考，显示反射/粗糙度/镜面反射如何受光影响，一个或多个参考显示该材料的大小，规模方面它会有所不同，我们可以在 SD 中处理它，但规模参考有很大帮助，尤其是在生产中。您阅读形状并想象它们基本没有变形，就像一个简单的草图，或者您可以在它们上画直线，这样您就可以知道首先使用哪些节点。否则，您将习惯它并能够轻松地从参考中读取形状并确定首先使用哪些节点，这里很清楚，它们看起来像裂缝，裂缝顶部有长而近乎直线的线条。


.
创建初始形状                                

使用我之前创建的裂纹生成器的快速启动/草图，您可以创建自己的或仅使用单元格，遮盖一些较大的单元格并在其上放置更多单元格。我们可以利用 Flood Fill 节点的潜力，为我们的单元格提供随机值变化和渐变，这是我们稍后需要用于颜色图、细节等的资源。这里快速浏览一下 Scratches Generator 节点（Substance Designer 附带）。
创建划痕并将它们放在一边以备后用，我们稍后将它们与裂缝混合。

更多精彩图片 请登录

之后，可以使用任何破解节点来完成破解，您可以创建自己的破解或获取免费破解生成器之一，这些破解生成器在 Substance Share 或互联网上的任何地方都有很多。我更喜欢创建我的并设置我通常需要的输出。输出边缘有损坏的裂缝，一个用于填充裂缝单元，一个用于没有损坏的边缘。

更多精彩图片 请登录

使用多方向扭曲节点扭曲裂缝后，模式平均，使用云 2 的 2 个方向。我们继续使用屏幕模式将裂缝和划痕混合到一张地图中。

更多精彩图片 请登录

.
深霜创造                                

由于图表有点大，有很多细节，我将介绍最重要的事情，这样文章阅读和学习就不会无聊了。深度稍后将用作半透明贴图，在颜色贴图中，作为单独的贴图，稍后可能用于 UE 的凹凸偏移或视差偏移以用于着色器，具体取决于您的需要。我们将之前的混合结果再次运行到 Multi-Directional Warp 节点中，使用 Clouds 2 以使裂缝边缘相交

更多精彩图片 请登录

之后，我们创建两个 Non-Uniform Blur 节点（在深霜帧中），如图所示。第二个与第一个只是角度不同。[micxp_wxonkey]wxv_2633080345927712769[/micxp_wxonkey]

更多精彩图片 请登录

Non-Uniform Directional Warp 节点，中间一个。稍后用于深度颜色。它从之前的 Multi-Directional Warp 中获取输入。

更多精彩图片 请登录

.
颜色图和细节                                

我们之前做的事情，将它运行到具有 4 种颜色的渐变映射中，我这样做的原因是我保留这个渐变，我需要做的任何更改我都会向后工作，这意味着我回到以前的节点并添加/减少裂缝值，为混合节点添加细节。值越亮，变为白色的次数越多，越暗，变为深蓝色的次数越多。

更多精彩图片 请登录

[micxp_wxonkey]wxv_2633080204210569217[/micxp_wxonkey]现在我们有了颜色图的大值，我们需要添加微观和中间细节来突出真实感。在我们这样做之前，让我们快速看看我是如何为法线贴图和高度创建细节的。
所以基本上我们从（没有边缘的渐变洪水填充）开始，你可以像这样创建（额外提示）。

更多精彩图片 请登录

我将演示法线贴图上的细节阶段以及它是如何变化的，这里没什么特别的，只是混合划痕、污垢节点 1、垃圾贴图 4 和来自多向扭曲的裂纹边缘，直到我们得到最终的满意详细的法线/高度图。这并不意味着您将直接制作它，只需添加您认为它与参考类似的东西。
现在是激动人心的部分，详细介绍颜色贴图，我们首先创建一个与曲率贴图非常相似的贴图，但较暗的值会给我们更多的污垢/灰尘或白色值，这意味着该贴图将用于环境光遮蔽输入污垢节点。届时，划痕、凹痕、斑点和受损区域将呈现白色冰状。我们从法线贴图开始，抓住两个曲率节点（曲率平滑，曲率索贝尔）使用 Add Sub 模式将它们混合在一起，不透明度 0.13 或提供较低对比度外观的值，其作用类似于通过曲率 Sobel 锐化曲率平滑。

更多精彩图片 请登录

更多精彩图片 请登录

这里我们有一个用于我们的颜色贴图的细节贴图，稍后将使用污垢节点结果为反照率着色。

更多精彩图片 请登录

然后使用云 1 在顶部洒一些点（在直方图中仅选择几个较亮的值），然后将其运行到渐变中，渐变将与带有蒙版的颜色图混合以应用细节。

更多精彩图片 请登录

这一步没有花哨的东西，只是之前的主渐变，与深蓝色混合，然后将细节与蒙版混合（我在蒙版上添加了一点裂缝，以获得更多的亮度和淡化裂缝）和TADAA，现在只是一些抛光，在颜色贴图中添加一些深度和假霜，如果我们需要在不同的色调上使用它们，我们可以稍后将它们分开。

更多精彩图片 请登录

最后一件事是混合内部霜，这是一堆经纱和细胞混合，但总体思路是您可以使用之前的非均匀模糊结果并将它们与噪声贴图混合，用洪水填充中的一些细胞掩盖它们等.
这是这里的面具。

更多精彩图片 请登录

然后，如果您还想进行一些颜色校正，请使用 HSL 节点、级别或任何可以帮助您校正整体颜色图的东西。
.
粗糙度贴图和半透明度                                
基本上这里是污垢节点贴图，使用直方图校正来钳制或设置较暗/光泽值的最小限制，以使其不具有 100% 的光泽，而只有大约 88% 的光泽。添加了一些损坏点，使损坏点变得粗糙。

更多精彩图片 请登录

半透明非常简单，我确实对颜色贴图进行了去饱和处理，然后调整以仅选择较亮和中亮区域。

更多精彩图片 请登录

这是在 Marmoset Toolbag 中使用半透明贴图的一个很好的例子，只使用一个点光源，它使光线散布在裂缝和深霜点上。

更多精彩图片 请登录

.
最终结果                                
抱歉，我没有详细解释所有内容，因为我错过了一些需要超过段落才能解释的内容，所以我将所有图表都留在这里：https://lockedloaded.gumroad.com/l/upczz

更多精彩图片 请登录

.
要点                                
当我复习游戏着色器的数学运算时，我意识到有很多方法和方法可以用来实现所需的视觉意图。与直接使用视差遮挡映射节点不同，我意识到我可以使用带有其他组件的反射向量节点来实现相同的效果，也许还有更好、更优化的方法（着色器指令的数量？它将如何影响关卡的性能/FPS?) 以获得体积深度和模糊效果。
着色器有很多可能性，这就是为什么我愿意对这些做更多的研究。将数学应用于游戏艺术时真的很有趣，它有助于使学习不那么令人生畏。它帮助我理解数学实际上就是关于表示的。

更多精彩图片 请登录

更多精彩图片 请登录

END

更多精彩图片 请登录

声明：本文章中所有的图片和视频都归原作者所有，仅供大家参考学习和交流，不作商业用途，侵删。如果你喜欢这篇文章,欢迎转发！谢谢!

更多学习和交流可扫描下方二维码哦！

更多精彩图片 请登录

          作者: Charlene Altamirano
作者网站：https://www.artstation.com/charlenesville/blog

更多精彩图片 请登录

[micxp_wxonkey]wxv_2632519817681534976[/micxp_wxonkey]

更多精彩图片 请登录

更多精彩图片 请登录

更多精彩图片 请登录

欢迎来到我的第一篇博文！
技术动画研究暂停 - 复习游戏着色器的数学运算。我一直想了解更多关于着色器和纹理的知识，而在游戏艺术方面，我只是在学习和应用数学方面表现出色。
当我在思考我的第一个着色器和纹理将是什么时，我提出了一个常见的问题，“什么是好的破冰船？”，所以我想，为什么不与冰直接相关呢？因此，我决定创建：
1, 100% Substance Designer Snow 和 Frozen River 纹理，用于输入2, 提供体积深度和模糊效果的着色器3, 具有顶点绘制功能的着色器我的目标是：
1, 重燃我的爱并很快为 Substance Designer 创建工具。2,要了解有关虚幻引擎 5 中着色器的更多信息。3,找乐子！你可以在这里看到我研究的最终渲染。

.
规划                                
这些是我的参考资料：

更多精彩图片 请登录

当然，从最受期待的游戏之一《战神：诸神黄昏》中揭示的 DualSense 控制器中，诸神诸神黄昏

更多精彩图片 请登录

[micxp_wxonkey]wxv_2632480873686335489[/micxp_wxonkey]
.
着色器                                 
1.反射和折射矢量：
对于这个着色器，我使用反射和折射矢量的概念来获得表面以下的深度错觉。随着相机向量的移动，表面上方的纹理也随之移动。但不是让表面上方 的纹理随着相机矢量的移动而移动，而是让表面下方 的纹理移动。为此，我们使用折射矢量的概念。该向量表示光在穿过表面时弯曲了多少。
为了更好地形象化，这里有一个来自 Ben Cloward 的插图：

更多精彩图片 请登录

这是概述 （与蓝图不同，在缩小时无法禁用评论气泡）：

更多精彩图片 请登录

Blues : Frozen Fuzzy River 相关节点Whites : Snow 相关节点Pinks : Snow +Frozen Fuzzy River 相关节点

• 使用自定义反射向量节点：
  

更多精彩图片 请登录

2.下方裂缝的凹凸偏移

更多精彩图片 请登录

3. 使用 HeightLerp 设置的多材质：我还创建了一个参数来控制 Snow 和 Frozen Fuzzy River 之间的对比度。
    1. A - Frozen Fuzzy River Texture Samples    2. B - Snow Texture Samples    3. Transition Pass - Vertex Color Channel Red    4. Height Texture    5. Contrast - From Contrast 参数：

更多精彩图片 请登录

出于组织目的，我在每帧中结合了 Snow 和 Frozen River 节点。这是一个例子：

更多精彩图片 请登录

4. Snow's Tiling 控制从 Snow 到 Frozen River 过渡的平滑度：[micxp_wxonkey]wxv_2632487124071710720[/micxp_wxonkey]

更多精彩图片 请登录

[micxp_wxonkey]wxv_2632487959526735877[/micxp_wxonkey]

更多精彩图片 请登录

.
纹理                                
我将在我的下一篇博文中进行纹理分解，但这里有一个概述：
A. 雪：

更多精彩图片 请登录

凹凸偏移的划痕：

更多精彩图片 请登录

关于Substance 3D Designer 制作破冰材质小苏推荐丨-作者：Abderrezak Bouheddahttps://gamesartist.co.uk/frozen-material-abderrezak-b/

更多精彩图片 请登录

更多精彩图片 请登录

.
第一步                                

首先，在您做任何事情甚至启动 Substance .exe 之前，您需要收集一些关于您愿意创建的参考资料，信息和形状阅读是创建任何类型的作品、道具、环境、人物、材料。没有食谱你不能做食物，对吧？参考是你的工艺的配方，所以这里有一个例子。

更多精彩图片 请登录

我不只是收集随机参考，您在参考中需要的最重要的是从一个角度的参考，显示反射/粗糙度/镜面反射如何受光影响，一个或多个参考显示该材料的大小，规模方面它会有所不同，我们可以在 SD 中处理它，但规模参考有很大帮助，尤其是在生产中。您阅读形状并想象它们基本没有变形，就像一个简单的草图，或者您可以在它们上画直线，这样您就可以知道首先使用哪些节点。否则，您将习惯它并能够轻松地从参考中读取形状并确定首先使用哪些节点，这里很清楚，它们看起来像裂缝，裂缝顶部有长而近乎直线的线条。


.
创建初始形状                                

使用我之前创建的裂纹生成器的快速启动/草图，您可以创建自己的或仅使用单元格，遮盖一些较大的单元格并在其上放置更多单元格。我们可以利用 Flood Fill 节点的潜力，为我们的单元格提供随机值变化和渐变，这是我们稍后需要用于颜色图、细节等的资源。这里快速浏览一下 Scratches Generator 节点（Substance Designer 附带）。
创建划痕并将它们放在一边以备后用，我们稍后将它们与裂缝混合。

更多精彩图片 请登录

之后，可以使用任何破解节点来完成破解，您可以创建自己的破解或获取免费破解生成器之一，这些破解生成器在 Substance Share 或互联网上的任何地方都有很多。我更喜欢创建我的并设置我通常需要的输出。输出边缘有损坏的裂缝，一个用于填充裂缝单元，一个用于没有损坏的边缘。

更多精彩图片 请登录

使用多方向扭曲节点扭曲裂缝后，模式平均，使用云 2 的 2 个方向。我们继续使用屏幕模式将裂缝和划痕混合到一张地图中。

更多精彩图片 请登录

.
深霜创造                                

由于图表有点大，有很多细节，我将介绍最重要的事情，这样文章阅读和学习就不会无聊了。深度稍后将用作半透明贴图，在颜色贴图中，作为单独的贴图，稍后可能用于 UE 的凹凸偏移或视差偏移以用于着色器，具体取决于您的需要。我们将之前的混合结果再次运行到 Multi-Directional Warp 节点中，使用 Clouds 2 以使裂缝边缘相交

更多精彩图片 请登录

之后，我们创建两个 Non-Uniform Blur 节点（在深霜帧中），如图所示。第二个与第一个只是角度不同。[micxp_wxonkey]wxv_2633080345927712769[/micxp_wxonkey]

更多精彩图片 请登录

Non-Uniform Directional Warp 节点，中间一个。稍后用于深度颜色。它从之前的 Multi-Directional Warp 中获取输入。

更多精彩图片 请登录

.
颜色图和细节                                

我们之前做的事情，将它运行到具有 4 种颜色的渐变映射中，我这样做的原因是我保留这个渐变，我需要做的任何更改我都会向后工作，这意味着我回到以前的节点并添加/减少裂缝值，为混合节点添加细节。值越亮，变为白色的次数越多，越暗，变为深蓝色的次数越多。

更多精彩图片 请登录

[micxp_wxonkey]wxv_2633080204210569217[/micxp_wxonkey]现在我们有了颜色图的大值，我们需要添加微观和中间细节来突出真实感。在我们这样做之前，让我们快速看看我是如何为法线贴图和高度创建细节的。
所以基本上我们从（没有边缘的渐变洪水填充）开始，你可以像这样创建（额外提示）。

更多精彩图片 请登录

我将演示法线贴图上的细节阶段以及它是如何变化的，这里没什么特别的，只是混合划痕、污垢节点 1、垃圾贴图 4 和来自多向扭曲的裂纹边缘，直到我们得到最终的满意详细的法线/高度图。这并不意味着您将直接制作它，只需添加您认为它与参考类似的东西。
现在是激动人心的部分，详细介绍颜色贴图，我们首先创建一个与曲率贴图非常相似的贴图，但较暗的值会给我们更多的污垢/灰尘或白色值，这意味着该贴图将用于环境光遮蔽输入污垢节点。届时，划痕、凹痕、斑点和受损区域将呈现白色冰状。我们从法线贴图开始，抓住两个曲率节点（曲率平滑，曲率索贝尔）使用 Add Sub 模式将它们混合在一起，不透明度 0.13 或提供较低对比度外观的值，其作用类似于通过曲率 Sobel 锐化曲率平滑。

更多精彩图片 请登录

更多精彩图片 请登录

这里我们有一个用于我们的颜色贴图的细节贴图，稍后将使用污垢节点结果为反照率着色。

更多精彩图片 请登录

然后使用云 1 在顶部洒一些点（在直方图中仅选择几个较亮的值），然后将其运行到渐变中，渐变将与带有蒙版的颜色图混合以应用细节。

更多精彩图片 请登录

这一步没有花哨的东西，只是之前的主渐变，与深蓝色混合，然后将细节与蒙版混合（我在蒙版上添加了一点裂缝，以获得更多的亮度和淡化裂缝）和TADAA，现在只是一些抛光，在颜色贴图中添加一些深度和假霜，如果我们需要在不同的色调上使用它们，我们可以稍后将它们分开。

更多精彩图片 请登录

最后一件事是混合内部霜，这是一堆经纱和细胞混合，但总体思路是您可以使用之前的非均匀模糊结果并将它们与噪声贴图混合，用洪水填充中的一些细胞掩盖它们等.
这是这里的面具。

更多精彩图片 请登录

然后，如果您还想进行一些颜色校正，请使用 HSL 节点、级别或任何可以帮助您校正整体颜色图的东西。
.
粗糙度贴图和半透明度                                
基本上这里是污垢节点贴图，使用直方图校正来钳制或设置较暗/光泽值的最小限制，以使其不具有 100% 的光泽，而只有大约 88% 的光泽。添加了一些损坏点，使损坏点变得粗糙。

更多精彩图片 请登录

半透明非常简单，我确实对颜色贴图进行了去饱和处理，然后调整以仅选择较亮和中亮区域。

更多精彩图片 请登录

这是在 Marmoset Toolbag 中使用半透明贴图的一个很好的例子，只使用一个点光源，它使光线散布在裂缝和深霜点上。

更多精彩图片 请登录

.
最终结果                                
抱歉，我没有详细解释所有内容，因为我错过了一些需要超过段落才能解释的内容，所以我将所有图表都留在这里：https://lockedloaded.gumroad.com/l/upczz

更多精彩图片 请登录

.
要点                                
当我复习游戏着色器的数学运算时，我意识到有很多方法和方法可以用来实现所需的视觉意图。与直接使用视差遮挡映射节点不同，我意识到我可以使用带有其他组件的反射向量节点来实现相同的效果，也许还有更好、更优化的方法（着色器指令的数量？它将如何影响关卡的性能/FPS?) 以获得体积深度和模糊效果。
着色器有很多可能性，这就是为什么我愿意对这些做更多的研究。将数学应用于游戏艺术时真的很有趣，它有助于使学习不那么令人生畏。它帮助我理解数学实际上就是关于表示的。

更多精彩图片 请登录

更多精彩图片 请登录

END

更多精彩图片 请登录

声明：本文章中所有的图片和视频都归原作者所有，仅供大家参考学习和交流，不作商业用途，侵删。如果你喜欢这篇文章,欢迎转发！谢谢!

更多学习和交流可扫描下方二维码哦！

更多精彩图片 请登录