Panorámicas interactivas de 360º

 

Todos habremos tenido ocasión de juguetear con alguna imagen de este tipo, tan de moda últimamente, que nos presenta interactivamente los 360º de visualización en torno a un punto. A veces sólo la imagen, pero en ocasiones acompañada de “puntos calientes” o información complementaria. Son un estupendo recurso para enseñar lugares, completar tours interactivos y vehicular información de variados tipos. Pero ¿en qué consisten? ¿Cuál es su sustancia material (que en este caso es virtual)?

Bien, pues básicamente una “Panorámica interactiva” es un conjunto de archivos de ordenador. Pueden ser más o menos, según el formato elegido, y pueden residir en un servidor web y consultarse con un navegador, o distribuirse como archivos autoejecutables. Pero deben constar al menos de:

  • Una imagen (o conjunto de imágenes) del entorno que queremos mostrar. El formato de archivo es de lo más pedestre: jpg o PNG por lo general; pero lo que se ve en la imagen ha de responder a ciertos tipos de proyección específicos para que la panorámica funcione correctamente. Los más comunes son la imagen equirectangular (1 archivo) y las caras de cubo (6 archivos). Luego lo vemos.
  • Uno o más archivos de código responsables de dotar de movimiento a esa imagen, es decir, de decirle al ordenador cómo debe mover por la pantalla y deformar adecuadamente esa imagen original en función de la interacción del usuario.
  • Típicamente, uno o varios archivos .html -donde se insertan referencias a los archivos anteriores- y son a los que accede el usuario a través del navegador.

Según el medio en el que van a reproducirse, los mencionados archivos de código pueden estar escritos en diversos lenguajes: ActionScript (Flash), Javascript, Java… Lo más eficiente hoy por hoy en ordenadores de sobremesa es un archivo de Flash (.swf), que podrá leer un navegador con el plugin Flash Player instalado (la inmensa mayoría lo llevan por defecto, pero puede descargarse gratuitamente de la web de Adobe). El archivo swf puede no incluir la/s imagen/es, que estarán en una carpeta accesible, o puede llevarlas incrustadas, en cuyo caso el propio archivo .swf puede visualizarse (con Flash Player independiente) sin necesidad de navegador ni de nada más. En el caso más común, de acceso a través de navegador, hay que agregar un pequeño archivo javascript (swfobjects.js) con el código necesario para detectar la presencia del pluging de Flash Player y poder embeber el .swf en el html.

Otro asunto son los dispositivos móviles. Debido a la absurda guerra comercial que Apple libra sordamente contra Adobe, todos los dispositivos móviles de la manzana no pueden ni ver a Flash (como te lo digo). Por lo que si queremos hacer panorámicas que se vean en iPads o iPhones necesitamos incluir también la “salida HTML5”. Esto significa un archivo .html que cumpla los estándares de esa 5ª implementación del lenguaje, y además varios archivos adicionales: un javascript (.js) que viene a hacer lo que hacía el .swf, ayudado por un archivo XML que se suele emplear para almacenar parámetros de funcionamiento, definidos al crearlo por el autor, o al reproducirlo por el usuario.

Si hay información adicional -texto, imágenes o vídeo que pueden superponerse a la panorámica-, es habitual que haya aun otro bloque de código (“skin“, por ejemplo) que contiene dicha información. En la salida flash va incorporado al .swf, y en HTML5 es un nuevo javascript.

Todos estos archivos deben ponerse a disposición del archivo .html que es, digamos, la centralita que coordina todo, bien subiéndolos al servidor o adjuntándolos en una distribución por otro medio. Pero no hay que asustarse demasiado, porque hoy en día hay una serie de programas que, con una interfaz amigable -unos más que otros- permiten, a partir de la imagen panorámica original, establecer los parámetros y crear ellos solos todos estos archivos con sus correspondientes vínculos.

Todo a su tiempo. De momento nos vamos a centrar en lo que es el primer paso:

 

La imagen panorámica

Es un espinoso asunto animar una imagen de dos dimensiones para dar sensación envolvente, pero no lo es menos obtener dicha imagen 2D a partir de los 360º reales. Ello supone aplicar transformaciones como las que se utilizan en los mapas desde hace tiempo para resolver el problema de pasar de una superficie esférica a un plano. Existen la proyeccion Cilíndrica, Esférica, Mercator, Panini, Equirectangular… o despieces como bandas verticales o Caras de Cubo. Las más utilizadas son:

La proyección equirectangular, que produce imágenes como esta:

Pano_Estudio

