Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Photo & Video
  2. Virtual Reality
Photography

Cómo Compartir Fotos Panorámicas 360 con WebVR y A-Frame

by
Difficulty:BeginnerLength:MediumLanguages:

Spanish (Español) translation by Javier Salesi (you can also view the original English article)

En tiempos recientes hemos visto un ascenso en la popularidad y capacidad técnica de la realidad virtual. Típicamente, cuando pensamos en RV pensamos en juegos y software dedicado para computadoras de escritorio. Sin embargo éste no es el único espacio en el que la realidad virtual está creciendo.

Mediante la siempre potente WebGL, la realidad virtual ahora también se está dirigiendo a los navegadores en la forma de WebVR, y junto con ella llegan nuevas formas de compartir fotografías en formas siempre más inmersivas.

Con una foto en el formado correcto y un dispositivo RV como Google Cardboard, HTC Vive o similar, una persona puede tener la sensación de estar parada en el lugar exacto en el que estaba la cámara al momento en el que fue tomada la foto, con la capacidad de observar alrededor del entorno, asomándose a la profundidad del simulado espacio 3D.

E incluso sin un dispositivo RV, las personas que navegan por la web todavía pueden hacer un paneo alrededor de una imagen panorámia esférica usando un mouse, también una experiencia realzada.

Creando tu Propia Panorámica 360

En éste tutorial estaremos configurando panorámicas de 360 grados que funcionan mediante WebVR en tres diferentes formas, usando herramientas enfocadas en hacer WebVR accesible y fácil de usar:

Para ver en lo que vamos a trabajar, consulta los demos de cada una de las herramientas citadas arriba, mostrando el tipo de imagen 360 que estaremos haciendo:

Formas de Ver Imágenes 360

Hay dos maneras para ver e interactuar con panorámicas de 360 grados.

RV Estereoscópica

Cuándo una persona está viendo una foto de 360 grados WebVR mediante un apropiado dispositivo preparado para RV, como un Google Cardboard o HTC Vive, por ejemplo, la imagen será dividida en dos imágenes y procesada de tal manera que el casco pueda usarlas para generar la ilusión de profundidad.

En éste caso la persona mira alrededor de la escena simplemente al girar en el punto y mirando arriba y abajo. El acelerómetro del dispositivo actualizará la proyección de la imagen de acuerdo a la dirección que está viendo el usuario.

Click & Arrastrar (Solución Alternativa)

Cuándo una persona esta viendo a través de un dispositivo que no está preparado para RV la imagen de 360 grados será sustituída por una imagen de la cuál se puede realizar un paneo haciendo click y arrastrando.

Soporte de Navegadores

WebVR está en sus incios así que algunos aspectos de él no son ampliamente soportados. Sin embargo: panorámicas de 360 grados únicamente requieren de un pequeño subconjunto de capacidades WebVR así que soporte para al menos proyectar  una solución alternativa es realmente muy extendido.

Navegadores de Escritorio

Mientras que un navegador soporta WebGL un espectador verá una solución alternativa  "click y arrastrar" para una foto 360. WebGL es ahora completamente funcional en los principales navegadores.

Para revisar si un navegador que usas soporta WebGL visita  get.webgl.org. Si ves un cubo que rota WebGL está funcionando.

RV Basada en Teléfono

Algunos teléfonos soportan WebVR cuándo se combinan con un casco como un Google Cardboard o Daydream. Dado el reciente empuje de Google hacia WebVR no es sorpresa que sus versiones iOs y Android de Chrome soporten WebVR de manera instantánea.

Por otro lado, si tienes un casco Samsung Gear VR necesitarás usar el propio navegador de Samsung.

Pantalla Montada En la Cabeza

La forma en tener la configuración para ver WebVR vía una pantalla montada en la cabeza que funciona mediante navegador de escritorio dependerá de la unidad en cuestión.

