微信小程序最新大招——xr-frame尝鲜，后处理

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

本文讲授demo：根本案例/后处置 （https://github.com/dtysky/xr-frame-demo/tree/master/miniprogram/pages/scene-basic-postprocessing），对应官方小法式（名字：小法式示例）的交互动画/xrframe/根本案例/后处置

对于一些间接感化于相机的结果，比如水滴落到镜头上、被闪光弹闪白、眩晕/模糊的镜头结果，都可以用后处置实现，下面是demo给出的一些后处置结果：
模糊blur：


渐晕vignette:


泛光bloom：


抗锯齿fxaa:


1.后处置可以用两种方式实现：
1).xr-asset-post-process标签，后处置的参数在data属性传入：

1. <xr-asset-post-process asset-id="blur" type="blur" is-hdr data="radius:10" />

复制代码

2).代码建立，后处置的参数在data中传入：

1. scene.assets.addAsset('post-process', 'vignette', scene.createPostProcess({
2.   type: 'vignette',
3.   isHDR: false,
4.   data: {
5.     intensity: 0,
6.     smoothness: 2,
7.     color: [0 0 0 1]
8.   }
9. }));

复制代码

2.在相机的post-process属性中关联id：

1. <xr-camera
2.   ......
3.   post-process="blur vignette"
4. />

复制代码

可以传入多个后处置

3.后处置今朝只开放了内置的几种结果，具体参数可以参考官方文档：
模糊blur/fastblur：blur结果好但性能低，fastblur性能高适用于模糊半径经常变化的场景
泛光bloom：发光体味有一个外发光结果


色彩映照tone：是在利用hdr时的一种帮助衬着结果，当图片中明暗跨度很大时，过暗或过亮地方的细节会丧失，利用hdr的色彩映照可以尽能够的保存这些细节，可以简单了解为我们从一个很亮的地方忽然进入一个很暗的地方，一路头是看不清暗处的细节的，经过眼睛渐渐调剂，能看到暗处的细节
渐晕vignette：边沿有蒙层，中心蒙层渐突变通明


抗锯齿fxaa

4.点窜参数，分歧的后处置接管分歧的参数，可以用代码改变：

1. const blur = scene.assets.getAssets('post-process', 'blur');
2. blur.data.radius = 20;

复制代码

也可以利用我们之前先容过的帧动画来实现：

1. "keyframe": {
2.   "blur": {
3.     "0": {
4.       "asset-post-process.assetData.radius": 10
5.     },
6.     "100": {
7.       "asset-post-process.assetData.radius": 64
8.     }
9.   }
10. },

复制代码

即后处置的属性也可以在帧动画中逐帧改变

5.hdr
泛光bloom和色彩映照tone需要配合hdr来利用，这里简单先容一下什么是hdr
图像的质量由以下五项决议：


别离是：

• 分辨率
  
• 位深
  
• 帧率
  
• 色域
  
• 亮度
  

其中亮度就分为：sdr（Standard Dynamic Range Imaging）和 hdr（High Dynamic Range Imaging），暗示图像显现的照明强度的范围。sdr的装备显现的亮度范围较低，是以过亮和过暗（跨越显现范围）处只能显现为纯白或纯黑，细节会丧失，hdr的装备能支持更大范围的亮度，是以也就能保存更多的图像细节