Memutar video transparan di xr-frame WeChat Mini Program
Sebelum memulai
Siapkan video transparan yang akan diputar: Unggah video transparan ke server file dan dapatkan URL untuk memuat di xr-frame.
Karena pemutaran video transparan bergantung pada penggantian tekstur dalam adegan, perlu menandai lokasi pemutaran video transparan terlebih dahulu. Harus mampu membuat dan mengunggah anotasi menggunakan Unity Editor.
Apa itu video transparan
Video transparan adalah solusi teknis untuk mencapai efek latar belakang transparan dalam format pengkodean video yang tidak secara native mendukung saluran transparansi (seperti H.264/AVC, H.265/HEVC).
Solusi ini memisahkan informasi warna (RGB) dan informasi transparansi (Alpha) dari bingkai video, lalu menggabungkannya dalam tata letak spasial tertentu ke dalam satu gambar, sehingga menghasilkan file video biasa dengan masker hitam-putih. Di sisi pemutar, melalui pipeline rendering grafis, kedua bagian tersebut di-sampel dan disintesis secara real-time untuk mengembalikan gambar dinamis dengan latar belakang transparan.
Berdasarkan cara penyambungan area warna dan area Alpha, terutama ada dua format:
Side-by-Side (SBS)
Side-by-Side adalah format yang menggabungkan bingkai warna RGB dan bingkai Alpha masker secara horizontal. Biasanya, bagian kiri adalah area warna, dan bagian kanan adalah area Alpha abu-abu yang sesuai.
Top-by-Bottom (TBB)
Top-by-Bottom adalah format yang menumpuk bingkai warna RGB dan bingkai Alpha masker secara vertikal. Biasanya, bagian atas adalah area warna, dan bagian bawah adalah area Alpha abu-abu yang sesuai.
Memutar video transparan di lokasi yang ditandai pada xr-frame mini program
Pertama, muat aset video bertipe video-texture.
async loadAsset() {
const videoTexture = {
assetId: "fireball",
type: "video-texture",
// URL sumber daya video
src: "url/video-resource.mp4",
options: {
autoPlay: true,
loop: true,
}
};
try {
// Memuat sumber daya bertipe video-texture
await scene.assets.loadAsset(videoTexture);
} catch (err) {
console.error(`Failed to load video texture: ${err.message}`);
}
}
Dalam callback pemuatan EMA, gunakan scene.createElement(xrFrameSystem.XRMesh,{}) untuk membuat geometri sederhana dan berikan material easyar-video-tsbs, lalu ubah uniform menjadi u_baseColorMap:video-{$assetId}.
Catatan
Pemuatan, pendaftaran, pembatalan pendaftaran, dan pelepasan material easyar-video-tsbs dan easyar-video-ttbb dikendalikan 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 peringatan wx.createVideoDecoder with type: 'wemedia' is deprecated muncul di konsol, abaikan saja.
Setelah dikonfirmasi dengan tim resmi WeChat, peringatan ini tidak memengaruhi penggunaan.