1. Toy模板网首页
  2. > Toy博客

微信小程序xr-frame后处理

7月前 作者：行者-风 分类：Toy博客 阅读(30) 违法举报

这篇具有很好参考价值的文章主要介绍了微信小程序xr-frame后处理。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前言：什么是后处理？（详见：ThreeJS 后处理 - 掘金 (juejin.cn)）

后处理就是对WebGLRenderer.render(scene, camera)的渲染2D图片进行处理。可以把多个后处理进行组合，按照顺序执行，每个处理过程，被称为Pass。

（详见：Three.js post-processing（后处理））

常见方法：详见ThreeJS 后处理 - 掘金

小程序用法：（详见:后处理）

1.后处理可以用两种方式实现：

1).xr-asset-post-process标签，后处理的参数在data属性传入：

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

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

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

<xr-camera
  ......
  post-process="blur vignette"
/>

可以传入多个后处理

3.后处理目前只开放了内置的几种效果：（详见：微信开放文档）

scene.assets.addAsset('post-process', 'vignette', scene.createPostProcess({
  type: 'vignette',
  isHDR: false,
  data: {
    intensity: 0,
    smoothness: 2,
    color: [0 0 0 1]
  }
}));
  •  blur:高斯模糊，效果好但是在radius较大时性能开销较高，快速近似方法见fastblur。
参数 类型 默认值 说明 效果
radius number 5 模糊半径
微信小程序xr-frame后处理
radius:64
  • fastblur:也是高斯模糊，但是更快速的近似版本
参数 类型 默认值 说明 效果
radius number 5 模糊半径 时间稳定性高，但效果没有blur好，适用于需要不断变更radius的场景
  • bloom:泛光，建议开启is-hdr使用。
参数 类型 默认值 说明 效果
threshold number 0.5 阈值
微信小程序xr-frame后处理
radius=64，intensity=2，其他默认：
softThreshold number 0 软阈值
radius number 20 半径
intensity number 2 亮度
  •  tone:色调映射，ACES曲线，一般配合hdr使用。

1）效果：

效果
微信小程序xr-frame后处理

 

  •  vignette：渐晕。
参数 类型 默认值 说明 效果
center number[] [0.5,0.5] 半径
微信小程序xr-frame后处理
color=[1,0,0,1]，smoothness=2，其他默认：
color number[] [0,0,0,1] 颜色
intensity number 1 亮度
smoothness number 1 边缘柔化
roundness number 1 圆度
rounded number 0/1 强制为圆形
  •  fxaa:快速抗锯齿。

1)效果：

效果
微信小程序xr-frame后处理

 

修改参数：

有时候我们想修改后处理资源的参数来调整效果，有两种方式可以实现：一个最常用的方法就是在代码中拿到资源引用后修改：

1）在代码中修改

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

2)帧动画

另一种方法是使用帧动画，指定某帧的属性为后处理资源：

qu

{
  "keyframe": {
    "blur": {
      "0": {
        "asset-post-process.assetData.radius": 10
      },
      "100": {
        "asset-post-process.assetData.radius": 64
      }
    }
  },
  "animation": {
    "parent": {
      "keyframe": "blur",
      "duration": 4,
      "ease": "linear",
      "loop": -1
    }
  }
}

整体代码以及效果（来源：微信开放文档）

  • 父组件wxml部分

  <xr-gltf-postprocessing
    disable-scroll
    id="main-frame"
    width="{{renderWidth}}"
    height="{{renderHeight}}"
    style="width:{{width}}px;height:{{height}}px;top:{{top}}px;left:{{left}}px;display:block;"

    type="{{type}}"
    blurRadius="{{blurRadius}}"
    bloomRadius="{{bloomRadius}}"
    bloomIntensity="{{bloomIntensity}}"
    bloomThreshold="{{bloomThreshold}}"
    vignetteIntensity="{{vignetteIntensity}}"
    vignetteSmoothness="{{vignetteSmoothness}}"
    vignetteRoundness="{{vignetteRoundness}}"
    fxaaEnabled="{{fxaaEnabled}}"
    bind:assetsProgress="handleProgress"
    bind:assetsLoaded="handleLoaded"
    loaded="{{loaded}}"
  />
  <view wx:if="{{!loaded}}" style="position: absolute;display: flex; justify-content: center; align-items: center; left: 0;top: 0;width: {{width}}px;height: {{height}}px;background-color: #6aa; text-align: center;line-height: 24px;">
    <text style="color: white;font-size: 18px;">{{progressInfo}}</text>
  </view>
  <view class="form-entry">
    <view class="form-entry-title">后处理类型</view>
    <radio-group name="pp-type" bindchange="changeType">
      <label class="radio-item"><radio value="blur" checked/>模糊</label>
      <label class="radio-item"><radio value="vignette"/>渐晕</label>
      <label class="radio-item"><radio value="bloom"/>泛光</label>
      <label class="radio-item"><radio value="fxaa"/>抗锯齿</label>
    </radio-group>
  </view>
  <!-- <view class="divider"></view> -->
  <view wx:if="{{type == 0}}" class="form-entry">
    <view class="form-entry-title">模糊半径</view>
    <slider bindchange="changeBlurRadius" value="{{blurRadius}}"></slider>
  </view>
  <view wx:if="{{type == 2}}" class="form-entry">
    <view class="form-entry-title">渐晕强度</view>
    <slider bindchange="changeVignetteIntensity" value="{{vignetteIntensity}}" min="{{0}}" max="{{8}}" step="{{0.1}}"></slider>
  </view>
  <view wx:if="{{type == 2}}" class="form-entry">
    <view class="form-entry-title">渐晕平滑</view>
    <slider bindchange="changeVignetteSmoothness" value="{{vignetteSmoothness}}" min="{{0}}" max="{{8}}" step="{{0.1}}"></slider>
  </view>
  <view wx:if="{{type == 2}}" class="form-entry">
    <view class="form-entry-title">渐晕圆度</view>
    <slider bindchange="changeVignetteRoundness" value="{{vignetteRoundness}}"  min="{{0}}" max="{{1}}" step="{{0.1}}"></slider>
  </view>
  <view wx:if="{{type == 1}}" class="form-entry">
    <view class="form-entry-title">泛光半径</view>
    <slider bindchange="changeBloomRadius" value="{{bloomRadius}}"></slider>
  </view>
  <view wx:if="{{type == 1}}" class="form-entry">
    <view class="form-entry-title">泛光强度</view>
    <slider bindchange="changeBloomIntensity" max="5" value="2" step="0.1" value="{{bloomIntensity}}"></slider>
  </view>
  <view wx:if="{{type == 1}}" class="form-entry">
    <view class="form-entry-title">泛光阈值</view>
    <slider bindchange="changeBloomThreshold" max="2" value="0.5" step="0.1" value="{{bloomThreshold}}"></slider>
  </view>
  <view wx:if="{{type == 3}}" class="form-entry">
    <view class="form-entry-title">开启FXAA</view>
    <switch checked="{{fxaaEnabled}}" bindchange="switchFXAA"/>
  </view>

父组件js部分

Page({
  data: {
    xmlCode: '',
    type: 0,
    
    blurRadius: 16,
    bloomRadius: 16,
    bloomIntensity: 2,
    bloomThreshold: 0.5,
    vignetteIntensity: 1,
    vignetteSmoothness: 2,
    vignetteRoundness: 1,
    fxaaEnabled: false
  },
  handleProgress: function({detail}) {
    this.setData({progressInfo: `${~~(detail.progress * 100)} %\n\n${detail.asset.assetId}(${detail.asset.type}): ${detail.asset.src}`});
  },
  handleLoaded: function({detail}) {
    this.setData({loaded: true});
  },
  changeType(e) {
    const type = e.detail.value;
    if (type === "blur") {
      this.setData({
        type: 0
      });
    } else if (type === "bloom") {
      this.setData({
        type: 1
      });
    } else if (type === "vignette") {
      this.setData({
        type: 2
      });
    } else if (type === "fxaa") {
      this.setData({
        type: 3
      });
    }
  },
  changeBlurRadius(e) {
    this.setData({
      blurRadius: e.detail.value
    });
  },
  changeBloomRadius(e) {
    this.setData({
      bloomRadius: e.detail.value
    });
  },
  changeBloomIntensity(e) {
    this.setData({
      bloomIntensity: e.detail.value
    });
  },
  changeBloomThreshold(e) {
    this.setData({
      bloomThreshold: e.detail.value
    });
  },
  changeVignetteIntensity(e) {
    this.setData({
      vignetteIntensity: e.detail.value
    });
  },
  changeVignetteSmoothness(e) {
    this.setData({
      vignetteSmoothness: e.detail.value
    });
  },
  changeVignetteRoundness(e) {
    this.setData({
      vignetteRoundness: e.detail.value
    });
  },
  switchFXAA(e) {
    this.setData({
      fxaaEnabled: !this.data.fxaaEnabled
    });
  }
});
  • 父组件json部分
{
  "usingComponents": {
    "xr-gltf-postprocessing": "../../../components/xr-basic-postprocessing/index"
  },
  "disableScroll": true
}

