云裂变营销网
标题:
微信小程序最新大招——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