Menggunakan plugin mega untuk implementasi oklusi
Oklusi (Occlusion) adalah teknologi kunci untuk meningkatkan imersi fusi realitas-virtual dalam AR. Artikel ini akan memandu Anda cara mencapai efek oklusi di lingkungan xr-frame melalui pelokasian dan anotasi cloud EasyAR.
Sebelum memulai
- Mampu menggunakan Mega Studio di Unity.
- Mampu membuat dan mengunggah anotasi menggunakan editor Unity.
- Mampu membuat konten yang selaras dengan pemandangan nyata.
Cara kerja implementasi oklusi
Pemodelan offline: Menggunakan editor Unity dalam sistem koordinat Block untuk membuat geometri yang cocok 1:1 dengan entitas dunia nyata (seperti dinding, pilar, peralatan besar); atau dengan memotong dan mengurangi poligon model padat Block untuk mendapatkan model yang dioptimalkan.
Penyelerasian runtime: Pada runtime xr-frame, sistem koordinat Block diselaraskan dengan ruang nyata melalui pelokasian cloud, dan geometri terkait dimuat.
Penggantian material: Geometri ini diberi material oklusi khusus.
Efek visual: Saat GPU merender objek virtual lain, piksel yang terhalang akan otomatis dibuang karena gagal dalam pengujian kedalaman, sehingga objek virtual mengikuti logika oklusi ruang fisik nyata.
Cara menyusun oklusi dengan geometri sederhana
Sejajarkan anotasi berbentuk kubus dengan model padat dan gambar panorama. Setelah ditempatkan, anotasi akan terlihat seperti "dinding" atau "pilar".
Ubah nama anotasi (misalnya
occlusion_wall), catat ID, unggah anotasi.Di mini-program xr-frame, gunakan geometri bawaan untuk memuat anotasi sebagai oklusi.
Dalam callback pemuatan EMA, gunakan
scene.createElement(xrFrameSystem.XRMesh,{})untuk membuat geometri sederhana dan berikan materialeasyar-occulusion.Catatan
Pemuatan, pendaftaran, pembatalan pendaftaran, dan pembongkaran material
easyar-occulusiondikendalikan oleh AR Session.
handleEmaResult(ema: easyar.ema.v0_5.Ema) {
let blockHolder: easyar.BlockHolder = session.blockHolder;
ema.blocks.forEach(emaBlock => {
const blockInfo: easyar.BlockInfo = {
id: emaBlock.id
};
// Jika node Block tidak ada, buat node 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 emaName: string = nodeAnnotation.name;
const geometryStr: string = nodeAnnotation.geometry === "cube" ? "cube" : "sphere";
const assetInfo = AnnotationMetaData[nodeAnnotation.id as keyof typeof AnnotationMetaData];
let model: xrfs.Element;
if (assetInfo) {
// Bagian GLTF
} else {
model = scene.createElement(
xrFrameSystem.XRMesh,
{
// Gunakan material oklusi yang sudah terdaftar di plugin
material: "easyar-occlusion",
// Gunakan geometri bawaan xr-frame, di sini juga bisa langsung menggunakan "cube"
geometry: geometryStr,
name: emaName,
"receive-shadow": "false",
"cast-shadow": "false"
// Perhatikan untuk tidak mengubah Scale
}
);
xrNode.addChild(model);
}
})
}
<video src="https://doc-asset.easyar.com/develop/wechat/mega/media/occlusion03.mp4" style="width:480px; max-width:100%; height:auto;" muted playsinline controls></video>
> Dengan oklusi, panda ini bisa menari bersembunyi di balik dinding.
Cara menyusun oklusi dengan geometri kompleks
Cocok untuk skenario yang memerlukan presisi tinggi seperti peralatan bentuk tidak beraturan atau bangunan tidak teratur.
Anda dapat menggunakan model padat Block, memotong dan mengurangi poligon untuk mendapatkan model putih yang diperlukan untuk oklusi.
Di adegan Unity, klik node Mega Block, catat BlockID di panel Inspector
Di Block Mega Studio, pilih ekspor.
Ubah opsi ekspor lalu ekspor.
Nomor 1 adalah tingkat LOD, semakin rendah tingkatnya semakin sederhana modelnya dan semakin sedikit poligonnya. Untuk presisi tertinggi pilih 2, jika bisa menerima pengurangan presisi untuk mengurangi poligon pilih 1 atau 0.
Nomor 2 adalah opsi ekspor tekstur, karena kita hanya membutuhkan model putih untuk oklusi, tekstur tidak diperlukan.
Potong, kurangi poligon, dan simpan model yang diekspor di perangkat lunak pembuatan konten digital (misalnya Blender) sebagai
Glb.Kiat
Contoh menggunakan Decimate Modifier Blender
Setelah dipotong dan dikurangi poligon:
Pasang file
Glbuntuk oklusi ke server file, dapatkan url untuk pemuatan.Di mini-program xr-frame, muat GLTF sebagai oklusi.
Pertama muat model GLTF untuk oklusi, lalu gunakan
scene.createElement(xrFrameSystem.XRGLTF,options)untuk membuat model GLTF.Gunakan
assets.getAsset("material", "easyar-occlusion")untuk mendapatkan objek materialGunakan
model.getComponent(xrFrameSystem.GLTF).meshes.forEach((m: any) => {m.setData({ neverCull: true, material: occlusionMaterial });}untuk memodifikasi material model GLTF.Catatan
Pemuatan, pendaftaran, pembatalan pendaftaran, dan pembongkaran material
easyar-occulusiondikendalikan oleh AR Session.
const sampleAssets = {
occlusion1: {
assetId: "occlusion1",
type: "gltf",
src: "url/occlusion1.glb",
options: {}
}
}
async loadAsset() {
if (!scene) {console.error("Scene kosong"); return;}
try {
await scene.assets.loadAsset(sampleAssets.occlusion1);
} catch (err) {
console.error(`Gagal memuat aset: ${err.message}`);
}
},
addOcclusion() {
model = scene.createElement(
xrFrameSystem.XRGLTF,
{
"model": assetInfo.assetId,
"anim-autoplay": assetInfo.animation ? assetInfo.animation : "",
"scale": assetInfo.scale ? assetInfo.scale : "1 1 1",
name: "tree"
}
);
const blockID = "aaaa1234-bbbb-cccc-dddd-eeeeee123456" //Di sini harus mengisi Block ID
if (!blockHolder.getBlockById(blockParent.id)) {
// Jika tidak ada node Block yang ada, buat satu
blockHolder.holdBlock({
id: blockID
})
}
// Dapatkan node Block dalam scene xr-frame
let blockElement = blockHolder.getBlockById(blockParent.id).el;
// Mount model oklusi yang dipotong ke node Block sebagai anaknya
blockElement.addChild(model);
/**
* Karena perilaku pemuat GLTF berbeda, untuk memastikan orientasi model pada xr-frame sepenuhnya konsisten dengan hasil render Unity
* Terkadang model yang dimuat perlu diputar 180 derajat di sekitar sumbu Y
*/
let modelTransform = model.getComponent(xrFrameSystem.Transform);
let currentRotation = modelTransform.quaternion.clone();
let targetRotation = currentRotation.multiply(new xrFrameSystem.Quaternion().setValue(0, 1, 0, 0));
modelTransform.quaternion.set(targetRotation);
//Harus memodifikasi material setelah mengubah Transform
if (assetInfo.assetId == 'occlusion1') {
//Dapatkan material oklusi yang disediakan oleh plugin mega
let occlusionMaterial = scene.assets.getAsset("material", "easyar-occlusion");
//Modifikasi material oklusi
model.getComponent(xrFrameSystem.GLTF).meshes.forEach((m: any) => {
m.setData({ neverCull: true, material: occlusionMaterial });
});
}
}
> [!NOTE]
> Penggunaan model padat Mega Block yang dipotong sebagai oklusi tidak memerlukan anotasi untuk menyinkronkan posisi spasial, karena dalam perangkat lunak pembuatan konten digital (seperti Blender), model dapat dikurangi dan dipotong tanpa mengubah definisi sistem koordinat.
>
> Jika perlu menempatkan model oklusi GLTF buatan sendiri yang selaras secara spasial dengan presisi, lihat [cara menempatkan model oklusi yang selaras dengan ruang](./sample.md#wechat-mega-sample-precise-occulusion-model)
Efek operasi akhir di perangkat nyata dapat dilihat di video di bagian atas artikel.
Ekspektasi efek oklusi
Efek oklusi di mini-program xr-frame terutama dipengaruhi oleh:
- Akurasi pelacakan pelokasian itu sendiri
- Keakuratan penempatan model
- Presisi model itu sendiri (jika bukan geometri sederhana)
Ketidakselarasan beberapa sentimeter saat pelokasian bergeser adalah hal yang wajar.
Model oklusi dengan terlalu banyak poligon dapat memengaruhi kinerja, disarankan hanya menggunakannya di area yang diperlukan dan sebisa mungkin menggunakan geometri sederhana sebagai oklusi.