Descrizione del progetto demo del plugin Mega per mini program WeChat

Questo articolo spiega in dettaglio l'utilizzo, le modalità di implementazione e le precauzioni per ciascuna funzione mostrata nel progetto demo.

Prima di iniziare

• Essere in grado di creare e caricare annotazioni utilizzando l'editor Unity, registrando il nome dell'annotazione e il suo ID.
• Essere in grado di creare contenuti 3D allineati al mondo reale con l'editor Unity.
• Essere in grado di eseguire completamente il progetto demo.

Come mostrare un modello nella posizione dell'annotazione

1. Posizionare e caricare con precisione le annotazioni nell'editor Unity, registrando il nome e l'ID dell'annotazione

   

2. Aggiungere risorse modello GLTF

   Aggiungere le risorse del modello in sampleAssets in 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. Caricare le risorse modello aggiunte

   Caricare il modello nella funzione loadAsset() in 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. Configurare le annotazioni da sostituire

   Configurare le annotazioni da sostituire in miniprogram/components/sample-data/annotation-metadata.ts. Separare con virgole se si sostituiscono più annotazioni.

   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. Sostituire l'annotazione per caricare il modello

   Utilizzare il metodo "factory" scene.createElement(xrFrameSystem.XRGLTF, options) nel callback di caricamento EMA per creare un nodo modello.

   • Parametri:

     • xrFrameSystem.XRGLTF: specifica il tipo di elemento come modello GLTF.
     • options: configurazione iniziale, corrisponde agli attributi del componente.

   • Attributi chiave nel codice:

     • "model": obbligatorio, punta all'ID risorsa (asset-id) caricata.
     • "anim-autoplay": opzionale, specifica l'animazione da riprodurre automaticamente dopo il caricamento.
     • "scale": opzionale, assetInfo.scale o "1 1 1".
     • name: obbligatorio, nome annotazione.

   Attenzione

   Attenzione a distinguere tra chiavi di attributo stringa e non stringa. Compilare esattamente come nell'esempio.

   Montare il modello sotto il nodo annotazione con xrNode.addChild(child).

   Per garantire coerenza nel caricatore GLTF su diverse piattaforme, ruotare il modello caricato di 180 gradi attorno all'asse Y.

   if (assetInfo && assetInfo.assetId && assetInfo.assetId.trim().length > 0) {
       model = scene.createElement(
           xrFrameSystem.XRGLTF,
           {
               /** Corrisponde all'assetId del passaggio precedente */
               "model": assetInfo.assetId,
               /** Qui è possibile specificare l'animazione del modello */
               "anim-autoplay": assetInfo.animation ? assetInfo.animation : "",
               "scale": assetInfo.scale ? assetInfo.scale : "1 1 1",
               name: emaName
           }
       );
       xrNode.addChild(model);
       /**
        * Per garantire l'orientamento coerente del modello su xr-frame con i risultati di rendering di Unity
        * è necessario ruotare il modello caricato di 180 gradi attorno all'asse 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. Esecuzione su dispositivo reale

   • Il risultato su dispositivo reale è il seguente, confrontabile con la posizione nell'editor Unity del passaggio 1:

   • Attivando il pulsante video trasparente a sinistra, appare un cubo con materiale video trasparente all'origine del sistema di coordinate mondiali (posizione (0, 0, 0)).

     Nota

     L'origine potrebbe trovarsi in qualsiasi posizione casuale nello spazio. Utilizzare le annotazioni per posizionare i modelli di occultamento dove desiderato. Vedi Creare e caricare annotazioni con Unity Editor.

   • Attivando il pulsante di occultamento a sinistra, appaiono all'origine (posizione (0, 0, 0)) un modello di panda e cubi sovrapposti. Il cubo centrale ha materiale di occultamento, mentre dall'altro lato c'è un modello statico di panda con materiale di occultamento.

     Nota

     L'origine potrebbe trovarsi in qualsiasi posizione casuale nello spazio. Utilizzare le annotazioni per posizionare i modelli di occultamento dove desiderato. Vedi Creare e caricare annotazioni con Unity Editor.

     

Come riprodurre video trasparenti nella posizione dell'annotazione

1. Caricamento video come texture

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

2. Modifica callback di caricamento EMA

   Nel callback di caricamento EMA, usa scene.createElement(xrFrameSystem.XRMesh,options) per creare una geometria semplice applicando il materiale easyar-video-tsbs, modificando uniform come u_baseColorMap:video-{$assetId}.

   • Parametri:

     • xrFrameSystem.XRMesh: Specifica il tipo di elemento come geometria di base.
     • options: Configurazione iniziale, corrisponde agli attributi del componente.

   • Attributi chiave nel codice:

     • "geometry": "cube": Usa i dati geometrici predefiniti del cubo in xr-frame.
     • "material": "easyar-video-tsbs": Specifica un materiale predefinito (presumibilmente un materiale speciale per texture video).
     • "uniforms": "u_baseColorMap:video-{$assetId}":

     Attenzione

     Attenzione alla distinzione tra chiavi di attributo stringhe e non stringhe, inserisci esattamente come nell'esempio.

     Questo è il binding dinamico dei parametri del materiale.

     Mappa la risorsa video (texture) chiamata video-{$assetId} sulla mappa colore di base del materiale.

     Effetto: Crea un cubo con la superficie che riproduce il video.

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

   Nota

   Quando usi video-texture, se appare l'avviso wx.createVideoDecoder with type: 'wemedia' is deprecated in console, ignoralo.

   Confermato dal team ufficiale WeChat: l'avviso non influisce sull'uso.

3. Esecuzione su dispositivo reale

Come posizionare modelli di occlusione allineati allo spazio

1. Posizionare con precisione il modello di occlusione e caricare le annotazioni.

   

2. Caricare il GLTF come occlusione nell'applet xr-frame.

   Caricare la risorsa del modello tramite scene.assets.loadAsset() (richiede la rimozione manuale).

   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. Caricare il modello durante il runtime nel callback di caricamento EMA e assegnare il materiale di occlusione

   Nel callback di caricamento EMA, utilizzare scene.createElement(xrFrameSystem.XRGLTF,options) per creare un nodo del modello.

   • Parametri:

     • xrFrameSystem.XRGLTF: specifica che l'elemento creato è un modello GLTF.
     • options: configurazione iniziale, corrispondente agli attributi del componente.

   • Attributi chiave nel codice:

     • "model": obbligatorio, punta all'ID risorsa caricata (asset-id).
     • "scale": opzionale assetInfo.scale o "1 1 1".
     • name: obbligatorio, nome dell'annotazione.

   Attenzione

   Attenzione alla distinzione tra chiavi di attributi stringhe e non stringhe, compilare esattamente come nell'esempio.

   Montare il modello sotto il nodo di annotazione tramite xrNode.addChild(child).

   Per garantire che il modello GLTF appaia identico con caricatori su diverse piattaforme, è necessario ruotare il modello caricato di 180 gradi attorno all'asse Y.

   Infine, utilizzare model.getComponent(xrFrameSystem.GLTF).meshes.forEach((m: any) => {m.setData({ neverCull: true, material: occlusionMaterial });} per modificare il materiale del modello GLTF.

   Nota

   Il caricamento, registrazione, deregistrazione e rimozione del materiale easyar-occulusion sono controllati dalla sessione AR.

   Utilizzare il modello nella posizione annotata come occlusione:

   if (...) {
       model = scene.createElement(
           xrFrameSystem.XRGLTF,
           {
               "model": assetInfo.assetId,
               "scale": assetInfo.scale ? assetInfo.scale : "1 1 1",
               name: emaName
           }
       );
       /**
       * A causa di comportamenti diversi del caricatore GLTF, per garantire che l'orientamento del modello su xr-frame corrisponda esattamente al risultato di rendering di Unity
       * a volte è necessario ruotare il modello caricato di 180 gradi attorno all'asse 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);
       //Importante: modificare il materiale SOLO dopo aver modificato Transform
       if (assetInfo.assetId == 'occlusion1') {
           //Ottenere il materiale di occlusione fornito dal plug-in mega
           let occlusionMaterial = scene.assets.getAsset("material", "easyar-occlusion");
           //Modificare il materiale di occlusione
           model.getComponent(xrFrameSystem.GLTF).meshes.forEach((m: any) => {
               m.setData({ neverCull: true, material: occlusionMaterial });
           });
       }
   }
   

4. Esecuzione su dispositivo reale

   Può essere confrontato con il risultato di esecuzione simulata nell'editor Unity.

Argomenti correlati

• Occlusione ambientale
• Video trasparente
• Simulazione di esecuzione con l'editor Unity