Reproducir video transparente en xr-frame wechat miniprogram
Antes de comenzar
Preparar el video transparente a reproducir: Subir el video transparente a un servidor de archivos y obtener la URL para cargarlo en xr-frame.
Dado que la reproducción de video transparente depende de reemplazar texturas en la escena, es necesario anotar previamente las ubicaciones de reproducción. Debe poder crear y subir anotaciones usando el editor de Unity.
Qué es un video transparente
Video transparente es una solución técnica para lograr fondos transparentes en formatos de codificación de video que no admiten nativamente canales alfa (como H.264/AVC, H.265/HEVC).
Este método separa la información de color (RGB) y la información de transparencia (Alpha) del fotograma de video, luego combina ambas partes en una sola imagen siguiendo un diseño espacial específico, creando así un archivo de video convencional con una máscara en blanco y negro. En el lado del reproductor, se muestrean y combinan ambas partes en tiempo real mediante la canalización de renderizado gráfico para restaurar la imagen dinámica con fondo transparente.
Según la forma de combinación de las regiones de color y alfa, existen dos formatos principales:
Side-by-Side (SBS)
Side-by-Side combina el fotograma RGB y el fotograma alfa en dirección horizontal. Convencionalmente, la izquierda es la región de color y la derecha la región de alfa en escala de grises correspondiente.
Top-by-Bottom (TBB)
Top-by-Bottom apila el fotograma RGB y el fotograma alfa en dirección vertical. Convencionalmente, la parte superior es la región de color y la inferior la región de alfa en escala de grises correspondiente.
Anotar ubicaciones para reproducir video transparente en xr-frame miniprogram
Primero cargue el recurso de video de tipo video-texture.
async loadAsset() {
const videoTexture = {
assetId: "fireball",
type: "video-texture",
// URL del recurso de video
src: "url/video-resource.mp4",
options: {
autoPlay: true,
loop: true,
}
};
try {
// Cargar recurso de tipo video-texture
await scene.assets.loadAsset(videoTexture);
} catch (err) {
console.error(`Failed to load video texture: ${err.message}`);
}
}
En la devolución de llamada de carga de EMA, use scene.createElement(xrFrameSystem.XRMesh,{}) para crear una geometría simple con el material easyar-video-tsbs, y modifique el uniform a u_baseColorMap:video-{$assetId}.
Nota
La carga, registro, desregistro y descarga de los materiales easyar-video-tsbs y easyar-video-ttbb son 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
};
// Si el nodo Block no existe, créelo
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 {
// Crear geometría de renderizado usando malla incorporada
model = scene.createElement(xrFrameSystem.XRMesh, {
geometry: "cube",
material: "easyar-video-tsbs",
uniforms: "u_baseColorMap:video-fireball",
});
xrNode.addChild(model);
}
});
}
Nota
Si aparece la advertencia wx.createVideoDecoder with type: 'wemedia' is deprecated en la consola al usar video-texture, ignórela.
Confirmado con el equipo oficial de WeChat, esta advertencia no afecta el uso.