一般透明视频存在多种实现的方案，比如抽离用于裁剪的视频，以及滤色视频等。

看你之前的提问，需要 style="mix-blend-mode: screen;" 来渲染黑色背景的视频，可以认为是实现 滤色 的效果。

如果需要实现完整的滤色，计算公式是 f(a,b)= 1 - (1-a)*(1-b)，目前需要等开放获取屏幕贴图，才比较好自定义实现。

如果仅仅需要将视频黑色的部分认为是透明，

可以参考官方案例 https://github.com/dtysky/xr-frame-demo 中的 xr-custom-logic 自定义一份材质。

## 引用

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

## 使用代码

<xr-asset-material asset-id="screen-mat" effect="screen" />

## 材质代码 （以下做法无法适配半透明情况，如锯齿次像素）

import XrFrame from 'XrFrame';
const xrFrameSystem = wx.getXrFrameSystem();

xrFrameSystem.registerEffect('screen', scene => scene.createEffect({
  name: "screen",
  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,
      depthWrite: true,
      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()
{
  vec4 baseColor = texture2D(u_videoMap, v_UV);
  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);
  }
}
`],
}));

官方的例子跑出来了。怎么把标红的白色部分不显示。只显示左侧的内容？

能给个demo吗？这个代码看不懂啊