Es característico el hecho de que conserva las verticales como verticales, y esa forma curiosa de deformar los extremos superior e inferior. Es el resultado de proyectar horizontalmente los puntos de la esfera desde el eje vertical de la misma hasta un cilindro que la rodeara, y luego desplegar el cilindro en un solo plano. Para hacernos una idea, debemos imaginarnos que tenemos una esfera formada por cuadraditos minúsculos del mismo tamaño (como esas bolas reflectantes de discoteca que reflejan la luz en todas direcciones). Esos cuadraditos son los pixels. Ahora vamos cortando sectores horizontales de la esfera -de altura de 1 píxel- y los vamos desplegando y pegando sobre un plano. El ecuador no estará deformado y será recto, ocupando la fila central (horizontal) de la imagen. Por encima y por debajo vamos desplegando las filas siguientes, pero con dos correcciones: como en realidad son más cortas conforme nos acercamos a los polos (correspondiendo a los paralelos cada vez más pequeños), las estiraremos en horizontal para que, sobre el plano, tengan todas la misma longitud. Pero, además, mientras que los píxeles del ecuador son verticales (perpendiculares a la línea de proyección), conforme nos acercamos a los polos los píxeles van inclinándose, y en el polo el (único) píxel está tumbado (es horizontal). Así que, además de estirarla en horizontal hay que enderezar cada fila para que cada una mida lo mismo en vertical. El resultado es una imagen que siempre debe medir el doble de ancho que de alto (pues en horizontal tenemos 360º y en vertical 180º, o sea, 2:1), y en la que la última fila superior e inferior representan cada una un único punto -el polo-, obligado por la proyección a ocupar todo el ancho de la imagen. Hay que decir que dicha proporción 2:1 es válida solamente para el caso de panorámicas completas, es decir, aquellas que abarcan los 360ºx180º. En caso de que nuestras tomas no incluyan todo el campo, esa proporción variará; digamos que obtendríamos sólo una banda o sector del total.

Las caras de cubo, como su nombre indica, son 6 imágenes que representan las caras de un cubo ideal en cuyo centro estuviéramos:

Pano-SalonP_cubo
La convención vigente estipula que los archivos se denominen con el nombre del conjunto seguido de un sufijo numérico, _0 a _3 para las caras “verticales”, _4 y _5 respectivamente para “techo” y “suelo”.

La mayoría de programas de edición de panorámicas son capaces de trabajar con cualquiera de estos dos formatos, pudiendo convertir de uno en otro. Lo más habitual es que la salida final -es decir, los archivos que en la práctica se suben a internet- sean las caras de cubo. Cuando se trabaja con imágenes de salida muy grandes, estas caras pueden subdividirse a su vez, o generarse diversas resoluciones de imagen, que serán sustituidas unas por otras dinámicamente en función del zoom al que se visualicen (lo que se conoce como multiresolución). Esto es particularmente necesario en el caso de distribuciones para dispositivos móviles, en los cuales una panorámica “aceptable” para un ordenador causaría rápidamente el agotamiento de la comparativamente escasa memoria del dispositivo.

Bien. Si os habéis asustado con toda esta teoría, servirá de ayuda saber que existen multitud de soluciones de software que nos permiten construir este tipo de imágenes a partir de series de fotos tomadas con nuestra cámara, y que son los programas los que se encargan de hacer, de modo bastante automatizado, todos los cálculos necesarios. Unos vienen por defecto incluidos en el software de la cámara (suelen llamarse “photo stitcher”, “panorama” o cosas semejantes) o pueden bajarse de las webs de los fabricantes; hay soluciones independientes gratuitas (como Hugin) y por fin programas de pago, que no suelen ser demasiado caros (Kolor Autopano, Easypano Panoweaver, ArcSoft Panorama Maker… y cada semana aparecen nuevos, así que hacer una lista es un empeño vano, conque googlead “Photo stitching software” y echarle un rato).

La mayoría de ellos se basan en revisar nuestras fotografías, encontrar elementos comunes entre ellas y luego, juntando la información de esos puntos comunes con los datos EXIF de la foto (metadatos que informan de cosas como la distancia focal, apertura, etc.), distribuir nuestras fotos sobre una “esfera ideal”, haciéndolas coincidir  en base a los puntos comunes encontrados (o introducidos manualmente por el usuario). A continuación se igualan los valores tonales de las fotos para evitar cortes indeseados, y luego se aplican a esa “esfera ideal” las transformaciones matemáticas necesarias para desplegarla en el tipo de proyección que deseemos. Lógicamente, para que esto funcione las imágenes deben haber sido tomadas con cierto grado de solapamiento, y manteniendo fijo el punto de toma, sin lo cual los programas producen resultados deficientes, o ningún resultado en absoluto.

Esto nos introduce en la problemática de cómo tomar las fotografías, pero como ya me he extendido demasiado, eso va a ser tema de la próxima entrada: la toma de las fotografías.

Hasta entonces.

Deja un comentario