渲染透明视频可以通过将透明视频通道转换为灰度图的方式,利用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": [1, 1, 1, 0]
}
],
"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": [0, 1]
}],
"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的偏移就可以了)
转换出来的视频结果如下图:
如果把geometry属性改成plane,着色器代码如何修改?
<xr-mesh scale="{{item.xScale}} 0 {{item.yScale}}"></xr-mesh>
后面发现图像是反过来的,因为正方体的正面看不到,这个怎么旋转也没用,这个是什么原因呢,求解
如果希望模型叠放在透明视频mesh上面,可以调整effect里的defaultRenderQueue参数修改渲染绘制顺序
请问透明视频对折了怎么回事
赞啊,可以用来做透明视频动效,效果很好
您好,大佬。我实在是找不到解决方案。咱们这个功能为什么竖直比例会拉伸,不管我怎么调整素材视频的比例,AR中的效果都是竖直方向被放大了一倍。这是为什么啊
去年貌似还能正常跑 今天试了下 发现合不起来啦 太诡异了我去。。。
感谢分享
官方的过滤黑色effect 播放的视频 人物效果改变了有点暗沉
多个透明视频 不论是iOS还是安卓都会有加载不出来的情况 也没有报错信息
且安卓有些机型会闪退以及加载成功也不播放的情况