三渲二

最新推荐文章于 2024-08-05 12:39:06 发布

Qkuang

最新推荐文章于 2024-08-05 12:39:06 发布

阅读量4k

点赞数 5

分类专栏：渲染

本文链接：https://blog.csdn.net/qq_42377785/article/details/107467071

版权

渲染专栏收录该内容

6 篇文章 0 订阅

订阅专栏

三渲二

1. 三渲二

通用快捷引导

代码只能作为入门学习，实际生产中还是要靠可视化编辑器。因此ShaderForge 、 Shader Graph 成为必备！
卡通渲染（常称为：三渲二，NPR（非真实渲染））主要分为：美式、日式。
主要技术包括：描边。可以通过：G-Buffer （几何缓存）中的深度、法线贴图计算。

术语：NPR（Non-photorealistic rendering）、RBR（Physically Based Rendering）

1. 三渲二
2. 初级卡通渲染
- 2.1. 基本思路
3. B站视频观察总结
4. 开始编写Shader

2. 初级卡通渲染

由于我只有基础的Shader 知识，并没有多的ShaderForge 知识。因此需要一些基础的ShaderForge知识。

2.1. 基本思路

分出亮面、暗面。（1，0） = 法线 dot 光向。
Step节点 + 阈值分出亮暗面。—— S值
亮面：S值=1，乘亮面颜色。此时暗面Color = 黑（0，0，0）
暗面：S值=0，Remap 一下。得到暗面 =1.乘暗面颜色。
亮暗面颜色相加得到完整值。

最终颜色 Multiply 光源颜色、纹理颜色即可。此时，卡通渲染由于是自定义光照模型，不会受到其他模型阴影、光线衰减等影响。因此需要添加 Light Attenuation 节点，和最初的1 步骤结果相乘。

需要注意受到阴影影响。Light Attenuation 值会在阴影处 =0 .而 Step的阈值相等，算通过，因此阈值不要设置为临界值：0.

3. B站视频观察总结

卡通渲染分为多种，我追求的的是“次世代卡通渲染”。（实时渲染CG技术）
次世代卡通渲染除开：shader部分，最关键的是各种需求的：（合成）图。把光照信息、落影容易度、AO（Ambient Occlusion环境光遮蔽）、高光通过 RGB通道存储起来。

3.1. 卡通渲染需要做什么？

虽然不知道到底怎么做，但一定要明白需要做什么，这是 “无中生有”的第一步。

视频一观察：

头发高光
暗部颜色
受光颜色
轮廓光影色
阴影影色（和暗部颜色有区别吗？）
软硬边（阴影）过度
阴影Fade Out（褪去）、Cut Out（裁剪）

米哈游技术文章

此次只针对人物，所以场景就不用分析了。

我们的目标是实现完全动态的光照和阴影，所有材质都对各种光照现象做出正确的反应，包括主光源和区域环境光。这就要求我们不能使用任何在纹理上画死的光照表现。

主要(关键)特性有：
多通道Ramp的材质Shading（遮蔽，绘影）方法
眼睛，头发和其它各向异性材料等特殊材料的处理
PCSS角色软阴影和高品质的勾线。

pcss：一种好看的阴影模式。相关联的有：软阴影。

3.2. 米哈游技术文章分析

分析文章，扩展见识。

3.2.1. 多通道Ramp的Shading方法

我们希望角色的阴影和颜色的变化可以表现出更细腻的插画风格，所以我们使用2D ramp纹理来表示这些细微的变化，其中RGB通道分辨用于描述于不同阴影层的漫射阴影范围。每个层都可以制定不同的颜色，这样就能在明暗变化中做到精细的色彩变化控制。

分析：所以我前面看见的哪些合成纹理应该就是—— 2D Ramp 纹理。他们用来表示细微变化（漫射、阴影范围）。

对于卡通风格的画面，如果上色只是纯明暗变化，阴影处就会显得比较脏，缺乏表现力，而如果提升暗处的饱和度和色相变化，整体色彩看起来就会比较鲜活。而且通过调整垂直纹理采样坐标，我们可以实现动态的软硬风格转换。从另一角度来看这种方法还间接表现了皮肤的次表面散射效果。

分析：卡通风格画面，阴影的变化并非纯明暗变化，而需要伴随 色相饱和度的变化。同时通过纹理坐标采样（垂直，由于纹理）可以实现软硬风格。无意中达到皮肤此表面散射。

