Insertar imagen 360 VR en tu web
La creación y administración de sitios web (independiente de su objetivo y tipo) no es una tarea sencilla. La actualización de contenidos, el aseguramiento de la información y la integración de nuevas soluciones son una pequeña muestra de las múltiples tareas que tiene a cargo el equipo web.
Para ayudar un poco en la tarea de colegas y amigos, me propuse investigar y documentar cómo se insertan imágenes 360 grados en una web. El resultado fue atractivo, considerando que las herramientas necesarias para lograrlo están al alcance de todos.
Comencemos:
Identificación del escenario
El primer paso es identificar el escenario que se quiere compartir en el sitio web.
Conviene tener presente:
- buena iluminación;
- sonido ambiente agradable (en caso que se quiere anexar audio);
- un momento del día en que no haya movimiento de personas u objetos, y
- un espacio que sea digno de representarse en 360 grados.
Las herramientas
Una vez superado lo anterior, lo sigue es identificar y configurar la cámara que realizará la panorámica.
Para este caso, se utilizará un teléfono inteligente -de gama media o alta- y un trípode con base giratoria. Si es necesario, un par de luces que mejoren la calidad y fidelidad de la imagen.
Capturando la imagen
El tercer paso es instalar la aplicación «Cámara Cardboard» en el dispositivo móvil. Esta permite realizar capturas en 360 grados, además del sonido ambiente.
Según la tienda PlayStore, «Cámara Cardboard» es una solución que permite capturar y compartir fotografías de realidad virtual. Además -si así lo desea el creador de contenido-, es posible grabar el audio en cualquier dirección, logrando una sensación de profundidad al momento de visualizar el recurso.
Aquí también toma lugar el trípode, pues el registro del escenario requiere un movimiento horizontal (conocido como «paneo»), lento y estable. Aunque puede realizarse «a mano alzada», es recomendable un apoyo.
Convertir la imagen
Aunque las imágenes que genera la aplicación en mención son compatibles con visores de realidad virtual, su visualización desde un sitio web no lo es, debido a que no está en el formato correcto.
Para dar solución a esto, Google ha habilitado un servicio en línea que convierte las imágenes de la «Cámara Cardboard» en un formato compatible con el visor web de realidad virtual. Este formato es conocido como «equirectangular».
Así, de una imagen de 10320 pixeles de ancho por 1732 pixeles de alto, se pasa a una de 4096 pixeles de ancho y alto, que tiene una disposición de elementos compatibles con cualquier visor VR.
¿Necesitas asesoría en comunicación digital?
Diseña y optimiza tus proyectos en comunicación digital, entregando una mejor experiencia a tus usuarios y potenciando el valor de tu marca.
Conversemos
El código
A continuación se integra el API de Google que carga el Visor de Realidad Virtual en el sitio web y se anexa la imagen convertida. Para ello se utiliza la etiqueta IFRAME y los siguientes parámetros:
<iframe width="800" height="450" allowfullscreen src="//storage.googleapis.com/vrview/2.0/index.html?image=//URL-de-la-imagen-convertida.jpg&is_stereo=true" > </iframe>
En detalle, los parámetros que se definen son:
width="800" height="450"
Aquí se especifica el ancho y alto del visor.
allowfullscreen
Permite que el recurso sea visualizado en pantalla completa.
src="//storage.googleapis.com/vrview/2.0/index.html
Carga el API de Google para ejecutar el visor VR en la página web.
image=//URL-de-la-imagen-convertida.jpg
Define la ruta (ubicación) de la imagen equirectangular.
is_stereo=true
Específica el tipo de imagen, que para este caso es estéreo.
Publicar
El último paso es guardar el documento, publicarlo en internet y probarlo. Si los pasos anteriores se realizaron correctamente, no debe aparecer ningún error.
Aquí está mi imagen de ejemplo:
Ayuda
Para ilustrar mejor esta entrada, he compartido un video sobre el proceso en mi canal de YouTube.
En el canal YouTube «Escuela Digital» puedes encontrar más videos sobre el tema.
Actualización: en el video no aparece el directorio «2.0» luego de «vrview». Te recomiendo utilizar el código que aparece en este artículo, pues está actualizado.
¿Lo lograste? Comparte en los comentarios tu visor VR implementado o las inquietudes que tengas sobre el proceso.
Tu aporte nos permite crear contenidos. Tu apoyo desde Nequi
¡Vamos por los 25.000 suscriptores en YouTube! Suscríbete
¿Tienes una pregunta sobre el artículo? Cuéntanos en los comentarios. Además, si buscas información sobre un tema y no está disponible, anótalo a continuación para agregarlo a nuestra agenda de contenidos.
—
Por:
Juan Carlos Morales S.
Comunicador y educador
YouTube | LinkedIn | Instagram | Twitter
Insertar imagen 360 VR en tu web por juancadotcom se distribuye bajo una Licencia Creative Commons Atribución-CompartirIgual 4.0 Internaciona . Basada en una obra en https://e-lexia.com/blog .
hola que tal y por ejemplo el efecto donde se tiene una imagen y despues en esa imagen te manda a una segunda foto asi como el paseo guiado de google maps como podria hacer ese efecto podrias ayudarme
Hola, Mafra. Gracias por revisar mi blog y dejar un comentario.
Imagino que cuando mencionas el «paseo guiado de Google Maps» están haciendo referencia a la función de Street View. Si es así, te comento que a la fecha no tengo conocimiento sobre cómo desarrollar.
Sin embargo, para no dejar la consulta «en el aire», me di a la tarea de buscar en la Web sobre el tema y encontré una amplia documentación sobre el servicio. Mira el enlace: https://developers.google.com/maps/documentation/javascript/streetview.
Espero que sea de utilidad. Saludos.
Al parecer es el servidor que hospeda la imagen.
Sabes que características tiene que tener el servidor?
Gracias!
Perdón que no di mayor detalle anteriormente.
Hice tu instructivo al pie de la letra pero me da el error: unable to load texture from.
Y creo que el problema es el servidor donde está la imagen.
Sabes que hay que activarle al webserver o que características necesita para mostrar la imagen correctamente?
Gracias
Hola, FL. Gracias por tu mensaje. Efectivamente, he identificado que en algunos servidores la imagen no carga correctamente. Infortunadamente, no he logrado identificar qué librería o qué característica debe tener el servidor para que no ocurra el problema. Si sabes de algo, estaré feliz que lo compartas aquí, para todos nos enteremos. Saludos. Juan
Si es tu propio servidor, en el archivo .htaccess agrega la siguiente linea:
Header set Access-Control-Allow-Origin «*»
eso corrige el error: Render: Unable to load Texture from image.jpg
Hola, Javier. Muchas gracias por el aporte. Seguro será de muchísima utilidad. Saludos.
Una pregunta tonta, he sacado una foto con la app pero, como la saco de ahi? porque sólo me deja compartir la url.
Gracias.
Hola, Guillerno. Gracias por tu comentario. No es una pregunta tonta, todo lo contrario: es necesario explicar el proceso.
Te cuento: cuando tomas la fotografía y esta termina de procesar, la visualizas desde la aplicación «Camera Cardboard». Contrario a las imágenes que trae por defecto la aplicación, tus fotografías traen un menú de opciones, ubicado en la esquina superior derecha. Allí presionas y seleccionas la opción «Abrir en Galería». Y listo. Ya tu fotografía está en tu aplicación de fotos, desde donde puedes compartirla, editarla y demás. Quedo atento a cualquier comentario adicional. Saludos.
Buenas tardes Juan Carlos.
Gracias por tus aportes, son muy interesantes.
He seguido tu tutorial y con el código que pones y tu propia imagen si me sale, pero cuando hago una foto con Cardboard ya me dice que no es capaz de cargar la textura.
¿Hay que poner algo en el servidor?
¿Hay que modificar o poner metadatos XMP en la imagen?
Supongo que este ejemplo que ofreces sólo es para imágenes generadas por Cardboard, tengo una cámara 360 y estoy desesperado buscando cómo añadirla a una web si servidores externos mas allá de la API de Google u otra.
Gracias
Hola, Javier. Gracias por tu comentario. Efectivamente, el tutorial solo funciona para fotografías tomadas con Google Camera Cardboard. Intenta con esta aplicación y me cuentas cómo te va. Quedo atento. Saludos.
No se Si aun revisas el tema podria ponerte un error que me esta dando?
Seguí el procedimiento completo pero me da un error de texturas
Hola, Giovani. Gracias por escribirme. ¿Tienes forma de compartirme la URL de tu proyecto? Quizá así puede ver en detalle qué puede estar pasando. Quedo atento. Saludos
La foto está hecha con la aplicación Camera CardBoard y el móvil Samsung y se ha procesado con la aplicación de Google. Después está subida a un servidor y puesto el código tal como indicas. Revisado varias veces y siempre da el siguiente error: «Render: Unable to load textura from //rtvnotycias.es/360/img.jpg
Puedes indicarme como arreglar este error
Hola, Alf. Gracias por el mensaje.
Posiblemente el error que está apareciendo se debe a tu servidor. Intenta realizar el mismo procedimiento, pero cargando tu imagen en otro servidor. Quedo atento. Saludos
Hola que tal
vi tu blog y me intereso. si uno hace las tomas con una reflex no con un celular y una aplicacion supongo que se procesan en lightroom o fhotoshop. como se guardarian en que formato y como se visualizarian o se exportan. como seria el proceso si no se hace con un celular. Me interesa el tema pero no lo domino y me gustaria hacerlo con la reflex.
saludos
Hola, Poncho. Gracias por el comentario.
Sobre lo que comentas, el procedimiento que menciono en el artículo apunta al uso de la aplicación Camera Cardboard. El procedimiento con una cámara reflex no lo conozco, pero podría investigarlo. ¿Te parece?
Por ahora ando ocupado con un proyecto fotográfico y en los próximos días estaré ocupado, pero tendré presente tu inquietud para una próxima publicación.
Saludos
Pon la imagen 360° en tu blog para que podamos mirarla
Buenas Juan Carlos,
Le dejo un link de un pantallazo por que a mi si me sale que esta en equirectangular
https://gyazo.com/18f4228869c6bfadf482608f429e5db5
Hola Guillermo.
Acabo de revisar tu imagen y aunque es equirectangular como lo indicas, el API de Google que se utiliza no es compatible con ella. Recuerda que este API funciona para imágenes capturadas con la aplicación «Camera Cardboard».
Como te comenté en el anterior mensaje, envía la referencia exacta de tu cámara y miramos si el fabricante tiene alguna solución 🙂
Quedo atento. Saludos.
Hola Guillermo.
Estuve revisando y Nikon (creo que esa es la marca de tu cámara) no tiene opción para publicación web en sus imágenes 360. Sin embargo, intenta utilizar el servicio de https://kuula.co/ y desde allí la opción «Compartir» – «Incrustar». Seguro que dará una solución bastante práctica.
Quedo atento a cualquier comentario. Saludos
Hola buenos dias,
Consigo hacer todos los pasos menos uno, cudo le introduzco la url nunca la encuetra y me da error, ¿como lo podria poner?
Buen día Guillermo. Gracias por dejar tu comentario.
Ayer recibí un comentario similar en YouTube. No sé si serás el mismo usuario. Sin embargo, ten en cuenta que el API que se menciona en la entrada es para fotografías capturas en la aplicación «Camera CardBoard». Si utilizas otra cámara es posible que no te funcione.
De otra parte, el recurso (la imagen) requiere estar en un servidor web, es decir, la URL que ingresas debe dirigir a un recurso en línea.
Que muy atento a tu respuesta. Saludos.
Buenas tardes Juan Carlos,
Si fui yo el del comentario, pero claro la camara keymission te hace ya la fotografia, lo unico que no se es como ponerla equirectangular, si me pudiera decir como hacerlo o con que programa que no sea excesivamente cara se lo agradeceria.
Ya que soy relativamente nuevo en el mundo de los 360°
Un saludo
Guillermo Delgado
Hola Guillermo.
Vale. Voy a tomar la fotografía que publicaste en YouTube y te comento cómo lograrlo. Recuerda que el tutorial se está trabajando desde el recurso generado con «Camera CardBoard». Si puedes darme una identificación más exacta de la cámara que utilizas, quizás pueda preguntar directamente al fabricante.
Quedo atento. Saludos.