评论

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  
点赞 11
收藏
评论

11 个评论

  • yuan
    yuan
    2023-08-30

    后面发现图像是反过来的,因为正方体的正面看不到,这个怎么旋转也没用,这个是什么原因呢,求解

    2023-08-30
    赞同 1
    回复 2
    • Roam
      Roam
      2023-09-18
      cullOn 设为 false,或者 cullFace 改 1。默认顶点绕序有改动,会影响面朝向
      2023-09-18
      回复
    • 阿巳💫
      阿巳💫
      01-23回复Roam
      如果把geometry属性改成平面,显示不出来是真么原因呢
      01-23
      回复
  • xiao🎣
    xiao🎣
    05-22

    赞啊,可以用来做透明视频动效,效果很好

    05-22
    赞同
    回复
  • Madao
    Madao
    04-12

    您好,大佬。我实在是找不到解决方案。咱们这个功能为什么竖直比例会拉伸,不管我怎么调整素材视频的比例,AR中的效果都是竖直方向被放大了一倍。这是为什么啊

    04-12
    赞同
    回复
  • 王永勇
    王永勇
    04-08

    去年貌似还能正常跑 今天试了下 发现合不起来啦 太诡异了我去。。。

    04-08
    赞同
    回复
  • 铭星🌟Fresnel
    铭星🌟Fresnel
    03-14

    感谢分享

    03-14
    赞同
    回复
  • Nuy Oah
    Nuy Oah
    03-12

    官方的过滤黑色effect 播放的视频 人物效果改变了有点暗沉

    03-12
    赞同
    回复
  • 略略略
    略略略
    01-26

    多个透明视频 不论是iOS还是安卓都会有加载不出来的情况 也没有报错信息

    且安卓有些机型会闪退以及加载成功也不播放的情况

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


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

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


    2023-08-17
    赞同
    回复 5
    • 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
      回复
  • yuan
    yuan
    2023-07-13

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

    2023-07-13
    赞同
    回复

正在加载...

登录 后发表内容