Categorías
web

Mostrar fotos 360 en tu web con PTGui

En esta entrada te quiero enseñar como mostrar tus fotos 360 sin depender de servicios externos como Flickr, Facebook, RoundMe, Kuula u otros y poder visualizarlas de forma interactiva.

Haces fotos esféricas (360, equirectangular o como quieras llamarlas) y solo las puedes ver bien en tu ordenador. Puede que las hayas subido a Flickr o a Facebook y ahí las puedes compartir, pero no se ven bien del todo, o se pierden entre tanta foto. Incluso puede que hayas abierto alguna cuenta gratuita en RoundMe.com o en Kuula.co pero no quieres depender de webs externas. Este era mi caso hasta hace poco. En esta entrada te quiero enseñar como mostrar tus fotos 360 en tu propia web y sin depender de servicios externos solo con PTGui.

Antes de empezar

Partimos de una fotografía equirectangular como esta. Puede estar generada por cosido de varias imágenes o bien generadas por una cámara de un solo disparo como la Ricoh Theta V o la Insta360 ONE X, por citar alguna.

Si has cosido varias imágenes puede que tengas ya PTGui. En este caso, ya tienes todo lo que se necesita. Si no tienes PTGui puedes usar la versión demo que es totalmente funcional sin limitación de tiempo. El único inconveniente es la marca de agua. Hay también otras dos opciones, Pano2VR y Marzipano. Pano2VR en versión demo tiene las mismas limitaciones que PTGui, la marca de agua. Marzipano por otro lado se distribuye bajo la licencia Apache 2.0. Esto quiere decir que puedes usarlo sin limitaciones.

En tras entradas veremos como hacerlo con Pano2VR y Marzipano.

Mostrar fotos 360 usando PTGui

Sin cargar ninguna foto, ve al menú «Herramientas» – «Publicar en sitio web…».

mostrar foto 360 en tu web con ptgui 01
mostrar foto 360 en tu web con ptgui 1

Se abrirá una ventana nueva desde donde haremos todos los ajustes necesarios.

mostrar foto 360 en tu web con ptgui 02
mostrar foto 360 en tu web con ptgui 2

Para incluir la foto puedes hacerlo pulsando el botón «+» situado bajo el gran panel de «Archivos fuente:» o hacerlo arrastrando y soltando el archivo sobre dicho panel.

La proyección debería ser «Equirectangular» y el campo de visión «360 º».

mostrar foto 360 en tu web con ptgui 4
mostrar foto 360 en tu web con ptgui 4

En el apartado de «Salida» prefiero no poner los archivos generados en la misma carpeta que el archivo de origen. Para ello hay que desmarcar la opción

«Guardar en archivos con el mismo nombre …».

En «Guardar como …» escribir el nombre de una carpeta que ya exista, y el nombre del prefijo que se desee para las imágenes y el archivo HTML.

Cuando pulsemos el botón «Convertir» en la carpeta aparecerán 15 imágenes, un archivo JavaScript (.js), otro Sockwave Flash (.swf) y otro HTM. Estos 18 archivos ya se pueden subir a tu web.

Si generas más visores de fotos 360, y en tu web los colocas en la misma carpeta, puedes reusar los archivos .swf y .js y así ahorrar unos pocos bytes en tu web.

Probar la visualización 360 antes de subir a tu web

Antes de subir los archivos a la web, me gusta probarlo en local. Se puede hacer usando Chrome o Firefox.

mostrar foto esférica, chrome

Si abres el archivo HTML directamente con Chrome verás este error.

Para hacerlo con Chrome hay que cerrar todas sus ventanas y arrancarlo con este flag

chrome.exe --allow-file-access-from-files

Para no tener que cerrar las sesiones abiertas de Chrome, he instalado Firefox.

mostrar foto esférica, Firefox 1

En su configuración por defecto, tras cargar el HTML generado, las imágenes tampoco se visualizarían.

Accede en una pestaña de Firefox a esta dirección:

mostrar foto esférica, Firefox 2

«about:config»

y filtra por «privacy.file_unique_origin«

Pulsando la doble flecha de la derecha cambiar el valor a «false«

mostrar foto esférica, Firefox 3
mostrar foto esférica, Firefox 3

Recarga la pestaña original donde cargamos el HTML y ahora verás el panorama. Podrás moverte en todas direcciones.

mostrar foto 360 en tu web, Firefox 4
mostrar foto 360 en tu web, Firefox 4

Así es como me ha quedado:

Patrulla Águila, esférica en LEGT (Getafe)
Patrulla Águila, esférica en LEGT (Getafe)

Puedes ver más fotos esféricas aquí.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *