Riproduzione di video trasparenti su xr-frame WeChat Mini Program
Prima di iniziare
Preparare il video trasparente da riprodurre: caricare il video trasparente su un server di file e ottenere l'URL per il caricamento in xr-frame.
Poiché la riproduzione di video trasparenti dipende dalla sostituzione delle texture nella scena, è necessario annotare in anticipo la posizione di riproduzione. È necessario essere in grado di creare e caricare annotazioni utilizzando l'editor Unity.
Che cos'è un video trasparente
Video trasparente è una soluzione tecnica per ottenere effetti di sfondo trasparente in formati di codifica video che non supportano nativamente il canale alfa (come H.264/AVC, H.265/HEVC).
Questa soluzione separa le informazioni sul colore (RGB) e le informazioni sulla trasparenza (Alpha) del fotogramma video, quindi le combina in un layout spaziale specifico all'interno della stessa immagine, generando così un file video standard con maschera in bianco e nero. Sul dispositivo di riproduzione, attraverso la pipeline di rendering grafico, i due componenti vengono campionati e ricombinati in tempo reale per ripristinare l'immagine dinamica con sfondo trasparente.
In base al metodo di combinazione delle aree colore e Alpha, esistono principalmente due formati:
Side-by-Side (SBS)
Side-by-Side è un formato che combina il fotogramma colore RGB e il fotogramma maschera Alpha in orizzontale. Di solito, la convenzione prevede che la parte sinistra sia l'area colore e quella destra l'area grigia Alpha corrispondente.
Top-by-Bottom (TBB)
Top-by-Bottom è un formato che sovrappone il fotogramma colore RGB e il fotogramma maschera Alpha in verticale. Di solito, la convenzione prevede che la parte superiore sia l'area colore e quella inferiore l'area grigia Alpha corrispondente.
Riproduzione di video trasparenti in posizioni annotate su xr-frame Mini Program
Per prima cosa, caricare una risorsa video di tipo video-texture.
async loadAsset() {
const videoTexture = {
assetId: "fireball",
type: "video-texture",
// URL risorsa video
src: "url/video-resource.mp4",
options: {
autoPlay: true,
loop: true,
}
};
try {
// Caricare risorsa di tipo video-texture
await scene.assets.loadAsset(videoTexture);
} catch (err) {
console.error(`Failed to load video texture: ${err.message}`);
}
}
Nella callback di caricamento EMA, utilizzare scene.createElement(xrFrameSystem.XRMesh,{}) per creare una geometria semplice a cui assegnare il materiale easyar-video-tsbs, e modificare uniform in u_baseColorMap:video-{$assetId}.
Nota
Il caricamento, registrazione, deregistrazione e scaricamento dei materiali easyar-video-tsbs e easyar-video-ttbb sono gestiti da 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
};
// Se il nodo Block non esiste, creare il nodo 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) {
// Parte GLTF
} else {
// Creare geometria per il rendering utilizzando mesh integrata
model = scene.createElement(xrFrameSystem.XRMesh, {
geometry: "cube",
material: "easyar-video-tsbs",
uniforms: "u_baseColorMap:video-fireball",
});
xrNode.addChild(model);
}
});
}
Nota
Durante l'uso di video-texture, se nella console appare l'avviso wx.createVideoDecoder with type: 'wemedia' is deprecated, ignorarlo.
Confermato con il team ufficiale WeChat: questo avviso non influisce sull'utilizzo.