高质量的边缘光。
同样是基于菲涅尔方法，我们有参数来控制它，比如：边缘宽度和平滑度；除了这些全局控制参数之外，我们也使用笔刷纹理来增加一些局部变化。我们定义边缘光既可以来自于方向光源也可以来自于环境贴图，使用方向光我们可以按需求定义边缘光，使用环境贴图，我们可以根据环境光照来获得边缘光以显得更真实，二者都比较有用，可以结合使用。
为避免边边缘光出现在不需要的区域，我们使用AO纹理和shadowmap来频闭掉遮挡区域。我们可以看到，对比图中左边带有边缘光的形状显得效果更突出。

分析：卡通风格是需要边缘光。但是边缘光需要被控制。边缘光使用的是涅斐尔，控制是通过AO 纹理、Shadowmap 精细控制。不过边缘光可以不弄，我没看懂图中的原理。

卡通风格对于面部一般不会有太多阴影层次的变化，如果我们直接套用之前的ramp方法应用在脸部，效果就会像右侧的图看起来一样不自然，为了改善这种情况我们使用顶点色的一个通道作为mask来控制脸部的上色层的强弱，通过压低漫反射表现来达到想要的卡通效果。

分析：卡通风格面部和身体略有不同。主要压低脸部的漫反射。同时漫反射导致的阴影为软，投影阴影为硬看起来效果更好。

高质量角色软阴影的实现。
如果我们直接使用Unity内置的CSM阴影，在镜头靠近角色的时候阴影品质并不能满足需求，所以我们就为角色单独渲染了一张shadowmap，以确保恒定的阴影品质。为此我们还实现了基于视锥的shadowmap，根据角色的boundingbox和视锥求交集部分，以此作为渲染区域。就可以最大化阴影贴图的使用率，
此外还使用了Variance shadow map以及PCSS来减少阴影瑕疵以及获得自然的软阴影效果。另外，如果要实现正确的透明材质阴影，还需要额外的通道根据材质的透明度来存储阴影强度。我们可以从实例图片中看到半透明的裙子可以投射出自然的阴影。

分析：高质量角色软阴影就先不管。

3.2.2. 特殊材料处理

眼睛的处理我们使用了基于物理的折射计算。普通卡通模型处理眼部的做法通常是把眼白留空，瞳孔凹陷下去，这样在侧面的时候也不会鼓出来显得比较自然，然而如果要做眼部近距离特写，这种做法看上去就不能令人信服。使用真实折射算法，眼球本身还是按照球面来做，然后根据视线角度算出折射系数去偏移查找贴图对应点。
下面对比图显示了有无折射的实际效果，我们可以看到，如果没有折射效果，眼部侧面看上去较为奇怪。

分析：眼睛和头发都属于难点。后面单独分析。眼睛关键：焦散计算。头发关键：各项异性计算。

头发是卡通渲染角色较为重要且独特的部分。我们想要实现根据光源动态变化的高光和阴影渐变，并且这个实现还应具备直观的所见即所得的色彩调节能力。
和皮肤的材质一样，对于头发的漫反射渲染我们同样使用了Multi-ramp的方法，而镜面反射高光我们则使用了二层高光做叠加，通过组合高低频的高光成分在一起，我们可以得到满意的结果。此外，我们还使用Glossy Map和AO纹理来进一步增强头发的质感。

分析：头发渲染上次的各项异性因该是对的。但是缺少要给Rampa 图控制高光的位置。外加一个发丝通道。

3.2.3. 高品质勾线

使用backface （背面渲染）方法勾线，缺点是折线硬表面会有问题，可以预处理，将这些部分单独提出来处理。

分析:或使用基于边缘检测的Sober算子后处理。米哈游通过更多的色相、饱和度、深度、法线综合计算边缘。

3.3. 剩下两个视频分析

主要更加深入了解不同贴图的使用。为接下来的实践做准备。

3.3.1. 视频一分析

底色贴图
SSS（Subsurface Scattering）次表面散射图。专门用来做皮肤透光效果。—— 色系偏向红紫色。
还可以用来修饰阴影的颜色。
ILM——篇绿、灰系。包含四个通道。
G通道：一个Shadow map 用来表示落影的容易度。类似于原话术语中的“闭塞”。
A通道：表示内部需要描线的地方。主体使用BackFace 方式描边。
R通道：记录Specular（高光）的强度。
B通道：记录Specular（高光）的区域大小。

卡通渲染要出效果，第一步：落影的计算。正常球体Diffuse 一半黑一半白。

