评论

xr-frame中渲染透明视频

xr-frame中渲染透明视频

渲染透明视频可以通过将透明视频通道转换为灰度图的方式,利用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的偏移就可以了)

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


最后一次编辑于  2023-04-07  
点赞 14
收藏
评论

14 个评论

  • 阿巳💫
    阿巳💫
    01-23
    你好,请问一下我把geometry属性改成平面他就不显示了是怎么回事
    
    


    01-23
    赞同
    回复
  • GDY₂₀
    GDY₂₀
    2023-08-17

    大神,能给个demo吗?谢谢啦


    2023-08-17
    赞同
    回复 6
    • GDY₂₀
      GDY₂₀
      2023-08-17
      貌似可以了,生命周期的问题,要尽早运行js代码,我理解的,哈哈
      2023-08-17
      回复
    • 鲸鱼🐳
      鲸鱼🐳
      01-08回复GDY₂₀
      可以给个demo吗,谢谢啦
      01-08
      回复
    • 鲸鱼🐳
      鲸鱼🐳
      01-08
      会了,自己试出来了,哈哈
      01-08
      回复
    • 小俊先生.金彼岸
      小俊先生.金彼岸
      01-10回复鲸鱼🐳
      可以给我demo吗 谢谢
      01-10
      回复
    • 欢乐马
      欢乐马
      01-13回复鲸鱼🐳
      可以给一个demo吗 万分感谢
      01-13
      回复
    查看更多(1)
  • yuan
    yuan
    2023-07-13

    感谢大神分享,官方的过滤黑色effect效果太差了,大神666!!!

    2023-07-13
    赞同
    回复
  • 兔僧 Davina
    兔僧 Davina
    2023-04-20

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

    2023-04-20
    赞同
    回复

正在加载...

登录 后发表内容