part-1.用NODE编辑PHOTO TEXTURE:SUBSTANCE DESIGNER

用NODE编辑PHOTO TEXTURE

学习目标

1. 改善照片影子区域。
2. 改善照片里的部分 highlight 。
3. 处理反复 Tiling 。
4. 理解 PBR albedo safety。

可以在 https://pxhere.com 下载免费的照片贴图。

如果想要更高品质的照片贴图，可以在 https://www.textures.com 下载贴图资源或者亲自用照相机准备照片贴图。

会根据照片贴图资源制作  PBR Texture set 。

需要在 Textures.com 里购买使用权或者使用免费贴图。

这里就不细说 PBR 了。

这本书的前半部分会充分说明 PBR。 

制作新的 Substance Graph (Ctrl + N) ，选择 Physically Based (Metallic/Roughness) 后把 Graph 名称变更为 ‘PhototexturePBR ‘点击OK键。

但有点特别，Physically Based (Metallic/Roughness) 里没有  Ambient Occlusion Output。

新建 Graph 后会直接添加 Ambient Occlusion Output。

制作用户 Template 并储存的部分在这本书的’ Essential’ 里的 ‘Preferences‘ 部分，请参考。

在正式学习前，对 node tree 进行 reviewing 会对不熟悉 SD 的读者有帮助的。

跟着做之前先看下整个结构，是使用一个照片贴图 input。

最核心的部分是，，，

1. 在照片贴图里尽量删除影子的暗部，做出 Albedo 贴图。
2. 生成合适的高度图
3. 生成不会太过的  Ambient Occlusion map
4. 生成合适的 normal map

可以简单整理成以上四点。

需要的 Node列表

经常用到的通用 Node 就不另做说明了。

改成适合 PBR 工程的 Albedo colour。

把改成适合 PBR 工程的 Albedo colour 结果做 Debugging。

超出修改误差时会显示为红色。

没有处理成  Tiling 的原版照片贴图处理成合适的 Tiling 。

用于从照片贴图里删除部分影子和高光。

跟高度图一起生成类似于 High pass 的 Relief map

Relief map 是什么？

总体来看属于视差贴图(Parallax mapping )的范围。
但是从几何(Geometry) 结构不会变为出发点的话 Parallax mapping 和 Relife mapping 是在相同的范围里。
 Relife mapping 对 Parallax mapping  有一种缺点，就是镜头在特定斜角拍摄时越往斜面的尾部 (离镜头远的方向) 越没有立体感，

而且自身的阻断现象也会崩溃。而且 Parallax mapping 不会进行几何变形不能表现自身的影子。

Relife mapping 有个优点， 就是 Self-occlusion 和  Self -Shadow 可以从 Raytrace 实现，但是演算量过多，游戏开发中几乎不能使用。

2016年以后开始积极研究 Displacement 的盲点 Subdivision 算法后 (Desney 主导在做) 最新硬件是使用 Distance based displacement mapping

的趋势，实际上 Relife mapping 也不会经常使用。

在高度图用 sobel 算法让边缘明暗部的像素更明显，生成法线。

Sobel algorithm 是什么？

从导进的高度图生成 normal map 后混合导入的 normal map 。

现在用有代表性的上图滤镜构成整个节点吧。

您已经完成了新的 Graph 。

已经说过，没有 Ambient Occlusion output 。

自己做下。

把鼠标放到 Graph canvas 上点击 Space 键，搜索 Output 后添加。

或者跟上图一样在菜单图标上点击 Out 添加新的 Output 。

新做的 Output  要根据 Shader 结构修改。

把 Identifier 修改成 ‘ambientOcclusion’ ，把 Label 修改成 ‘AmbientOcclusion’。

Group  修改成 ‘Material’ 。

用 Add Item 旁边的 + 按钮添加 Usage 。

只选择 R 通道，把数值修改成  ‘ambientOcclusion’。

这是重点，请熟知。

确认整体 Output list 。

由 ase Color , Normal , Metallic , Roughness , Height , AmbientOcclusion  构成。

第一个节点。

把照片贴图添加到 Canvas ，再添加 Frame  命名为 Input 后，第一步为了处理反复 Tiling 贴图添加 Make It Tile Photo 节点。

Make It Tile Photo

参数。

• Mask Warping H : -41.91
• Mask Warping V : -18
• Mask Size H : 0.01
• Mask Size V : 0.01
• Mask Precision H : 0.06
• Mask Precision V : 0.09

