What you need to know to start developing WebVR

1. The VR Concepts

Antes de empezar a pensar qué hacer, te recomendaría que conocieses algunos términos que comunmente se usan en el desarrollo de VR. Gracias a Mozilla Developer Network tuve la oportunidad de ayudar en un artículo titulado WebVR Concepts en el que se tratan estos temas. Te invito a leerlo (y a corregir si ves que algo no es correcto).

2. Your potential users

A la hora de afrontar cualquier proyecto una de las primeras cosas que tienes que conocer es a quién te diriges. Dependiendo de lo que quieras comunicar, tu público requerirá un tipo de desarrollo u otro.

Una de las ventajas de la VR es que puede tener sentido en campos muy diversos (Marketing online, entretenimiento interactivo (Juegos), entretenimiento real (vídeos, conciertos, retrasmisiones deportivas), educación, narrativa...) pero tenemos que ser conscientes del tipo de que el tipo de usuarios que van a consumir VR a través de la web serán mayoritariamente los conectados a través de un móvil ( Cardboard ) o con su ordenador ( Oculus Rift ), descartando así a los heavy gamers que verán satisfechas sus espectativas a través de juegos de consola.

En la primera parte de este artículo de RoadToVR expongo mi visión de cómo HOY se puede consumir WebVR de diferentes maneras.

Si dividimos los usuarios siguiendo la típica curva de adopción de la tecnología. Podemos pensar que los usuarios de Oculus Rift podrían estar en esos 2.5% de Innovators, los de Cardboard en ese 13.5% de Early adopters, aquellos que tienen un ordenador/navageador/smartphone moderno el 34% de la Early Mayority y quizás llegemos a cierta parte del 34% de la late mayority y estemos lejos del 16% de Laggards.

3. The advantages of the web

Para sacar el máximo partido al desarrollo que hagas debes intentar explotar lo que hace diferencial un desarrollo web frente a otro nativo. Estas son algunas de ellas:

Es rápido de prototipar / testar

Al no necesitar compilar para poder ver el resultado de tus cambios en el código, agiliza mucho el proceso de desarrollo. En nuestro caso para desarrollos complejos usamos una configuración de proyecto que incluye Livereload y Bower para actualizar los cambios en tiempo real, pero hay muchas alternativas que te pueden facilitar este proceso o símplemente para proyectos sencillos el simple hecho de modificar, reacargar y ver los cambios hace el proceso más ágil frente a lenguajes compilados.

Es fácilmente escalable / hacer responsive

Siguiendo el razonamiento acerca de los usuarios a los que te diriges, si tu objetivo (o el de tu cliente) es impactar sólo en ese 2.5% te animo a que desarrolles algo basado en escritorio y que esté optimizado para Oculus, si buscas más llegar a ese 13.5% deberás optimizar para móvil, pero si tu objetivo es intentar llegar al mayor público posible ofreciéndoles a una solución óptima para todos ellos, te invito a pensar en un desarrollo responsive que cubra las necesidades de la mayoría de ellos.

A continuación puedes ver un gráfico de cuál es la lógica que sigo a la hora de decidir qué tipo de control le doy como principal al usuario y cuales le ofrezco como opcionales.

A continuación puedes ver un gráfico de cuál es la lógica que sigo a la hora de decidir qué tipo de control le doy como principal al usuario y cuales le ofrezco como opcionales. Yo soy partidario de destacar más unas opciones de control que otras dependiendo del proyecto, pero una fantástica forma de integrar un solución responsive a tu site es que la ha creado Boris Smus y que puedes descargarte aquí.

Web App directly to home screen

Si buscas crear un contenido en el que el retorno del usuario es importante de conseguir, puedes aprovechar los recursos que el HTML tiene para ofrecer al usuario que se instale un enlace directo en su Home Screen. Chrome está trabajando para poder incluir un aviso "nativo" en la página si estás sobre un dominio https.

Hybrid App installable via Google Play / App Store

Además si quieres que tu contenido se distribuya a través de Google Play o el App Store de Apple, hay magníficas herramientas como CocoonJS de Ludei que te permite crear una App híbrida en muy poco tiempo. Nosotros probamos con nuestro primer proyecto con webVR y en apenas unas horas teníamos publicada la App de I N S P I R I T en Google Play

4. The language to write it

El contenido con el que el usuario interactuará está basado en un Real Time Renderer 3D desarrollado con WebGL. Si tuviese que recomendar un curso que tratase todos los aspectos a los que vas a enfrentarte con este tipo de desarrollos sería este Interactive 3D Graphics Course With Three.js de Udacity.

Y si tuviese que destacar varios puntos clave serían:

Dejar que Three.js haga el trabajo sucio por tí

