崩坏3mmd中的渲染技术研究

http://youxiputao.com/articles/11839 主要是参考该篇文章做一个微小的复盘。

漫反射与高光

文章中的漫反射与高光并不是类似于普通的

resultCol = Diffuse(...) + Specular(...)

而是更贴近实际的cg绘画流程中的，基色+阴影色+高光的模式。

其中阴影色以正片叠底的方式叠加到基色上，之后再加上高光

这也是为什么文章中的DiffuseRamp跟SpecularRamp的两张贴图方向相反。因为Diffuse是作为阴影上色，因此其Ramp贴图在照度低的左部颜色更亮。

同时这种上色也使得传统的forward rendering中的复数光源用blend one one进行渲染变得不可能了（我猜的），因此只有一个主要的directional light作为光源。不过这样也够用了。

这里涉及到的正片叠底的模式，其实就是原有色与叠加色直接相乘。叠加色为1（白）时，结果不变，叠加色为0时变黑。文章中不止考虑了叠加的颜色，还考虑了叠加的强度（alpha通道）。此时叠加的代码如下：

//_DiffuseLayer1是叠加色，diffuse是在diffuseRamp上采样的结果
resultCol *= lerp(_DiffuseLayer1.rgb, fixed3(1, 1, 1), 1 - (_DiffuseLayer1.a * diffuse));

在cg绘画流程中，阴影图层往往不止一个，而是有多个来提升表现力。在文章中提到，DiffuseRamp的三个通道是分开使用进行上色的。设计师通过修改对应三个通道的Tint色来进行颜色的调整。此时代码如下：

fixed3 diffuse = tex2D(_DiffuseRamp, float2(diffuseAtten,0));
fixed3 white = fixed3(1, 1, 1);
resultCol *= lerp(_DiffuseLayer1.rgb, white, 1 - (_DiffuseLayer1.a * diffuse.r));
resultCol *= lerp(_DiffuseLayer2.rgb, white, 1 - (_DiffuseLayer2.a * diffuse.g));
resultCol *= lerp(_DiffuseLayer3.rgb, white, 1 - (_DiffuseLayer3.a * diffuse.b));

specular的部分和这个类似，区别在于不是正片叠底，而是直接相加。

软硬风格切换没什么好说的，根据采样到的顶点色去修改diffuseRamp的采样位置即可。

文章中提到的降低面部阴影的操作，我猜测是用了pow函数，将亮度采样整体提升，同时也可以保证亮度为0、1时不受干扰。

diffuseAtten = saturate(pow(diffuseAtten, 1 - 0.95 * _ShadowMask));	//so shadow will be less when shadowmask is high.

边缘光

不同于普通的边缘光，加入了对环境的采样。代码如下

half3 Fresnel(half3 normal, half3 viewDir,half exponent) {
	//fresnel(rim light)
	half fresnel = 1 - DotClamped(normal, viewDir);
	fresnel = saturate(pow(fresnel, exponent));
	half3 reflectionDir = reflect(-viewDir, normal);
	float4 envSample = UNITY_SAMPLE_TEXCUBE(unity_SpecCube0, reflectionDir);
	float3 envLight = DecodeHDR(envSample, unity_SpecCube0_HDR);
	return envLight * fresnel;
}

眼睛折射

最简单的眼球渲染的模型就是一个圆形。

但是考虑到人眼的虹膜部分并不是跟眼球一个表面，而是内凹的一个形状，因此正确的渲染是虹膜部分向内部凹陷一定距离。

另外，虹膜到眼球表面的这段距离会造成一定的折射效果。但是这个折射效果跟凹陷效果其实不太容易分辨的出来，可以当做一种效果处理。

具体的实现就是根据视线方向去计算uv偏移。我们可以输入一个深度贴图，表示某个位置距离眼球表面的距离。

偏移的计算参考自 https://computergraphics.stackexchange.com/questions/4133/eye-parallax-refraction

//choose one to calculate uv offset(or use both)
	float2 ReflectOffset(float2 ouv,half3 V) {
		fixed depth = tex2D(_EyeDepthMask, ouv);
		float2 offset = depth * mul((float2x3)unity_WorldToObject, V);
		offset.y = -offset.y;
		return ouv + offset * _EyeCenter.z;
	}

	float2 PBReflection(float2 ouv, half3 V, half3 frontW, half3 refractedW) {
		half depth = tex2D(_EyeDepthMask, ouv).r * _EyeCenter.w;
		float cosAlpha = dot(frontW, -refractedW);
		float dist = depth/cosAlpha;
		float3 offsetW = dist * refractedW;
		float2 offsetL = mul((float2x3)unity_WorldToObject, offsetW);
		offsetL.y = -offsetL.y;
		return ouv + offsetL;
	}

眼睛焦散

跟文章中提到的类似，根据反射后的lightDir计算一个diffuseterm，加上去就行了。

		//caustic
		half3 backLightDir = normalize(reflect(-lightDir, eyeForward));
		half causticAtten = pow(DotClamped(backLightDir, normal),3);
		half3 caustic = _EyeCausticTint * causticAtten * _LightColor0.rgb * s.EyeCaustic;    //s.EyeCaustic是Caustic贴图的采样
		resultCol += caustic;

头发高光

同时顶部的文章中的图片已经给出了代码。需要注意的是根据uv方向的不同，tangent可能要换成bitangent。

加入JitterMap后做抖动：

		float tangentShift = tex2D(_SpecularJitterMap, IN.uv_SpecularJitterMap);
		o.tangent += tangentShift * IN.worldNormal * _SpecularJitterStrength;
		o.tangent = normalize(o.tangent);

文章中提到了两层高光，一层低频一层高频。可以配合SpecularRamp的两个通道去做，这样最终的效果会更贴近绘画的风格。

参考： http://amd-dev.wpengine.netdna-cdn.com/wordpress/media/2012/10/Scheuermann_HairSketchSlides.pdf

镜面反射

参考 http://gad.qq.com/article/detail/18544。

其中文末提到的bug可以通过斜投影解决，斜投影矩阵的计算可以参考http://gad.qq.com/article/detail/18612。

Unity内置了计算斜投影的函数，可以不用操心行列向量左右手坐标系之类琐碎的事情，具体的实现可以参考http://wiki.unity3d.com/index.php/MirrorReflection4。

屏幕空间反射

个人觉得挺有意思的效果，从头学了一下，重新实现了一遍，在 http://www.cnblogs.com/yangrouchuan/p/7574405.html

有个问题就是无法反射Forward rendering的物体。视频中似乎是只在远离人物的地方使用SSR。舞台平面都是用的镜面反射。

剩下的日后慢慢更新，目前还太菜了。。。