Comunicaweb es una de las empresa pioneras en realidad virtual y 3D aplicados a sitios web. Llevamos años inegrando elementos interactivos en sitios web. Nuestro director, como experto en la materia, comparte con nosotros su experiencia y conocimientos en este campo y ha escrito este artículo para nuestro blog.
En este artículo, el autor te hablará de:
– El epicentro del Web en 3Dimensiones: WebGL y WebVR
– Tecnología WebVR, realidad virtual en tu aplicación Web
– El Ecosistema que gira entorno a WebGL y WebVR
– Otras herramientas de utilidad para crear experiencias 3d en tu sitio web
– Algunos ejemplos más de 3d y Realidad Virtual (VR) integrados en la web
La tecnología que va a mejorar tu próximo sitio web.
Entremos en la materia. Vamos a hablar de tecnologías que permiten integrar tecnología 3d acelerada por hardware en sitios web, sin instalar plugins o software adicional. Puedes hacerte una idea de las posibilidades que esto nos brinda. Para empezar, nos permite integrar en nuestros sitios web corporativos, tiendas o aplicaciones web una gran cantidad de elementos que enriquecen la experiencia del usuario, por dar ideas: presentaciones de productos, maquetas virtuales, proyectos de ingeniería, despieces de máquinas, mundos virtuales, visualización de fotos y videos 360, experiencias interactivas de realidad virtual, etc. Seguro que tú ya tienes alguna que otra idea mejor y te gustaría llevarla a cabo. Vamos a hacer un repaso por algunas tecnologías que están cambiando la forma en la que usaremos internet en los próximos años.
El epicentro del Web en 3Dimensiones: WebGL y WebVR
Tecnología WebGL, 3d acelerado por hardware en tu web.
WebGL es una API basada en OpenGL para renderizar gráficos 2D y 3D en Navegadores mediante el uso de la aceleración por hardware de la GPU del dispositivo y sin necesidad de Plugins adicionales. WebGL permite que los elementos 3D se codifiquen, compongan e interactúen con los demás elementos del código de nuestro sitio web sin distinciones. Esto nos brinda grandes posibilidades a los desarrolladores. La primera vez que programé en WebGL se me pusieron los vellos de punta. Podemos insertar objetos 3D mediante etiquetas y referirnos a ellos mediante JavaScript, relacionarlos con otros elementos de la página como formularios, modificarlos según contenido cargado dinámicamente de bases de datos y un largo etc.
La programación en WebGL
Básicamente, para usar WebGL vamos a tener que programar dos tipos de elementos:
- Un código escrito en JavaScript que se ejecuta en el navegador.
- Un Shader, un código escrito en GLSL (OpenGL Shading Language), que se ejecuta en la GPU(Graphics Processing Unit) del equipo. Es esto lo que nos permite usar la aceleración por Hardware del dispositivo. Te será fácil dominar el lenguaje GLSL si estás familiarizado con C, Java o C++.
Ya existen multitud de frameworks que aprovechan esta tecnología y nos facilitan enormemente la programación, sigue leyendo y encontrarás mucha información en este post.
Tecnología WebVR, realidad virtual en tu aplicación Web.
Esta API amplía las posibilidades de WEBGL permitiendo la compatibilidad con dispositivos de realidad virtual como visores de realidad virtual y mandos. Este proyecto está cobrando desde 2014 gran relevancia, grandes players como Mozilla y Google están apostando por esta tecnología de manera explícita e incluyéndola en sus proyectos.
WebVR usa el lenguaje de programación JavaScript y nos permite crear mundos virtuales, escenas 3D y Fotografías 360. Y cualquier otra cosa que se te ocurra en Realidad Virtual. Permite a una aplicación web aprovechar las posibilidades de los dispositivos de realidad virtual, proporciona un interfaz para que los programadores podamos capturar los movimientos de los sensores incluidos en gafas de Realidad virtual (como oculus Rift, HTC Vive o Gear VR) y en los mandos que estas incluyen. Capturando estos movimientos podemos hacer que el usuario interactúe con nuestras aplicaciones web, creando experiencias interactivas en realidad virtual.
WebVR nos facilita el trabajo de programación de entornos 3d para realidad, proporcionando, entre otras funcionalidades:
- Nos da acceso a la orientación y posición de los dispositivos de realidad virtual conectados, tanto gafas como mandos.
- Nos proporciona herramientas para sincronizar fácilmente nuestras aplicaciones web con el FrameRate del visor de realidad virtual
- Permite que nuestra aplicación web conozca fácilmente los dispositivos de realidad virtual conectados y sus características.
- Y muchas más funcionalidades que te animo a descubrir.
Actualmente WebVR funciona en las siguientes versiones de navegadores y posteriores:
- Firefox Nightly.
- Chrome Beta (M56+).
- Samsung Internet Browser for Gear VR. (Viene incluido en la App de las Gear VR sin necesidad de instalaciones adicionales)
Funciona además con HTC VIVE, Oculus Rift, Samsung Gear VR, Google Daydream, and Google Cardboard.
Puedes obtener información actualizada sobre las plataformas y dispositivos que soportan esta tecnología, tienes el listado proporcionado por WebVR.rocks y el de Google Developers.
Si quieres puedes ampliar información sobre el uso de la API WebVR:
https://developer.mozilla.org/en-US/docs/Web/API/WebVR_API
El Ecosistema que gira entorno a WebGL y WebVR
En los últimos años se han ido desarrollando una serie de herramientas que facilitan en gran medida el trabajo de los que nos dedicamos a programar. Un auténtico ecosistema para desarrollar fácilmente sitios web en 3D. Desde las herramientas más ligeras, como frameworks, a completos motores de 3D como Unity o Unreal Engine. Te muestro algunas herramientas que, aparte de acelerar tu proyecto, te van a resultar muy interesantes:
A-Frame
Un completo Framework para programar aplicaciones web que hagan uso de 3d y realidad virtual, permite mucha compatibilidad a la hora de importar ficheros y tiene una gran comunidad de desarrolladores detrás. Inicialmente fue creado por Mozilla como framework para construir experiencias 3d de realidad virtual sobre WEBVR, pero en la actualidad es un proyecto de código abierto independiente que está evolucionando rápidamente.
Tipo: FrameWork Open Source
Lenguaje de programación: JavaScript
Versión de WebGL: 1.0
Compatible con WebVr: Sí
Herramientas de modelado 3D: No
Soporte para Animaciones:Sí
Soporte para Audio:Sí
Importación de ficheros: Three.js, OBJ, Collada, FBX
Exportación de Ficheros: Html y Three.js
Babylon.js
Es un Framework que nos permite trabajar sobre WebGL facilitando enormemente trabajar con objetos 3D y Audio. Uno de los aspectos a destacar de Babylon.js es que tiene plugins para algunas de las herramientas más usadas en modelado 3D y permiten ampliar las opciones de exportación para tener mayor compatibilidad con Babylon.Js, te dejo algunos enlaces de algunos de los plugins y dll que tiene disponibles:
Más Información sobre BabylonJS
Tipo: FrameWork bajo licencia Apache 2.0
Lenguaje de programación: JavaScript
Versión de WebGL: 1.0
Compatible con WebVr: No
Herramientas de modelado 3D: No
Soporte para Animaciones:Sí
Soporte para Audio:Sí
Importación de ficheros: Babylon, OBJ, FBX, STL
Exportación de Ficheros: Html
Blend4Web
Permite trabajar con el completo software de edición 3D Blender(gratuito) y exportar el resultado para que funcione en un navegador web. Funciona con las tecnologías WebGL, WebVR, Web Audio y otras tecnologías estándar que garantizan que el trabajo se puede ejecutar en un navegador sin necesidad de tecnología adicional. Al estar integrado con Blender tiene funcionalidades muy avanzadas como precarga de escenas, posicionamiento espacial de audio, sistemas de animaciones, Motor de partículas y de física, etc.
Más Información sobre Blend4Web | Más sobre Blender | Ejemplos
Tipo: FrameWork open source
Lenguaje de programación: JavaScript
Versión de WebGL: 1.0
Compatible con WebVr: Sí
Herramientas de modelado 3D: Sí
Soporte para Animaciones:Sí
Soporte para Audio:Sí, incluye también audio posicionamiento de audio en la escena.
Importación de ficheros: Todos los ficheros soportados por Blender
Exportación de Ficheros:Todos los ficheros soportados por Blender
Three.js
Una Librería que funciona sobre WebGL y utiliza JavaScript. Es una de las más utilizadas, muy estable y tiene gran aceptación desde que se creó en 2010. Muchos de los Frameworks que hemos mostrado, cómo A-Frame o WhiteStorm usan esta librería, sobre la que han ido construyendo capas de abstracción.
Tipo: Librería bajo licencia MIT
Lenguaje de programación: JavaScript
Versión de WebGL: 1.0
Compatible con WebVr: Sí
Herramientas de modelado 3D: No
Soporte para Animaciones:Sí
Soporte para Audio:Sí
Importación de ficheros: FBX, OBJ, STL
Exportación de Ficheros: OBJ
WhiteStorm.js (WHS)
Es un framework para programar en JavaScript y construido sobre la tecnología Three.js. Promete ser especialmente rápido en la ejecución y tener mejores ratios de refresco. La verdad, no lo he probado pero los ejemplos que muestran en su web tienen muy buena pinta.
Tipo: FrameWork basado en Three.js bajo licencia MIT
Lenguaje de programación:JavaScript
Versión de WebGL:1.0
Compatible con WebVr: Sí
Herramientas de modelado 3D: No
Soporte para Animaciones: Sí
Soporte para Audio: Sí
Importación de ficheros: FBX, OBJ, STL
Exportación de Ficheros: OBJ
Otras herramientas de utilidad para crear experiencias 3d en tu sitio web:
Los motores de Juegos Unity y Unreal
Seguro que ya los conoces y seguro que has jugado a decenas de juegos que incluyen motores como Unity y Unreal Engine. Han supuesto una revolución en el desarrollo de videojuegos, especialmente en los videojuegos 3D porque nos proporcionan un interfaz visual para programar e integrar elementos 3d, imágenes, sonido, etc. Permiten exportar nuestras creaciones a múltiples plataformas: PC, Mac, PlayStation, Android, IOs, etc. y en sus últimas versiones también nos permiten exportar con compatibilidad para WebGR, lo que nos permite integrar nuestras creaciones en un sitio web. El resultado final es más “pesado” que si trabajamos directamente con un FrameWork y tanto Unity como Unreal Engine generan un código final menos limpio, pero nos proveen de herramientas muy potentes que agilizan el diseño y desarrollo con interfaces visuales, editores de objetos y escenas 3d, editores de código, animaciones, etc.
Más información sobre Unity | Más información sobre Unreal Engine
WebGL Studio. Es un completo editor online de objetos y escenas en 3D, permite añadir código y tiene muchas opciones para crear interactividad mediante un interfaz muy visual. Funciona con toda la potencia de WebGL y permite probar y exportar tus proyectos para usarlos en un sitio web fácilmente. Es una aplicación gratuita y muy completa.
Más Información sobre WebGL Studio
Rodin, es un entorno de programación que facilita el trabajo si quieres programar aplicaciones de 3d o realidad virtual en tu sitio web. Funciona sobre WebGL y WEBVR.
Más Información sobre Rodin | Ejemplos de Rodin
Clara.io
Es una herramienta web que nos permite crear, compartir, renderizar y obtener objetos en 3D. Ofrece herramientas 100% web para modelado en 3D y nos brinda la posibilidad de realizar Renders VRay en la nube. Una de las cosas que más me gusta es que permite trabajar de manera colaborativa con varios usuarios.
Más Información sobre Clara.io
Sketchfab
Un sitio web para publicar, compartir y encontrar contenidos en 3d, puedes visualizarlos mediante un navegador o gafas de realidad virtual directamente desde la web.
Vizor.io
Permite crear experiencias en 3d, 360 y Realidad virtual en la web sin escribir el código. Mediante un interfaz visual nos permite crear y editar con muchas posibilidades.
Algunos ejemplos más de 3d y Realidad Virtual (VR) integrados en la web
Ejemplos de proyectos 3d integrado en sitios web:
https://sketchfab.com/models/e6d3735d5f0d48619f3d67bf7fdb7f5f
https://threejs.org/examples/
Ejemplos de entornos de Realidad virtual accesibles desde el navegador:
https://airtable.com/embed/shr2Lc7pmlJis02R4/tblZbV2S0W0T5DDth?viewControls=on
Para finalizar:
Después de todo este desfile de nuevas tecnologías, Frameworks y APIs solo me queda animarte a que empieces a leer y programar sobre esta tecnología. Aunque seguro que ya has empezado. Por otro lado, si no has probado una experiencia de realidad virtual también te animo a que lo hagas, puedes obtener información sobre dispositivos disponibles para Realidad Virtual. Creo que el 3D y la realidad virtual ya están cambiando internet y van a darle la vuelta en los próximos años. ¿Estás preparado como profesional?
Me gustaría pensar que tu próximo sitio web contendrá algún elemento interactivo en 3D. En la Agencia comunica-web.com ya llevamos unos años en ello, con resultados muy espectaculares.
