Transparentes Video in einem xr-frame WeChat Mini Program abspielen
Bevor Sie beginnen
Bereiten Sie das transparente Video vor, das abgespielt werden soll: Laden Sie das transparente Video auf einen Dateiserver hoch und erhalten Sie die URL, die zum Laden in xr-frame verwendet wird.
Da die Wiedergabe transparenter Videos vom Ersetzen von Texturen in der Szene abhängt, muss die Position für die Wiedergabe des transparenten Videos im Voraus annotiert werden. Sie müssen Annotationen mit dem Unity Editor erstellen und hochladen können.
Was ist transparentes Video
Transparentes Video ist eine technische Lösung, um einen transparenten Hintergrundeffekt in Video-Encoding-Formaten zu erzielen, die Alphakanäle nicht nativ unterstützen, wie H.264/AVC und H.265/HEVC.
Diese Lösung trennt die Farbinformationen (RGB) und die Transparenzinformationen (Alpha) des Videobildes und fügt sie gemäß einem bestimmten räumlichen Layout in demselben Frame zusammen. Dadurch entsteht eine normale Videodatei mit einer Schwarz-Weiß-Maske. Auf der Wiedergabeseite sampelt die Grafik-Rendering-Pipeline in Echtzeit und setzt die beiden Teile zusammen, um dynamische Bilder mit transparentem Hintergrund wiederherzustellen.
Je nachdem, wie Farbbereich und Alpha-Bereich zusammengefügt werden, gibt es hauptsächlich zwei Formate:
Side-by-Side (SBS)
Side-by-Side ist ein Format, bei dem der RGB-Farbframe und der Alpha-Maskenframe in horizontaler Richtung nebeneinander zusammengefügt werden. Üblicherweise ist links der Farbbereich und rechts der entsprechende Graustufen-Alpha-Bereich.
Top-by-Bottom (TBB)
Top-by-Bottom ist ein Format, bei dem der RGB-Farbframe und der Alpha-Maskenframe in vertikaler Richtung gestapelt und zusammengefügt werden. Üblicherweise ist die obere Hälfte der Farbbereich und die untere Hälfte der entsprechende Graustufen-Alpha-Bereich.
Transparentes Video an annotierten Positionen in einem xr-frame Mini Program abspielen
Laden Sie zuerst eine Videoressource vom Typ 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}`);
}
}
Verwenden Sie im von EMA geladenen Callback scene.createElement(xrFrameSystem.XRMesh,{}), um eine einfache Geometrie zu erstellen, weisen Sie das Material easyar-video-tsbs zu und ändern Sie uniform in u_baseColorMap:video-{$assetId}.
Anmerkung
Laden, Registrierung, Deregistrierung und Entladen der Materialien easyar-video-tsbs und easyar-video-ttbb werden von AR Session gesteuert.
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);
}
});
}
Anmerkung
Wenn bei Verwendung von video-texture in der Konsole die Warnung wx.createVideoDecoder with type: 'wemedia' is deprecated erscheint, ignorieren Sie sie.
Es wurde mit dem offiziellen WeChat-Team bestätigt, dass diese Warnung die Nutzung nicht beeinträchtigt.