# Standard 標(biāo)準(zhǔn)物理光照渲染

Standard 材質(zhì)基于標(biāo)準(zhǔn)的 PBR 進(jìn)行實(shí)現(xiàn)。

PBR(Physically Based Rendering) 是指使用基于物理原理和微平面理論建模的著色/光照模型，以及使用從現(xiàn)實(shí)中測量的表面參數(shù)來準(zhǔn)確表示真實(shí)世界材質(zhì)的渲染理念。

使用 PBR 的優(yōu)勢

• 基于物理模型與數(shù)學(xué)推演帶來的效果的 真實(shí)。
• 藝術(shù)導(dǎo)向性的、標(biāo)準(zhǔn)化的美術(shù)參數(shù)帶來的 易用 與 效果一致。

xr-frame 使用 PBR 有以下兩種方式

1. 使用帶光照材質(zhì)的 glTF 資源，目前主流的各類 DCC工具 (Digital Content Create) 都可以產(chǎn)出這種業(yè)界通用的格式。
2. 使用內(nèi)置的 standard 創(chuàng)建材質(zhì)，并設(shè)置所需的不同 uniform 來進(jìn)行對應(yīng)渲染。

# 創(chuàng)建 standard 材質(zhì)進(jìn)行渲染

使用 standard 材質(zhì)進(jìn)行渲染時(shí)，可以設(shè)置以下的 uniform 來決定渲染效果。

各系數(shù)的美術(shù)意義可以參考 創(chuàng)建PBR紋理實(shí)用指南。

# 基礎(chǔ)色 (baseColor)

基礎(chǔ)色表示物體的 表面顏色，PBR 中可以認(rèn)為影響 電介質(zhì)(非金屬)漫反射 與 金屬反射率值。

vec4 baseColor = vec4(1.0, 1.0, 1.0, 1.0);
// 若設(shè)定基礎(chǔ)色貼圖
baseColor *= SRGBtoLINEAR(u_baseColorMap);
// 若設(shè)定基礎(chǔ)色因子，glTF情況下，傳入LINEAR空間顏色，不進(jìn)行顏色空間轉(zhuǎn)化
baseColor *= SRGBtoLINEAR(u_baseColorFactor);
// 若設(shè)定頂點(diǎn)色
baseColor *= vec4(v_Color, 1.0);

基礎(chǔ)色貼圖：左側(cè)為只有基礎(chǔ)色效果；右側(cè)為基礎(chǔ)色貼圖

# 金屬度粗糙度 (metallic rougness)

金屬度 表示 哪些區(qū)域是粗金屬（0=電介質(zhì)，1=金屬），影響 電介質(zhì)模型 與 金屬模型 的 線性混合。

粗糙度 表示 表面粗糙度，控制 漫反射和鏡面反射。

IOR 表示 折射率，控制材質(zhì)的 F0，即0度角入射的菲涅爾反射值。

