Table of Contents

Penjelasan proyek contoh plugin Mega WeChat Mini Program

Artikel ini menjelaskan secara rinci metode penggunaan, implementasi, dan pertimbangan untuk setiap fungsi yang ditampilkan dalam proyek contoh.

Sebelum memulai

Cara menampilkan model di lokasi anotasi

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

    Posisi anotasi Unity

  2. Menambahkan aset model GLTF

    Tambahkan aset model di sampleAssets dalam 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. Pisahkan dengan koma jika mengganti beberapa anotasi.

    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 untuk memuat model

    Gunakan "metode pabrik" xr-frame scene.createElement(xrFrameSystem.XRGLTF, options) dalam callback pemuatan EMA untuk membuat node model.

    • Parameter:

      • xrFrameSystem.XRGLTF: Menentukan tipe elemen sebagai model GLTF.
      • options: Konfigurasi inisialisasi, sesuai properti komponen.

    • Properti kunci dalam kode:

      • "model": Wajib, merujuk ke ID aset (asset-id) yang telah 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, isi persis seperti contoh.

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

    Untuk memastikan model GLTF terlihat konsisten di semua platform, putar model 180 derajat pada sumbu Y setelah dimuat.

    if (assetInfo && assetInfo.assetId && assetInfo.assetId.trim().length > 0) {
    model = scene.createElement(
        xrFrameSystem.XRGLTF,
        {
            /** Sesuai assetId pada langkah sebelumnya */
            "model": assetInfo.assetId,
            /** Dapat menentukan animasi model di sini */
            "anim-autoplay": assetInfo.animation ? assetInfo.animation : "",
            "scale": assetInfo.scale ? assetInfo.scale : "1 1 1",
            name: emaName
        }
    );
    xrNode.addChild(model);
    /**
     * Karena perilaku pemuat GLTF berbeda, untuk memastikan orientasi model pada xr-frame 
     * sama persis dengan hasil render Unity, model perlu diputar 180 derajat 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 fisik

    • Hasil di perangkat fisik seperti berikut, bandingkan dengan posisi di editor Unity pada langkah 1:

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

      Catatan

      Posisi origin mungkin acak di ruang mana pun. Gunakan anotasi untuk menempatkan model okulasi di lokasi yang diinginkan, lihat Membuat dan mengunggah anotasi menggunakan editor Unity.

    • Aktifkan tombol okulasi di kiri, model panda dan blok yang ditumpuk muncul di origin sistem koordinat dunia. Blok tengah memiliki material okulasi, di sisi lain ada model panda statis dengan material okulasi.

      Catatan

      Posisi origin mungkin acak di ruang mana pun. Gunakan anotasi untuk menempatkan model okulasi di lokasi yang diinginkan, lihat Membuat dan mengunggah anotasi menggunakan editor Unity.

      Model dan okulasi

Cara memutar video transparan di lokasi anotasi

  1. Memuat aset video bertipe video-texture.

    async loadAsset() {
    const videoTexture = {
        assetId: "fireball",
        type: "video-texture",
        // URL sumber daya video
        src: "url/video-resource.mp4",
        options: {
            autoPlay: true,
            loop: true,
        }
    };
    try {
        // Memuat aset bertipe video-texture
        await scene.assets.loadAsset(videoTexture);
    } catch (err) {
        console.error(`Failed to load video texture: ${err.message}`);
    }
}

  2. Memodifikasi callback pemuatan EMA

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

    • Parameter:

      • xrFrameSystem.XRMesh: Menentukan tipe elemen yang dibuat sebagai geometri dasar.
      • options: 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 yang telah ditentukan (berdasarkan penamaan, ini adalah material khusus yang mendukung tekstur video).
      • "uniforms": "u_baseColorMap:video-{$assetId}":
      Hati-Hati

      Perhatikan perbedaan antara Key properti yang berupa string dan bukan string, isi persis seperti contoh.

      Ini adalah pengikatan dinamis parameter material.

      Ini memetakan sumber daya video (tekstur) bernama video-{$assetId} ke peta warna dasar material.

      Efek: Ini akan 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 peringatan wx.createVideoDecoder with type: 'wemedia' is deprecated muncul di konsol, abaikan.

    Setelah dikonfirmasi dengan tim resmi WeChat, peringatan ini tidak memengaruhi penggunaan.

  3. Menjalankan di perangkat fisik

Cara menempatkan model oklusi yang selaras dengan ruang

  1. Penempatan presisi model untuk oklusi dan unggah anotasi.

    Penempatan presisi

  2. Muat GLTF sebagai oklusi di mini-program xr-frame.

    Muat aset model melalui scene.assets.loadAsset() (perlu di-unload secara 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. Pada runtime, muat model di callback EMA dan berikan material oklusi

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

    • Parameter:

      • xrFrameSystem.XRGLTF: Tentukan tipe elemen yang dibuat sebagai model GLTF.
      • options: Konfigurasi inisialisasi, sesuai dengan properti komponen.

    • Properti kunci dalam kode:

      • "model": Wajib, merujuk ke ID aset (asset-id) yang telah dimuat.
      • "scale": Opsional assetInfo.scale atau "1 1 1".
      • name: Wajib, nama anotasi.
    Hati-Hati

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

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

    Untuk memastikan model GLTF terlihat sama di semua platform loader, model yang dimuat perlu diputar 180 derajat di tempat pada sumbu Y.

    Akhirnya, gunakan 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 unload material easyar-occulusion dikendalikan oleh AR Session.

    Gunakan model di lokasi anotasi sebagai oklusi:

    if (...) {
    model = scene.createElement(
        xrFrameSystem.XRGLTF,
        {
            "model": assetInfo.assetId,
            "scale": assetInfo.scale ? assetInfo.scale : "1 1 1",
            name: emaName
        }
    );
    /**
    * Karena perilaku loader GLTF berbeda, untuk memastikan orientasi model di xr-frame sepenuhnya konsisten dengan hasil render 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);
    //Harus memodifikasi material SETELAH mengubah Transform
    if (assetInfo.assetId == 'occlusion1') {
        //Dapatkan material oklusi yang disediakan 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 });
        });
    }
}

  4. Jalankan di perangkat fisik

    Dapat dibandingkan dengan hasil simulasi di Unity Editor.

Topik terkait