以上参数只适合修改例题里的照片贴图。

适用节点前后比较

Make It Tile Photo 适用前

Make It Tile Photo 适用后。

如果数值太高图片边界会变得模糊，或者事物会变得模糊，所以要微调。

请不要只在2D环境确认，一定要在3D环境确认找一个合适的参数。

第二个节点。

Lighting Cancel Low Frequency.

是吧原来的照片贴图做 HighPass 处理的滤镜。

可以用这个参数，利用下一个要添加的 Blending 把照片阴影区域的一部分和高光部分去除掉。

参数。

Cancellation Radius : 1.8

虽然不是完整的 Grayscale 但不妨碍制作。

如果要换成 Grayscale ，使用 Grayscale conversion filter 就可以了。

添加 Blend 节点。把照片贴图连接到 Blend 的 background。
Lighting Cancel Low Frequency 出来的部分再连到 Blend 的 Foreground。

Blend 的参数。
Opacity : 0.85 ~ 1.0 以内的值。
Blending Mode : Max(Lighten)

适用前。

适用后。

去除了部分 Highlight 和阴影。

PBR 的 Albedo 跟以往的 Diffuse 方式不一样，是稍微有 Flat 感觉的 Colour 的贴图。
细节要从  normal map 和 height map 还有 roughness 上表现。

去除阴影时  Albedo  里暗的 Colour 也可能被一起删除，要加节点尽量保持它，例题的后面会讲。

现在根据修改的照片贴图制作 Normal map ， Height map 和 AO map 。

Colour Repair workflow (색상 회복 공정).

Colour Repair workflow（色彩恢复工程）

为了从照片获取 Albedo ，删除 Shadow 或 Highlight 信息时贴图内的部分颜色也会不受控制被修改.

可以做一个修复Albedo  Colour 的区间。

重点

1. Colour 的修复。
2. 确认 PBR Albedo 的 Safety colour 。

Colour 的修复。

添加一个 Blend Node 。添加一个 Comment 后把 Text 换成 Repair of Color 。

把 Make It Tile Photo filter output 连到 Blend Node 的 Backgroung Input ，然后把 High-light and Shadow Cancel Frame 里的 Blend Node

的 Output 连接到刚添加的 Blend Node 的 Foreground Input 。

1. 添加 Gradient Map filter 。
2. 添加 Histogram Range filter 。
3. 添加 Level filter 。

跟着添加顺序都连接后，把 High-light and Shadow Cancel Frame 的 Blend Output 连接到 Gradient Map 。(会自动 Grayscale conversion 。)

Level filter 的 Output 连接到 Blend Node(Repair of Color) 。

各个 Filter 的细节参数。

Gradient Map 是强大的 Color Remap 工具。

以 Gray gradient table 为准，用户以 Replace 的方式把 Color 执行 Color Remapping 。

在 Gradient 添加 Point 让阴影更明显区分。

Histogram Range 会修改导入图片的 Histogram 信息。

参数。

Range : 1

Position : 0.75

Histogram 信息对比。

原图导入信息的 Histogram 。

修改的 Histogram。

Image Histogram 是什么?

在从 0 到 255 的 256个像素范围内横轴表现像素的值，竖轴表现像素的数量，用曲线图表现分布在图片的像素里亮部和暗部是怎么分布的。

Level

越靠近黑色的部分会成为修复成原色的 Blending 区域。

Level histogram 做了 Invert。 基本值是下方白色调节条右边黑色调节条是左边。

翻转图片的颜色时左右换一下就可以了。

添加 Frame 命名变更为 Color Blending 。

确认PBR Albedo 의 Safety colour 。

现在检查修改的 Albedo 跟 PBR 合不合适，连到最终 Base Color Output 。

首先来了解下两种滤镜。

PBR BaseColor / Metallic Validate

PBR BaseColor / Metallic Validate 的 Debugging 案例。

Albedo 从数据上来看，包含全黑色和全白色是不好的。所以一定要跟上图一样做颜色的 Debugging 。

用 Gradient Map 矫正的案例。

PBR Albedo Safe Color

把 Gradient Map 矫正成 PBR Albedo Safe Color 的案例。

参数。

PBR Workflow : Base Color – Metallic ( Base Color – Specular 选项做 Menu Dropdown 就可以变更。)

Tolerance : 误差率，保持 0.5 的基本值。

分别添加以上两个 PBR Workflow 的 filter，把 Color Repair Workflow Frame 的 Blend Node 的 Output 连接到 PBR Albedo Safe Color Input ，