float metallic = u_metallicRoughnessValues.b; // 默認(rèn)值 0.0，glTF 為 1.0
float roughness = u_metallicRoughnessValues.g; // 默認(rèn)值 1.0
// 若設(shè)定金屬度粗糙度貼圖
metallic *= metallicRoughnessMap.b;
roughness *= metallicRoughnessMap.g;
// F0
f0 = min( pow2( ( u_ior - 1.0 ) / ( u_ior + 1.0 ) ) * specularColorFactor;

金屬度粗糙度：左上角為金屬度效果圖，左下角為粗糙度效果圖，數(shù)值0為黑色，數(shù)值1為白色；右側(cè)為金屬粗糙度貼圖，g 部分為粗糙度，b 部分為金屬度。

# 法線 (Normal)

法線 可以認(rèn)為是 垂直于頂點(diǎn)表面 的(單位)向量。于頂點(diǎn)數(shù)據(jù)中傳入，用于 PBR 中光照相關(guān)的各類運(yùn)算。

法線貼圖 可以理解為一種高度貼圖，用于模仿表面細(xì)節(jié)。貼圖中的每個(gè)像素，代表切線空間中，將法線處理為真實(shí)法線的偏差處理。

使用法線貼圖的情況下，需要傳入頂點(diǎn)Tangent才能生效。

float normal = vNormal;
// 如果使用法線貼圖，需要保證存在 vNormal 與 vTangent 以算出vTBN
mat3 vTBN = mat3( tangent, bitangent, normal );
normal = normalize( vTBN * normalMap );

法線：左側(cè)圖片為世界空間中法線效果，右側(cè)為法線貼圖。

# 自發(fā)光 (Emissive)

自發(fā)光 表示了材質(zhì)作為光源向外發(fā)送的顏色信息，顏色空間為 SRGB。

vec4 emissiveColor = u_emissiveFactor;
// 若設(shè)定自發(fā)光貼圖
vec4 emissiveColor *= SRGBtoLINEAR(u_emissiveMap);

自發(fā)光：左側(cè)圖片為只有自發(fā)光的效果，右側(cè)圖片為自發(fā)光貼圖。

# 環(huán)境光遮蔽 (Ambient occlusion)

環(huán)境光遮蔽 指表面某點(diǎn)能獲得多少環(huán)境中的光。該貼圖只影響漫反射分配，不影響高光反射分配。

// 若設(shè)定遮蔽貼圖
float ao = u_occlusionMap;
// 若設(shè)定遮蔽貼圖 與 遮蔽因子
ao *= u_occlusionStrength;

環(huán)境光遮蔽：左側(cè)圖片為默認(rèn)PBR渲染效果，右側(cè)圖片為環(huán)境光遮擋顯示效果，0為完全遮蔽，1為完全不遮蔽。

# 透明剔除 (alphaCutoff)

透明剔除 用于進(jìn)行透明度剔除。當(dāng)alphaMode 為 MASK 的情況下，會(huì)不渲染 baseColor 的 alpha 小于 u_alphaCutoff 的像素。

如需使用透明剔除，需手動(dòng)設(shè)置宏 WX_USE_ALPHA_CUTOFF或設(shè)置渲染狀態(tài)使用。

透明剔除：左側(cè)圖片為開啟alphaCutoff效果，右側(cè)圖片為未使用alphaCutoff效果。

# 清漆效果 (clearcoat)

清漆效果 可以認(rèn)為是往物體表面添加透明涂層。

如需使用清漆效果，需手動(dòng)設(shè)置宏 WX_USE_CLEARCOAT。

清漆強(qiáng)度：左側(cè)圖片為使用clearcoat效果，右側(cè)圖片為未使用clearcoat效果

# 高光反射與光澤度 (specularGlossiness)

高光反射與光澤度 是 PBR 的另外一種渲染流程，相對于金屬度粗糙度流程，該流程可以在高光反射貼圖中控制F0。其中 光澤度 相當(dāng)于(1 - 粗糙度)。

漫反射部分 的 diffuse 因子與貼圖可以直接使用 基礎(chǔ)色 basecolor 相關(guān)參數(shù)。

如需使用高光反射與光澤度流程，需手動(dòng)設(shè)置宏 WX_USE_SPECULARGLOSSINESS。

高光反射與光澤度：左側(cè)為使用高光反射與光澤度流程模型的渲染效果；右上為diffuse貼圖(baseColorMap)；右下為specularGlossiness貼圖，其中rgb部分為高光反射，a部分為光澤度。

# standard 參數(shù)定義

• 基礎(chǔ)色相關(guān) basecolor
• 金屬度粗糙度相關(guān) metallic rougness ior
• 法線相關(guān) normal
• 自發(fā)光相關(guān) emissive
• 環(huán)境光遮蔽相關(guān) ambient occlusion
• 透明剔除相關(guān) alphacutoff
• 清漆效果相關(guān) clearcoat
• 高光反射與光澤度相關(guān) specular glossiness
• 透射 transmission (TODO)
• 體積渲染 volume (TODO)

# standard 宏定義

# standard 默認(rèn)渲染狀態(tài)

"renderStates": {
  cullOn: true,
  blendOn: false,
  depthWrite: true,
  cullFace: Kanata.ECullMode.BACK
}

具體渲染狀態(tài)細(xì)節(jié)可以參考 材質(zhì)支持渲染狀態(tài)列表。

# 使用glTF渲染

參照 glTF 文檔使用。

# 使用Mesh渲染

<xr-assets>
  <!-- 加載外部環(huán)境配置 -->
  <xr-asset-load type="env-data" asset-id="env1" src="/assets/env-hdr/data.bin" />

  <!-- 加載外部貼圖 -->
  <xr-asset-load type="texture" asset-id="gold-albedo" src="/assets/material/gold/albedo.png" />
  <xr-asset-load type="texture" asset-id="gold-metallic" src="/assets/material/gold/metallic.png" />
  <xr-asset-load type="texture" asset-id="gold-roughness" src="/assets/material/gold/roughness.png" />
  <xr-asset-load type="texture" asset-id="gold-ao" src="/assets/material/gold/ao.png" />

  <!-- 加載standard材質(zhì) -->
  <xr-asset-material asset-id="standard-mat" effect="standard" />
</xr-assets>

<!--
  設(shè)置環(huán)境數(shù)據(jù)，配置對應(yīng)的IBL（漫反射與鏡面反射）
  使用外部配置
    env1
  使用內(nèi)置配置 
    xr-frame-team-workspace-day
    xr-frame-team-workspace-day2
    xr-frame-team-workspace-night
-->
<xr-env env-data="env1"/>

<!--
  添加 圓體
  使用 standard-mat 材質(zhì)
  設(shè)置 金屬度因子為1，粗糙度因子為1
  設(shè)置 不同類型的貼圖
  設(shè)置 渲染狀態(tài) cullOn 為 false
  ...
-->
<xr-mesh
  node-id="mesh-sphere" geometry="sphere"
  material="standard-mat"
  uniforms="
    u_metallicRoughnessValues: 1 1,
    u_baseColorMap: gold-albedo,
    u_metallicMap: gold-metallic,
    u_roughnessMap: gold-roughness
  "
  states="cullOn: false"
></xr-mesh>

glTF Resource from SketchFab by @re1monsen @theblueturtle_ @Bastien Genbrugge @Willy Decarpentrie @Martin Trafas