Reproduzir vídeo transparente em um WeChat Mini Program xr-frame
Antes de começar
Prepare o vídeo transparente a ser reproduzido: faça upload do vídeo transparente para um servidor de arquivos e obtenha a URL usada para carregá-lo no xr-frame.
Como a reprodução do vídeo transparente depende da substituição de texturas na cena, é necessário anotar previamente a posição onde o vídeo transparente será reproduzido. É necessário conseguir criar e fazer upload de anotações usando o Unity Editor.
O que é vídeo transparente
Vídeo transparente é uma solução técnica para obter efeito de fundo transparente em formatos de codificação de vídeo que não suportam canal alpha nativamente, como H.264/AVC e H.265/HEVC.
Essa solução separa as informações de cor (RGB) e as informações de transparência (Alpha) da imagem do vídeo, e as emenda no mesmo frame de imagem de acordo com um layout espacial específico, gerando um arquivo de vídeo comum com uma máscara em preto e branco. No lado da reprodução, o pipeline de renderização gráfica faz sampling em tempo real e compõe as duas partes para restaurar imagens dinâmicas com fundo transparente.
De acordo com a forma de emenda da área de cor e da área Alpha, há principalmente dois formatos:
Side-by-Side (SBS)
Side-by-Side é um formato que emenda o frame de cor RGB e o frame de máscara Alpha lado a lado na direção horizontal. Normalmente, o lado esquerdo é a área de cor, e o lado direito é a área Alpha em escala de cinza correspondente.
Top-by-Bottom (TBB)
Top-by-Bottom é um formato que empilha e emenda o frame de cor RGB e o frame de máscara Alpha na direção vertical. Normalmente, a metade superior é a área de cor, e a metade inferior é a área Alpha em escala de cinza correspondente.
Reproduzir vídeo transparente na posição anotada em um Mini Program xr-frame
Primeiro, carregue um recurso de vídeo do tipo video-texture.
async loadAsset() {
const videoTexture = {
assetId: "fireball",
type: "video-texture",
// URL do recurso de video
src: "url/video-resource.mp4",
options: {
autoPlay: true,
loop: true,
}
};
try {
// carrega um recurso do tipo video-texture
await scene.assets.loadAsset(videoTexture);
} catch (err) {
console.error(`Failed to load video texture: ${err.message}`);
}
}
No callback carregado pela EMA, use scene.createElement(xrFrameSystem.XRMesh,{}) para criar uma geometria simples, atribua o material easyar-video-tsbs e altere uniform para u_baseColorMap:video-{$assetId}.
Nota
O carregamento, registro, cancelamento de registro e descarregamento dos materiais easyar-video-tsbs e easyar-video-ttbb são controlados por 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 no Block nao existir, crie o no 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 {
// cria a geometria para renderizacao usando o Mesh integrado
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 o console mostrar o aviso wx.createVideoDecoder with type: 'wemedia' is deprecated, ignore-o.
Foi confirmado com a equipe oficial do WeChat que esse aviso não afeta o uso.