题外：还有一种落影方案。AO贴图。＋　顶点色绘制。

3.3.2. 视频二分析

大佬开场.正常的卡通渲染有三张贴图.(底色贴图+光照(光相关)贴图(ILM)+此表面散射贴图(SSS))
着色器没什么，主要是贴图。

案例中只使用了 Base+ILM贴图.

本视频中ILM贴图：

R通道：高光的范围。
G通道：阴影贴图，假的AO贴图。
B通道：高光的强度。

利用不同通道颜色在模型上绘制完后，将贴图导出。
在PS-图像-模式-灰度。转化为灰度贴图。此时只有一个灰色的通道。
其他两张相同操作。

转化完成后，选择合并通道。将打开的三个窗口中的贴图合并即可。

Shader界面：

主要了解需要哪些参数。

阴影强度、阴影面积受到G通道影响。

参数

4. 开始编写Shader

人物Shader 主要分为：身体、脸部、眼睛、头发。四种Shader。

4.1. 遇到一个大坑—— 阴影（身体）

用来接受阴影的面片，不论正反面，都会接受到阴影。不会因为你是不渲染而接受不到阴影。

正常情况下，是不会遇到这个问题，因为投影和漫反射暗面相互融合。但是，卡通渲染，导致需求漫反射暗面小。导致问题出现明显。

—— 基于这个问题，就导致了必须先将阴影融合（不论PBR、NPR）。或者换一种阴影计算方式。

—— 阴影计算，在光源出放置一个摄像机，拍摄ShadowMap。再基于位置是否光照等信息确定是否采样Shadowmap。这也就是说：采样过程是封闭的。

—— 这个阴影计算，还是比较复杂的。如果是光追的话，就不会出现这种问题吧。

—— 回过头去看：视频中的“动态投影”并未被实现过，（ShaderGraph）中也一样。

4.1.1. 尝试解决——阴影

首先明确本次只关注受光（是否接受到投影）区域。
在光源方向假设 Camera，对区域渲染。只需要深度信息。
目标Shader 中，对深度进行比较。比其小的进行采样…… 这种方式行不通。

4.1.2. 尝试第二种方式。

多次渲染——……也好像不行。毕竟ShadowMap的机制摆在这里。

先用摄像机渲染

4.1.3. 尝试解决方案三。

结果：效果还不错。

可以缩减：漫反射的暗部区域—— Diffuse暗部。
融合：投影阴影。—— 投影的不完美导致最低可以缩减的漫反射暗部被限制了最低。不过调到最低效果还不错。
可以融合ILM 图中的G 通道，辅助生成阴影。并通过LN点积值计算是否落影。

注意，阴影采样模块不应褪色。这导致阴影的物体丢失了其“色相”。因该直接链接，不褪色。

4.2. 比较简单—— 高光（身体）

主要考虑三个因素：高光范围、高光位置、高光强度。

高光位置：比较简单就是 BPhone模型（半角向量和视向量的点积的高次幂）—— 次方计算的底数。
高光范围：分两个部分。

漫反射暗部+接受投影（不包含ILM图中的辅助阴影贴图）
ILM贴图的 R 通道遮罩。

高光强度，需要结合ILM纹理的B通道与一个基础Float值。——次方计算的幂。

结果如下：

4.3. 脸部Shader

之所以不用身体的Shader？

脸部基本没有高光区域。
脸部的受光要多（阴影要少）才符合卡通渲染。

4.3.1. 一个注意点—— 暗部

为了缩减脸部的阴影。采用Remap 的方式。但是由于对Text 采用Uv 采样的方式获取对应的值，所以此时出现一个临界值问题。 Uv >1、<0 时都会出错，此时注意把图片格式修改一下。

也可能是因为如上原因，导致我上次错怪了 Dot 的 “Normalize”模式。

还好我有这部分知识，否则郁闷一下午。所以见识很重要。

4.3.2. 最终决定——自定义阴影采样

卡通渲染的脸部重中之重，因此采用自己用纹理渲染的方式渲染你。

由于采用自定义阴影采样的方式，可以轻松解决头发投影的问题，因此漫反射暗部就不用那么麻烦了。

4.3.3. 相机Shader替换渲染技术

unity官方手册有介绍。

一个复合Shader 里面有多个 SUbShader（具有特定标签），该SHader 被设置为替换SHader。
当相机渲染一个物体时。该物体的Shader 的SubShader的标签的值和替换Shader中的标签值相同，则判断成立，SubShader 会被替换。