子组件wxml部分

<xr-scene id="xr-scene" bind:ready="handleReady" bind:tick="handleTick">
  <xr-assets bind:progress="handleAssetsProgress" bind:loaded="handleAssetsLoaded">
    <xr-asset-load
      type="env-data" asset-id="env1" src="https://mmbizwxaminiprogram-1258344707.cos.ap-guangzhou.myqcloud.com/xr-frame/demo/env-test.bin"
    />
    <xr-asset-load type="gltf" asset-id="night_car_landscape" src="https://mmbizwxaminiprogram-1258344707.cos.ap-guangzhou.myqcloud.com/xr-frame/demo/night_car_landscape.glb" />
    <xr-asset-load type="gltf" asset-id="bedroom" src="https://mmbizwxaminiprogram-1258344707.cos.ap-guangzhou.myqcloud.com/xr-frame/demo/bedroom.glb" />
  </xr-assets>
  <xr-env env-data="{{env}}" />
  <xr-node>
    <xr-node node-id="camera-target" position="0 0 0"></xr-node>
    <xr-node layer="1">
      <xr-asset-post-process asset-id="bloom1" type="bloom" is-hdr data="radius: {{bloomRadius_0}}, intensity: {{bloomIntensity}}, threshold: {{bloomThreshold}}, softThreshold: 0.8"/>
      <xr-asset-post-process asset-id="bloom2" type="bloom" is-hdr data="radius: {{bloomRadius_1}}, intensity: {{bloomIntensity}}, threshold: {{bloomThreshold}}, softThreshold: 0.8"/>
      <xr-gltf node-id="gltf_1" position="0 0 0" rotation="0 0 0" scale="0.01 0.01 0.01" model="night_car_landscape"></xr-gltf>
    </xr-node>
    <xr-node layer="2">
      <xr-asset-post-process asset-id="blur" type="blur" data="radius: {{blurRadius}}"/>
      <xr-asset-post-process asset-id="vignette" type="vignette" data="color:1 0 0 1,intensity:{{vignetteIntensity}},smoothness:{{vignetteSmoothness}},roundness:{{vignetteRoundness}}"/>
      <xr-gltf node-id="gltf_2" position="0.5 -1 -2" rotation="0 0 0" scale="1 1 1" model="bedroom"></xr-gltf>
    </xr-node>
    <xr-node layer="3">
      <!-- xr-basic -->
      <xr-asset-post-process asset-id="fxaa" type="fxaa"/>
      <xr-asset-material asset-id="standard-mat" effect="standard" />
      <xr-mesh node-id="mesh-plane" position="0 -0.02 -4" rotation="0 0 0" scale="5 1 5" geometry="plane" material="standard-mat" uniforms="u_baseColorFactor:0.48 0.78 0.64 1" receive-shadow></xr-mesh>
      <xr-mesh id="cube" node-id="mesh-cube" position="-1 0.5 -3.5" scale="1 1 1" rotation="0 45 0" geometry="cube" material="standard-mat" uniforms="u_baseColorFactor:0.298 0.764 0.85 1" cast-shadow></xr-mesh>
      <xr-mesh node-id="mesh-sphere" position="0 1.25 -5" scale="1.25 1.25 1.25" geometry="sphere" material="standard-mat" uniforms="u_baseColorFactor:0.937 0.176 0.368 1" cast-shadow></xr-mesh>
      <xr-mesh node-id="mesh-cylinder" position="1 0.7 -3.5" scale="1 0.7 1" geometry="cylinder" material="standard-mat" uniforms="u_baseColorFactor:1 0.776 0.364 1" cast-shadow></xr-mesh>
    </xr-node>
    <xr-camera
      id="camera" node-id="camera" position="0 0 {{cameraPosition}}" clear-color="{{clearColor}}"
      near="0.1"
      far="2000"
      target="{{cameraTarget}}" background="{{background}}" camera-orbit-control=""
      cull-mask="{{cullMask}}"
      post-process="{{pp}}"
    ></xr-camera>
  </xr-node>
  <xr-node node-id="lights">
    <xr-light type="ambient" color="1 1 1" intensity="{{aIntensity}}" />
    <xr-light type="directional" rotation="40 180 0" color="1 1 1" intensity="{{dIntensity}}" />
  </xr-node>
</xr-scene>

子组件js部分

