微信小程序最新大招——xr-frame尝鲜，模拟真实质感

本文为系列文章，倡议没看过根本讲授的同学先看看：微信小法式最新大招——xr-frame尝鲜，根本图形讲授
全文目录：微信小法式最新大招——xr-frame尝鲜

本文讲授demo：扫描复原案例/扫描衬着案例 （xr-frame-demo/miniprogram/components/xr-scan-render at master · dtysky/xr-frame-demo），对应官方小法式（名字：小法式示例）的交互动画/xrframe/扫描复原案例/扫描衬着案例
xrframe供给了很多在standard material下的uniforms参数，来供给各类才能加倍实在的模拟物体材质，非论是粗糙、滑腻还是有通明图层甚至是自觉光都可以实现。
先来看下官方demo：




可以看到gltf的质感很是传神

1.在起头讲授实现之前，我们先温习一下几个根本的概念：material（材质）、effect（结果）、texture（纹理）、uniforms（材质属性）
texture只暗示物体表面的贴图，比如是纯色、图片大概是视频
material 暗示了 物体的诸多表面和表示属性 ，包括了多个属性，如色彩、通明度、反射率、光照、纹理等，可以以为texture是material的一部分
effect也是material 的一个属性，他暗示一种殊效大概视觉结果，比如闪灼、水流、烟雾等，在xrframe中，今朝可供利用的只要：简单无光照结果的simple和标准物理衬着结果的standard
uniforms则是一个参数列表，对衬着时需要的诸多参数停止界说
本文我们会具体讲授xrframe今朝支持的uniforms的属性，及这些属性的寄义

2.demo的实现
gltf的质感实现，本文不展开讲授，可以下载文件自己检察：
https://mmbizwxaminiprogram-1258344707.cos.ap-guangzhou.myqcloud.com/xr-frame/demo/model-scan-test/wxdog/index.gltf
https://mmbizwxaminiprogram-1258344707.cos.ap-guangzhou.myqcloud.com/xr-frame/demo/model-scan-test/wxdog/buffer.bin
https://mmbizwxaminiprogram-1258344707.cos.ap-guangzhou.myqcloud.com/xr-frame/demo/model-scan-test/wxdog/image0.jpg
本文首要对标准effect都支持哪些参数做讲授，首先界说了标准effect的material

1. <xr-asset-material asset-id="standard-mat" effect="standard" />

复制代码

以后，为gltf的底座增加了一些金属粗糙的质感（u_metallicRoughnessValues）：

1. <xr-mesh geometry="cube" material="standard-mat" uniforms="u_metallicRoughnessValues: 0 0.1">

复制代码

物体的概况质感参数都界说在xr-mesh的uniforms属性中，为key: value的形式，多个属性用逗号朋分

3.xrframe支持的uniforms参数：
1):根本色 (baseColor)：
界说了物体概况色彩或图片，参数为u_baseColorMap（图片）和u_baseColorFactor（色彩SRGB格式），利用方式以下：

1. <xr-asset-load type="texture" asset-id="waifu" src="***/waifu.png" />
2. <xr-mesh material="standard-mat" uniforms="u_baseColorFactor:0.3 0.3 0.3 1, u_baseColorMap: waifu"></xr-mesh>

复制代码

2).金属度粗糙度 (metallic rougness)：
金属度 （Metallic）控制了物品是更像塑料（电介质）还是金属，塑料的反射结果比力温和，不会有激烈的高光结果，而且反照率结果比金属更明显，色彩更接近物体的本质，而金属的概况色彩完全来自于情况的反射
这是仅从0到1改变金属度的结果，可以看到物体质感从塑料酿成了金属


粗糙度（Roughness）控制了物品概况的漫反射和镜面反射，
具体的参数为：
u_metallicRoughnessMap金属粗糙度贴图
u_metallicMap金属度贴图
u_roughnessMap粗糙度度贴图
u_metallicRoughnessValues金属粗糙度因子
u_ior塑料折射率，即控制物体对情况的反射
前三个map属性需要传入texture，可以做到加倍邃密的对具体位置的控制，后两个是对全数像素同平生效的值

3).法线 (Normal)
法线是用来处理物体概况复杂的凹凸结果的，如一个钢板上有很多螺丝钉，假如对每个钉子都建立多面体多少会很是麻烦而且性能差，这时利用法线贴图便可以处理这个题目
以下，右侧是法线贴图，左侧是现实结果


具体的参数为：
u_normalMap法线贴图，需传入 texture
u_normalScale贴图的缩放

4).自觉光 (Emissive)
暗示物体自己的发光结果，如


具体的参数为：
u_emissiveMap 自觉光贴图
u_emissiveFactor自觉光贴图线性因子

5).情况光遮蔽 (Ambient occlusion)
暗示物体哪些部位不反射情况光，只影响漫反射不影响镜面反射，结果以下：左图为原物体，右图为加了情况光遮蔽的结果：


具体的参数为：
u_occlusionMap情况光遮蔽贴图
u_occlusionStrength情况光遮蔽贴图强度，取值0~1

6).通明剔除 (alphaCutoff)
用于剔除低于某通明度的像素，结果以下：左图未利用通明剔除，通明部分会盖住前面的物体，右牟利用了通明剔除


具体的参数为：
u_alphaCutoff低于其值的像素会被剔除，取值0~1

7).清漆结果 (clearcoat)
可以以为是往物体概况增加通明涂层，结果以下：左牟利用了清漆结果，右图未利用


具体的参数为：
u_clearcoatFactor清漆强度， float
u_clearcoatRoughnessFactor清漆粗糙度，float

8).高光反射与光芒度 (specularGlossiness)
是与上面提到的金属度粗糙度相对的一种衬着方式，两者具有比力类似的功用
物体对光的反射分为折射镜面（高光）反射和漫反射，其物理公式为：
F(v,n) = F0 + (1-F0)(1 - v*n)^5
漫反射会向一切偏向发射光芒，是以他的巨细与视角无关，即为公式中的第一项F0，镜面反射则与视角有关，视角越接近反射偏向，则亮度越强，即公式中的(1-F0)(1 - v*n)5，其中v是视角偏向，n是法线偏向，v*n是两者的向量乘积
高光反射因子（u_specularFactor）的值就是F0，他控制漫反射和镜面反射的比例，相当于控制物体的滑腻水平
光芒度控制物体概况滑腻水平，与之条件到的粗糙度有些类似
关于 金属度粗糙度 和 高光反射与光芒度 的对照可以参考：https://zhuanlan.zhihu.com/p/495561084?utm_id=0

各项参数的更多说明可以参考unity手册-材质参数：
https://docs.unity3d.com/cn/2021.2/Manual/StandardShaderMaterialParameters.html