Hace poco, a pedido de un querido colega que debía tomar algunas decisiones al respecto, tuve que hacer un pequeño research sobre tecnología 3d en la web y su relación con la infografía. Se trata de un asunto que hace mucho tiempo que está rondando la web, con varias tecnologías que prometieron pero se quedaron sin cumplir (recuerdan VRML?). Tal vez ahora estén asomando algunas, como webGL, que nos acompañarán durante algún tiempo y, sobre todo, tendrán la oportunidad de madurar y volverse de uso masivo. A la fecha (mediados del 2015) he intentado tomarle el pulso al paciente y compartir con ustedes mis impresiones:

INDICE

1. Brief
2. Soluciones posibles
3. CSS 3D
4. WebGL
5. Three js
6. GooCreate – un framework WebGL
7. Reflexiones finales
8. Otras cosas de interés

 

1 – Brief

Conseguir determinar el mejor workflow a los efectos de crear infografías interactivas en 3d para la web. Por ejemplo, realizar un sencillo diagrama de cajas, que puedan ser tridimensionalizables, interactivas y desplegar diferentes contenidos.

2 – Soluciones posibles

Inicialmente visualicé dos posibles caminos:

1. CSS3 3D
2. WebGL

Hola mundo en CSS3:
http://s3-sa-east-1.amazonaws.com/gerardor/varios/A2H/pruebaCSS3_3D/index.html
Herramientas: Html, css, js.

Hola mundo en WebGL:
https://goote.ch/710f2d4b148e40e19bbaa9ac75b3950f.scene/
Herramienta: GooCreate

 

3 – CSS 3D

Óptimo para trabajar en un 3D relativamente simple.

RESUMIENDO
-Es parte del DOM. Se integra perfectamente con el resto de los elementos de la página.
-Es SEO friendly
-Funciona en casi todas las plataformas
-Trabajamos con rectángulos, divs
-Es complicado darle profundidad a los objetos
-Curva de aprendizaje breve

Es posible hacer cosas sofisticadas con CSS3, pero requieren maestría y esfuerzo.
Basta con ver este ejemplo de quien hizo un shooter de primera persona solo con CSS:

http://keithclark.co.uk/labs/css-fps/

WORKFLOW
Es ni más ni menos que una producción web.

 

 

 

4 – WegGL

Podemos hacer cualquier cosa, pero es terreno resbaladizo porque aún no ha madurado del todo.

Hay que considerar que:

1. WebGL requiere un nivel de especialización alto. Es ingeniería de bajo nivel, para lograr pequeñas cosas se requieren literalmente cientos de líneas de código.
2. Es por eso que se usa una librería que abstrae y simplifica las cosas, haciéndolas (relativamente) accesibles al programador.
3. Pero no alcanza. Para sacarle auténtico provecho a la tecnología y dejarla al alcance del profesional digital común, es necesario usar un framework, o sea que se agrega un nivel más de abstracción.

