Beschreibung des WeChat Mini Program Mega Plugin-Beispielprojekts

Dieser Artikel beschreibt ausführlich die Verwendung, Implementierung und Hinweise zu den Funktionen, die im Beispielprojekt gezeigt werden.

Bevor Sie beginnen

• Sie können mit dem Unity Editor Annotationen erstellen und hochladen und den Namen sowie die ID der Annotation notieren.
• Sie können mit dem Unity Editor 3D-Inhalte erstellen, die an der realen Umgebung ausgerichtet sind.
• Sie können das Beispielprojekt vollständig ausführen.

Modell an einer Annotation-Position anzeigen

1. Annotationen im Unity-Editor präzise platzieren und hochladen sowie Annotationsname und ID aufzeichnen

   

2. GLTF-Modellressourcen hinzufügen

   Fügen Sie die Modellressource zu sampleAssets in miniprogram/components/sample-easyar-mega/index.ts hinzu.

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

3. Hinzugefügte Modellressource laden

   Laden Sie das Modell in der Funktion 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. Zu ersetzende Annotationen konfigurieren

   Konfigurieren Sie die zu ersetzenden Annotationen in miniprogram/components/sample-data/annotation-metadata.ts. Wenn mehrere ersetzt werden sollen, trennen Sie sie durch Kommas.

   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. Annotationen ersetzen und Modelle laden

   Verwenden Sie im Callback nach dem Laden von EMA die xr-frame-„Factory-Methode“ scene.createElement(xrFrameSystem.XRGLTF, options), um den Modellknoten zu erstellen.

   • Parameter:

     • xrFrameSystem.XRGLTF: gibt an, dass der zu erstellende Elementtyp ein GLTF-Modell ist.
     • options: Initialisierungskonfiguration, die den Komponenteneigenschaften entspricht.

   • Wichtige Eigenschaften im Code:

     • "model": erforderlich. Verweist auf die ID der geladenen Ressource (asset-id).
     • "anim-autoplay": optional. Gibt den Namen der Animation an, die nach dem Laden automatisch abgespielt wird.
     • "scale": optional. assetInfo.scale oder "1 1 1".
     • name: erforderlich. Annotationsname.

   Vorsicht

   Achten Sie darauf, String- und Nicht-String-Eigenschaftsschlüssel zu unterscheiden, und füllen Sie sie exakt wie im Beispiel aus.

   Hängen Sie das Modell mit xrNode.addChild(child) unter den Annotationsknoten.

   Damit das GLTF-Modell unter Loadern verschiedener Plattformen gleich aussieht, drehen Sie das geladene Modell an Ort und Stelle um 180 Grad um die Y-Achse.

   if (assetInfo && assetInfo.assetId && assetInfo.assetId.trim().length > 0) {
       model = scene.createElement(
           xrFrameSystem.XRGLTF,
           {
               /** assetId aus dem vorherigen Schritt */
               "model": assetInfo.assetId,
               /** Hier kann die abzuspielende Modellanimation angegeben werden */
               "anim-autoplay": assetInfo.animation ? assetInfo.animation : "",
               "scale": assetInfo.scale ? assetInfo.scale : "1 1 1",
               name: emaName
           }
       );
       xrNode.addChild(model);
       /**
        * Aufgrund des unterschiedlichen Verhaltens von GLTF-Loadern muss das Modell manchmal so ausgerichtet werden, dass seine Orientierung in xr-frame vollständig mit dem Rendering-Ergebnis in Unity übereinstimmt
        * Das geladene Modell muss lokal um 180 Grad um die Y-Achse gedreht werden
        */
       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. Auf dem Gerät ausführen

   • Das Ergebnis der Ausführung auf dem Gerät ist unten gezeigt und kann mit der Position im Unity-Editor in Schritt 1 verglichen werden:

   • Aktivieren Sie links die Schaltfläche für transparentes Video. Am Ursprung des Weltkoordinatensystems, der Position (0, 0, 0), erscheint ein Würfel mit transparentem Videomaterial.

     Anmerkung

     Die Ursprungsposition kann eine zufällige Position im Raum sein. Sie können Annotationen verwenden, um das Okklusionsmodell an der gewünschten Position zu platzieren. Details siehe Annotationen mit dem Unity-Editor erstellen und hochladen.

   • Aktivieren Sie links die Okklusionsschaltfläche. Am Ursprung des Weltkoordinatensystems, der Position (0, 0, 0), erscheinen ein Panda-Modell und vertikal gestapelte Würfel. Der mittlere Würfel besitzt Okklusionsmaterial, und auf der anderen Seite befindet sich ein statisches Panda-Modell mit Okklusionsmaterial.

     Anmerkung

     Die Ursprungsposition kann eine zufällige Position im Raum sein. Sie können Annotationen verwenden, um das Okklusionsmodell an der gewünschten Position zu platzieren. Details siehe Annotationen mit dem Unity-Editor erstellen und hochladen.

     

Transparentes Video an einer Annotation-Position abspielen

1. Ein Video-Asset mit dem Typ video-texture laden.

   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. EMA-Ladecallback ändern

   Verwenden Sie im EMA-Ladecallback scene.createElement(xrFrameSystem.XRMesh,options), um eine einfache Geometrie zu erstellen, weisen Sie ihr das Material easyar-video-tsbs zu und ändern Sie uniform in u_baseColorMap:video-{$assetId}.

   • Parameter:

     • xrFrameSystem.XRMesh: gibt an, dass der erstellte Elementtyp eine Basisgeometrie ist.
     • options: Initialisierungskonfiguration, entsprechend den Eigenschaften der Komponente.

   • Wichtige Eigenschaften im Code:

     • "geometry": "cube": verwendet die in xr-frame integrierten Würfel-Geometriedaten.
     • "material": "easyar-video-tsbs": gibt ein vordefiniertes Material an. Dem Namen nach ist dies vermutlich ein spezielles Material mit Unterstützung für Videotexturen.
     • "uniforms": "u_baseColorMap:video-{$assetId}":

     Vorsicht

     Achten Sie darauf, zwischen String- und Nicht-String-Property Keys zu unterscheiden, und füllen Sie sie genau wie im Beispiel aus.

     Dies ist eine dynamische Bindung eines Materialparameters.

     Sie ordnet das Video-Asset (Textur) mit dem Namen video-{$assetId} der Base-Color-Map des Materials zu.

     Effekt: Dadurch entsteht ein Würfel, auf dessen Oberfläche ein Video abgespielt wird.

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

   Anmerkung

   Wenn bei der Verwendung von video-texture in der console die Warnung wx.createVideoDecoder with type: 'wemedia' is deprecated erscheint, ignorieren Sie sie.

   Wir haben mit dem offiziellen WeChat-Team bestätigt, dass diese Warnung die Verwendung nicht beeinflusst.

3. Auf einem realen Gerät ausführen

Occlusion-Modell mit räumlicher Ausrichtung platzieren

1. Platzieren Sie das für occlusion verwendete Modell präzise und laden Sie die Annotation hoch.

   

2. Laden Sie das als occlusion verwendete GLTF im xr-frame Mini Program.

   Laden Sie die Modellressource über scene.assets.loadAsset() (manuelles Entladen erforderlich).

   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. Zur Laufzeit das Modell im EMA-Ladecallback laden und das occlusion-Material zuweisen

   Verwenden Sie scene.createElement(xrFrameSystem.XRGLTF,options) im EMA-Ladecallback, um den Modellknoten zu erstellen.

   • Parameter:

     • xrFrameSystem.XRGLTF: gibt an, dass der erstellte Elementtyp ein GLTF-Modell ist.
     • options: Initialisierungskonfiguration, entsprechend den Komponenteneigenschaften.

   • Wichtige Eigenschaften im Code:

     • "model": erforderlich, verweist auf die geladene Ressourcen-ID (asset-id).
     • "scale": optional, assetInfo.scale oder "1 1 1".
     • name: erforderlich, Annotationsname.

   Vorsicht

   Achten Sie darauf, String- und Nicht-String-property Keys zu unterscheiden, und füllen Sie sie genau wie im Beispiel aus.

   Hängen Sie das Modell mit xrNode.addChild(child) unter den Annotationsknoten.

   Damit das GLTF-Modell unter Loadern verschiedener Plattformen gleich aussieht, drehen Sie das geladene Modell lokal um 180 Grad um die Y-Achse.

   Verwenden Sie schließlich model.getComponent(xrFrameSystem.GLTF).meshes.forEach((m: any) => {m.setData({ neverCull: true, material: occlusionMaterial });}, um das Material des GLTF-Modells zu ändern.

   Anmerkung

   Laden, Registrierung, Deregistrierung und Entladen des Materials easyar-occulusion werden von AR Session gesteuert.

   Verwenden Sie das Modell an der Annotationsposition als occlusion:

   if (...) {
       model = scene.createElement(
           xrFrameSystem.XRGLTF,
           {
               "model": assetInfo.assetId,
               "scale": assetInfo.scale ? assetInfo.scale : "1 1 1",
               name: emaName
           }
       );
       /**
       * Aufgrund des unterschiedlichen Verhaltens von GLTF-Loadern muss das Modell manchmal
       * nach dem Laden lokal um 180 Grad um die Y-Achse gedreht werden, damit seine Ausrichtung in xr-frame vollständig mit dem Rendering-Ergebnis in Unity übereinstimmt
       */
       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);
       // Hinweis: Das Material muss nach dem Ändern von Transform geändert werden
       if (assetInfo.assetId == 'occlusion1') {
           // Occlusion-Material abrufen, das vom Mega-Plugin bereitgestellt wird
           let occlusionMaterial = scene.assets.getAsset("material", "easyar-occlusion");
           // Occlusion-Material ändern
           model.getComponent(xrFrameSystem.GLTF).meshes.forEach((m: any) => {
               m.setData({ neverCull: true, material: occlusionMaterial });
           });
       }
   }
   

4. Auf einem realen Gerät ausführen

   Vergleichen Sie es mit dem simulierten Laufzeitergebnis im Unity editor.

Verwandte Themen

• Umgebungs-Occlusion
• Transparentes Video
• Simulationslauf mit dem Unity Editor
• Einführung in das EasyAR Mega Annotation (EMA)-Format