Para el Oculus Rift o HTC Vive/StreamVR puedes usar una compilación experimental de Chromium o Firefox Nightly. La compilación Chromium WebVR está disponible únicamente para Windows, mientras que Firefox Nightly también está disponible para MacOS y Linux.

Actualmente Oculus Rift únicamente soporta Windows sin planes para soporte multiplataforma así que cualquier navegador es adecuado. Sin embargo soporte multiplataforma para HTC Vice / SteamVR está muy próximo así que si tienes éste dispositivo y piensas que podrías preferir crear tus panorámicas en MacOS o Linux en ese momento podrías desear elegir Firefox Nightly ahora como tu principal navegador para realizar pruebas.

Para instrucciones detalladas sobre la configuración de cualquiera de éstos navegadores para WebVR visita: https://mozvr.com/

Firefighters battle forest fire in desert conditions
Incendio Bert, 2016. Bomberos despejando el área en los últimos días del incendio. Distrito Williams Ranger, norte de Parks, AZ. 6-21-16. Foto de Dyan Bone. Crédito al Servicio Forestal de EUA, Región Suroeste, Bosque Nacional Kaibab. CC BY SA.

Comenzando

Lo primero que necesitarás es una fotografía en un formato adecuado para panorámicas WebVR, que como puedes ver se les llama también foto esférica, equirectangular o de 360 grados. Puedes tomar la tuya al:

  • Usar una cámara 360 grados.
  • Usar una aplicación que le permita a la cámara de tu teléfono crear imágenes esféricas.
  • Organizar múltimples imágenes secuencialmente usando software especial para ello.

Tenemos algunos magníficos artículos que cubren algunas de las técnicas que puedes usar:

Alternativamente puedes obtener imágenes equirectangulares vía Flickr. Estaremos usando una imagen del Bosque Nacional Kaibab para éste tutorial.

Crea un directorio para albergar las panorámicas que estarás creando, descarga el archivo de arriba en él, luego renombra la imagen como "fire.jpg".

Si estás planeando ver tu panorámica en completo WebVR en lugar de solo como una imagen de click y arrastrar en un navegador de escritorio, probablemente querrás descargar la versión "Tamaño Original" de 10240 x 5120 para máxima fidelidad visual. Se consciente, sin embargo, que los usuarios pueden ver una pantalla en blanco mientras que ésta imagen grande se carga, dependiendo de su conexión a internet. Si ésto potencialmente será un problema, mejor elige uno de los tamaños más pequeños.

Nota: más adelante si ves un hoyo negro en la parte inferior de las panorámicas que creaste con ésta imagen significa que el archivo está incompleto y necesitarás volver a descargarlo.

Previsualización Remota

Si deseas probar tus panorámicas en un dispositivo remoto/secundario, como un teléfono compatible con Cardboard, también querrás una forma de ver tus archivos mediante tu red local. Sin embargo puedes hacer ésto como prefieras, pero dos posibles opciones que te gustaría usar son:

HTML Básico

Cada ejemplo se pondrá en su propia página web así que solo necesitarás un documento HTM muy básico para comenzar con cada ejemplo:

En el directorio para proyecto crea tres archivos HTML:

  • webvrstrterkit.html
  • aframe.html
  • gurivr.html

Luego pega el código de inicio en cada archivo, cambiando el contenido de la etiqueta <title>...</title> si lo deseas.

Imagen 360 WebVR Starter Kit 

Si estuvieras creando una panorámica WebVR desde cero sería muy complejo, se requiere codificación extensa. Sin embargo con excelentes frameworks como el WebVR Starter Kit el proceso se reduce a dos pasos.

Todas las experiencias de RV que puedes crear con el WebVR Starter Kit son hechas funcionar por un solo archivo JavaScript. Así que para comenzar solo necesitas cargar ese archivo JS en la sección <head>...</head> de tu archivo "webvrstarterkit.html" al pegar el siguiente snippet:

Si prefieres no cargar éste archivo JS de una fuente externa puedes descargar el proyecto WebVR desde su respositorio en https://github.com/povdocs/webvr-starter-kit. Encontrarás el archivo "vr.js" dentro del directorio "build".

