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": [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的偏移就可以了)
转换出来的视频结果如下图: