Riprodurre video trasparente su WeChat Mini Program xr-frame
Prima di iniziare
Preparare il video trasparente da riprodurre: caricare il video trasparente su un file server e ottenere l'URL usato per caricarlo in xr-frame.
Poiché la riproduzione del video trasparente dipende dalla sostituzione delle texture nella scena, è necessario annotare in anticipo la posizione in cui riprodurre il video trasparente. È necessario poter creare e caricare annotazioni usando Unity Editor.
Che cos'è un video trasparente
Video trasparente è una soluzione tecnica per realizzare un effetto di sfondo trasparente in formati di codifica video che non supportano nativamente il canale alpha, come H.264/AVC e H.265/HEVC.
Questa soluzione separa le informazioni colore (RGB) e le informazioni di trasparenza (Alpha) dell'immagine video e le unisce nello stesso frame secondo uno specifico layout spaziale, generando un normale file video con una maschera in bianco e nero. Sul lato di riproduzione, la pipeline di rendering grafico campiona in tempo reale e compone le due parti per ripristinare immagini dinamiche con sfondo trasparente.
In base al modo in cui l'area colore e l'area Alpha sono unite, esistono principalmente due formati:
Side-by-Side (SBS)
Side-by-Side è un formato che unisce il frame colore RGB e il frame maschera Alpha affiancandoli nella direzione orizzontale. Di solito si assume che il lato sinistro sia l'area colore e il lato destro la corrispondente area Alpha in scala di grigi.
Top-by-Bottom (TBB)
Top-by-Bottom è un formato che impila e unisce il frame colore RGB e il frame maschera Alpha nella direzione verticale. Di solito si assume che la metà superiore sia l'area colore e la metà inferiore la corrispondente area Alpha in scala di grigi.
Riprodurre video trasparente in una posizione annotata su Mini Program xr-frame
Per prima cosa caricare una risorsa video di tipo video-texture.
async loadAsset() {
const videoTexture = {
assetId: "fireball",
type: "video-texture",
// URL della risorsa video
src: "url/video-resource.mp4",
options: {
autoPlay: true,
loop: true,
}
};
try {
// carica una risorsa di tipo video-texture
await scene.assets.loadAsset(videoTexture);
} catch (err) {
console.error(`Failed to load video texture: ${err.message}`);
}
}
Nel callback caricato da EMA, usare scene.createElement(xrFrameSystem.XRMesh,{}) per creare una geometria semplice, assegnare il materiale easyar-video-tsbs e modificare uniform in u_baseColorMap:video-{$assetId}.
Nota
Caricamento, registrazione, deregistrazione e scaricamento dei materiali easyar-video-tsbs e easyar-video-ttbb sono controllati 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, crea 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 {
// crea la geometria per il rendering usando il Mesh integrato
model = scene.createElement(xrFrameSystem.XRMesh, {
geometry: "cube",
material: "easyar-video-tsbs",
uniforms: "u_baseColorMap:video-fireball",
});
xrNode.addChild(model);
}
});
}
Nota
Quando si usa video-texture, se nella console appare l'avviso wx.createVideoDecoder with type: 'wemedia' is deprecated, ignorarlo.
È stato confermato con il team ufficiale WeChat che questo avviso non influisce sull'uso.