const blurData = {
  cullMask: 0b101,
  aIntensity: 1,
  dIntensity: 2,
  env: "",
  background: "default",
  cameraPosition: 1.3,
  clearColor: "0 0 0 1",
  cameraTarget: "camera-target",

  pp: "blur",
  // blurRadius: 0
};

const bloomData = {
  cullMask: 0b11,
  aIntensity: 0,
  dIntensity: 0,
  env: "",
  background: "default",
  cameraPosition: 10,
  clearColor: "0 0 0 1",
  cameraTarget: "camera-target",

  pp: "bloom2",
  // bloomRadius_0: 0,
  // bloomRadius_1: 0
};

const fxaaData = {
  cullMask: 0b1001,
  aIntensity: 1,
  dIntensity: 3,
  env: "",
  background: "default",
  cameraPosition: 1,
  clearColor: "0.925 0.925 0.925 1",
  cameraTarget: "mesh-sphere"
};

const vignetteData = {
  cullMask: 0b101,
  aIntensity: 1,
  dIntensity: 2,
  env: "",
  background: "default",
  cameraPosition: 1.3,
  clearColor: "0 0 0 1",
  cameraTarget: "camera-target",
  pp: "vignette",
};

Component({
  properties: {
    type: {
      type: Number,
      value: 0,
      observer: function (newVal, oldVal) {
        if (newVal !== oldVal) {
          if (newVal === 0) {
            this.activeBlur();
          } else if (newVal === 1) {
            this.activeBloom();
          } else if (newVal === 2) {
            this.activeVignette();
          } else if (newVal === 3) {
            this.activeFXAA();
          }
        }
      }
    },
    blurRadius: {
      type: Number,
      value: 0
    },
    bloomRadius: {
      type: Number,
      value: 0,
      observer(newVal, oldVal) {
        this.setData({
          bloomRadius_0: newVal * 0.2,
          bloomRadius_1: newVal * 0.8
        });
      }
    },
    bloomIntensity: {
      type: Number,
      value: 1,
    },
    bloomThreshold: {
      type: Number,
      value: 0.5,
    },
    vignetteIntensity: {
      type: Number,
      value: 1,
    },
    vignetteSmoothness: {
      type: Number,
      value: 2,
    },
    vignetteRoundness: {
      type: Number,
      value: 1,
    },
    fxaaEnabled: {
      type: Boolean,
      value: false,
      observer(newVal, oldVal) {
        this.setData({
          fxaaEnabled: newVal
        });
        if (this.data.type === 3) {
          this.activeFXAA();
        }
      }
    }
  },
  data: {
    loaded: false,
    env: "",
    cullMask: 0,
    background: "default",
    aIntensity: 0,
    dIntensity: 0,
    pp: "",
    cameraPosition: 1,
    cameraTarget: "camera-target",

    //---bloom---
    bloomRadius_0: 0,
    bloomRadius_1: 1,

    //---fxaa---
    fxaaEnabled: false
  },
  lifetimes: {
    attached() {
      console.log('data.a', this.data.a) // expected 123
    }
  },
  methods: {
    handleReady: function({detail}) {
      this.scene = detail.value;
      console.log('scene', detail.value);
      this.activeBlur();
    },
    handleTick: function() {
      // const camera = this.scene.getNodeById("camera");
      // const transform = camera.el._components.transform;
      // if (transform.rotation.y > Math.PI * 0.25) {
      //   transform.rotation.y = Math.PI * 0.25;
      // } else if  (transform.rotation.y < -Math.PI * 0.25) {
      //   transform.rotation.y = -Math.PI * 0.25;
      // }
    },
    handleAssetsProgress: function({detail}) {
      this.triggerEvent('assetsProgress', detail.value);
    },
    handleAssetsLoaded: function({detail}) {
      this.triggerEvent('assetsLoaded', detail.value);
      this.setData({loaded: true});
    },
    activeBlur() {
      this.setData(blurData);
    },
    activeBloom() {
      this.setData(bloomData);
    },
    activeVignette() {
      this.setData(vignetteData);
    },
    activeFXAA() {
      this.setData(fxaaData);
      this.setData({
        pp: this.data.fxaaEnabled ? "fxaa" : ""
      });
    }
  }
})
  • 效果如下：

微信小程序xr-frame后处理文章来源地址https://www.toymoban.com/news/detail-459649.html

