Share
En los últimos tiempos hemos visto un aumento en la popularidad y la capacidad técnica de la realidad virtual. Por lo general, cuando pensamos en la realidad virtual, pensamos en juegos y software de escritorio dedicado. Sin embargo, este no es el único espacio en el que crece la realidad virtual..
A través del poder cada vez mayor de WebGL, la realidad virtual ahora también se está abriendo camino en los navegadores en forma de WebVR, y junto con ella vienen nuevas formas de compartir la fotografía de maneras cada vez más inmersivas..
Con una foto en el formato correcto y un dispositivo VR como Google Cardboard, HTC Vive o similar, se puede hacer que una persona se sienta en el lugar exacto donde estaba la cámara en el momento en que se tomó la foto, con el capacidad de mirar todo el entorno, observando la profundidad del espacio 3D simulado.
E incluso sin un dispositivo de realidad virtual, las personas que navegan en la web pueden seguir explorando una imagen panorámica esférica con un mouse.
En este tutorial, configuraremos panoramas de 360 grados impulsados por WebVR de tres maneras diferentes, utilizando herramientas que apuntan a hacer que WebVR sea accesible y fácil de usar:
Para ver en qué estamos trabajando, vea las demostraciones de cada una de las herramientas anteriores, mostrando el tipo de imagen 360 que haremos:
Hay dos formas de interactuar y ver un panorama de 360 grados..
Cuando una persona está viendo una foto de 360 grados de WebVR a través de un dispositivo apropiado para VR, como un Google Cardboard o un HTC Vive, por ejemplo, la imagen se dividirá en dos imágenes y se procesará de tal manera que el auricular pueda usar Para generar la ilusión de profundidad..
En este caso, la persona mira alrededor de la escena simplemente girando el lugar y mirando hacia arriba y hacia abajo. El acelerómetro del dispositivo actualizará la visualización de la imagen para seguir con la dirección que está mirando el usuario.
Cuando una persona está viendo a través de un dispositivo que no es compatible con VR, la imagen de 360 grados volverá a mostrarse como una imagen única que se puede desplazar haciendo clic y arrastrando.
WebVR todavía es un poco sangrante, por lo que algunos aspectos de la misma no están ampliamente soportados. Sin embargo, los panoramas de 360 grados solo requieren un pequeño subconjunto de capacidades de WebVR, por lo que el soporte para al menos una pantalla de nivel de respaldo es en realidad bastante generalizado.
Mientras un navegador sea compatible con WebGL, el visor verá el retroceso de "hacer clic y arrastrar" para una foto 360. WebGL ahora es completamente funcional en todos los principales navegadores.
Para verificar si un navegador que está utilizando es compatible con WebGL, visite get.webgl.org. Si ve un cubo giratorio, WebGL está en funcionamiento.
Varios teléfonos son compatibles con WebVR cuando se combinan con un auricular como Google Cardboard o Daydream. Dado el reciente impulso de Google en WebVR, no es de extrañar que sus versiones de Chrome para iOS y Android sean compatibles con WebVR de forma inmediata..
Por otro lado, si tiene un auricular Samsung Gear VR, deberá usar el navegador de Samsung..
La forma en que se debe configurar para ver WebVR a través de una pantalla montada en la cabeza y que funciona con una computadora de escritorio depende de la unidad en cuestión.
Para Oculus Rift o HTC Vive / SteamVR, puedes usar una versión experimental de Chromium o Firefox Nightly. La versión Chromium WebVR está disponible solo para Windows, mientras que Firefox Nightly también está disponible para macOS y Linux.
Actualmente, Oculus Rift solo es compatible con Windows, sin planes reportados de compatibilidad multiplataforma, por lo que cualquiera de los navegadores es adecuado. Sin embargo, el soporte multiplataforma para HTC Vice / SteamVR llegará muy pronto, por lo que si tiene este dispositivo y cree que puede preferir crear sus panoramas en macOS o Linux en ese momento, tal vez desee elegir Firefox Nightly como su principal probando el navegador ahora.
Para obtener instrucciones completas sobre la configuración de cualquiera de estos navegadores para WebVR, visite Mozilla VR.
Fuego Bert, 2016. Bomberos que despejan el área en los últimos días del fuego. Williams Ranger District, al norte de Parks, AZ. 6-21-16. Foto de Dyan Bone. Crédito del Servicio Forestal de los Estados Unidos, Región Sudeste de rw, Bosque Nacional Kaibab. Cc por sa.Lo primero que necesitará es una fotografía en un formato adecuado para panoramas WebVR, que se puede ver de manera intercambiable como una foto esférica, equitativa rectangular o de 360 grados. Usted puede tomar su propio por:
Tenemos algunos artículos geniales que cubren algunas de las técnicas que puedes usar:
Alternativamente, puede obtener imágenes equirectangulares a través de Flickr. Usaremos una imagen del Bosque Nacional Kaibab para este tutorial.
Cree un directorio para albergar las panorámicas que va a crear, descargue el archivo anterior en él y luego cambie el nombre de la imagen a "fire.jpg".
Si planea ver su panorama en WebVR completo en lugar de solo como una imagen de clic y arrastre en un navegador de escritorio, es probable que desee descargar la versión "Tamaño original" a 10240 x 5120 para obtener la máxima fidelidad visual. Sin embargo, tenga en cuenta que los usuarios pueden ver una pantalla en blanco en blanco mientras se carga esta imagen grande, dependiendo de su conexión a Internet. Si esto podría ser un problema, elija uno de los tamaños más pequeños.
NB: más adelante, si ve un agujero negro en la parte inferior de los panoramas que crea con esta imagen, significa que el archivo está incompleto y deberá descargarlo nuevamente.
Si desea probar sus panoramas en un dispositivo remoto / secundario, como en un teléfono con capacidad de Cardboard, también querrá una forma de ver sus archivos a través de su red local. Puede hacer esto como prefiera, pero dos opciones posibles que le gustaría usar son:
Cada ejemplo se ubicará en su propia página web, por lo que solo necesitará un documento HTML muy básico para comenzar con cada ejemplo:
Fotos panorámicas 360
En el directorio de su proyecto, cree tres archivos HTML:
Luego pegue el código de inicio en cada archivo, cambiando el contenido de la
Si estuviera creando un panorama de WebVR desde cero, sería bastante complejo, ya que requeriría una codificación bastante extensa. Sin embargo, con marcos excelentes como el kit de inicio WebVR, el proceso se reduce a dos pasos.
Todas las experiencias de realidad virtual que puede crear con el kit de inicio de WebVR se basan en un solo archivo JavaScript. Entonces, para comenzar, solo necesita cargar ese archivo JS en el ... sección de su archivo "webvrstarterkit.html" pegando en el siguiente fragmento de código:
Si prefiere no cargar este archivo JS desde una fuente externa, puede descargar el proyecto WebVR desde su repositorio GitHub. Encontrará el archivo "vr.js" dentro del directorio "build".
Con el JavaScript de WebVR cargado, la página ahora está lista para tener elementos VR agregados. Para crear un panorama de 360 grados, inserte el siguiente código en el ... sección:
¡Y eso es! Tu panorama de 360 grados ya está listo para funcionar.
Tenga en cuenta que el valor entre paréntesis es la ruta a nuestra imagen equirectangular. Esto también se puede configurar para cargar una imagen externa insertando una URL en su lugar.
Cuando obtenga una vista previa de su archivo "webvrstarterkit.html" ahora, debería tener este aspecto: https://tutsplus.github.io/VR_Panoramas/webvrstarterkit.html.
A-Frame es un marco de WebVR diferente, pero los medios para crear un panorama 360 son muy similares a los que completó anteriormente. Al igual que con el kit de inicio de WebVR, A-Frame funciona con un solo archivo JavaScript. Cargue ese archivo en el ... sección de su archivo "aframe.html" con este código:
Si prefiere no cargar el archivo JS desde una fuente externa, puede descargar el repositorio A-Frame desde GitHub. Desde la carpeta "dist", debes usar la versió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 utiliza sus propios elementos HTML personalizados. El primer elemento a añadir es siempre.
los
Luego, para agregar su imagen de 360 grados, inserte el siguiente código en el ... sección:
Sus resultados deberían verse así: https://tutsplus.github.io/VR_Panoramas/aframe.html.
Bajo el capó, GuriVR es en realidad la biblioteca A-Frame. Lo que busca es ofrecer una forma intuitiva y sencilla de configurar experiencias de realidad virtual a través de una interfaz de editor.
Para usar GuriVR, dirígete al editor de GuriVR. En la interfaz de edición, solo puede ingresar la palabra panorama seguido de la URL a una imagen esférica, y GuriVR se hará cargo del resto por usted.
Una vez que hayas hecho eso, haz clic en Salvar en la parte inferior de la pantalla, y luego haga clic en Compartir enlace botón, y se le proporcionará un enlace que puede dar a otros para mostrar su panorama.
Alternativamente, puede incrustar el panorama en una página web usando un iframe elemento. Actualice su archivo "gurivr.html" con el siguiente código, asegurándose de agregar su propia URL de GuriVR en el iframe. src atributo:
GuriVR 360 Image Demo
Cuando haya hecho lo anterior, debería obtener un panorama 360 como este: https://tutsplus.github.io/VR_Panoramas/gurivr.html.
Ahora tiene tres formas diferentes de crear panoramas basados en WebVR y permitir que las personas se conecten con su fotografía de una manera completamente nueva. Repasemos rápidamente lo que cubrimos:
Accentsconagua
guión etiqueta, y luego dentro de usar VR.panorama () para crear tu imagen 360.panorama y luego la URL de tu foto para crear tu imagen 360. Opcionalmente, incruste la URL proporcionada en una página web a través de un iframe.Ahora que has visto lo rápido que puedes crear una experiencia WebVR desde una esfera fotográfica, espero que estés inspirado para salir y capturar el mundo en tres dimensiones!