Con el JavaScript WebVR cargado la página ahora está lista para tener elementos RV agregados a ella. Para crear una panorámica de 360 grados inserta el siguiente código en la sección <body>...</body>:

¡Y eso es todo! Tu panorámica de 360 grados ahora está lista.

Nota que el valor entre los corchetes es la ruta a nuestra imagen equirectangular. Ésto también puede establecerse para cargar una imagen externa al insertar una URL.

Cuándo previsualizas tu archivo "webvrstarterkit.html" ahora debería vese así: https://tutsplus.github.io/VR_Panoramas/webvrstarterkit.html

Imagen 360 A-Frame

A-Frame es un diferente framework para WebVR, pero los medios de crear una panorámica 360 son muy similares a lo que completaste arriba. Al igual que con el WebVR Starter Kit, A-Frame es hecho funcionar por un solo archivo JavaScript. Carga ese archivo en la sección <head>...</head> de tu archivo "aframe.html" con éste código:

Si prefirieses no cargar el archivo JS de una fuente externa puedes descargar el repositorio Aframe desde https://github.com/aframevr/aframe/. Desde el directorio "dist", deberías usar la vesión minificada del script para la versión actual del proyecto, por ejemplo "aframe-v0.4.0.min.js".

En lugar de usar una etiqueta de script en el cuerpo de la página, A-Frame usa su propios elementos HTML personalizados. El primer elemento para ser añadido es siempre <a-scene> para crear un contexto para los elementos VR en el que serán insertados.

El elemento <a-sky> es usado para simular un cielo en ciertos escenarios, pero lo hace al rodear al visor con una imagen esférica, que lo hace perfecto para panorámicas 360.

Luego para añadir tu imagen de 360 grados inserta el siguiente código en la sección <body>...</body>:

Tus resultados deberían verse así: https://tutsplus.github.io/VR_Panoramas/aframe.html

Imagen 360 GuriVR 

Hablando claro, GuriVR es realmente la librería A-Frame. Lo que busca hacer es ofrecer una manera intuitiva y sencilla de configurar las experiencias de RV a través de una interfaz de editor.

Para usar GuriVR dirígete a: https://gurivr.com/stories/create

En la interfaz de edición puede ingresar solo la palabra panorama seguida por la URL que apunta a una imagen esférica y GuriVR se encargará del resto por tí.

Una vez que hayas hecho eso, haz click en "Save" (Guardar) en la parte superior de la pantalla, luego haz click en el botón "Share Link" (compartir vínculo) y se mostrará un vínculo que puedes dar a otros para mostrar tu panorámica.

Alternativamente, puedes incrustar la panorámica en una página web usando un elemento iframe. Actualiza tu archivo "gurivr.htm" con el siguiendo código, asegurándote añadir tu propia URL de GuriVR en el atributo src del iframe:

Cuándo hayas hecho lo de arriba, deberías tener una panorámica 360 como ésta:

https://tutsplus.github.io/VR_Panoramas/gurivr.html

Concluyendo

Ahora tienes tres maneras diferentes de crear panorámicas basadas en WebVR y permitirle a la gente conectarse con tu fotografía de una forma totalmente nueva. Recapitulemos rápidamente lo que cubrimos:

  • WebVR Starter Kit - carga el archivo JS del framework, agrega una etiqueta script, luego dentro de él usa VR.panorama() para crear tu imagen 360.
  • Aframe - carga el archivo JS del framework, agrega un elemento <a-scene>,luego dentro de él usa <a-sky> para crear tu imagen 360.
  • GuriVR - dirígete al editor basado en la web, agrega la palabra panorama luego la URL de tu foto para crear tu imagen 360. Opcionalmente incrusta la URL proporcionada en una página web vía un iframe.

Ahora que has visto cómo rápidamente puedes crear una experiencia WebVR desde una foto esférica, ¡espero estés inspirado para salir y capturar el mundo en tres dimensiones!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.