Reproduzir vídeo transparente no mini programa wechat xr-frame
Antes de começar
Preparar o vídeo transparente para reprodução: carregar o vídeo transparente para um servidor de arquivos e obter o URL para carregamento no xr-frame.
Como a reprodução de vídeo transparente depende da substituição de texturas na cena, é necessário marcar previamente as posições de reprodução do vídeo transparente. É necessário poder criar e carregar anotações usando o editor unity.
O que é vídeo transparente
Vídeo transparente é uma solução técnica que permite alcançar efeitos de fundo transparente em formatos de codificação de vídeo que não suportam nativamente canais alfa (como H.264/AVC, H.265/HEVC).
Esta solução separa as informações de cor (RGB) e as informações de transparência (alfa) do quadro de vídeo, combinando-as em um layout espacial específico dentro do mesmo quadro de imagem, gerando assim um arquivo de vídeo comum com máscara em preto e branco. No lado da reprodução, as duas partes são amostradas e sintetizadas em tempo real através do pipeline de renderização gráfica para restaurar a imagem dinâmica com fundo transparente.
De acordo com o método de combinação entre a região de cor e a região alfa, existem dois formatos principais:
Side-by-Side (SBS)
Side-by-Side é um formato que combina o quadro de cores RGB e o quadro de máscara alfa lado a lado na direção horizontal. Normalmente, convenciona-se que o lado esquerdo é a região de cores e o lado direito é a região alfa em tons de cinza correspondente.
Top-by-Bottom (TBB)
Top-by-Bottom é um formato que empilha o quadro de cores RGB e o quadro de máscara alfa na direção vertical. Normalmente, convenciona-se que a parte superior é a região de cores e a parte inferior é a região alfa em tons de cinza correspondente.
Reproduzir vídeo transparente em posições anotadas no mini programa xr-frame
Primeiro, carregue o recurso de vídeo do tipo video-texture.
async loadAsset() {
const videoTexture = {
assetId: "fireball",
type: "video-texture",
// URL do recurso de vídeo
src: "url/video-resource.mp4",
options: {
autoPlay: true,
loop: true,
}
};
try {
// Carregar recurso do tipo video-texture
await scene.assets.loadAsset(videoTexture);
} catch (err) {
console.error(`Failed to load video texture: ${err.message}`);
}
}
Na callback de carregamento do EMA, use scene.createElement(xrFrameSystem.XRMesh,{}) para criar uma geometria simples com o material easyar-video-tsbs, e modifique o uniform para u_baseColorMap:video-{$assetId}.
Nota
O carregamento, registro, desregistro e descarregamento dos materiais easyar-video-tsbs e easyar-video-ttbb são controlados pela 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 o nó Block não existir, crie o nó 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 {
// Use a malha integrada para criar geometria de renderização
model = scene.createElement(xrFrameSystem.XRMesh, {
geometry: "cube",
material: "easyar-video-tsbs",
uniforms: "u_baseColorMap:video-fireball",
});
xrNode.addChild(model);
}
});
}
Nota
Ao usar video-texture, se aparecer um aviso wx.createVideoDecoder with type: 'wemedia' is deprecated no console, ignore-o.
Confirmado com a equipe oficial do WeChat, este aviso não afeta o uso.