企业官网建设流程全解析

一、关于布料表现

布料表面不是光滑的，是无数根细小纤维竖立着

传统的微表面brdf更适用于致密表面，但对于松散结构的布料 缺少了一些真实布料的特征，因为表面的纤维会吸收、散射入射光。

边缘光照效果

===》Sheen 环：织物在掠射角时出现的那一圈柔和的光泽环。

（1）正面的光大量被吸收和漫散射掉，汇聚到你眼睛里的能量反而很少

（2）侧面的由于：当光线与观察者的视线方向一致时，镜面反射光会主要集中在物体的边缘。织物表面有细小的纤维，这些纤维会试图保持垂直状态，所以这时纤维的整根侧面都朝向你，接收光的面积一下子变大了很多倍。同时纤维之间不再互相遮挡侧面，大量纤维侧面同时把光散射进你眼睛。

• 当光线方向与表面的法线方向成90度时，光线会发生反(后)向散射，从而形成漂亮的边缘照明效果。

• 如果光线来自物体的后方，纤维则会使光线向前散射，进而产生类似的边缘照明效果。

Sheen环 D项

算法简介

图1：反高斯［Inverted Gaussian］：将标准高斯分布(正态)函数进行反转

图2：绿线：标准PBR的Microfacet GGX分布在0角度下（法线、灯光和视线同向）获得最大的高光强度，然后随着角度的增大做正态分布；红线：用来做天鹅绒的分布函数正相反，最高峰在90°

图3：左：GGX高光；右：天鹅绒高光

代码实战

• 常见的Fabric算法有两个：Ashikhmin && Charlie 的算法

布料渲染的两种BRDF：我使用了BSDF文件里现成的Ashikhmin_V和Charlie_D方法。

F * V * D = sheen * Ashikhmin_V * Charlie_D

half3 FabricSheenDirect(half NdotL, half NdotV, half NdotH, half3 sheenColor, half sheenRoughness) { half r = max(sheenRoughness, HALF_MIN_SQRT); half safeNdotL = max(NdotL, HALF_MIN); half safeNdotV = max(NdotV, HALF_MIN); half safeNdotH = max(NdotH, HALF_MIN); half D = D_Charlie(safeNdotH, r); // NDF：sin^invR，模拟微纤维散射 half Vis = V_Ashikhmin(safeNdotL, safeNdotV); // 轻量 Visibility term return D * Vis * sheenColor; }

1. 法一：在原有光照模型基础上去叠加一个Sheen

color = UniversalFragmentPBR(inputData, surfaceData); #if defined(_FABRIC) { half3 sheenColor = _SheenColor.rgb * _SheenIntensity; color.rgb += ComputeFabricSheenContribution(inputData, sheenColor, _SheenRoughness); } #endif

• 金属度粗糙度的pbr效果还在，但是只是在原有基础上去叠加了 还会有高光和明显的明暗交界线

• 会破坏原有的能量守恒

1. 法二：替换原BRDF项

#if defined(_FABRIC_REPLACE_BRDF) { half3 sheenColor = _SheenColor.rgb * _SheenIntensity; half3 fabricRGB = ComputeFabricBRDFLighting(surfaceData, inputData, sheenColor, _SheenRoughness); color = half4(fabricRGB, surfaceData.alpha); }

• 边缘可能差不多，但是灰部有了更多的布料细节

• 能量守恒

二、天鹅绒纹理表现

单纯调布料效果还不能调出天鹅绒的效果，需要靠纹理来加强表现

1. 纤维感

1. 随机感

虽然布料纤维大多倾向于垂直于表面排列，用手指拨布料，可以让纤维朝某个方向排列。

几个尝试：

1. 用Substance Designer绘制了一张

总的趋势是模拟了毛流的随机方向感，放大后也有单根纤维的纹理，前面的示例图用的就是这个法线

1. 出于天鹅绒纤维表面的随机性，还试了一个看起来天鹅绒感很重的图

1. 找素材时，突然发现以闪亮之名里面有丝绒裙子

红丝绒：

我认为这个纹理是雾面、绒面感最强的