Penjelasan proyek contoh plugin Mega WeChat Mini Program

Artikel ini menjelaskan secara rinci cara menggunakan berbagai fungsi yang ditampilkan dalam proyek contoh, metode implementasinya, dan hal-hal yang perlu diperhatikan.

Sebelum memulai

• Anda dapat membuat dan mengunggah annotation menggunakan Unity Editor, lalu mencatat nama annotation dan ID-nya.
• Anda dapat membuat konten 3D yang selaras dengan dunia nyata menggunakan Unity Editor.
• Anda dapat menjalankan proyek contoh secara lengkap.

Cara menampilkan model di posisi annotation

1. Menempatkan dan meng-upload anotasi secara presisi di Unity editor, lalu mencatat nama anotasi dan ID-nya

   

2. Menambahkan aset model GLTF

   Tambahkan aset model ke sampleAssets di miniprogram/components/sample-easyar-mega/index.ts.

   const sampleAssets = {
       your_model_name: {
           assetId: "your_model_asset_id",
           type: "gltf",
           src: "url/model.glb",
           options: {}
       }
   }
   

3. Memuat aset model yang ditambahkan

   Muat model dalam fungsi loadAsset() di miniprogram/components/sample-easyar-mega/index.ts.

   async loadAsset() {
       try {
           await scene.assets.loadAsset(sampleAssets.your_model_name);
       } catch (err) {
           console.error(`Failed to load assets: ${err.message}`);
       }
   }
   

4. Mengonfigurasi anotasi yang akan diganti

   Konfigurasikan anotasi yang akan diganti di miniprogram/components/sample-data/annotation-metadata.ts. Jika beberapa anotasi perlu diganti, pisahkan dengan koma.

   export const AnnotationMetaData: Record<string, any> = {
       "aaaaaaaa-bbbb-cccc-dddd-123456789012": {
           assetId: "panda",
           scale: "0.5 0.5 0.5"
       },
       "aaaaaaaa-bbbb-cccc-dddd-123456789013": {
           assetId: "your_model_asset_id",
           scale: "1 1 1"
       }
   };
   

