xr-frame中渲染透明视频
发布于 2 年前 作者 lei03 4311 次浏览 来自 分享

渲染透明视频可以通过将透明视频通道转换为灰度图的方式,利用uv将透明叠加到视频上。shader处理如下:

 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);
  gl_FragData[0] = baseColor;

具体代码:

const xrFrameSystem = wx.getXrFrameSystem();
function createVideoTsbsEffect(scene) {
    return scene.createEffect(
        {
            "name""video-tsbs",
            "properties": [
                {
                    "key""u_baseColorFactor",
                    "type"3,
                    "default": [1110]
                }
            ],
            "images": [{ "key""u_baseColorMap""default""white""macro""WX_USE_BASECOLORMAP" }],
            "defaultRenderQueue"3000,
            "passes": [
                {
                    "renderStates": { "cullOn"true"blendOn"true"depthWrite"true"cullFace"2 },
                    "lightMode""ForwardBase",
                    "useMaterialRenderStates"true,
                    "shaders": [01]
                }],
            "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("video-tsbs", createVideoTsbsEffect);

wxml:

<xr-scene  bind:ready="handleReady">
    <xr-assets>
        <xr-asset-load type="texture" asset-id="waifu" src="https://mmbizwxaminiprogram-1258344707.cos.ap-guangzhou.myqcloud.com/xr-frame/demo/waifu.png" />
        <xr-asset-load type="video-texture" asset-id="test" src="https://demo.uality.cn/output-lr.mp4" options="autoPlay:true,loop:true" />
        <xr-asset-material asset-id="video-tsbs-mat" effect="video-tsbs" uniforms="u_baseColorMap:video-test" />
    </xr-assets>
    <xr-mesh node-id="cube" geometry="cube" material="video-tsbs-mat" />
    <xr-camera clear-color="0.4 0.8 0.6 1" position="0 1 4" target="cube" camera-orbit-control />
</xr-scene>

视频生成:

通过ffmpeg生成将带有透明通道的mov格式视频转换为左(rgb通道信息)右(alpha通道信息)的MP4视频。

ffmpeg -i input.mov -vf "split [a], pad=iw*2:ih [b], [a] alphaextract, [b] overlay=w" -y output-lr.mp4

也可以用百度小程序“AFX透明视频”带的工具制作。(左右的话,直接修改shader的偏移就可以了)

转换出来的视频结果如下图:

1 回复

太赞了!!! 太好用了 谢谢大神 !!!!

回到顶部