PBR BaseColor / Metallic Validate 的 Input 连接 PBR Albedo Safe Color 的 Output 。

做一个 Frame ，命名变更为 PBR Workflow Validate 。

最后 Albedo Safe Color 的 Output 再连一次 Base Color Output 的 Input 就可以了。

色彩恢复前。

色彩恢复后。

制作 Height map 。

Height map 通常是记录高度的 texture 。

这个高度差距（等高）在 Shader 技术里会使用 Real-time Displacement 技法，这时会实时使用把 Mesh 的三角形做 Sub-division 的技术 Real-time Tessellation 。

为了表现 Displace mapping ，把做了 Tessellation 的 Mesh 做 Wire frame.
为了适用 Height map 先变更 Shader 后再变更 Material 环境。
变更 Shader 。

在 3DView 上端的菜单里换成 ‘Default/Definition/physically_metallic_roughness[Default]/Tesselation’。

选择 Materials/Edit 表现细节参数 Inspector 。

参数

Tessellation Factor : 40 ~ 70

Scale : 2

DirectX Normal : False

Tiling : 1

UV Scale Enabled : False

以上参数调好后，就可以看到在 Mesh 上有正常的等高变形。

添加 Height Map Frequencies mapper ，把 Blending 的 Output 连到 Height Map Frequencies mapper 的 Input 。

Relief 值变更为 1.56 左右。

Height Map Frequencies mapper 提供两个 Output ，是 Displacement map 和 Relief 。

生成的 Displacement pass

生成的 Relief pass。

作者加了一点 Detail 。

Displacement map 表现的是大的体块儿感(高度的表现)，如果添加更细节的 Bump 效果， 用 Blending node 稍微加点一起生成的 Relief map 也可以的。

添加一个 Blend node ， Displacement output 连接到 Background input ， Relief output 连到 Foreground input 。

Blend node 参数。

Opacity : 0.27

Blending Mode : Multiply

合成的结果。

Height Output 前面再加一个 Blend node 和 Uniform Color 。

把刚刚设的 Blend node 的 Output 连到之后做的 Blend node 的 Foreground input 。

Uniform color output (Color 值是 White 。) 也连到之后做的 Blend node 的 Background input 。

Blend node 的参数不用特意去调，就用基本值。

选择 Blend node 添加 Comment 后连到了叫 Height Scale 的 Node commenting 。

这会完成 Shader 的 Displacement scale 功能。

Blend node 的 Opacity 值是 0.45 的时候。

Blend node 的 Opacity 值是1的时候。

太精致的高度反而会让 Height map 的结果很突兀。
实际游戏引擎里使用的 Distance based real-time displacement 里的 Tessellation 密度不足以表现 detail displacement ，所以 Tessellated 的 Segments 的单位面积上不足以表现 Pixel Density (像素密度)的时候 Height 不能完整得表现出来。
我们会通过算法理解 Pixel density 在游戏引擎里每个单位面积(为了表现出一个面分布的三个点形成的三角形平均面积比例)可以有多少 Pixel 的Density 。
我们不能把软件渲染上的密集的 Displace mesh 应用到实时渲染游戏引擎里。

比如软件渲染表现皮肤的毛孔时都要用 Displacement mapping 。

制作 Normal Map。

为了把一些光用 Height map 表现不出来的精细的体积质感表现出来，我们会用 Normal map 。

1. 添加 Normal Sobel 滤镜。
2. 添加 Height Normal Blender 滤镜。

Normalize 是什么？

就是 Vector 的方向不变，把 Vector 的长度（尺寸）用1正规化。

用 1正规化的  Vector 就叫单位 Vector  。要做正规化的理由是在3D游戏里求内积或者展开一些公式的时候不是单位 Vector 的话计算结果是错误的，为了防止这些错误会用单位 Vector 做正规化后再计算。
这本书后面讲 SD / SP 专用 GLSL SHADER 制作的时候会通过更详细的代码再仔细理解下。

连到添加了 Height map frequencies mapper 的 Relief output 的 Normal Sobel input 。

Normal Sobel 参数。
Intensity : 0.87
Normal Format : OpenGL ( 以后我们在 Unity3D 里会做 Preview 。)

添加 Height Normal Blender 后把 Normal Sobel output 连接到 Height Normal Blender 的 Normal Input ，把 Height map frequencies mapper 的 Displacement output 连接到 Height Normal Blender 的 Height input 。