Three.js es una liberiría de JS desarrollada por Ricardo Cabello y que tiene una comunidad importante de desarrolladores que ayudan a mejorarla y que tiene una gran cantidad de ejemplos de los que se puede aprender mucho.

Aprender a utilizar Shaders / GLSL

Uno de los puntos diferenciales en este tipo de desarrollos es el rendimiento y muchas veces el saber utilizar un shader te permite hacer cosas que de otra manera sería imposible. Hay ejemplos increíbles de lo que con GLSL se puede hacer en shadertoy.com, pero si no quieres desmoralizarte tán pronto te recomendaría empezar por este Shader School y otros muchos recursos que podrás encontrar en stackgl. Además de usar este WebGL GLSL Shader Editor Extension for Google Chrome de Jaume Sánchez que te permite editar shaders y ver en tiempo real las modificaciones.

Explotar al máximo el Web Audio API

Uno de los aspectos que más se pueden aprovechar en un desarrollo basado en VR es poder posicionar el sonido en el escenario y gracias al Web Audio API nos es muy sencillo de implementar con Three.js. Además os recomiendo revisar estas dos referencias sobre el tema: Getting Started with Web Audio API y Everybody dance now with Web Audio API.

Aprender a exportar/importar desde tu programa de 3D favorito

En ocasiones necesitaremos emplear modelos generados desde programas de 3D como Blender, Cinema 4D, Maya, Max para utilizarlos en nuestro proyecto. Three.js tiene exportadores para Blender, Max o Maya. Mi elección personal es usar Blender por ser también de código abierto.

5. Its weaknesses (makes you stronger)

No existe un Asset Store que te solucione el problema

En muchas ocasiones si desarrollas con herramientas como Unity puedes recurrir a un Asset Store en el que encontrar un recurso que te facilite lo que necesitas implementar. En el caso del WebVR puedes apoyarte en la comunidad de Three.js que te puede haber resuelto el problema. Pero recuerda que en muchas ocasiones lo que puede servir para un site WebGL, no sirve para un render basado en VR.

No te puedes aprovechar de la optimización de rendimiento de las apps nativas

En algunas plataformas (sobre todo las móviles) el rendimiento de las apps nativas puede ser mejor que las basadas en un Web View. Aquí el uso de la creatividad te puede permitir solucionar lo que necesitas comunicar de una manera que no requiera un consumo de recursos tan grande. Por otra parte el tiempo que tengas que emplear en usar esa creatividad o buscar soluciones alternativas será el que te ahorres a la hora de testar/debuggear tu proyecto.

El modelo de monetización no es el obvio

Está claro que uno de los problema de la adopción del HTML5 como estandar para el desarrollo de juegos casuales años atrás fue que las apps nativas monetizaban mucho mejor. Pero pensar que la única forma de monetizar tu contenido (si es tu modelo de ROI) es haciéndolo nativo sería un error. Creo que al final un contenido de calidad es la principal fuerza que tienes para monetizarlo, y si eres capaz de crear uno de calidad y que llegue al público adecuado, la gran audiencia/inmediatez que te puede proporcionar la web harán el resto para conseguir que la gente pague por él.

Necesitamos más desarrolladores

Actualmente aunque la comunidad de desarrolladores de Three.js es importante (de hecho es la 7ª librería de js más popular en Github) hay sólo una pequeña parte que está desarrollando con VR. Si conseguimos compartiendo información y haciendo proyectos inspiradores que más se animen a crear contenido con VR lograremos avanzar más rápidamente.

Necesitamos convencer a más público

Creando contenido de calidad para demostrarle que el esfuerzo extra que tienen que hacer para verlo en VR merece la pena. Mi apuesta personal es, como comentaba antes, el que todo el mundo pueda disfrutar de la experiencia interactiva y que lso más innovadores o early adopters puedan tener ese extra.

Necesitamos que haya más proyectos basados en WebVR

Como generadores de contenido debemos convencer a nuestros clientes que su mensaje puede llegar HOY mejor a través de la web, y que introducir una opción de VR en algunos casos puede tener sentido para destacar/potenciar su mensaje.

6. What other developers are doing

Como la mejor forma de animarse es viendo ejemplos prácticos, aquí os dejo algunos de ellos para que podáis ver qué se puede conseguir con esta tecnología:

Mozvr.com

Mozilla ha apostado por difundir este tipo de desarrollos y en este dominio además de poder descargrte una versión de Firefox compatible con VR puedes ver algunos de los proyectos que se han hecho para WebVR.

Entre ellos se encuentra nuestro proyecto I N S P I R I T del que puedes ver aquí su Case Study.

Leap Motion VR Collage

Optimizada para Oculus Rift + Leap Motion en este experimento podrás ver alguna de las posibilidades de desarrollar Leap Motion con JavaScript.