云裂变营销网
标题:
微信小程序最新大招——xr-frame尝鲜，模拟真实质感
[打印本页]
作者:
匿名
时间:
2023-4-5 16:34
标题:
微信小程序最新大招——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
<xr-asset-material asset-id=&#34;standard-mat&#34; effect=&#34;standard&#34; />
复制代码
之后，为gltf的底座增加了一些金属粗糙的质感（u_metallicRoughnessValues）：
<xr-mesh geometry=&#34;cube&#34; material=&#34;standard-mat&#34; uniforms=&#34;u_metallicRoughnessValues: 0 0.1&#34;>
复制代码
物体的表面质感参数都定义在xr-mesh的uniforms属性中，为key: value的形式，多个属性用逗号分割
3.xrframe支持的uniforms参数：
1):基础色 (baseColor)：
定义了物体表面颜色或图片，参数为u_baseColorMap（图片）和u_baseColorFactor（颜色SRGB格式），使用方式如下：
<xr-asset-load type=&#34;texture&#34; asset-id=&#34;waifu&#34; src=&#34;***/waifu.png&#34; />
<xr-mesh material=&#34;standard-mat&#34; uniforms=&#34;u_baseColorFactor:0.3 0.3 0.3 1, u_baseColorMap: waifu&#34;></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
欢迎光临 云裂变营销网 (https://www.yunliebian.com/yingxiao/)
Powered by Discuz! X3.4
