Explicación del proyecto de demostración del plugin Mega para Weixin Mini Program

Este artículo detalla los métodos de uso, implementación y precauciones de las diversas funciones mostradas en el proyecto de demostración.

Antes de comenzar

• Ser capaz de crear y cargar anotaciones usando el editor de Unity, y registrar el nombre de la anotación y su ID.
• Ser capaz de crear contenido 3D alineado con el mundo real usando el editor de Unity.
• Ser capaz de ejecutar completamente el proyecto de demostración.

Cómo mostrar modelos en la ubicación de la anotación

1. Precise placement and upload of annotations in unity editor, recording annotation names and their IDs

   

2. Add GLTF model resources

   Add model resources in sampleAssets within 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. Load added model resources

   Load the model in the loadAsset() function within 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. Configure annotations to be replaced

   Configure annotations to be replaced in miniprogram/components/sample-data/annotation-metadata.ts. Separate multiple entries with commas.

   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. Replace annotations to load models

   Use xr-frame’s "factory method" scene.createElement(xrFrameSystem.XRGLTF, options) in EMA’s callback to create model nodes.

   • Parameters:

     • xrFrameSystem.XRGLTF: Specifies the element type as GLTF model.
     • options: Initial configuration items corresponding to component attributes.

   • Key attributes in code:

     • "model": Required, points to the loaded resource ID (asset-id).
     • "anim-autoplay": Optional, specifies animation name to autoplay after loading.
     • "scale": Optional, assetInfo.scale or "1 1 1".
     • name: Required, annotation name.

   Precaución

   Note the distinction between string and non-string attribute keys. Fill exactly as in the example.

   Mount the model under the annotation node using xrNode.addChild(child).

   To ensure consistent GLTF model rendering across platforms, rotate the loaded model 180 degrees around the Y-axis.

   if (assetInfo && assetInfo.assetId && assetInfo.assetId.trim().length > 0) {
       model = scene.createElement(
           xrFrameSystem.XRGLTF,
           {
               /** assetId from previous step */
               "model": assetInfo.assetId,
               /** Specify model animation here */
               "anim-autoplay": assetInfo.animation ? assetInfo.animation : "",
               "scale": assetInfo.scale ? assetInfo.scale : "1 1 1",
               name: emaName
           }
       );
       xrNode.addChild(model);
       /**
        * Due to differences in GLTF loader behaviors, rotate the model 180° around Y-axis 
        * to ensure alignment with Unity’s rendering results in xr-frame
        */
       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. Run on device

   • On-device results should match positions from Step 1 in Unity Editor:

   • Enable the transparent video button: A transparent-material cube appears at world origin ((0, 0, 0)).

     Nota

     Origin position may be arbitrary. Use annotations to position occlusion models as needed (see Creating and uploading annotations with unity editor).

   • Enable the occlusion button: A panda model and layered cubes appear at world origin. The central cube has occlusion material, while a static panda model with occlusion material appears opposite.

     Nota

     Origin position may be arbitrary. Use annotations to position occlusion models as needed (see Creating and uploading annotations with unity editor).

     

Cómo reproducir videos transparentes en la ubicación de la anotación

1. Cargar tipo de recurso de video video-texture.

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

2. Modificar callback de carga de EMA

   En el callback de carga de EMA, usar scene.createElement(xrFrameSystem.XRMesh,options) para crear una geometría simple asignando el material easyar-video-tsbs, y modificar uniform a u_baseColorMap:video-{$assetId}.

   • Parámetros:

     • xrFrameSystem.XRMesh: Especifica que el tipo de elemento creado es una geometría básica.
     • options: Configuración de inicialización, correspondiente a las propiedades del componente.

   • Propiedades clave en el código:

     • "geometry": "cube": Usa datos geométricos de cubo integrados en xr-frame.
     • "material": "easyar-video-tsbs": Especifica un material predefinido (según el nombre, es un material especial que admite texturas de video).
     • "uniforms": "u_baseColorMap:video-{$assetId}":

     Precaución

     Presta atención a distinguir entre claves de propiedades que son cadenas y las que no lo son, completando exactamente como en el ejemplo.

     Esto es un binding dinámico de parámetros de material.

     Asigna el recurso de video (textura) llamado video-{$assetId} al mapa de color base del material.

     Efecto: Esto produce un cubo cuya superficie reproduce un video.

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

   Nota

   Al usar video-texture, si aparece la advertencia wx.createVideoDecoder with type: 'wemedia' is deprecated en la consola, ignórala.

   Confirmado con el equipo oficial de WeChat: esta advertencia no afecta al uso.

3. Ejecución en dispositivo físico

Cómo colocar modelos de oclusión alineados con el espacio

1. Colocar con precisión el modelo de oclusión y subir la anotación.

   

2. Cargar el GLTF como oclusión en la mini-app de xr-frame.

   Cargar el recurso del modelo mediante scene.assets.loadAsset() (requiere descarga 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. Cargar el modelo en tiempo de ejecución en la devolución de llamada de carga de EMA y asignar material de oclusión

   Usar scene.createElement(xrFrameSystem.XRGLTF,options) en la devolución de llamada de carga de EMA para crear el nodo del modelo.

   • Parámetros:

     • xrFrameSystem.XRGLTF: Especifica que el tipo de elemento creado es un modelo GLTF.
     • options: Elementos de configuración de inicialización, correspondientes a las propiedades del componente.

   • Propiedades clave en el código:

     • "model": Obligatorio, apunta al ID del recurso cargado (asset-id).
     • "scale": Opcional assetInfo.scale o "1 1 1".
     • name: Obligatorio, nombre de la anotación.

   Precaución

   Presta atención a distinguir entre claves de propiedades de tipo string y no string, complétalas exactamente como en el ejemplo.

   Montar el modelo bajo el nodo de anotación mediante xrNode.addChild(child).

   Para garantizar que el modelo GLTF se vea con el mismo resultado bajo diferentes cargadores de plataformas, es necesario rotar el modelo cargado 180 grados alrededor del eje Y localmente.

   Finalmente, usar model.getComponent(xrFrameSystem.GLTF).meshes.forEach((m: any) => {m.setData({ neverCull: true, material: occlusionMaterial });} para modificar el material del modelo GLTF.

   Nota

   La carga, registro, desregistro y descarga del material easyar-occulusion están controlados por AR Session.

   Usar el modelo en la posición de anotación como oclusión:

   if (...) {
       model = scene.createElement(
           xrFrameSystem.XRGLTF,
           {
               "model": assetInfo.assetId,
               "scale": assetInfo.scale ? assetInfo.scale : "1 1 1",
               name: emaName
           }
       );
       /**
       * Debido a comportamientos diferentes en los cargadores de GLTF, para garantizar que la orientación del modelo en xr-frame coincida completamente con el resultado de renderizado de Unity
       * a veces es necesario rotar el modelo cargado 180 grados alrededor del eje Y localmente
       */
       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);
       //Es crucial modificar el material después de ajustar el Transform
       if (assetInfo.assetId == 'occlusion1') {
           //Obtener el material de oclusión proporcionado por el plugin mega
           let occlusionMaterial = scene.assets.getAsset("material", "easyar-occlusion");
           //Modificar el material de oclusión
           model.getComponent(xrFrameSystem.GLTF).meshes.forEach((m: any) => {
               m.setData({ neverCull: true, material: occlusionMaterial });
           });
       }
   }
   

4. Ejecución en dispositivo real

   Se puede comparar con los resultados de la ejecución simulada en el editor de Unity.

Temas relacionados

• Oclusión ambiental
• Video transparente
• Simular la ejecución usando el editor de Unity