4.3.4. 获取深度纹理

仔细一思考，我不能沿用传统的阴影方式。而是基于深度的的阴影。

主要有两种解决思路：

4.3.4.1. 方案一、通过Shader 内置的获取深度方式，渲染出深度。—— 推荐，方便

通过代码设置相机为深度相机。
编写输出屏幕深度渲染缓冲信息的Shader。
通过代码：相机后处理方式，直接输出深度SHader的信息。
特别注意摄像机的边界长度，太长差距太大，输出一片白色。视野越小越精确。
深度Shader：


Shader "Unlit/NewUnlitShader01"
{
    
    SubShader
    {
        Tags { "RenderType"="Opaque" }
        LOD 100
        Pass{

        ZTest Always Cull Off ZWrite Off

        CGPROGRAM

        // Use shader model 3.0 target, to get nicer looking lighting
        #pragma glsl
        #pragma fragmentoption ARB_precision_hint_fastest
        #pragma target 3.0
        #pragma vertex vert
        #pragma fragment frag
        #include "unityCG.cginc"
        sampler2D _CameraDepthTexture;

    struct v2f {
        float4 pos : SV_POSITION;
        float4 scrPos:TEXCOORD0;
    };
    //Vertex Shader
    v2f vert(appdata_base v) {
        v2f o;
        o.pos = UnityObjectToClipPos(v.vertex);
        o.scrPos = ComputeScreenPos(o.pos);
        return o;
    }

    //Fragment Shader
    float4 frag(v2f i) :COLOR{
    float depthValue = 1 - Linear01Depth(tex2Dproj(_CameraDepthTexture, UNITY_PROJ_COORD(i.scrPos)).r);
    return float4(depthValue, depthValue, depthValue, 1.0f);
    }
        ENDCG
    }
    }
}

camera.depthTextureMode = DepthTextureMode.Depth;


    private void OnRenderImage(RenderTexture src, RenderTexture dest)
    {
        if (camera != null)
        {
            Graphics.Blit(src, dest, r_material);

        }
    }

4.3.4.2. 方案二、通过相机渲染替换Shader技术获取—— 为实验，理论可行

用于替换的Shader 需要获取到摄像机的距离（ShaderForge有节点）
获取摄像机的视野范围。用于归一化。
利用相机渲染时，替换Shader的技术，将深度信息输出。

4.3.5. 最终决定

放弃！渲染出来的质量有点差，效果并不好。而且还非性能，需要多两个摄像机，以及控制摄像机的移动。

根据观察，大多数unity实时渲染都没有投影。

所以还是直接采用身体的Shader，稍微调整后还是能够观看的。

4.4. 头发Shader——各项异性

准备采用各向异性达到效果。

4.4.1. 各项异性高光——完美

前提：由于我的模型头发法线反了所以这里给出球体的图片参考。

主要参数：半角向量（视角、光源）、切线方向、副切线方向（叉积运算）
主要运算：点积、叉积、ACos、Sin、Power、+SmoothStep

途中的其余参数都是调整参数，经过以前的实验：法线副切线、主切线的权重将影响结果的横竖方向。

参数参考：K系数：0_{1、P系数：0}11.

途中球体效果参数:0.28、0、0.65、11.

4.4.2. 完美完成

本次还法线了投影和漫反射暗部的最佳融合方式：暗部映射0~1 + Light Atten

4.5. 本次卡通渲染意外

记录一些其他杂七杂八的问题。

4.5.1. 模型导入FBX没有贴图问题

Unity2019.3中，如果默认使用新的Load 方式导入模型。Material 会嵌入到“模型文件之下” ，并不会有单独的文件夹存放材质、纹理。甚至会丢失纹理贴图。

此时需要切换为 “Legacy” 的Load 模式。——在模型的Material面板

Qkuang

关注

5
点赞
踩
27

收藏

觉得还不错? 一键收藏
0
评论
三渲二

三渲二1. 三渲二通用快捷引导主页目录文集目录代码只能作为入门学习，实际生产中还是要靠可视化编辑器。因此ShaderForge 、 Shader Graph 成为必备！卡通渲染（常称为：三渲二，NPR（非真实渲染））主要分为：美式、日式。主要技术包括：描边。可以通过：G-Buffer （几何缓存）中的深度、法线贴图计算。术语：NPR（Non-photorealistic rendering）、RBR（Physically Based Rendering）1. 三渲二2
复制链接

扫一扫