sample-easyar-effect-video-transparent¶

演示如何使用插件提供的效果实现透明视屏功能。

配置和运行¶

请参考开发入门进行配置和运行

如果想创建标准的xr-frame工程，请参考微信官方文档开始

详解¶

透明视频的实现方式为小程序xr-frame视频纹理 + 自定义透明视频Effect + 模型面片。在使用该功能前请确保已了解xr-frame的视频纹理。

sample的运行流程基于小程序基本框架，目录pages中存放所有的页面逻辑，components中存放所有被页面使用的组件功能，xr-frame和AR功能的在component中加载和使用。

小程序的目录结构说明：https://developers.weixin.qq.com/miniprogram/dev/framework/structure.html

微信小程序xr-frame视屏纹理说明：https://developers.weixin.qq.com/miniprogram/dev/component/xr-frame/render/texture.html#%E8%A7%86%E9%A2%91%E7%BA%B9%E7%90%86

透明视频使用的effect分为左右通道和上下通道，两个effect的id分别为：

左右通道：easyar-video-tsbs

上下通道：easyar-video-ttbb

sample中提供了两种通道的视屏素材

左右通道：https://sightppp.oss-cn-shanghai.aliyuncs.com/public/resource/default/fireball.mp4

上下通道：https://sightppp.oss-cn-shanghai.aliyuncs.com/miniprogramTest/waitan-h264.mp4

演示效果¶

注册material¶

wx.getXrFrameSystem().registerMaterial("videoTransparentSideBySide", scene => scene.createMaterial(scene.assets.getAsset("effect", "easyar-video-tsbs")));
wx.getXrFrameSystem().registerMaterial("videoTransparentTopByBottom", scene => scene.createMaterial(scene.assets.getAsset("effect", "easyar-video-ttbb")));

使用xr-frame的标准流程注册材质球。

加载视频¶

scene.assets.loadAsset({
    type: "video-texture",
    assetId: "vsbs",
    src: "https://sightppp.oss-cn-shanghai.aliyuncs.com/public/resource/default/fireball.mp4",
    options: {
        autoPlay: true,
        loop: true,
    }
})

通过xr-frame的资源加载系统加载视频即可，与GLTF模型加载流程一致，option中可设置视频播放设置，视频设置可参考微信官方文档。

https://developers.weixin.qq.com/miniprogram/dev/api/xr-frame/interfaces/IVideoTextureLoaderOptions.html

将视频呈现在场景中¶

let vCube1 = scene.createElement(wx.getXrFrameSystem().XRMesh, {
    geometry: "cube",
    material: "videoTransparentTopByBottom",
    uniforms: "u_baseColorMap:video-vtbb",
});
root.addChild(vCube1);

sample使用内置几何体来呈现视频内容，开发者可以替换为plane或者其他的内置几何体，`material`设置已注册的材质id，uniforms中设置视频的assetId给u_baseColorMap。当视频资源加载完成后会自动在几何体上呈现出来。

根据xr-frame纹理使用约定，视频纹理在使用时需要添加前缀 video- 。

微信小程序相关说明：

XRMesh属性映射

纹理使用约定