Shader - Fabric

Demo

测试的材质表现了四种组合类型：
  • 普通布料
  • 普通布料 + 细节纹理
  • 普通布料 + 细节纹理 + 绒毛纹理
  • 各向异性丝绸 + 细节纹理

Workflow

设计布料Shader的工作流时，考虑到项目角色模型的美术风格。多数模型会混搭有布料材质和金属材质。
布料材质需要高光工作流，但是金属材质需要金属工作流。在不拆分Mesh的情况下，为了能同时表现这两种材质，就需要结合两种工作流和着色模型，再依赖贴图通道Mask来在像素级别区分材质类型。
这种设计能满足材质类型混搭的需要，但是也造成了Shader性能指标ALU的明显上升。

Detail Map


布料类材质表面通常具有高频细节。除了PBR需要的基础纹理外，还需要连续的细节纹理。通过对UV进行Tilling来调整其在材质表面的密集程度。



在细节贴图和基础贴图的混合方式中，其中比较特殊的是切线空间的法线，细节贴图只提供RG两个通道的法线信息，混合方式可以理解是二维方向矢量的偏移。

half3 detailNormal = UnpackNormalScale( half4(detailNormalTS.x, detailNormalTS.y, 1.0, 1.0), 1.0);
detailNormal = half3(detailNormal.rg * detailNormalStrength,
    lerp(1, detailNormal.b, saturate(detailNormalStrength)) );
normalTS = SafeNormalize( half3(normalTS.rg + detailNormal.rg, normalTS.b * detailNormal.b) );

区别于常规的细节贴图，布料类的细节贴图AO会遮蔽基础贴图Albedo，材质表面的光照反射率会跟随细节变化，进而改变材质的整体亮暗表现。

half detailAlbedoOcclusion = lerp(1, occlusion, saturate(threadAlbedoStrength) );
albedo = albedo * detailAlbedoOcclusion;

Silk & Satin & Nylon


高光工作流需要材质提供高光的颜色，丝绸类材质的高光颜色具有多样性。借用自发光的思路，高光颜色可以来源自基础贴图Albedo，材质上再添加参数可以再调整它的亮度和饱和度。

Specular BRDF

丝绸类材质的表面具有各向异性镜面高光的物理特性。

void ConvertValueAnisotropyToValueTB(real value, real anisotropy, out real valueT, out real valueB)
{
    // Use the parametrization of Sony Imageworks.
    // Ref: Revisiting Physically Based Shading at Imageworks, p. 15.
    valueT = value * (1 + anisotropy);
    valueB = value * (1 - anisotropy);
}
void ConvertAnisotropyToRoughness(real perceptualRoughness, real anisotropy, out real roughnessT, out real roughnessB)
{
    real roughness = PerceptualRoughnessToRoughness(perceptualRoughness);
    ConvertValueAnisotropyToValueTB(roughness, anisotropy, roughnessT, roughnessB);
}

基于微平面理论的Microfacet Cook-Torrance BRDF。准备BRDF数据时，各向异性还需要将材质的粗糙度分解成两个值，分别对应的是切线方向和次切线方向。各向异性的偏移值，决定了在两个方向上的粗糙度占比。

D项：Anisotropic GGX Distribution
// roughnessT -> roughness in tangent direction
// roughnessB -> roughness in bitangent direction
real D_GGXAnisoNoPI(real TdotH, real BdotH, real NdotH, real roughnessT, real roughnessB)
{
    real a2 = roughnessT * roughnessB;
    real3 v = real3(roughnessB * TdotH, roughnessT * BdotH, a2 * NdotH);
    real  s = dot(v, v);

    // If roughness is 0, returns (NdotH == 1 ? 1 : 0).
    // That is, it returns 1 for perfect mirror reflection, and 0 otherwise.
    return SafeDiv(a2 * a2 * a2, s * s);
}
real D_GGXAniso(real TdotH, real BdotH, real NdotH, real roughnessT, real roughnessB)
{
    return INV_PI * D_GGXAnisoNoPI(TdotH, BdotH, NdotH, roughnessT, roughnessB);
}

