Qué aprenderás
Este tutorial cubre cómo generar imágenes panorámicas equirectangulares de 360 grados usando GPT Image 2 (el modelo de generación de imágenes dentro de ChatGPT) y cómo verlas en un visor interactivo 360 que funciona completamente en tu navegador.
Al finalizar sabrás:
- Qué es una imagen equirectangular y por qué importa el formato
- Cómo escribir prompts que produzcan panoramas 360 utilizables
- Cómo cargar el resultado en el visor y explorarlo
- Cómo embeber el visor en tu propio sitio web con una imagen precargada
Qué es una imagen equirectangular
Un panorama 360 se almacena como una proyección equirectangular; un rectángulo plano que mapea toda la esfera visual a una imagen con ratio de aspecto 2:1. Piensa en ello como un mapa en proyección Mercator, pero para una habitación en vez de la Tierra.
- El eje horizontal cubre 360 grados de longitud
- El eje vertical cubre 180 grados de latitud
- Los bordes izquierdo y derecho deben unirse sin costuras; representan el mismo punto en el espacio
Cuando un visor 360 carga esta imagen, la envuelve sobre el interior de una esfera usando Three.js y coloca la cámara en el centro. Arrastras para rotar, haces scroll para hacer zoom, y la imagen plana se convierte en una escena inmersiva.
Cámaras profesionales como la Ricoh Theta Z1 o la Insta360 X4 gestionan el stitching automáticamente. Cuando generas con IA, el modelo necesita producir esa unión sin costuras en una sola pasada.
Paso 1: Abrir ChatGPT con GPT Image 2
Ve a ChatGPT y asegúrate de estar usando un modelo que soporte GPT Image 2 (GPT-4o con generación de imágenes habilitada). GPT Image 2 está disponible en los planes ChatGPT Plus, Team y Enterprise.
GPT Image 2 no produce proyecciones equirectangulares por defecto. Necesitas ser explícito sobre el formato, el ratio de aspecto y el requisito de unión sin costuras en cada prompt.
Paso 2: Escribir el prompt
La estructura del prompt tiene tres partes críticas:
- Descripción de la escena: lo que quieres ver
- Especificación del formato: proyección equirectangular, ratio de aspecto 2:1
- Restricción de continuidad: los bordes izquierdo y derecho deben unirse al envolver sobre una esfera
Plantilla base del prompt
Generate a 360-degree equirectangular panorama image of [SCENE DESCRIPTION].
The image must use equirectangular projection with a 2:1 aspect ratio.
The left and right edges must stitch seamlessly when wrapped onto a sphere.
Photorealistic style. High detail. Even lighting across the full 360 degrees.
Ejemplo de prompt: Interior de catedral gótica
Generate a 360-degree equirectangular panorama image of the interior of a
gothic cathedral inspired by Sagrada Familia in Barcelona. Tall columns
branching into tree-like structures supporting the ceiling. Stained glass
windows casting colored light across stone surfaces. Warm afternoon light
filtering through the nave. The image must use equirectangular projection
with a 2:1 aspect ratio. The left and right edges must stitch seamlessly
when wrapped onto a sphere. Photorealistic style.
Ejemplo de prompt: Apartamento moderno
Generate a 360-degree equirectangular panorama image of a modern minimalist
apartment living room. White walls, large floor-to-ceiling windows with
city skyline view, a gray sectional sofa, wooden coffee table, indoor
plants, and warm pendant lighting. Scandinavian design. The image must use
equirectangular projection with a 2:1 aspect ratio. The left and right
edges must stitch seamlessly when wrapped onto a sphere.
Ejemplo de prompt: Playa tropical
Generate a 360-degree equirectangular panorama image of a tropical beach
at sunset. Crystal clear turquoise water, white sand, palm trees swaying,
a wooden pier extending into the ocean, dramatic orange and pink sky. The
image must use equirectangular projection with a 2:1 aspect ratio. The
left and right edges must stitch seamlessly when wrapped onto a sphere.
Paso 3: Descargar la imagen
Después de que ChatGPT genere la imagen:
- Haz clic en la imagen generada para abrirla a tamaño completo
- Haz clic en el botón de descarga (flecha apuntando hacia abajo)
- Guárdala como JPEG o PNG; descarga siempre la resolución más alta disponible
GPT Image 2 genera imágenes de aproximadamente 2048x1024 píxeles. Mayor resolución significa más detalle cuando la imagen se estira sobre la esfera completa de 360 grados.
Paso 4: Cargarla en el visor interactivo
Abre el Visor Interactivo de Fotos 360 y arrastra tu imagen descargada al área de subida. El visor:
- Descargará y decodificará la imagen
- La mapeará sobre una esfera 3D usando WebGL
- Te permitirá arrastrar para mirar alrededor, hacer scroll para hacer zoom y activar la rotación automática
Todo se ejecuta localmente en tu navegador. La imagen nunca sale de tu dispositivo.
Aquí tienes un ejemplo en vivo; arrastra para explorar:
Consejos para mejores resultados
1. Especifica siempre el ratio de aspecto 2:1. Sin esto, el modelo genera por defecto imágenes cuadradas o en 16:9. Estos formatos rompen las matemáticas de la proyección al cargarlos en un visor.
2. Describe la escena completa en 360 grados. En vez de "una habitación con una ventana", describe las cuatro paredes: "grandes ventanales en la pared norte, una estantería en la pared este, una chimenea en la pared sur y una puerta en la pared oeste." El modelo produce mejores uniones cuando entiende el entorno completo.
3. Solicita iluminación uniforme. El fallo más común es una costura visible donde se encuentran los bordes izquierdo y derecho. Esto ocurre cuando la iluminación difiere drásticamente en la escena. Especificar "even lighting" o "diffuse ambient light" reduce los artefactos de costura.
4. Los interiores funcionan mejor que los paisajes abiertos. Los espacios cerrados (habitaciones, catedrales, cuevas, estudios) producen resultados equirectangulares más consistentes. Las paredes y techos anclan la perspectiva y reducen la deformación geométrica.
5. Itera con prompts de seguimiento. Si el resultado tiene una costura visible o geometría distorsionada, dile a ChatGPT exactamente qué salió mal: "The left and right edges don't match; there's a visible break in the wall texture. Regenerate with seamless horizontal stitching." GPT Image 2 responde bien a correcciones específicas.
6. Descarga a resolución completa. Las imágenes de menor resolución pierden detalle al estirarse sobre una esfera. Cada píxel cuenta en la proyección equirectangular.
Cómo embeber el visor en tu propio sitio
El visor 360 se puede embeber en cualquier sitio web usando un iframe. El parámetro src precarga una imagen específica:
<iframe
src="https://kitmul.com/es/embed/image-design/interactive-360-photo-viewer?src=YOUR_IMAGE_URL"
width="100%"
height="500"
frameborder="0"
allowfullscreen
loading="lazy"
></iframe>
Reemplaza YOUR_IMAGE_URL con la URL pública de tu imagen equirectangular. La imagen debe ser accesible públicamente y servir las cabeceras CORS apropiadas. Para imágenes en el mismo dominio, usa una ruta relativa: ?src=/images/my-panorama.jpg.
Limitaciones a tener en cuenta
GPT Image 2 no es una cámara 360. Las imágenes son impresionantes pero imperfectas:
| Limitación | Detalles |
|---|---|
| Artefactos de costura | Aproximadamente el 30% de las generaciones muestran una costura visible. Se corrige con prompts de seguimiento o el filtro de desplazamiento de GIMP |
| Inconsistencia geométrica | Las líneas rectas a veces se curvan o deforman, especialmente en escenas arquitectónicas |
| Techo de resolución | Máximo ~2048x1024. Las cámaras 360 profesionales capturan a 5.7K+ |
| Sin datos de profundidad | Los panoramas de IA son proyecciones planas; puedes rotar pero no moverte a través del espacio |
Fotos 360 generadas por IA vs. profesionales
| Aspecto | GPT Image 2 | Cámara 360 profesional |
|---|---|---|
| Coste por imagen | Gratis (suscripción de ChatGPT) | 200-800+ € por sesión |
| Tiempo de producción | 30-60 segundos | Horas (preparación + captura + stitching) |
| Resolución | ~2048x1024 | 5760x2880+ |
| Precisión geométrica | Aproximada | Precisión fotogramétrica |
| Personalización | Ilimitada; describe cualquier escena | Limitada a ubicaciones físicas |
| Calidad de costura | ~70% sin costuras | Siempre sin costuras |
| Ideal para | Conceptos, prototipos, educación | Anuncios, documentación, VR |
Casos de uso
- Home staging virtual para inmobiliarias: genera vistas 360 de espacios sin amueblar con diferentes estilos de interior antes de decorar la propiedad
- Presentaciones de conceptos arquitectónicos: muestra a los clientes cómo se sentirá un interior planificado antes de que comience la construcción
- Contenido educativo: crea vistas 360 de interiores históricos para uso en clase; villas romanas, castillos medievales, capillas renacentistas
- Prototipado de juegos y VR: prueba la sensación espacial de los entornos antes de comprometerte con un modelado 3D completo
- Escaparates de e-commerce: genera salas de exposición 360 para productos y embebe el visor en las páginas de producto
Resumen
- Abre ChatGPT con GPT Image 2
- Usa la plantilla de prompt con proyección equirectangular explícita, ratio 2:1 y bordes sin costuras
- Descarga la imagen a resolución completa
- Cárgala en el Visor Interactivo de Fotos 360
- Arrastra para explorar, haz zoom, activa la rotación automática, usa pantalla completa
El flujo de trabajo completo lleva menos de dos minutos y funciona completamente en tu navegador.
El Visor Interactivo de Fotos 360 es gratuito, privado y procesa todo localmente. Sin registro, sin subidas a servidor. Parte de la colección de Herramientas de Imagen y Diseño en Kitmul.