Jouer des vidéos transparentes sur la mini-programme wechat xr-frame
Commencer par
Préparer la vidéo transparente à jouer : télécharger la vidéo transparente sur un serveur de fichiers et obtenir l'URL utilisée pour le chargement dans xr-frame.
Étant donné que la lecture de vidéos transparentes dépend du remplacement des textures dans la scène, il est nécessaire d'identifier au préalable l'emplacement de lecture de la vidéo transparente. Il faut être capable de créer et télécharger des annotations à l'aide de l'éditeur Unity.
Qu'est-ce qu'une vidéo transparente
Vidéo transparente est une solution technique permettant d'obtenir un effet de fond transparent dans des formats de codage vidéo ne prenant pas en charge nativement le canal alpha (comme H.264/AVC, 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 une disposition spatiale spécifique au sein d'une même image, générant ainsi un fichier vidéo ordinaire avec un masque noir et blanc. Côté lecture, un échantillonnage en temps réel via le pipeline de rendu graphique permet de recomposer les deux parties pour restituer l'image dynamique avec fond transparent.
Selon la méthode d'assemblage des zones de couleur et Alpha, on distingue principalement deux formats :
Side-by-Side (SBS)
Side-by-Side est un format où l'image couleur RGB et l'image de masque Alpha sont assemblées horizontalement. Par convention, la partie gauche est la zone de couleur et la partie droite est la zone Alpha en niveaux de gris correspondante.
Top-by-Bottom (TBB)
Top-by-Bottom est un format où l'image couleur RGB et l'image de masque Alpha sont empilées verticalement. Par convention, la partie supérieure est la zone de couleur et la partie inférieure est la zone Alpha en niveaux de gris correspondante.
Annoter la position pour jouer une vidéo transparente sur la mini-programme xr-frame
Commencez par charger une ressource vidéo de type video-texture.
async loadAsset() {
const videoTexture = {
assetId: "fireball",
type: "video-texture",
// URL de la ressource vidéo
src: "url/video-resource.mp4",
options: {
autoPlay: true,
loop: true,
}
};
try {
// Charger la ressource de type video-texture
await scene.assets.loadAsset(videoTexture);
} catch (err) {
console.error(`Failed to load video texture: ${err.message}`);
}
}
Dans le callback du chargement EMA, utilisez scene.createElement(xrFrameSystem.XRMesh,{}) pour créer une géométrie simple avec le matériau easyar-video-tsbs, et modifiez l'uniforme en u_baseColorMap:video-{$assetId}.
Note
Le chargement, l'enregistrement, le désenregistrement et le déchargement des matériaux easyar-video-tsbs et easyar-video-ttbb sont contrôlés par la session AR.
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 nœud Block n'existe pas, créez-le
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 {
// Utiliser le maillage intégré pour créer une géométrie de rendu
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 un avertissement wx.createVideoDecoder with type: 'wemedia' is deprecated apparaît dans la console, veuillez l'ignorer.
Après confirmation avec l'équipe officielle WeChat, cet avertissement n'affecte pas l'utilisation.