V项：Anisotropic GGX-Smith Correlated Joint Approximate
real GetSmithJointGGXAnisoPartLambdaV(real TdotV, real BdotV, real NdotV, real roughnessT, real roughnessB)
{
    return length(real3(roughnessT * TdotV, roughnessB * BdotV, NdotV));
}
// Note: V = G / (4 * NdotL * NdotV)
// Ref: https://cedec.cesa.or.jp/2015/session/ENG/14698.html The Rendering Materials of Far Cry 4
real V_SmithJointGGXAniso(real TdotV, real BdotV, real NdotV, real TdotL, real BdotL, real NdotL, real roughnessT, real roughnessB, real partLambdaV)
{
    real lambdaV = NdotL * partLambdaV;
    real lambdaL = NdotV * length(real3(roughnessT * TdotL, roughnessB * BdotL, NdotL));

    return 0.5 / (lambdaV + lambdaL);
}
real V_SmithJointGGXAniso(real TdotV, real BdotV, real NdotV, real TdotL, real BdotL, real NdotL, real roughnessT, real roughnessB)
{
    real partLambdaV = GetSmithJointGGXAnisoPartLambdaV(TdotV, BdotV, NdotV, roughnessT, roughnessB);
    return V_SmithJointGGXAniso(TdotV, BdotV, NdotV, TdotL, BdotL, NdotL, roughnessT, roughnessB, partLambdaV);
}

F项：Schlick
real F_Schlick(real f0, real f90, real u)
{
    real x = 1.0 - u;
    real x2 = x * x;
    real x5 = x * x2 * x2;
    return (f90 - f0) * x5 + f0;                // sub mul mul mul sub mad
}

Diffuse BRDF

注意这里没有使用和镜面反射匹配的基于物理的漫反射模型：PBR diffuse for GGX+Smith。
函数返回的结果是漫反射量，还需要和反射颜色相乘，才能得到最终的漫反射光照颜色。

基于物理型 Disney Diffuse
real DisneyDiffuseNoPI(real NdotV, real NdotL, real LdotV, real perceptualRoughness)
{
    // (2 * LdotH * LdotH) = 1 + LdotV
    // real fd90 = 0.5 + (2 * LdotH * LdotH) * perceptualRoughness;
    real fd90 = 0.5 + (perceptualRoughness + perceptualRoughness * LdotV);
    // Two schlick fresnel term
    real lightScatter = F_Schlick(1.0, fd90, NdotL);
    real viewScatter = F_Schlick(1.0, fd90, NdotV);

    // Normalize the BRDF for polar view angles of up to (Pi/4).
    // We use the worst case of (roughness = albedo = 1), and, for each view angle,
    // integrate (brdf * cos(theta_light)) over all light directions.
    // The resulting value is for (theta_view = 0), which is actually a little bit larger
    // than the value of the integral for (theta_view = Pi/4).
    // Hopefully, the compiler folds the constant together with (1/Pi).
    return rcp(1.03571) * (lightScatter * viewScatter);
}
real DisneyDiffuse(real NdotV, real NdotL, real LdotV, real perceptualRoughness)
{
    return INV_PI * DisneyDiffuseNoPI(NdotV, NdotL, LdotV, perceptualRoughness);
}

Cotton & Wool

在实际落地到项目前，期间迭代了一个重要版本。初版是参考Unity HDRP中的设计思路，BRDF中镜面反射光照模型中D项用的是Charlie和V项用的是Ashikhmin，漫反射模型是基于传统型Lambert。
https://knarkowicz.wordpress.com/2018/01/04/cloth-shading/
// A diffuse term use with fabric done by tech artist - empirical
real FabricLambertNoPI(real roughness)
{
    return lerp(1.0, 0.5, roughness);
}
real FabricLambert(real roughness)
{
    return INV_PI * FabricLambertNoPI(roughness);
}

