微信小程序开发02：原始人也能看懂的着色器与视频处理

掘金前端

作者海石

2026年3月21日 18:41

往期回顾：

微信小程序开发01：XR-FRAME的快速上手

1、背景

还记得01时，3.3.3章节的成果展示吗？

虽然图片识别成功了，并且视频加载完毕了

但是视频存在大规模的绿色背景，这是业务不期望展示的

期望的效果是抠除绿色背景，仅保留人物主体，如下图：

今天我们就来尝试对视频图层做调整

2、温故知新

为了快速实现MVP，我们忽略了很多信息，但这些信息对我们基于MVP二次开发时，比较重要

我们需要了解一下当前demo工程的结构：

清晰的分层架构：

Pages 层（如 xr-template-water/index.wxml ）：
- 负责页面配置和展示
- 定义标题、介绍等元数据
- 处理页面级别的交互
Components 层（如 xr-template-water/index.wxml ）：
- 包含实际的 XR 场景逻辑
- 处理 3D 渲染、AR 追踪等核心功能
- 实现具体的业务逻辑
共享行为机制 share-behavior.js 的设计：
- 提供统一的分享功能实现
- 统一处理 AR 追踪状态初始化
- 减少重复代码，提高一致性
- 被所有 template 组件复用

再来看看数据流向：

用户交互
    │
    ▼
Pages 层 (页面配置)
    │
    ▼
xr-demo-viewer (容器组件)
    │
    ├─► 显示 UI (标题、介绍、代码)
    │
    └─► <slot> (主内容)
            │
            ▼
Components/Template (业务组件)
    │
    ├─► share-behavior (共享功能)
    │       │
    │       ├─► 分享初始化
    │       └─► AR 状态管理
    │
    └─► xr-scene (XR 场景)
            │
            ├─► 资源加载
            ├─► 3D 渲染
            └─► AR 追踪

像我们在第一期做的改造，得益于此demo工程的优秀设计，当我们想要新增功能时，只要做4步操作：

创建 pages/template/xr-template-newFeature

创建 components/template/xr-template-newFeature

使用 xr-demo-viewer 包裹

引入 share-behavior 获得共享功能

3、透明视频

ok，接下来我们进入正题，如何让绿幕视频可以扣除绿幕，实现一些付费AR软件提供的功能？

有两条路：

直接导入微信小程序支持的透明视频
通过自定义着色器计算每个像素颜色与绿色背景的距离，使用 smoothstep 函数根据距离动态调整透明度，使绿色背景变为透明而其他内容保持不透明。

第一条路需要使用AE等视频处理软件，导出成果，对素材的质量要求较高，也就是对上游有依赖

因此，不想被上游依赖，我们便选择第二条路，自己实现视频扣除纯色背景的功能

况且，XR FRAME本就支持着色器

// XR-Frame 提供的 API
wx.getXrFrameSystem().registerEffect("chroma-key", createChromaKeyEffect);

scene.createEffect({
  "name": "chroma-key",
  "shaders": [vertexShader, fragmentShader]  // 支持 GLSL 着色器
})

ok，写到这里，大家应该还是困惑，着色器和视频有什么关系？

着色器就像一个超级快的修图师，把视频的每一帧图片都检查一遍，把绿色的像素变成透明，然后把处理好的图片贴在3D模型这块"布料"上，纹理材质就是这块布料和修图师的组合

大白话说完，我们来看看处理的过程

我们创建一个新的资源，让它被包裹在xr-assets下，这个新的资源就是我们刚刚提到的“修图师”，它在小程序里的体现就是“材质”，即xr-asset-material

  <xr-assets>
    <xr-asset-load type="video-texture" asset-id="ayuan-video" src="https:/xxxx.mp4" options="autoPlay:true,loop:true" />
    <xr-asset-material asset-id="chroma-key-mat" effect="chroma-key" />
  <xr-assets>

asset-id我们很熟悉了，对应于材质的名字，就和视频的asset-id一样

effect是效果，即材质的模板

通过对effect的设置，我们可以调整光照模式，等等

"chroma-key"是我们通过scene.createEffect方法创造出来的一种自定义效果

部分源码如下：

function createChromaKeyEffect(scene) {
  return scene.createEffect({
    "name": "chroma-key",  // 给这个修图师起个名字叫"绿幕扣除"
    
    // 定义要用的工具：视频图片
    "images": [{
      "key": "u_baseColorMap",  // 视频纹理的代号
      "default": "white",
      "macro": "WX_USE_BASECOLORMAP"
    }],
    
    // 定义修图规则（着色器代码）
    "shaders": [
      // 第一个着色器：负责把3D模型放到屏幕上
      `顶点着色器...`,
      
      // 第二个着色器：负责给每个像素上色（这里是关键！）
      `片元着色器...
        vec4 color = texture2D(u_baseColorMap, vTextureCoord);  // 取出视频的像素颜色
        
        vec3 greenKey = vec3(0.055, 0.816, 0.294);  // 绿幕的颜色
        float dist = distance(color.rgb, greenKey);  // 算一下这个像素离绿色有多远
        
        float threshold = 0.40;  // 设定一个距离标准
        float alpha = smoothstep(threshold - 0.005, threshold + 0.005, dist);
        // 如果离绿色很近，透明度就变成0（看不见）
        // 如果离绿色很远，透明度就保持1（看得见）
        
        color.a *= alpha;  // 把算好的透明度应用到像素上
      `
    ]
  })
}

写完之后，别忘了在系统中注册，这样之后到处都可以使用

// 在组件加载时执行
lifetimes: {
  async attached() {
    const xrFrameSystem = wx.getXrFrameSystem();
    
    // 把这个修图师注册到系统里，以后可以随时用
    xrFrameSystem.registerEffect("chroma-key", createChromaKeyEffect);
  }
}

然后我们就要把之前的视频，和我们刚刚创建的材质，组合起来

创建一个3D平面模型
给这个模型穿上"chroma-key-mat"这件衣服
把视频"ayuan-video"贴在衣服上
把模型放到场景里

handleARReady: async function ({ detail }) {
  // 创建一个3D平面（就像一块板子）
  const videoPlane = this.scene.createElement(xr.XRMesh, {
    geometry: 'plane',           // 形状：平面
    material: 'chroma-key-mat',  // 材质：用刚才创建的“布料”
    uniforms: 'u_baseColorMap: video-ayuan-video',  // 把视频贴在布料上
    position: '0 0.5 0',      // 位置
    scale: '0.8 0.45 1',      // 大小
  });
  
  // 把这个平面添加到场景中
  lockItemEle.addChild(videoPlane);
}

一句话总结：代码先创建了一个"绿幕扣除"的修图方案，然后创建一块用这个方案的布料，最后把视频贴在这块布料上，视频的每一帧都会自动被修图师处理，绿色背景就变透明了！

附录

架构图

普通视图

1、背景

2、温故知新

3、透明视频

附录