微信小程式XR黑色背景影片透明效果（一）

那知归不归發表於2024-11-05
微信小程式

去除黑色背景主要依賴於effect="removeBlack"，其中removeBlack為官方demo寫的規則，程式碼如下

const xrFrameSystem = wx.getXrFrameSystem();

xrFrameSystem.registerEffect('removeBlack', scene => scene.createEffect({
  name: "removeBlack",
  images: [{
    key: 'u_videoMap',
    default: 'white',
    macro: 'WX_USE_VIDEOMAP'
  }],
  defaultRenderQueue: 2000,
  passes: [{
    "renderStates": {
      cullOn: false,
      blendOn: true,
      blendSrc: xrFrameSystem.EBlendFactor.SRC_ALPHA,
      blendDst: xrFrameSystem.EBlendFactor.ONE_MINUS_SRC_ALPHA,
      cullFace: xrFrameSystem.ECullMode.BACK,
    },
    lightMode: "ForwardBase",
    useMaterialRenderStates: true,
    shaders: [0, 1]
  }],
  shaders: [
`#version 100

uniform highp mat4 u_view;
uniform highp mat4 u_viewInverse;
uniform highp mat4 u_vp;
uniform highp mat4 u_projection;
uniform highp mat4 u_world;

attribute vec3 a_position;
attribute highp vec2 a_texCoord;

varying highp vec2 v_UV;

void main()
{
  v_UV = a_texCoord;
  vec4 worldPosition = u_world * vec4(a_position, 1.0);
  gl_Position = u_projection * u_view * worldPosition;
  }`,
`#version 100

precision mediump float;
precision highp int;
varying highp vec2 v_UV;

#ifdef WX_USE_VIDEOMAP
  uniform sampler2D u_videoMap;
#endif

void main()
{
#ifdef WX_USE_VIDEOMAP
  vec4 baseColor = texture2D(u_videoMap, v_UV);
#else
  vec4 baseColor = vec4(1.0, 1.0, 1.0, 1.0);
#endif
  float rgbSum = baseColor.r + baseColor.g + baseColor.b;
  // 設定閾值避免異常情況
  if (rgbSum < 0.1) {
    gl_FragData[0] = vec4(1.0, 1.0, 1.0, 0.0);
  } else {
    gl_FragData[0] = vec4(pow(baseColor.rgb, vec3(2.2)), 1.0);
  }
}
`],
}));

再進行規則引入

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

<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/G9Go8gsfiSUZ2PkmxbEiHD2W1M5epwmE.mp4" />
   
    <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://img.apix.cn/chishui2.png">
      <xr-mesh node-id="video-item2" geometry="plane"  material="removeBlack-mat3" uniforms="u_videoMap: video-test3" states="renderQueue:3000" position="0 0 0"  rotation="90 180 0"/>

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

相關文章