初版存在的几个问题：
  • Shader的ALU数量变多，性能的负担明显提高了，但是最终的渲染效果没有大的改善
  • 光源正常的情况下，由于HDRP中环境光的差异，材质渲染出的颜色和Albedo贴图的颜色偏差大，对美术的工作流程不友好
  • 渲染方程式中也没有包含Microfacet Sheen BRDF（“软纸张”），不能很好的渲染出天鹅绒等类型材质的特性
在项目中实际测试后，考虑到初版BRDF渲染出的效果，易用性和性能，得到的结果反而是弊大于利。于是废弃了初版的BRDF，改成金属工作流和Minimalist CookTorrance BRDF，有效的降低了BRDF部分的ALU数量。最后再加上Detail Map和Fuzz Map的搭配使用，有了一个平衡性能和效果后可用的版本。

// Computes the scalar specular term for Minimalist CookTorrance BRDF
// NOTE: needs to be multiplied with reflectance f0, i.e. specular color to complete
half DirectBRDFSpecular(BRDFData brdfData, half3 normalWS, half3 lightDirectionWS, half3 viewDirectionWS)
{
    float3 lightDirectionWSFloat3 = float3(lightDirectionWS);
    float3 halfDir = SafeNormalize(lightDirectionWSFloat3 + float3(viewDirectionWS));

    float NoH = saturate(dot(float3(normalWS), halfDir));
    half LoH = half(saturate(dot(lightDirectionWSFloat3, halfDir)));

    // GGX Distribution multiplied by combined approximation of Visibility and Fresnel
    // BRDFspec = (D * V * F) / 4.0
    // D = roughness^2 / ( NoH^2 * (roughness^2 - 1) + 1 )^2
    // V * F = 1.0 / ( LoH^2 * (roughness + 0.5) )
    // See "Optimizing PBR for Mobile" from Siggraph 2015 moving mobile graphics course
    // https://community.arm.com/events/1155

    // Final BRDFspec = roughness^2 / ( NoH^2 * (roughness^2 - 1) + 1 )^2 * (LoH^2 * (roughness + 0.5) * 4.0)
    // We further optimize a few light invariant terms
    // brdfData.normalizationTerm = (roughness + 0.5) * 4.0 rewritten as roughness * 4.0 + 2.0 to a fit a MAD.
    float d = NoH * NoH * brdfData.roughness2MinusOne + 1.00001f;
    half d2 = half(d * d);

    half LoH2 = LoH * LoH;
    half specularTerm = brdfData.roughness2 / (d2 * max(half(0.1), LoH2) * brdfData.normalizationTerm);

    // On platforms where half actually means something, the denominator has a risk of overflow
    // clamp below was added specifically to "fix" that, but dx compiler (we convert bytecode to metal/gles)
    // sees that specularTerm have only non-negative terms, so it skips max(0,..) in clamp (leaving only min(100,...))
#if defined (SHADER_API_MOBILE) || defined (SHADER_API_SWITCH)
    specularTerm = specularTerm - HALF_MIN;
    specularTerm = clamp(specularTerm, 0.0, 100.0); // Prevent FP16 overflow on mobiles
#endif

    return specularTerm;
}


Fuzz Map

评论

发表评论

此博客中的热门博文

一个Mesh的半透明类型

