在 xr-frame 微信小程序上播放透明動画
始める前に
再生する透明動画を準備：透明動画をファイルサーバーにアップロードし、xr-frame でロードするための URL を取得。
透明動画の再生はシーン内のテクスチャ置換に依存するため、再生位置を事前に注釈付けする必要がある。 Unity エディタを使用した注釈の作成とアップロードが可能であること。
透明動画とは
透明動画 は、ネイティブでアルファチャンネルをサポートしない動画コーデック形式（例：H.264/AVC, H.265/HEVC）において透明背景効果を実現するための技術ソリューション。
この手法は動画フレームのカラー情報 (RGB) と透明度情報 (Alpha) を分離し、特定の空間配置で同一フレーム内に結合することで、白黒マスク付きの通常の動画ファイルを生成する。再生側ではグラフィックスレンダリングパイプラインにより両部分をリアルタイムサンプリング・合成し、透明背景を持つ動的画像を復元する。
カラー領域とAlpha領域の結合方法に基づき、主に2つのフォーマットが存在する：
Side-by-Side (SBS)
Side-by-SideはRGBカラーフレームとAlphaマスクフレームを水平方向に並べて結合するフォーマット。通常、左側がカラー領域、右側が対応するグレースケールAlpha領域とされる。
Top-by-Bottom (TBB)
Top-by-BottomはRGBカラーフレームとAlphaマスクフレームを垂直方向に積層結合するフォーマット。通常、上半分がカラー領域、下半分が対応するグレースケールAlpha領域とされる。
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 ノードが存在しない場合、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 使用時にコンソールに wx.createVideoDecoder with type: 'wemedia' is deprecated 警告が表示される場合、無視して問題ない。
微信公式チームにより確認済みで、この警告は使用に影響しない。