En el proceso de intentar conseguir un workflow para esta tecnología, conseguí resultados con uno llamado GooCreate (http://www.goocreate.com/).
En el sitio se definen como la única herramienta artist-friendly de producción HTML5 y WebGL, y se han ganado mi respeto porque conseguí hacer la prueba de los prismas (‘Hola Mundo”) sin tener que programar.

WORKFLOW

1. Se crea una escena o modelo en una aplicación 3d como 3dMax o Maya. Se dan las texturas, iluminación, animación, etc.
2. Se exporta la escena o modelo en formato FBX
3. Se la carga en el framework
4. Allí se dispone de la interactividad.

 

Sobre WegGL y accesorios
El 3d en la web usa WebGL -que es un API de Open GL que está implementándose en los navegadores. Actualmente tiene diferentes niveles de soporte  (http://caniuse.com/#feat=webgl), con Chrome a la cabeza. (Hasta que llegue Spartan, el nuevo browser de Microsoft que promete ser mejor que Chrome en WebGL. Ver para creer.)

WebGL es bastante hostil. Hacer cosas sencillas requiere mucho trabajo y sentirse cómodo con las matemáticas involucradas. Por ello se usa una librería, siendo la más popular Three.js (http://threejs.org/).
Es que con esta librería o alguna de sus alternativas se administran los elementos que hoy se encuentran comúnmente en cualquier software 3d de escritorio: luces, objetos, texturas, cámaras. Aunque, a diferencia de esas herramientas, está orientada a renderizar las escenas en tiempo real.

5 – Three.js

Algunos ejemplos populares que usan Three.js

100.000 stars – Cien mil estrellas mapeadas en 3d y con interactividad.

http://stars.chromeexperiments.com/

 

 

 

 

Ro.me – Un filme interactivo que usa esta tecnología
http://www.ro.me/film

 

 

 

 

Small arms imports/exports – Una visualización sobre el comercio de armas cortas en el mundo

https://www.chromeexperiments.com/experiment/arms-globe

 

 

 

WebGL utilizar la etiqueta <canvas> para desplegar el 3d, por lo cual debe tenerse en cuenta el impacto que esto puede tener sobre SEO al decidir sobre generar contenido de esta forma.

Three.js además tiene salida para CSS, Canvas2D y SVG.

Una característica interesante de Three.js es que es capaz de renderizar para otros formatos además de WebGL: 2D Canvas, SVG y también CSS.

CSS: Three.js usa las transformaciones de CSS3 y mapea elementos del DOM interactivos en el espacio en 3D.
En el siguiente ejemplo -una tabla periódica interactiva- cada elemento es un <div>, capaz de contener cualquier cosa: http://threejs.org/examples/css3d_periodictable.html

 

 

 

Canvas 2D: En algunas situaciones es necesario dejar WebGL de lado y usar Canvas 2D. Es soportado por casi cualquier plataforma (http://caniuse.com/#feat=canvas). O sea que puede ser usado cuando no es posible usar WebGL (fallback), aunque su performance es peor. Canvas 2D no cuenta con la aceleración por hardware de la GPU (como si cuenta WebGL), por eso el rendering es más pobre.

SVG: Aquí hay un ejemplo: http://threejs.org/examples/#svg_sandbox

 

 

 

 

WORKFLOW

Muchas de las tecnologías asociadas a WebGL son experimentales. Por lo tanto, no hay establecido un workflow estándar; hay varias maneras de hacer lo mismo y es un campo en constante evolución. Pero se puede proponer el siguiente procedimiento para llevar nuestras escenas a 3d y manipularlas.

 

1 – Armar la escena en algún paquete 3d. En mi caso, la armé en 3d Max.
2 – Exportarla en formato Collada. La escena queda descrita en XML. (Si es muy grande, se convierte a glTF, que es la misma descripción pero en json. http://gltf.gl/).
3 – Importarla en Three.js y manipularla allí.

 

6 – GooCreate – un framework WebGL

Luego de varios testes, concluyo que la mejor herramienta para hacer lo que se quiere hacer (un workflow para 3d en la web, generando infografías y visualizaciones) es un framework para juegos, en concreto GooCreate  (http://www.goocreate.com/)

Por mi parte, he probado 3: Vizi -generado por el autor del libro “Programming 3d applications…”-, PlayCanvas y GooCreate. Finalmente opté por este último.

GooCreate está muy bien y tiene herramientas que no encontré en ningún otro lado. Es un framework para juegos con varias opciones de suscripción (comenzando gratis) e incluye una especie de 3d max o Maya online para el cual se pueden importar objetos desde cualquier programa 3d (formato FBX, con texturas, animación, etc.). Tiene un panel de timeline (recuerda a flash en eso) y también una funcionalidad llamada “State Machine”, que permite programar una serie de circunstancias dentro del juego sin necesidad de escribir código. También hace recordar a los behaviors de flash o de dreamweaver, en el sentido de permitir a una persona sin conocimiento de programación hacer juegos interactivos -o presentaciones, banners, infografías- sin mucho problema. La curva de aprendizaje es razonablemente corta para integrar los conceptos básicos y hacer algo sencillo como el demo adjuntado.

PROS
-Interfase amigable con cualquiera que conozca los programas de 3d de escritorio.
-Presets abundantes para programar sin escribir código (StateMachine).
-Programable en javascript. Editor de código online.
-Opciones de publicación varias: en el servidor de ellos, en el propio, etc.
-Conexión con github o con el repositorio de ellos.
-Documentación más abundante que en otros frameworks.
-Permite, dependiiendo del proyecto, no preocuparse ni por WebGL ni Three.js
-Curva de aprendizaje accesible, y quien decida atravesarla no necesariamente debe ser programador. Si debe ser alguien que se sienta cómodo con el 3d en general.
-Permite importar bastante fielmente modelos y escenas con el formato FBX.
-Luego de aprendido, pueden lograrse cosas muy interesante en tiempos razonables.

CONTRAS
-La interfase web emula bien pero no llega a tener la calidad y completitud de un software de escritorio. A veces te pierdes hasta que finalmente aprendes los trucos.
-La documentación, mejor que la de la competencia, no llega a ser completa.
-La comunidad no es muy grande.

WORKFLOW:

1. Se arman los objetos o escenas en 3dMax o similar
2. Se salvan como FBX
3. Se abre Create, la aplicación de GooCreate que funciona 100% online
4. Se importan los archivos FBX
5. Se aplica interactividad, efectos, etc, a través de
   1. scripts js
   2. state machine (behaviors)
   3. timelines

6) Se exporta la aplicación/juego/presentación/visualización, optando por correrlo en los servidores de goo o bajando los archivos y corriéndolo en el propio.

 

7 – Reflexiones finales

Todo este asunto es bastante grande, sin embargo GooCreate (cuya herramienta, Create, corre justamente en WebGL) se puede aprender relativamente rápido, y no hay que ser programador para ello. Sin embargo, es importante precisar que estamos hablando de tecnologías no  completamente asentadas, y de herramientas que están buscando imponerse en el mercado, así que quien encare la tarea debe estar conciente de que estará lidiando en un ámbito que no completamente maduro, con documentación por momentos escasa, y herramientas y plataforma en evolución y cambio constante.

 

8 – Otras cosas de interés

Otras librerías para webGL:

Babylon	http://www.babylonjs.com/	Hecho por microsoft
Scene js	http://scenejs.org/index.html	Muy buena. Aunque menos popular que three.js
PhiloGL	http://www.senchalabs.org/philogl/	Hecho por Senchalabs

 

Comparación entre WebGL y CSS3 3d*

	WebGL	CSS3
HTML	No	Si
Importar modelos 3d	Si	No	Three.js importa modelos usando el formato Collada
Tiempo de descarga	Largo	Corto
SEO friendly	No	Si	WebGL usa el elemento <canvas>, inaccesible para buscadores
Dificultad de uso	Bastante	Poca
Posibilidad de desplegar contenidos	Si	Si
Renderizado	Lento	Rápido	Parte del arte de usar webGL es optimizar el renderizado
Responsivo	No	Si
Escenas complejas	Si	No
Efectos específicos (brillos, iluminación, etc)	Si	No	WebGL tiene shaders sofisticados para los efectos
Plataformas	Pocas	Muchas	Hasta ahora, WebGL funciona plenamente solo en Chrome.
Curva de aprendizaje	Larga	Corta	La de WebGL/Three.js es empinada. Pero hay muchos ejemplos y demos para reusar.
Geometría	Cualquier	Rectángulos	Es complejo agregar profundidad a los objetos en css. Pueden usarse png transparentes para obtener figuras diferentes del rectángulo
Cámaras	Sofisticadas	Rudimentarias
Luces y sombras	Si	Rudimentarias	El uso de sombras en WebGL debe ser optimizado

* Los criterios aplicados están muy simplificados; como vimos, los límites de ambas tecnologías son amplios.

 

FRAMEWORKS WEBGL:
Podemos dividirlos entre Game Engines -que tienen más poder y curva de aprendizaje más empinada- y presentacionales, más sencillos.

Game Engines
Playcanvas –https://playcanvas.com/
Turbulenz –http://biz.turbulenz.com/
Goo Engine –http://www.goocreate.com/ – el que seleccioné para esta prueba
Babylon.js –http://www.babylonjs.com/
KickJS –http://www.kickjs.org/

Presentacionales
tQuery –https://jeromeetienne.github.io/tquery/
Voodoo.js –http://www.voodoojs.com/
PhiloGL –http://www.senchalabs.org/philogl/

LINKS:
http://threejs.org/ El sitio de la librería Three.js
http://learningthreejs.com/ Un gran repositorio de recursos sobre la librería más usada para webGL, Three.js Pertenece a Jerome Etienne, un gurú del asunto.
http://tridiv.com/ Tridiv es una herramienta que permite dibujar elementos y genera el 3d css.
http://my.umbc.edu/groups/web-dev/news/35055 Artículo de 2013, comparando CSS3 3D con webGL+librerías
(3D in the Browser: WebGL versus CSS 3D Transforms)
http://codeflow.org/entries/2013/feb/02/why-you-should-use-webgl/

Articulo sobre porqué usar webgl
http://threejs.org/examples/css3d_periodictable.html Ejemplo de tabla periódica en three.js exportado para CSS
http://learningthreejs.com/blog/2013/04/30/closing-the-gap-between-html-and-webgl/
http://www.delimited.io/blog/2014/3/14/d3js-threejs-and-css-3d-transforms
http://acko.net/blog/making-love-to-webkit/
http://my.umbc.edu/groups/web-dev/news/35055
http://stackoverflow.com/questions/7792459/canvas-vs-webgl-vs-css-3d-which-to-choose
http://blog.teamtreehouse.com/3d-in-the-browser-webgl-versus-css-3d-transforms http://www.the-art-of-web.com/css/3d-transforms/
http://scenejs.org/examples/index.html#cameras_pickFlyOrbit_city

Ejemplos de scene js
https://dev.opera.com/articles/understanding-3d-transforms/ 3d transforms
http://updates.html5rocks.com/2013/03/Introduction-to-Custom-Filters-aka-CSS-Shaders Proyecto en andamiento para usar los shaders (efectos al renderizar) en css
http://learningthreejs.com/ Un gurú de nombre Jerome Etienne
https://www.khronos.org/webgl/wiki_1_15/index.php/User_Contributions

Lista extensiva de recursos para WebGL
http://threejs.org/examples/
http://alteredqualia.com/
http://helloenjoy.com/

Ejemplos webGL
http://learningthreejs.com/blog/2012/02/07/live-video-in-webgl/
http://learningthreejs.com/blog/2013/04/30/closing-the-gap-between-html-and-webgl/
Video y html en webGL: No llegué a implementarlo -no sabría decir cuánto llevaría hacerlo-, pero es perfectamente posible, de acuerdo con los anteriores links
http://www.webgl-game-engines.com/

Listado de frameworks WebGL
https://drive.google.com/file/d/0B4doZWnFgy5cVEZ5MEo0Um9XQjA/view?usp=sharing Libro técnico que usé como referencia.
http://benvanik.github.io/WebGL-Inspector/ Debugger – webGL inspector