在 xr-frame 微信小程序上播放透明視頻
開始之前
準備需要播放的透明視頻：將透明視頻上傳至文件服務器並獲取用於在 xr-frame 中加載的 URL。
由於透明視頻的播放依賴於替換場景中的貼圖，需要事先標註播放透明視頻的位置。 需要能夠使用 Unity 編輯器創建並上傳標註。
什麼是透明視頻
透明視頻 是一種為了在不原生支持透明通道的視頻編碼格式（如 H.264/AVC， H.265/HEVC）中實現透明背景效果的技術方案。
該方案通過將視頻畫面的顏色信息 （RGB） 和透明度信息 （Alpha） 拆分，並按照特定的空間佈局拼接到同一幀圖像中，從而生成一個帶有黑白遮罩的普通視頻文件。在播放端，通過圖形渲染管線實時採樣並將兩部分合成，還原出具有透明背景的動態畫面。
根據顏色區域與 Alpha 區域的拼接方式，主要分為兩種格式：
Side-by-Side （SBS）
Side-by-Side 是一種將 RGB 顏色幀與 Alpha 遮罩幀在水平方向上並排拼接的格式。通常約定左側為顏色區域，右側為對應的灰度 Alpha 區域。
Top-by-Bottom （TBB）
Top-by-Bottom 是一種將 RGB 顏色幀與 Alpha 遮罩幀在垂直方向上堆疊拼接的格式。通常約定上半部分為顏色區域，下半部分為對應的灰度 Alpha 區域。
在 xr-frame 小程序上標註位置播放透明視頻
首先加載類型為 video-texture 的視頻資源。
async loadAsset() {
const videoTexture = {
assetId: "fireball",
type: "video-texture",
// 視頻資源 URL
src: "url/video-resource.mp4",
options: {
autoPlay: true,
loop: true,
}
};
try {
// 加載 video-texture 類型資源
await scene.assets.loadAsset(videoTexture);
} catch (err) {
console.error(`Failed to load video texture: ${err.message}`);
}
}
在 EMA 加載的回調中使用 scene.createElement(xrFrameSystem.XRMesh,{}) 創建簡單的幾何體賦予 easyar-video-tsbs 材質， 並修改 uniform 為 u_baseColorMap:video-{$assetId}。
附註
easyar-video-tsbs 和 easyar-video-ttbb 材質的加載，註冊，反註冊，卸載由 AR Session 控制。
handleEmaResult(ema: easyar.ema.v0_5.Ema) {
const blockHolder: easyar.BlockHolder = session.blockHolder;
ema.blocks.forEach(emaBlock => {
const blockInfo: easyar.BlockInfo = {
id: emaBlock.id
};
// 若 Block 節點不存在，創建 Block 節點
blockHolder.holdBlock(blockInfo, easyarPlugin.toXRFrame(emaBlock.transform));
});
ema.annotations.forEach(annotation => {
if (annotation.type !== mega.EmaV05AnnotationType.Node) {
return;
}
const nodeAnnotation = annotation as easyar.ema.v0_5.Node;
const xrNode: xrfs.XRNode = easyarPlugin.createXRNodeFromNodeAnnotation(nodeAnnotation, blockHolder);
const assetInfo = AnnotationMetaData[nodeAnnotation.id as keyof typeof AnnotationMetaData];
let model: xrfs.Element;
if (assetInfo) {
// GLTF 部分
} else {
// 利用內置 Mesh 創建用於渲染的幾何體
model = scene.createElement(xrFrameSystem.XRMesh, {
geometry: "cube",
material: "easyar-video-tsbs",
uniforms: "u_baseColorMap:video-fireball",
});
xrNode.addChild(model);
}
});
}
附註
在使用 video-texture 時，若控制台出現 wx.createVideoDecoder with type: 'wemedia' is deprecated 警告，請忽略。
經與微信官方團隊確認，該警告不影響使用。