Height Normal Blender 的参数。
Normal Intensity : 9.97
Normal Format : OpenGL

制作 Frame 后名称变更为 Normal Adjust 。

Height Normal Blender 的 Output 连到最终 Normal Output 。

Normal map 适用前。

Normal map 适用后。

制作 Metallic 和 Roughness map 。

适用 Normal Map 后可以看到受到光源后的质感维持着部分 Specular 等效果。

现在开始做下 PBR 的重点之一 – 质感。

我们简单看下质感是从哪开始形成的。

后面会再详细说明，简单来说就是根据表面的粗糙度和分子的结构来表现最终质感。

在更深入了解 PBR 的话，根据某些分子的结构 BRDF 都是不一样的， IOR 的差别也很大。

但是实时渲染上很难完全掌握和表现。

以 BRDF 光为准，表示入射量和放射量的比例，是 PBR 的基础。

1970年前已经定义过相关理论，最近几年内没有出实时渲染相关内容。

PBR 里事物的表面属性大致定为以上两种。

最重要的两点是，是否是金属和表面的粗糙度。 金属性体现在传导性上，传导性是构成事物的分子结构形态和成分的混合形态来决定的。

严格来讲，现有所有用实时处理解决的  PBR 都是错误的，只是模仿它的样子使它看起来像而已，这样理解PBR会更容易。

新生成一个 Blur filter 后把 Removing Shadow Frame 的 Lighting Cancel Low Frequencies 的 Output 连接到它的 Blur filter Input 上。

Blur filter 参数。

Intensity : 0.45

添加新的 Level filter 。

让石头表面和石头缝隙的土的 Roughness 值更明显一点。

把 Blur filter Output 连接到 Level filter Input 上。

参数。

添加 Blend filter 和 Uniform Color filter 。

把 Level Output 连接到 Blend filter 的 Foreground Input 上， Uniform Color 连接到 Blend filter Background Input 上。

Uniform Color 参数。

Gray color value : 190

这个参数在例题的 Roughness 上就是表面最平滑的值。

Blend filter 参数。

用默认值。

可以用 Opacity 值用 Uniform Color 和 Linear 做 Blending 。

Metallic 会用 Roughness 值。

再加一个 Blend filter。

再加一个 Uniform Color。

Uniform Color 参数。

在 Uniform Color :  Gray 状态下设成接近黑色的 15 ~ 20 。

Blend filter 参数。

Blending Mode : Divide

剩下的都是默认值。

把制作的两个 Blend filter 最终连到 Roughness 和 metallic 。

制作 AO map 。

Ambient Occlusion map  简称 AO map 。

是一种表现写实影子的手法，会在全局光照的过程中计算一个点的遮罩量。

这本书上就简单用 AO 来表现。

新增 Ambient Occlusion(HBAO) 节点。

制作 Height map 时使用的  Height map frequencies mapper 的 Displacement output.

参数。

Use World Units : False

Height Depth : 0.03

Radius : 0.55 (数值越接近1，表面的遮挡区域是最大距离，这样上面就会很暗。)

GPU Optimization : False ( 只在 CPU 演算。 )

选择 Ambient Occlusion(HBAO) Node 添加 Label 后变更为 ‘Generating HBAO’ 。

添加 Blur HQ Grayscale Filter ，把 Ambient Occlusion(HBAO) Node 的 Output 连接到 Blur HQ Grayscale Filter 的 Input 。

添加一个 Sharpen filter ，把 Blur HQ Grayscale Filter output 连接到 Sharpen filter input 。

添加一个 Frame ，名字变更为 AO 。

Sharpen filter output 最后连接到 AO Output 。

因为用 Ambient Occlusion(HBAO) 生成的 AO 锯齿现象较严重，这样就能使它变柔和。

适用一次 Blur 后再用 Sharpen 让他更明显就可以了。

看下它们的参数。

Blur HQ Grayscale Filter.

参数。

Intensity : 1.0 ~ 1.12

Quality : 1

参数。

Intensity : 20 ( 直接输入数值可以设到20。 )

来看下用 Blur 和 Sharpen 改善后的前后效果。

改善前。

改善后。

AO 适用后

整个 Node Preview.

所有的 Map 都没问题。

就这样，用一张照片贴图制作了 PBR Tiled Texture Set 。

演示最终效果。

Substance designer 2017.2 Preview (OpenGL)

Substance designer 2017.2 Preview (Iray Renderer)