微信小程序XR黑色背景视频透明效果（二）

微信官方demo中的removeBlack效果不是很好，匹配度太低，我们直接渲染透明视频

第一步类似

新建 effect-bgTransparent.ts

const xrFrameSystem = wx.getXrFrameSystem();
function createVideoTsbsEffect(scene) {
  return scene.createEffect(
    {
      "name": "bgTransparent",
      "properties": [
        {
          "key": "u_baseColorFactor",
          "type": 3,
          "default": [1, 1, 1, 0]
        }
      ],
      "images": [{ "key": "u_baseColorMap", "default": "white", "macro": "WX_USE_BASECOLORMAP" }],
      "defaultRenderQueue": 3000,
      "passes": [
        {
          "renderStates": { "cullOn": true, "blendOn": true, "depthWrite": true, "cullFace": 0 },
          "lightMode": "ForwardBase",
          "useMaterialRenderStates": true,
          "shaders": [0, 1]
        }],
      "shaders": [
        `#version 100
  precision highp float;
  attribute vec3 a_position;
  attribute vec2 a_texCoord;


  uniform mat4 u_projection;
  uniform mat4 u_world;
  uniform mat4 u_view;
  varying highp vec2 vTextureCoord;
  
  void main()
  {
    vTextureCoord = a_texCoord;
    gl_Position = u_projection * u_view * u_world * vec4(a_position,1.0);
  }`,
        `#version 100
  precision highp float;


  uniform highp vec4 u_baseColorFactor;
  #ifdef WX_USE_BASECOLORMAP
    uniform sampler2D u_baseColorMap;
  #endif


  varying highp vec2 vTextureCoord;


  void main()
  {
#ifdef WX_USE_BASECOLORMAP
  vec4 color = texture2D(u_baseColorMap, vec2(vTextureCoord.x*0.5,vTextureCoord.y));
  vec4 colora = texture2D(u_baseColorMap, vec2(vTextureCoord.x*0.5 + 0.5,vTextureCoord.y));


    vec4 baseColor = vec4(color.xyz,colora.x);
#else
    vec4 baseColor = u_baseColorFactor;
#endif


  gl_FragData[0] = baseColor;
  }  
    `]
    }
  )
}
xrFrameSystem.registerEffect("bgTransparent", createVideoTsbsEffect);

引入该自定义

import '../../xr-custom/assets/effect-bgTransparent';

　　

实际使用

<xr-scene ar-system="modes:Marker" bind:ready="handleReady">
  <xr-assets bind:progress="handleAssetsProgress" bind:loaded="handleAssetsLoaded">
    <xr-asset-load type="video-texture" asset-id="test3"  options="autoPlay:true,loop:true" src="https://cdn.apix.cn/xxx.mp4" />
   

    <xr-asset-material asset-id="removeBlack-mat3" effect="bgTransparent" uniforms="u_baseColorMap:video-test3" />

    <!-- <xr-asset-material asset-id="removeBlack-mat3" effect="removeBlack"/> -->
  </xr-assets>

  <xr-node>
      <xr-ar-tracker mode="Marker" bind:ar-tracker-switch="handleTrackerSwitch" src="https://cdn.apix.cn/xxx.png">
      <xr-mesh node-id="mesh-plane" geometry="plane" position="0 0.5 0" rotation="0 0 0" material="removeBlack-mat3" scale="0.3 0.5 0.5"/>

    </xr-ar-tracker>
    <xr-camera id="camera" background="ar" is-ar-camera  />
  </xr-node>
</xr-scene>