Memutar transparent video pada xr-frame WeChat Mini Program
Sebelum mulai
Siapkan transparent video yang perlu diputar: upload transparent video ke file server dan dapatkan URL yang digunakan untuk memuatnya di xr-frame.
Karena playback transparent video bergantung pada penggantian texture dalam scene, posisi pemutaran transparent video perlu dianotasi terlebih dahulu. Anda perlu dapat membuat dan mengupload annotation menggunakan Unity Editor.
Apa itu transparent video
Transparent video adalah solusi teknis untuk mewujudkan efek background transparan pada format encoding video yang tidak mendukung alpha channel secara native, seperti H.264/AVC dan H.265/HEVC.
Solusi ini memisahkan color information (RGB) dan transparency information (Alpha) dari video image, lalu menyambungkannya ke frame image yang sama sesuai layout spatial tertentu, sehingga menghasilkan file video biasa dengan mask hitam-putih. Di sisi playback, graphics rendering pipeline melakukan sampling real time dan menggabungkan dua bagian tersebut untuk memulihkan gambar dinamis dengan background transparan.
Berdasarkan cara penyambungan color area dan Alpha area, format utamanya terbagi menjadi dua:
Side-by-Side (SBS)
Side-by-Side adalah format yang menyambungkan RGB color frame dan Alpha mask frame berdampingan dalam horizontal direction. Biasanya sisi kiri adalah color area, dan sisi kanan adalah grayscale Alpha area yang sesuai.
Top-by-Bottom (TBB)
Top-by-Bottom adalah format yang menumpuk dan menyambungkan RGB color frame dan Alpha mask frame dalam vertical direction. Biasanya bagian atas adalah color area, dan bagian bawah adalah grayscale Alpha area yang sesuai.
Memutar transparent video pada posisi annotation di xr-frame Mini Program
Pertama, load video resource bertipe video-texture.
async loadAsset() {
const videoTexture = {
assetId: "fireball",
type: "video-texture",
// URL resource video
src: "url/video-resource.mp4",
options: {
autoPlay: true,
loop: true,
}
};
try {
// muat resource bertipe video-texture
await scene.assets.loadAsset(videoTexture);
} catch (err) {
console.error(`Failed to load video texture: ${err.message}`);
}
}
Pada callback yang dimuat oleh EMA, gunakan scene.createElement(xrFrameSystem.XRMesh,{}) untuk membuat geometry sederhana, berikan material easyar-video-tsbs, lalu ubah uniform menjadi u_baseColorMap:video-{$assetId}.
Catatan
Loading, registration, deregistration, dan unloading material easyar-video-tsbs dan easyar-video-ttbb dikontrol oleh 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
};
// jika node Block tidak ada, buat node 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) {
// bagian GLTF
} else {
// buat geometri untuk rendering menggunakan Mesh bawaan
model = scene.createElement(xrFrameSystem.XRMesh, {
geometry: "cube",
material: "easyar-video-tsbs",
uniforms: "u_baseColorMap:video-fireball",
});
xrNode.addChild(model);
}
});
}
Catatan
Saat menggunakan video-texture, jika console menampilkan warning wx.createVideoDecoder with type: 'wemedia' is deprecated, abaikan.
Telah dikonfirmasi dengan tim resmi WeChat bahwa warning ini tidak memengaruhi penggunaan.