Прозрачное видео в xr-frame для мини-программ WeChat
Перед началом
Подготовьте прозрачное видео для воспроизведения: загрузите видео на файловый сервер и получите URL для загрузки в xr-frame.
Поскольку воспроизведение прозрачного видео зависит от замены текстур в сцене, необходимо заранее разместить аннотации для позиции воспроизведения. Требуется умение создавать и загружать аннотации с помощью редактора Unity.
Что такое прозрачное видео
Прозрачное видео — это технологическое решение, позволяющее добиться эффекта прозрачного фона в форматах кодирования видео, которые изначально не поддерживают альфа-канал (например, H.264/AVC, H.265/HEVC).
Этот метод разделяет цветовую информацию (RGB) и информацию о прозрачности (Alpha) видеокадра, а затем объединяет их в одном изображении по специальной пространственной схеме, создавая обычный видеофайл с черно-белой маской. На стороне воспроизведения с помощью графического конвейера рендеринга части сэмплируются и синтезируются в реальном времени, восстанавливая динамическое изображение с прозрачным фоном.
В зависимости от способа объединения цветовой области и альфа-области выделяют два основных формата:
Side-by-Side (SBS)
Side-by-Side — это формат, в котором RGB-кадр и альфа-кадр объединяются горизонтально. Обычно слева располагается цветовая область, справа — соответствующая ей область альфа-канала в градациях серого.
Top-by-Bottom (TBB)
Top-by-Bottom — это формат, в котором RGB-кадр и альфа-кадр вертикально накладываются друг на друга. Обычно верхняя часть содержит цветовую область, нижняя — соответствующую область альфа-канала в градациях серого.
Воспроизведение прозрачного видео по аннотации в xr-frame мини-программы
Сначала загрузите видеоресурс типа 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}`);
}
}
В обратном вызове загрузки 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 отсутствует, создайте его
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 {
// Создание геометрии для рендеринга с помощью встроенного меша
model = scene.createElement(xrFrameSystem.XRMesh, {
geometry: "cube",
material: "easyar-video-tsbs",
uniforms: "u_baseColorMap:video-fireball",
});
xrNode.addChild(model);
}
});
}
Примечание
Если при использовании video-texture в консоли появляется предупреждение wx.createVideoDecoder with type: 'wemedia' is deprecated, проигнорируйте его.
По подтверждению команды WeChat, это предупреждение не влияет на функциональность.