Transparentes Video auf der xr-frame WeChat-Mini-Programm wiedergeben
Bevor Sie beginnen
Bereiten Sie das transparente Video vor: Laden Sie das transparente Video auf einen Dateiserver hoch und holen Sie sich die URL zum Laden in xr-frame.
Da das Abspielen des transparenten Videos vom Ersetzen der Textur in der Szene abhängt, muss die Position für die Wiedergabe im Voraus annotiert werden. Sie müssen in der Lage sein, Annotationen mit dem Unity-Editor zu erstellen und hochzuladen.
Was ist transparentes Video
Transparentes Video ist eine technische Lösung, um einen transparenten Hintergrund in Video-Codec-Formaten zu erreichen, die keine native Unterstützung für einen Alphakanal bieten (wie H.264/AVC, H.265/HEVC).
Diese Lösung teilt die Farbinformationen (RGB) und die Transparenzinformationen (Alpha) eines Videobildes auf und fügt sie nach einem bestimmten räumlichen Layout in einem einzigen Bild zusammen. Dadurch entsteht eine gewöhnliche Videodatei mit einer Schwarz-Weiß-Maske. Auf der Abspielseite werden die beiden Teile durch Echtzeit-Sampling im Grafik-Rendering-Pipeline kombiniert, um das dynamische Bild mit transparentem Hintergrund wiederherzustellen.
Je nach Art der Kombination von Farb- und Alpha-Bereichen 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 horizontal nebeneinander angeordnet werden. Üblicherweise befindet sich der Farbbereich links und der entsprechende Graustufen-Alphabereich rechts.
Top-by-Bottom (TBB)
Top-by-Bottom ist ein Format, bei dem der RGB-Farbframe und der Alpha-Maskenframe vertikal übereinander gestapelt werden. Üblicherweise befindet sich der Farbbereich oben und der entsprechende Graustufen-Alphabereich unten.
Transparentes Video an annotierter Position auf dem xr-frame Mini-Programm wiedergeben
Laden Sie zunächst die Videoressource vom Typ video-texture.
async loadAsset() {
const videoTexture = {
assetId: "fireball",
type: "video-texture",
// Video-Ressourcen-URL
src: "url/video-resource.mp4",
options: {
autoPlay: true,
loop: true,
}
};
try {
// Ressource vom Typ video-texture laden
await scene.assets.loadAsset(videoTexture);
} catch (err) {
console.error(`Failed to load video texture: ${err.message}`);
}
}
Erstellen Sie im EMA-Lade-Callback mit scene.createElement(xrFrameSystem.XRMesh,{}) ein einfaches geometrisches Objekt, weisen Sie ihm das Material easyar-video-tsbs zu, und ändern Sie das uniform in u_baseColorMap:video-{$assetId}.
Anmerkung
Das Laden, Registrieren, Deregistrieren und Entladen der Materialien easyar-video-tsbs und easyar-video-ttbb wird durch die 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
};
// Wenn der Block-Knoten nicht existiert, erstellen Sie ihn
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-Teil
} else {
// Erstellen Sie ein geometrisches Objekt zum Rendern mit dem integrierten Mesh
model = scene.createElement(xrFrameSystem.XRMesh, {
geometry: "cube",
material: "easyar-video-tsbs",
uniforms: "u_baseColorMap:video-fireball",
});
xrNode.addChild(model);
}
});
}
Anmerkung
Wenn bei der Verwendung von video-texture die Warnung wx.createVideoDecoder with type: 'wemedia' is deprecated in der Konsole erscheint, können Sie diese ignorieren.
Nach Rücksprache mit dem offiziellen WeChat-Team bestätigt, dass diese Warnung die Nutzung nicht beeinträchtigt.