图片
根据渲染管线在渲染半透明时的设定，会提前对所有的Mesh（材质）进行排序，然后依次渲染，即“画家算法”。 不同于特效的半透明类型，角色模型是三维立体并且可以水平旋转的，就算把模型拆分成多个Mesh（材质），利用管线去对所有Mesh排序，也可能得不到理想的半透明效果（比如Mesh有弯曲或穿插等情况）。角色模型有着复杂而不规则的结构和多层嵌套，半透明渲染的排序要求已经达到三角面的精度了。 感觉如果用基于排序的渲染技术去处理半透明，那渲染角色模型这种复杂的半透明效果，还是比较局限。 本文只讨论一个Mesh（材质）的半透明类型，根据半透明最多叠加的层数，总结成下面的几种类型： 预深度写入 https://docs.unity3d.com/2020.1/Documentation/Manual/SL-CullAndDepth.html 这个半透明渲染的技术方案，在Unity官方文档中也有提及。 技术理论：第一个Pass只写入深度，第二个Pass开启深度测试并进行正常渲染。那么离相机较远的片段就会被近的片段通过深度测试给剔除掉，这可以解决半透明的排序问题。 优势：解决了排序问题，几乎适用于所有类型的半透明情况 劣势：半透明效果是“平面化”，没有真实的立体感 下面视频中的例子都是使用预深度写入的方案渲染：半透明的球和人，渲染的效果是“平面化”，没有三维的体积感。半透明的翅膀，当它们互相之间重叠时，渲染出了错误的效果（变成不透明了）。 如果使用这个方案渲染三维的角色模型，那劣势的影响将更加明显，模型的半透明效果会缺失三维体积感。并且在有些情况下，结果甚至是错误的。 单层 最简单的是只有单层的半透明，不管从什么角度去看，不会有片段重叠的情况，不会有半透明的排序问题。 Shader里也不用做什么特殊的处理，只需要一个Pass和关闭深度写入，就能满足半透明效果的需求。 角色模型上几乎不会出现只有单层半透明的情况 双层 如果是最多出现两层半透明的情况，有想到一个解决思路，既可以避免排序问题，又能渲染出立体感。 此方案的思路和预深度有点类似，也是基于两个Pass去实现的。 技术理论：第一个Pass渲染背面（Cull Front），第二个Pass渲染前面（Cull Back），每个Pass都是同样的着色计算。 半透明的球体有三维立体感了，半透明的翅膀发生重叠时也是正确的效果。 多层（双层以上）...
阅读全文

Shader - Skin & SSS

图片
Demo Workflow 需要渲染出的特性： 毛孔造成细碎的高光现象 次表面散射造成的透光现象 金属工作流的高光参数只有光滑度，只能控制高光区域的聚集度。高光工作流的高光参数除了有光滑度，还有镜面反射率可以控制高光的反射量。渲染皮肤的方式适合使用高光工作流，可以更方便的控制高光的表现。 Specular Detail 毛孔需要有高精度的贴图来表现高频的反射凹凸变化。在限制了贴图尺寸的情况下，并且脸部通常会和身体放到一个贴图UV区域，脸部只占了其中的小部分区域。这些情况都会导致脸部的整体渲染精度不高，表达不出高频的毛孔凹凸的细节效果。 其中解决的一个思路是利用细节纹理的优势：Detail Map + Mask Map 细节纹理可以提供高频毛孔的镜面反射率，渲染出不规则凹凸的镜面反射高光效果。 上面从左往右的贴图分别是：Albedo Map，Smoothness Map，Specular Detail Map Direct Lighting & Specular Subsurface Scattering https://developer.nvidia.com/gpugems/gpugems3/part-iii-rendering/chapter-14-advanced-techniques-realistic-real-time-skin 实时次表面散射渲染技术主要分为纹理空间和屏幕空间，需要对贴图进行多次的高斯模糊处理和大量的贴图采样指令，这些都会在移动端造成很大的性能瓶颈。 下面介绍的两种散射实现方式，性能代价都是相对较小的，对于在移动端设备上的项目比较友好。 SSS Pre-integrated https://therealmjp.github.io/posts/sss-intro/ 预制作好散射的LUT贴图，将法线方向和光源方向的点积映射到贴图的U坐标，再添加一个曲线参数（Curvature）映射到贴图的V坐标。用映射后的UV坐标采样LUT贴图，替换BRDF中的漫反射项。 Direct Diffuse & Scattering SSS Back-facing 当观察的视角在模型的背光面时，散射会导致模型出现透光的效果，仿佛模型有略微的透明。 大白的身体出现略微的透光 从渲染微平面的角度分析，触发这个效果的条件是当光源和视角的方向相反，视线...
阅读全文