xr-frame 위챗 미니프로그램에서 투명 비디오 재생하기
시작하기 전에
재생할 투명 비디오 준비: 투명 비디오를 파일 서버에 업로드하고 xr-frame에서 로드할 URL을 획득합니다.
투명 비디오 재생은 장면 내 텍스처 교체에 의존하므로, 재생 위치 사전 표시가 필요합니다. Unity 편집기를 사용하여 표시 생성 및 업로드 방법을 숙지해야 합니다.
투명 비디오란
투명 비디오는 투명 채널을 기본적으로 지원하지 않는 비디오 인코딩 형식(예: H.264/AVC, H.265/HEVC)에서 투명 배경 효과를 구현하기 위한 기술 솔루션입니다.
이 솔루션은 비디오 프레임의 색상 정보(RGB) 와 투명도 정보(Alpha) 를 분리한 후 특정 공간 레이아웃에 따라 동일 프레임 내에 병합하여 흑백 마스크가 포함된 일반 비디오 파일을 생성합니다. 재생 단계에서는 그래픽 렌더링 파이프라인을 통해 실시간으로 샘플링하고 두 부분을 합성하여 투명 배경이 있는 동적 화면을 복원합니다.
색상 영역과 Alpha 영역의 결합 방식에 따라 주로 두 가지 형식으로 구분됩니다:
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 세션이 제어합니다.
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 경고가 나타나면 무시하십시오.
위챗 공식팀 확인 결과, 이 경고는 사용에 영향을 미치지 않습니다.