Exemple de projet de plugin Mega pour Mini-programmes WeChat

Cet article détaille les méthodes d'utilisation, les implémentations et les points d'attention des différentes fonctionnalités présentées dans l'exemple de projet.

Avant de commencer

Savoir créer et télécharger des annotations avec l'éditeur Unity et noter le nom de l'annotation et son ID.
Savoir créer des contenus 3D alignés avec le monde réel à l'aide de l'éditeur Unity.
Savoir exécuter complètement l'exemple de projet.

Comment afficher un modèle à la position d'une annotation

Placer et télécharger précisément des annotations dans l'éditeur Unity, enregistrer le nom de l'annotation et son ID

Ajouter des ressources de modèle GLTF

Ajoutez les ressources du modèle dans sampleAssets du fichier miniprogram/components/sample-easyar-mega/index.ts.

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

Charger les ressources de modèle ajoutées

Chargez le modèle dans la fonction loadAsset() du fichier 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}`);
    }
}

Configurer les annotations à remplacer

Configurez les annotations à remplacer dans miniprogram/components/sample-data/annotation-metadata.ts. Séparez par des virgules pour remplacer plusieurs annotations.

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"
    }
};

Remplacer l'annotation par le chargement du modèle

Utilisez la "méthode d'usine" scene.createElement(xrFrameSystem.XRGLTF, options) dans le callback de chargement EMA pour créer un nœud de modèle.
- Paramètres :
  - xrFrameSystem.XRGLTF : Spécifie le type d'élément comme modèle GLTF.
  - options : Options d'initialisation, correspondant aux attributs du composant.
- Attributs clés dans le code :
  - "model" : Obligatoire, pointe vers l'ID de ressource chargée (asset-id).
  - "anim-autoplay" : Optionnel, nom de l'animation à lire automatiquement après chargement.
  - "scale": Optionnel, assetInfo.scale ou "1 1 1".
  - name: Obligatoire, nom de l'annotation.
Attention

Distinguez les clés d'attributs sous forme de chaînes et non-chaînes, respectez strictement l'exemple.

Attachez le modèle au nœud d'annotation via xrNode.addChild(child).

Pour garantir une cohérence visuelle du modèle GLTF sur différentes plateformes, appliquez une rotation de 180° autour de l'axe Y après chargement.
```
if (assetInfo && assetInfo.assetId && assetInfo.assetId.trim().length > 0) {
    model = scene.createElement(
        xrFrameSystem.XRGLTF,
        {
            /** assetId de l'étape précédente */
            "model": assetInfo.assetId,
            /** Spécifie l'animation du modèle ici */
            "anim-autoplay": assetInfo.animation ? assetInfo.animation : "",
            "scale": assetInfo.scale ? assetInfo.scale : "1 1 1",
            name: emaName
        }
    );
    xrNode.addChild(model);
    /**
     * Pour aligner l'orientation du modèle sur xr-frame avec les résultats d'Unity,
     * appliquez une rotation de 180° autour de l'axe 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);
}
```
Exécution sur appareil
- Résultat sur appareil (comparer avec l'étape 1 dans Unity) :
- Activez le bouton vidéo transparente : un cube avec matériau vidéo transparent apparaît à l'origine du système de coordonnées (position (0, 0, 0)).
  
  Note
  
  L'origine peut être à n'importe quel endroit aléatoire. Placez des modèles d'occultation via des annotations, voir Créer et télécharger des annotations avec l'éditeur Unity.
- Activez le bouton d'occultation : un modèle de panda et des cubes superposés apparaissent à l'origine, avec un matériau d'occultation sur le cube central et un panda statique.
  
  Note
  
  L'origine peut être à n'importe quel endroit aléatoire. Placez des modèles d'occultation via des annotations, voir Créer et télécharger des annotations avec l'éditeur Unity.

Comment lire une vidéo transparente à la position d'une annotation

Charger des ressources vidéo de type video-texture.

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

Modifier le callback de chargement EMA

Dans le callback de chargement EMA, utiliser scene.createElement(xrFrameSystem.XRMesh,options) pour créer une géométrie simple avec le matériau easyar-video-tsbs, et modifier uniform en u_baseColorMap:video-{$assetId}.
- Paramètres :
  - xrFrameSystem.XRMesh : spécifie le type d'élément à créer comme géométrie de base.
  - options : éléments de configuration initiale, correspondant aux attributs du composant.
- Attributs clés dans le code :
  - "geometry": "cube" : utilise les données géométriques internes de cube de xr-frame.
  - "material": "easyar-video-tsbs" : spécifie un matériau prédéfini (d'après le nom, il s'agit d'un matériau spécial prenant en charge les textures vidéo).
  - "uniforms": "u_baseColorMap:video-{$assetId}" :
  Attention
  
  Attention à distinguer les chaînes de caractères des clés d'attributs et les non-chaînes, remplissez exactement comme dans l'exemple.
  
  Il s'agit d'une liaison dynamique des paramètres du matériau.
  
  Cela mappe la ressource vidéo (texture) nommée video-{$assetId} sur la carte de couleur de base du matériau.
  
  Effet : cela crée un cube dont la surface diffuse la vidéo.
```
model = scene.createElement(xrFrameSystem.XRMesh, {
    geometry: "cube",
    material: "easyar-video-tsbs",
    uniforms: "u_baseColorMap:video-fireball",
});
xrNode.addChild(model);
```
Note

Lors de l'utilisation de video-texture, si un avertissement wx.createVideoDecoder with type: 'wemedia' is deprecated apparaît dans la console, veuillez l'ignorer.

Confirmé par l'équipe officielle WeChat, cet avertissement n'affecte pas l'utilisation.
Exécution sur appareil réel

Comment placer un modèle d'occlusion aligné avec l'espace

Placement précis du modèle d'occlusion et téléchargement de l'annotation.

Charger le GLTF d'occlusion dans la mini-app xr-frame.

Charger la ressource du modèle via scene.assets.loadAsset() (déchargement manuel requis).

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}`);
    }
}

Charger le modèle au runtime dans le callback EMA et lui attribuer un matériau d'occlusion

Créer un nœud de modèle avec scene.createElement(xrFrameSystem.XRGLTF,options) dans le callback de chargement EMA.
- Paramètres :
  - xrFrameSystem.XRGLTF : Spécifie le type d'élément comme modèle GLTF.
  - options : Configuration d'initialisation, correspondant aux attributs du composant.
- Attributs clés dans le code :
  - "model" : Obligatoire, pointe vers l'ID de ressource chargée (asset-id).
  - "scale": Optionnel assetInfo.scale ou "1 1 1".
  - name: Obligatoire, nom de l'annotation.
Attention

Distinguer les clés d'attribut sous forme de chaîne et non-chaîne, remplir exactement comme dans l'exemple.

Attacher le modèle au nœud d'annotation via xrNode.addChild(child).

Pour garantir une orientation cohérente du modèle GLTF sur tous les chargeurs de plateforme, appliquer une rotation locale de 180° autour de l'axe Y après le chargement.

Modifier finalement le matériau avec model.getComponent(xrFrameSystem.GLTF).meshes.forEach((m: any) => {m.setData({ neverCull: true, material: occlusionMaterial });}.

Note

Le chargement, enregistrement, désenregistrement et déchargement du matériau easyar-occulusion sont contrôlés par la AR Session.

Utiliser le modèle en position d'annotation comme occlusion :
```
if (...) {
    model = scene.createElement(
        xrFrameSystem.XRGLTF,
        {
            "model": assetInfo.assetId,
            "scale": assetInfo.scale ? assetInfo.scale : "1 1 1",
            name: emaName
        }
    );
    /**
    * En raison des comportements variables des chargeurs GLTF, une rotation de 180° sur Y est parfois nécessaire
    * pour aligner parfaitement le rendu xr-frame avec les résultats Unity
    */
    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);
    //Modifier le matériau APRES la transformation
    if (assetInfo.assetId == 'occlusion1') {
        //Récupérer le matériau d'occlusion du plug-in mega
        let occlusionMaterial = scene.assets.getAsset("material", "easyar-occlusion");
        //Appliquer le matériau d'occlusion
        model.getComponent(xrFrameSystem.GLTF).meshes.forEach((m: any) => {
            m.setData({ neverCull: true, material: occlusionMaterial });
        });
    }
}
```
Exécution sur périphérique réel

Comparer les résultats avec l'exécution simulée dans l'éditeur Unity.

Table of Contents

Exemple de projet de plugin Mega pour Mini-programmes WeChat

Avant de commencer

Comment afficher un modèle à la position d'une annotation

Attention

Note

Note

Comment lire une vidéo transparente à la position d'une annotation

Attention

Note

Comment placer un modèle d'occlusion aligné avec l'espace

Attention

Note

Sujets connexes