Unity-一个简单的水墨渲染方法
（本文只是一个非常简单的unity水墨渲染，如果有错误，希望大家指正，谢谢～）（已上传GitHub：https://github.com/boringsky/Unity_ChinesePainting）
中国水墨画的渲染效果是很久很久以前就有的方法，基本思想就是分为两个部分，轮廓线渲染和内部渲染。轮廓线通常是渲染成毛笔笔触的感觉，内部则是通过普通的光照方程再加上ramp贴图控制一下渐变纹理，最后用一些模糊处理。这也是基本的卡通渲染方法。
而使用unity进行卡通渲染的基本思想，冯乐乐女神已经在《Unity Shader 入门精要》里解释得非常完整，我就不添乱了，上链接（乐乐姐的卡通渲染）。同时本文也参考了知乎上两位大佬的unity实现方法（在Unity进行水墨风3D渲染的尝试&【Unity Shader】 水墨风格渲染：如何优雅的画一只猴子 ）。
轮廓线shader
乐乐姐已经介绍很详细轮廓线的渲染方法了，所以选择她在书中说的“过程式集合轮廓线渲染方法”。简言之，单独用一个pass将模型沿法线扩张一点，然后渲染成轮廓线颜色，然后再用一个pass正常渲染内部着色，遮挡住前面的部分，留下来显示出来的部分就是轮廓线啦。主要部分的代码如下：
Properties
{
// Stroke Color
_StrokeColor ("Stroke Color", Color) = (0,0,0,1)
// Noise Map
_OutlineNoise ("Outline Noise Map", 2D) = "white" {}
// First Outline Width
_Outline ("Outline Width", Range(0, 1)) = 0.1
// Second Outline Width
_OutsideNoiseWidth ("Outside Noise Width", Range(1, 2)) = 1.3
_MaxOutlineZOffset ("Max Outline Z Offset", Range(0,1)) = 0.5
}
SubShader
{
Tags { "RenderType"="Opaque" "Queue"="Geometry"}
// the first outline pass
Pass
{
// 主要在vertex shader内进行计算 省略部分基本参数设置
v2f vert (a2v v)
{
// fetch Perlin noise map here to map the vertex
// add some bias by the normal direction
float4 burn = tex2Dlod(_OutlineNoise, v.vertex);
v2f o = (v2f)0;
float3 scaledir = mul((float3x3)UNITY_MATRIX_MV, normalize(v.normal.xyz));
scaledir += 0.5;
scaledir.z = 0.01;
scaledir = normalize(scaledir);
// camera space
float4 position_cs = mul(UNITY_MATRIX_MV, v.vertex);
position_cs /= position_cs.w;
float3 viewDir = normalize(position_cs.xyz);
float3 offset_pos_cs = position_cs.xyz + viewDir * _MaxOutlineZOffset;
// y = cos（fov/2）
float linewidth = -position_cs.z / (unity_CameraProjection.y);
linewidth = sqrt(linewidth);
position_cs.xy = offset_pos_cs.xy + scaledir.xy * linewidth * burn.x * _Outline ;
position_cs.z = offset_pos_cs.z;
o.pos = mul(UNITY_MATRIX_P, position_cs);
return o;
}
// fragment shader只是输出了一个颜色 不赘述
}
}其中基本需要设置的参数都很简单明了。而基本的思想也是按照乐乐姐书中所说，在视角空间下，将顶点沿着法线扩张。而针对水墨画风格渲染，其实就是做了一个最简单的noise干扰，在这里使用noise纹理图片（_OutlineNoise）进行采样，这样又个好处就是随机出来的轮廓不会随着视角的改变而改变。
_OutlineNoise
其中稍微有点改变的是，增加了一个linewidth的操作，因为unity_CameraProjection.y其实就是cos（FOV/2），所以这个操作的根本目的是为了保证轮廓线随着FOV的变换也是成一定比例，同时也不会随着镜头离物体的远近距离而变换。
对比图片如下：
没有添加linewidth
添加linewidth
最后一个小trick是，再增加了一个pass进行完全相同的操作，只是宽度再稍微增加一点，然后在fragment shader里根据noise再进行一下剔除。这也是在属性里面，之前没有用到的_OutsideNoiseWidth，来控制第二个pass的轮廓线的宽度，理论上它要大于1，比第一个pass稍微宽一些。简要的代码如下：
// 在vertex shader内 只需要稍微改变一点
position_cs.xy = offset_pos_cs.xy + scaledir.xy * linewidth * burn.y * _Outline * _OutsideNoiseWidth ;
// 在fragment shader内 也稍微根据noise突变做了下剔除
fixed4 frag(v2f i) : SV_Target
{
//clip randome outline here
fixed4 c = _StrokeColor;
fixed3 burn = tex2D(_OutlineNoise, i.uv).rgb;
if (burn.x > 0.5)
discard;
return c;
}对比图片如下：
只有一个pass渲染轮廓线
用两个pass渲染轮廓线
内部渲染
而内部着色的基本思想和unity卡通渲染的一致，使用最基本的光照方程，再映射到一张ramp图上进行采样，最后形成的就是阶梯状的颜色过渡。在这里我用的ramp图如下：
同时，与其余的水墨渲染方法有所区别的是，我发现，相对把笔触纹理的图和最终颜色值叠加融合起来，直接将纹理笔触作为一个noise贴图，扰动uv的值之后再进行一次高斯模糊，效果感觉也不错。在这里我是用了一张笔触纹理和一个noise贴图混合的一起扰动uv。
笔触纹理图
所以最后内部着色的内部渲染部分的步骤就是，先计算半兰伯特漫反射系数，然后用笔触纹理和noise纹理稍微扰动一下，最后再采样ramp纹理的时候进行高斯模糊。代码如下：
Shader "ChinesePainting/MountainShader"
{
Properties
{
//...省略上述已介绍过的
_Ramp ("Ramp Texture", 2D) = "white" {}
// Stroke Map
_StrokeTex ("Stroke Tex", 2D) = "white" {}
_InteriorNoise ("Interior Noise Map", 2D) = "white" {}
// Interior Noise Level
_InteriorNoiseLevel ("Interior Noise Level", Range(0, 1)) = 0.15
// Guassian Blur
radius ("Guassian Blur Radius", Range(0,60)) = 30
resolution ("Resolution", float) = 800
hstep("HorizontalStep", Range(0,1)) = 0.5
vstep("VerticalStep", Range(0,1)) = 0.5
}
SubShader
{
Tags { "RenderType"="Opaque" "Queue"="Geometry"}
// the first outline pass
// 省略
// the second outline pass for random part, a little bit wider than last one
// 省略
// the interior pass
Pass
{
// 之前的vertex shader部分没有特殊操作省略
float4 frag(v2f i) : SV_Target
{
fixed3 worldNormal = normalize(i.worldNormal);
fixed3 worldLightDir = normalize(UnityWorldSpaceLightDir(i.worldPos));
// Noise
// For the bias of the coordiante
float4 burn = tex2D(_InteriorNoise, i.uv);
//a little bit disturbance
fixed diff =dot(worldNormal, worldLightDir);
diff = (diff * 0.5 + 0.5);
float2 k = tex2D(_StrokeTex, i.uv).xy;
float2 cuv = float2(diff, diff) + k * burn.xy * _InteriorNoiseLevel;
// This iniminate the bias of the uv movement
if (cuv.x > 0.95)
{
cuv.x = 0.95;
cuv.y = 1;
}
if (cuv.y >0.95)
{
cuv.x = 0.95;
cuv.y = 1;
}
cuv = clamp(cuv, 0, 1);
// Guassian Blur
float4 sum = float4(0.0, 0.0, 0.0, 0.0);
float2 tc = cuv;
// blur radius in pixels
float blur = radius/resolution/4;
sum += tex2D(_Ramp, float2(tc.x - 4.0*blur*hstep, tc.y - 4.0*blur*vstep)) * 0.0162162162;
sum += tex2D(_Ramp, float2(tc.x - 3.0*blur*hstep, tc.y - 3.0*blur*vstep)) * 0.0540540541;
sum += tex2D(_Ramp, float2(tc.x - 2.0*blur*hstep, tc.y - 2.0*blur*vstep)) * 0.1216216216;
sum += tex2D(_Ramp, float2(tc.x - 1.0*blur*hstep, tc.y - 1.0*blur*vstep)) * 0.1945945946;
sum += tex2D(_Ramp, float2(tc.x, tc.y)) * 0.2270270270;
sum += tex2D(_Ramp, float2(tc.x + 1.0*blur*hstep, tc.y + 1.0*blur*vstep)) * 0.1945945946;
sum += tex2D(_Ramp, float2(tc.x + 2.0*blur*hstep, tc.y + 2.0*blur*vstep)) * 0.1216216216;
sum += tex2D(_Ramp, float2(tc.x + 3.0*blur*hstep, tc.y + 3.0*blur*vstep)) * 0.0540540541;
sum += tex2D(_Ramp, float2(tc.x + 4.0*blur*hstep, tc.y + 4.0*blur*vstep)) * 0.0162162162;
return float4(sum.rgb, 1.0);
}
ENDCG
}
}
FallBack "Diffuse"
}
其最终的效果如下：
调整光源方向
同时可以在网上搜一些不同的毛笔笔触纹理，也会有不同的效果。For Example：
最后，本文只是一个非常简单的unity水墨渲染，如果有错误，希望大家指正，谢谢～
页:
[1]