XR框架下 AR相机镜头前增加花瓣飘动的滤镜

本文链接：https://blog.csdn.net/qq_38871784/article/details/134417688

1.加载透明视频资源

<!-- 视频加载 -->
    <xr-asset-load type="video-texture" asset-id="hbvt"
      src="你的视频路径/hb.mp4" style="object-fit:fill;" options="autoPlay:true,loop:true"/>
    <xr-asset-material asset-id="hbvlog"  effect="screen"/>

2.添加一个大的立方体罩子（注意一定是cube类型，plane类型的会不显示）

   <!-- 立方体的罩子 -->
    <xr-node node-id="camera-target" style="position: absolute;">
      <xr-mesh geometry="cube" material="hbvlog" rotation="0 -90 0" scale="5 5 5" uniforms="u_videoMap:video-hbvt" states="renderQueue:2500"></xr-mesh> 
    </xr-node>

3.添加AR相机，即可实现AR镜头开启时，出现花瓣飘动滤镜，且随相机移动

 <!-- AR 相机 -->
    <xr-camera
      id="camera" node-id="camera" position="1 1 1" clear-color="0.925 0.925 0.925 1" background="ar" ar-mode="true" is-ar-camera > 
    </xr-camera>

4.最终完整代码：

<xr-scene ar-system="modes:Marker" id="xr-scene" bind:ready="handleReady" bind:ar-ready="handleARReady" transparent="true">
  <!-- XR 资源加载 -->
  <xr-assets bind:progress="handleAssetsProgress" bind:loaded="handleAssetsLoaded">    
    <!-- 视频加载 -->
    <xr-asset-load type="video-texture" asset-id="hbvt"
      src="你的视频路径/hb.mp4" style="object-fit:fill;" options="autoPlay:true,loop:true"/>
    <xr-asset-material asset-id="hbvlog"  effect="screen"/>
    
  </xr-assets>
  
  <!-- XR 环境设置 -->
  <xr-env env-data="xr-frame-team-workspace-day" />
  <!-- XR 节点 -->
  <xr-node>
  
      <!-- 立方体的罩子 -->
    <xr-node node-id="camera-target" style="position: absolute;">
      <xr-mesh geometry="cube" material="hbvlog" rotation="0 -90 0" scale="5 5 5" uniforms="u_videoMap:video-hbvt" states="renderQueue:2500"></xr-mesh> 
    </xr-node>
      
    </xr-node>

    <!-- AR 相机 -->
    <xr-camera
      id="camera" node-id="camera" position="1 1 1" clear-color="0.925 0.925 0.925 1" background="ar" ar-mode="true" is-ar-camera > 
    </xr-camera>    
  </xr-node>

    <!-- 光照节点 -->
  <xr-node node-id="lights">
    <xr-light type="ambient" color="1 1 1" intensity="1" />
    <xr-light type="directional" rotation="180 0 0" color="1 1 1" intensity="3" cast-shadow/>
  </xr-node>
</xr-scene>