5. Mengganti anotasi dan memuat model

   Dalam callback setelah EMA dimuat, gunakan "factory method" xr-frame scene.createElement(xrFrameSystem.XRGLTF, options) untuk membuat node model.

   • Parameter:

     • xrFrameSystem.XRGLTF: menentukan bahwa tipe elemen yang dibuat adalah model GLTF.
     • options: item konfigurasi inisialisasi yang sesuai dengan properti komponen.

   • Properti kunci dalam kode:

     • "model": wajib. Mengarah ke ID aset (asset-id) yang sudah dimuat.
     • "anim-autoplay": opsional. Menentukan nama animasi yang diputar otomatis setelah dimuat.
     • "scale": opsional. assetInfo.scale atau "1 1 1".
     • name: wajib. Nama anotasi.

   Hati-Hati

   Perhatikan perbedaan key properti string dan non-string, dan isi persis seperti contoh.

   Pasang model di bawah node anotasi dengan xrNode.addChild(child).

   Agar model GLTF terlihat sama pada loader di berbagai platform, putar model yang sudah dimuat 180 derajat di sekitar sumbu Y di tempat.

   if (assetInfo && assetInfo.assetId && assetInfo.assetId.trim().length > 0) {
       model = scene.createElement(
           xrFrameSystem.XRGLTF,
           {
               /** assetId dari langkah sebelumnya */
               "model": assetInfo.assetId,
               /** Animasi model yang akan diputar dapat ditentukan di sini */
               "anim-autoplay": assetInfo.animation ? assetInfo.animation : "",
               "scale": assetInfo.scale ? assetInfo.scale : "1 1 1",
               name: emaName
           }
       );
       xrNode.addChild(model);
       /**
        * Karena perilaku loader GLTF berbeda-beda, agar orientasi model di xr-frame benar-benar konsisten dengan hasil rendering Unity
        * Model yang dimuat perlu diputar 180 derajat di tempat pada 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);
   }
   

6. Menjalankan di perangkat

   • Hasil berjalan di perangkat ditunjukkan di bawah, dan dapat dibandingkan dengan posisi di Unity editor pada Langkah 1:

   • Aktifkan tombol video transparan di kiri. Kubus dengan material video transparan muncul di origin sistem koordinat dunia, yaitu posisi (0, 0, 0).

     Catatan

     Posisi origin mungkin acak di mana saja dalam ruang. Anda dapat menggunakan anotasi untuk menempatkan model occlusion di posisi yang diinginkan. Lihat membuat dan meng-upload anotasi dengan Unity editor.

   • Aktifkan tombol occlusion di kiri. Di origin koordinat dunia, posisi (0, 0, 0), muncul model panda dan kubus bertumpuk vertikal. Kubus tengah memiliki material occlusion, dan di sisi lain ada model panda statis dengan material occlusion.

     Catatan

     Posisi origin mungkin acak di mana saja dalam ruang. Anda dapat menggunakan anotasi untuk menempatkan model occlusion di posisi yang diinginkan. Lihat membuat dan meng-upload anotasi dengan Unity editor.

     

Cara memutar video transparan di posisi annotation

1. Muat aset video dengan tipe 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}`);
       }
   }
   

2. Ubah callback pemuatan EMA

   Dalam callback pemuatan EMA, gunakan scene.createElement(xrFrameSystem.XRMesh,options) untuk membuat geometri sederhana, berikan material easyar-video-tsbs, lalu ubah uniform menjadi u_baseColorMap:video-{$assetId}.

   • Parameter:

     • xrFrameSystem.XRMesh: menentukan bahwa tipe elemen yang dibuat adalah geometri dasar.
     • options: item konfigurasi inisialisasi, sesuai dengan properti komponen.

   • Properti kunci dalam kode:

     • "geometry": "cube": menggunakan data geometri kubus bawaan xr-frame.
     • "material": "easyar-video-tsbs": menentukan material bawaan. Berdasarkan namanya, ini diperkirakan merupakan material khusus yang mendukung tekstur video.
     • "uniforms": "u_baseColorMap:video-{$assetId}":

     Hati-Hati

     Perhatikan perbedaan antara string dan non-string pada property Key, dan isi persis seperti cara pada contoh.

     Ini adalah binding dinamis parameter material.

     Ini memetakan aset video (tekstur) bernama video-{$assetId} ke base color map material.

     Efek: menghasilkan kubus yang permukaannya memutar video.

   model = scene.createElement(xrFrameSystem.XRMesh, {
       geometry: "cube",
       material: "easyar-video-tsbs",
       uniforms: "u_baseColorMap:video-fireball",
   });
   xrNode.addChild(model);
   

   Catatan

   Saat menggunakan video-texture, jika console menampilkan peringatan wx.createVideoDecoder with type: 'wemedia' is deprecated, abaikan.

   Kami telah mengonfirmasi dengan tim resmi WeChat bahwa peringatan ini tidak memengaruhi penggunaan.

3. Jalankan di perangkat nyata

Cara menempatkan model occlusion yang selaras dengan ruang

1. Tempatkan model yang digunakan untuk occlusion secara presisi dan unggah anotasi.

   

2. Muat GLTF yang digunakan sebagai occlusion dalam xr-frame Mini Program.

   Muat resource model melalui scene.assets.loadAsset() (perlu unload manual).

   const sampleAssets = {
       occlusion1: {
           assetId: "occlusion1",
           type: "gltf",
           src: "url/occlusion1.glb",
           options: {}
       }
   }
   async loadAsset() {
       if (!scene) {console.error("Empty scene"); return;}
       try {
           await scene.assets.loadAsset(sampleAssets.occlusion1);
       } catch (err) {
           console.error(`Failed to load assets: ${err.message}`);
       }
   }
   

3. Saat runtime, muat model dalam callback pemuatan EMA dan berikan material occlusion

   Gunakan scene.createElement(xrFrameSystem.XRGLTF,options) dalam callback pemuatan EMA untuk membuat node model.

   • Parameter:

     • xrFrameSystem.XRGLTF: menentukan tipe elemen yang dibuat sebagai model GLTF.
     • options: item konfigurasi inisialisasi, sesuai properti komponen.

   • Properti kunci dalam kode:

     • "model": wajib, menunjuk ke resource ID yang sudah dimuat (asset-id).
     • "scale": opsional, assetInfo.scale atau "1 1 1".
     • name: wajib, nama anotasi.

   Hati-Hati

   Perhatikan perbedaan Key properti string dan non-string, dan isi persis seperti contoh.

   Pasang model di bawah node anotasi dengan xrNode.addChild(child).

   Untuk memastikan model GLTF terlihat sama pada loader di berbagai platform, putar model yang dimuat 180 derajat di sekitar sumbu Y pada tempatnya.

   Terakhir, gunakan model.getComponent(xrFrameSystem.GLTF).meshes.forEach((m: any) => {m.setData({ neverCull: true, material: occlusionMaterial });} untuk mengubah material model GLTF.

   Catatan

   Pemuatan, registrasi, unregister, dan unload material easyar-occulusion dikontrol oleh AR Session.

   Gunakan model pada posisi anotasi sebagai occlusion:

   if (...) {
       model = scene.createElement(
           xrFrameSystem.XRGLTF,
           {
               "model": assetInfo.assetId,
               "scale": assetInfo.scale ? assetInfo.scale : "1 1 1",
               name: emaName
           }
       );
       /**
       * Karena perilaku loader GLTF berbeda-beda, agar orientasi model di xr-frame benar-benar konsisten dengan hasil rendering Unity,
       * terkadang model yang dimuat perlu diputar 180 derajat di tempat pada 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);
       // Perhatikan: material harus diubah setelah Transform dimodifikasi
       if (assetInfo.assetId == 'occlusion1') {
           // Mendapatkan material occlusion yang disediakan plugin Mega
           let occlusionMaterial = scene.assets.getAsset("material", "easyar-occlusion");
           // Memodifikasi material occlusion
           model.getComponent(xrFrameSystem.GLTF).meshes.forEach((m: any) => {
               m.setData({ neverCull: true, material: occlusionMaterial });
           });
       }
   }
   

4. Jalankan pada perangkat nyata

   Bandingkan dengan hasil runtime simulasi di Unity editor.

Topik terkait

• Occlusion lingkungan
• Video transparan
• Menjalankan simulasi dengan Unity Editor
• Pengantar format EasyAR Mega Annotation (EMA)