La Realidad Aumentada Web (WebAR) tiene una barrera de entrada que muchos desarrolladores encuentran frustrante: la creación de activos 3D. No todos somos expertos modeladores en Blender, Maya, Sketchup.
Aquí es donde entra Polycam, una herramienta de fotogrametría de bolsillo que, combinada con MindAR, te permite digitalizar el mundo real y mostrarlo en el navegador en cuestión de minutos.
- Descarga Polycam desde la App Store:Polycam 3D Scanner, LiDAR, 360 App – App Store
- Descarga Polycam desde la Play Store:Polycam: 3D Scanner & Editor – Apps on Google Play
Sin embargo, no basta con escanear y exportar. Para que tu experiencia en MindAR sea fluida y no colapse el navegador del usuario, debes seguir un flujo de trabajo técnico específico. Aquí tienes la guía definitiva.
Elige el Modo Correcto en Polycam: ¿LiDAR o Foto?
Polycam ofrece dos modos principales, y elegir el incorrecto arruinará tu proyecto de MindAR antes de empezar.
- Modo LiDAR (Solo iPhone Pro/iPad Pro): Ideal para espacios grandes (habitaciones, casas). Genera mallas rápidas pero con texturas de menor calidad. No recomendado para objetos de producto.
- Modo Photo (Fotogrametría): Toma entre 20 y 200 fotos de un objeto y las procesa en la nube. Este es el modo que debes usar para MindAR. Ofrece la mayor fidelidad en texturas y detalles, crucial para cuando el usuario vea tu hamburguesa o zapato en AR a corta distancia.
La Regla de Oro: Iluminación Plana (Albedo)
En Realidad Aumentada, el motor de renderizado (A-Frame/Three.js) pone sus propias luces y sombras. Si escaneas un objeto bajo una luz solar muy fuerte, las sombras quedarán «pintadas» (baked) en la textura.
- El problema: Si rotas el objeto en AR, la sombra pintada rotará con él, rompiendo la ilusión óptica.
- La solución: Escanea tus objetos en un día nublado o con iluminación suave y difusa (softbox). Queremos una textura lo más plana posible para que MindAR se encargue de la iluminación.
Optimización: El paso crítico para WebAR
Aquí es donde fallan el 90% de los principiantes. Un escaneo crudo de Polycam puede tener 100,000 o más triángulos y pesar 50MB. Esto es inaceptable para la web móvil.
Antes de exportar en Polycam, debes usar la herramienta de Recorte y Optimización:
- Crop (Recortar): Elimina todo el suelo y el entorno que no sea el objeto.
- Simplify (Simplificar): Polycam permite reducir el conteo de polígonos.
- Objetivo para MindAR: Intenta mantener tu modelo por debajo de los 20,000 – 30,000 triángulos.
- Peso del archivo: Tu meta es un archivo .glb que pese menos de 5MB (idealmente menos de 2MB para carga instantánea en 4G).
Estableciendo el Origen (Punto de Pivote)
Cuando importas un modelo en MindAR, este aparece basado en su punto de origen (0,0,0). Si escaneaste una silla y el punto de origen quedó en el techo de la habitación, la silla aparecerá flotando metros abajo o desplazada.
- En Polycam: Usa la herramienta Rotate/Scale para alinear la base de tu objeto con la rejilla del suelo. Asegúrate de que el eje Z (azul) apunte hacia arriba y que el objeto esté centrado. Esto te ahorrará horas de peleas con position=»…» en A-Frame.
El Formato Rey: GLB (glTF Binary)
Polycam ofrece muchos formatos (OBJ, FBX, STL), pero para MindAR y la web en general, solo hay una opción correcta: GLB.
- ¿Por qué? GLB es un formato binario que contiene la malla, las texturas y los materiales en un solo archivo comprimido. Es el «JPG del 3D».
- MindAR y A-Frame leen GLB nativamente con un rendimiento superior.
Integración en tu Código
Una vez tengas tu archivo modelo_optimizado.glb, integrarlo es cuestión de segundos. Recuerda precargarlo en los assets para evitar «parpadeos» o cargas tardías:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
<script src="mindar-image-aframe.prod.js"></script>
</head>
<body>
<a-scene mindar-image="imageTargetSrc: ./targets.mind;"
color-space="sRGB" renderer="colorManagement: true, physicallyCorrectLights"
vr-mode-ui="enabled: false"
device-orientation-permission-ui="enabled: false">
<a-assets>
<a-asset-item id="Modelo" src="./bulma.glb"></a-asset-item>
</a-assets>
<a-camera position="0 0 0" look-controls="enabled: false"></a-camera>
<a-entity mindar-image-target="targetIndex: 0">
<a-gltf-model rotation="0 0 0 " position="0 -0.5 0" scale="7 7 7" src="#Modelo"></a-gltf-model>
</a-entity>
</a-scene>
</body>
</html>También podemos encontrar la opción de Scaniverse App de Niantic, te dejo aquí el link del articulo: Scaniverse: Gaussian Splatting en Realidad Aumentada WebAR
Te pueden interesar estos dos articulos:
Polycam democratiza la creación de activos, y MindAR democratiza su visualización. La magia ocurre en el medio: en la optimización. Un buen desarrollador de AR no es el que hace la app más compleja, sino el que logra que la experiencia cargue rápido y se vea real. ¡Escanea, optimiza y sorprende!