Lire une vidéo transparente dans un WeChat Mini Program xr-frame
Avant de commencer
Préparez la vidéo transparente à lire: chargez la vidéo transparente sur un serveur de fichiers et obtenez l'URL utilisée pour la charger dans xr-frame.
Comme la lecture d'une vidéo transparente dépend du remplacement des textures dans la scène, il faut annoter à l'avance l'emplacement où la vidéo transparente sera lue. Vous devez pouvoir créer et charger des annotations avec Unity Editor.
Qu'est-ce qu'une vidéo transparente
Une vidéo transparente est une solution technique permettant d'obtenir un effet d'arrière-plan transparent dans des formats d'encodage vidéo qui ne prennent pas en charge nativement le canal alpha, tels que H.264/AVC et H.265/HEVC.
Cette solution sépare les informations de couleur (RGB) et les informations de transparence (Alpha) de l'image vidéo, puis les assemble dans la même image de frame selon une disposition spatiale spécifique, générant ainsi un fichier vidéo normal avec un masque noir et blanc. Côté lecture, la pipeline de rendu graphique échantillonne en temps réel et compose les deux parties pour restaurer une image dynamique avec arrière-plan transparent.
Selon la manière dont la zone de couleur et la zone Alpha sont assemblées, on distingue principalement deux formats:
Side-by-Side (SBS)
Side-by-Side est un format qui assemble côte à côte le frame couleur RGB et le frame masque Alpha dans la direction horizontale. Généralement, le côté gauche est la zone de couleur et le côté droit la zone Alpha en niveaux de gris correspondante.
Top-by-Bottom (TBB)
Top-by-Bottom est un format qui empile et assemble le frame couleur RGB et le frame masque Alpha dans la direction verticale. Généralement, la moitié supérieure est la zone de couleur et la moitié inférieure la zone Alpha en niveaux de gris correspondante.
Lire une vidéo transparente à une position annotée dans un Mini Program xr-frame
Chargez d'abord une ressource vidéo de type video-texture.
async loadAsset() {
const videoTexture = {
assetId: "fireball",
type: "video-texture",
// URL de la ressource video
src: "url/video-resource.mp4",
options: {
autoPlay: true,
loop: true,
}
};
try {
// charge une ressource de type video-texture
await scene.assets.loadAsset(videoTexture);
} catch (err) {
console.error(`Failed to load video texture: ${err.message}`);
}
}
Dans le callback chargé par EMA, utilisez scene.createElement(xrFrameSystem.XRMesh,{}) pour créer une géométrie simple, attribuez le material easyar-video-tsbs, puis modifiez uniform en u_baseColorMap:video-{$assetId}.
Note
Le chargement, l'enregistrement, le désenregistrement et le déchargement des materials easyar-video-tsbs et easyar-video-ttbb sont contrôlés par 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
};
// si le noeud Block n existe pas, cree le noeud 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) {
// partie GLTF
} else {
// cree la geometrie de rendu avec le Mesh integre
model = scene.createElement(xrFrameSystem.XRMesh, {
geometry: "cube",
material: "easyar-video-tsbs",
uniforms: "u_baseColorMap:video-fireball",
});
xrNode.addChild(model);
}
});
}
Note
Lors de l'utilisation de video-texture, si la console affiche l'avertissement wx.createVideoDecoder with type: 'wemedia' is deprecated, ignorez-le.
Après confirmation avec l'équipe officielle WeChat, cet avertissement n'affecte pas l'utilisation.