Reproducir video transparente en un WeChat Mini Program xr-frame
Antes de comenzar
Prepare el video transparente que se debe reproducir: cargue el video transparente en un servidor de archivos y obtenga la URL utilizada para cargarlo en xr-frame.
Como la reproducción de video transparente depende de reemplazar texturas en la escena, es necesario anotar de antemano la ubicación donde se reproducirá el video transparente. Debe poder crear y cargar anotaciones con Unity Editor.
Qué es video transparente
Video transparente es una solución técnica para lograr un efecto de fondo transparente en formatos de codificación de video que no admiten de forma nativa canales alfa, como H.264/AVC y H.265/HEVC.
Esta solución separa la información de color (RGB) y la información de transparencia (Alpha) de la imagen de video, y las une en la misma imagen de frame según una disposición espacial específica, generando un archivo de video normal con una máscara en blanco y negro. En el lado de reproducción, el pipeline de renderizado gráfico muestrea en tiempo real y compone las dos partes para restaurar imágenes dinámicas con fondo transparente.
Según la forma en que se unen el área de color y el área Alpha, se divide principalmente en dos formatos:
Side-by-Side (SBS)
Side-by-Side es un formato que une el frame de color RGB y el frame de máscara Alpha en paralelo en la dirección horizontal. Normalmente se acuerda que el lado izquierdo sea el área de color y el lado derecho el área Alpha en escala de grises correspondiente.
Top-by-Bottom (TBB)
Top-by-Bottom es un formato que apila y une el frame de color RGB y el frame de máscara Alpha en la dirección vertical. Normalmente se acuerda que la mitad superior sea el área de color y la mitad inferior el área Alpha en escala de grises correspondiente.
Reproducir video transparente en una posición anotada en un Mini Program xr-frame
Primero cargue un 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 {
// carga un recurso de tipo video-texture
await scene.assets.loadAsset(videoTexture);
} catch (err) {
console.error(`Failed to load video texture: ${err.message}`);
}
}
En el callback cargado por EMA, use scene.createElement(xrFrameSystem.XRMesh,{}) para crear una geometría simple, asígnele el material easyar-video-tsbs y cambie uniform a u_baseColorMap:video-{$assetId}.
Nota
La carga, registro, anulación de registro 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, crea el nodo 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 {
// crea la geometria para renderizar con el Mesh integrado
model = scene.createElement(xrFrameSystem.XRMesh, {
geometry: "cube",
material: "easyar-video-tsbs",
uniforms: "u_baseColorMap:video-fireball",
});
xrNode.addChild(model);
}
});
}
Nota
Al usar video-texture, si la consola muestra la advertencia wx.createVideoDecoder with type: 'wemedia' is deprecated, ignórela.
Se ha confirmado con el equipo oficial de WeChat que esta advertencia no afecta el uso.