Воспроизведение прозрачного видео в xr-frame WeChat Mini Program
Перед началом
Подготовьте прозрачное видео для воспроизведения: загрузите прозрачное видео на файловый сервер и получите URL, который будет использоваться для загрузки в xr-frame.
Поскольку воспроизведение прозрачного видео зависит от замены текстур в сцене, необходимо заранее разметить место воспроизведения прозрачного видео. Нужно уметь создавать и загружать аннотации с помощью Unity Editor.
Что такое прозрачное видео
Прозрачное видео — это техническое решение для реализации эффекта прозрачного фона в форматах кодирования видео, которые изначально не поддерживают альфа-канал, например H.264/AVC и H.265/HEVC.
Это решение разделяет цветовую информацию (RGB) и информацию прозрачности (Alpha) видеокадра, затем соединяет их в одном кадре изображения в соответствии с определенной пространственной компоновкой, создавая обычный видеофайл с черно-белой маской. На стороне воспроизведения графический конвейер рендеринга выполняет sampling в реальном времени и объединяет две части, восстанавливая динамическое изображение с прозрачным фоном.
По способу соединения цветовой области и области Alpha в основном выделяются два формата:
Side-by-Side (SBS)
Side-by-Side — это формат, в котором RGB-цветовой кадр и Alpha-маска соединяются рядом друг с другом в горизонтальном направлении. Обычно слева находится цветовая область, а справа соответствующая серая Alpha-область.
Top-by-Bottom (TBB)
Top-by-Bottom — это формат, в котором RGB-цветовой кадр и Alpha-маска складываются и соединяются в вертикальном направлении. Обычно верхняя половина является цветовой областью, а нижняя половина соответствующей серой Alpha-областью.
Воспроизведение прозрачного видео в размеченной позиции в xr-frame Mini Program
Сначала загрузите видеоресурс типа video-texture.
async loadAsset() {
const videoTexture = {
assetId: "fireball",
type: "video-texture",
// URL видеоресурса
src: "url/video-resource.mp4",
options: {
autoPlay: true,
loop: true,
}
};
try {
// загрузите ресурс типа video-texture
await scene.assets.loadAsset(videoTexture);
} catch (err) {
console.error(`Failed to load video texture: ${err.message}`);
}
}
В callback, загруженном EMA, используйте scene.createElement(xrFrameSystem.XRMesh,{}), чтобы создать простую геометрию, назначьте материал easyar-video-tsbs и измените uniform на u_baseColorMap:video-{$assetId}.
Примечание
Загрузка, регистрация, отмена регистрации и выгрузка материалов easyar-video-tsbs и easyar-video-ttbb управляются 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
};
// если узла Block нет, создайте узел 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) {
// часть GLTF
} else {
// создайте геометрию для рендеринга с помощью встроенного Mesh
model = scene.createElement(xrFrameSystem.XRMesh, {
geometry: "cube",
material: "easyar-video-tsbs",
uniforms: "u_baseColorMap:video-fireball",
});
xrNode.addChild(model);
}
});
}
Примечание
При использовании video-texture, если в console появляется предупреждение wx.createVideoDecoder with type: 'wemedia' is deprecated, игнорируйте его.
Команда WeChat официально подтвердила, что это предупреждение не влияет на использование.