到了这里，关于微信小程序xr-frame后处理的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • XR-FRAME 开始

    XR-FRAME 开始

    xr-frame 是一套小程序官方提供的XR/3D应用解决方案，基于混合方案实现，性能逼近原生、效果好、易用、强扩展、渐进式、遵循小程序开发标准。 在这一章中，我们将会带大家从头开始，用它构建一个XR小程序。 首先创建项目，让我们选择小程序工程： 之后先在 app.json 加上

    2024年02月12日
    浏览(45)
  • 微信小程序适配iphoneX，XR，12及以上，获取底部安全区域

    微信小程序适配iphoneX，XR，12及以上，获取底部安全区域

    iphone x及以上的异形屏top高度为44px（或以上），非异形屏为20px。 先判断是否为异形屏，如果是，获取到底部小黑条区域的高度。在页面设置底边距padding-bottom/margin-bottom，把内容区域隔开。 小黑条区域高度=屏幕高度-安全区域的bottom值，安全区域指的是内容可见区域 注意小

    2024年03月11日
    浏览(58)
  • 云安全_什么是云，云计算的本质，微信小程序的事件处理

    云安全_什么是云，云计算的本质，微信小程序的事件处理

    （1）虚拟化技术。 ①虚拟化概念 虚拟化是指计算元件在虚拟的而不是真实的基础运行，用“虚”的软件来代替或模拟“实”的服务器，CPU，网络等硬件 产品的一种简化管理和优化资源的解决方案。 虚拟化将物理资源转变为具有可管理性的逻辑资源，以消除物理结构之间的

    2024年04月23日
    浏览(30)
  • 微信小程序用什么工具开发（微信小程序开发工具介绍）

    微信小程序用什么工具开发（微信小程序开发工具介绍）

    有很多人在开发小程序之前都会去了解微信小程序开发工具，想知道微信小程序用什么工具开发。时至今日，随着互联网技术的发展，现在开发微信小程序也能使用多种不同的工具，让我们来了解一下吧。 一、微信开发者工具 这是微信官方提供的微信小程序开发工具，可以

    2024年02月11日
    浏览(32)
  • 微信小程序用什么编写

    微信小程序用什么编写

    微信小程序是一种轻量级的应用程序，可以在微信中直接使用，而无需下载和安装。由于它的快速和简便，越来越多的企业和开发者开始将微信小程序作为他们的主要开发目标。那么，微信小程序到底用什么编写呢？ 微信小程序可以使用多种编程语言和工具来编写，其中最常

    2024年02月12日
    浏览(26)

  • 微信小程序 分享图片大小处理

    1、在分享的page 添加 canvas 标签 2、在分享的page 引入makeCanvas(之后下边会定义)，并在onShareAppMessage里使用 3、图片处理的主要文件（导出makeCanvas），一般作为工具包，需要的时候引入 这里将图片处理为5：4的大小，默认生成的图片为jpg格式 之后在微信小程序分享时应该就能看

    2024年02月16日
    浏览(35)
  • 微信小程序——input事件处理函数

    微信小程序——input事件处理函数

    在小程序中，通过input事件来响应文本框的输入事件，语法格式如下： 1、通过bindinput，可以为文本框绑定输入时间： 2、在页面中的.js文件中定义事件处理函数： 3、输入对比 4、输出对比：每一次按键输入都作为一次完整的文本出入并记录，当再有更新时，在后面自动键入或

    2024年02月04日
    浏览(26)

  • 【微信小程序】关于授权拒绝后处理

    一般情况下，微信授权拒绝之后无法再次调用起授权弹框，所以可以通过调用设置权限按钮来打开权限信息 下面代码以微信位置权限代码为例： 如上，只需将上面封装成一个js文件，页面需要用时直接import导入即可 使用方法个人需求不一，这边简单示例：

    2024年02月16日
    浏览(35)

  • 微信小程序异常处理（持续记录中）

    处理方案 域名迁移之后，缺少ssl中间证书_衫青的博客-CSDN博客 Couldn\\\'t resolve the Component \\\"../components/selectCity/selectCity\\\" relative to \\\"/pages/selectCity/selectCity.json\\\" Couldn\\\'t resolve the Js file \\\"./../../components/diy/diy.js\\\" relative to \\\"/pages/index/index-backup/index.js:101:72\\\" 如需关闭依赖分析请在 project.conf

    2024年02月21日
    浏览(28)

  • 微信小程序和微信H5有什么区别？

    前言：进入公司会发现会从最常见的PC端开发，慢慢将重心转移到H5开发，再到小程序开发，后面随着公司业务的发展还需要开发APP，也就是Android。也有可能顺序不一样，作为一个合格的后端甚至全栈，这些还是要会的。 在开发微信小程序功能的时候，发现微信小程序和微信

    2024年02月11日
    浏览(30)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包