Etiqueta : three-js

Three.js 3D en nuestros navegadores web

Por José Manuel Cristóbal
Consultor Open Source en OpenSistemas

En octubre de 2014 el World Wide Web Consortium (W3C) publicó la versión definitiva de la quinta revisión del estándar de HTML. El CEO de la W3C Jeff Jaffe, dijo “Ahora estamos en un punto estable en el que cualquiera puede construir sobre el estándar y tener la certeza de que funcionará en todos los navegadores”.

Citando a Tim Berners-Lee, director del W3C y creador de la WWW, dijo “Hoy en día no damos importancia a ver vídeo y audio de forma nativa en el navegador, o de ejecutar un navegador en un teléfono”, “Esperamos poder compartir fotos, comprar, leer noticias y buscar información donde sea, en cualquier dispositivo. Aunque sigue siendo invisible para muchos usuarios, el HTML5 y la Open Web Platform están conduciendo estas expectativas crecientes de los usuarios”.

Lo cierto es que HTML5, incorpora nuevos elementos y atributos, unos más ocultos de cara al usuario, como la semántica de las etiquetas y otros más visuales como el audio, vídeo o canvas.

A canvas 2D, popularmente se le conoce como “el sustituto Flash Player”, pero canvas también es capaz de renderizar y crear 3D interactivos en los navegadores, sin necesidad de plugins de terceros.

Actualmente, los navegadores están desarrollando y mejorando el WebGL, que es la especificación estándar basada en OpenGL 2.0, para mostrar gráficos 3D acelerados por hardware GPU, (unidad de procesamiento gráfico). A fecha de hoy el navegador más aventajado para el renderizado 3D, es el navegador Google Chrome.

A la par, se están desarrollando nuevas librerías de JavaScript, que facilitan la programación de WebGL, entre ellas la más popular y la que tiene más seguidores es Three.js

Three.js fue creada por el español Ricardo Cabello en abril de 2010, en un principio fue desarrollado para flash action script y después fue trasladado a JavaScript, pudiendo renderizar en canvas y en SVG, posteriormente Paul Brunt añadió un módulo para renderizar en WebGL. En la actualidad hay más de 90 programadores que están manteniendo esta librería.

Las características principales son:

  • Renderizadores: Canvas, SVG y WebGL.
  • Efectos: Anaglyph, cross-eyed y parallax barrier.
  • Escenas: añadir y eliminar objetos en tiempo de ejecución; efecto niebla.
  • Cámaras: perspectiva y ortográfica; controladores: trackball, FPS, trayectoria y otras.
  • Animación: armaduras, cinemática directa, cinemática inversa, morphing y fotogramas clave.
  • Luces: ambiente, dirección, luz de puntos y espacios, sombras: emite y recibe.
  • Materiales: Lambert, Phong, sombreado suave, texturas y otras.
  • Shaders: el acceso a las capacidades del OpenGL Shading Language (GLSL): reflejos en la lente, pase profundo y una extensa biblioteca de post-procesamiento
  • Objetos: mallas, partículas, sprites, líneas, cintas, huesos y otros.
  • Geometría: plano, cubo, esfera, toroide, texto en 3D y otras; modificadores: torno, extrusión y tubo.
  • Cargadores de datos: binario, imagen, JSON y escena.
  • Utilidades: conjunto completo de funciones matemáticas en 3D, incluyendo tronco, matriz Quaternian, UVs y otras.
  • Exportación e importación: utilidades para crear archivos compatibles con JSON Three.js desde: Blender, openCTM, FBX, Max, y OBJ.
  • Soporte: La documentación de la API se encuentra en construcción, foro público y wiki.
  • Ejemplos: Más de 150 archivos de códigos de ejemplo más las fuentes, modelos, texturas, sonidos y otros archivos soportados.
  • Depuración: Stats.js, WebGL Inspector, Three.js Inspector.

En un futuro creo, que esta tecnología encierra un gran potencial por explorar, a simple vista podríamos pensar que sólo se hará un uso exclusivo en video juegos, pero también puede adaptarse a nuevas formas de representar la información, con interfaces interactivas en 3D, haciendo un uso adecuado de esta tecnología.

Una alternativa podría ser una interfaz para navegadores web, que sea capaz de hacer, una representación gráfica interactiva, de recogida de datos actualizados de votaciones, con animaciones de mapas en 3D, etc, el resto queda para nuestra imaginación.

El tiempo nos irá diciendo, cuáles son las soluciones que hoy parecen impensables, y que mañana se convertirán en hechos cotidianos, sin apenas darnos cuenta.

A mí particularmente me ha picado el gusanillo y he estado trasteando con Three.js. Añadiendo objetos, jugando con luces y movimientos, al final me ha quedado una especie de salva pantallas, con el cual aprovecho para desearos que tengáis un Próspero Año Nuevo.

Para visualizar esta demo, pinchar en este link. Es recomendable usar el navegador Google Chrome actualizado, en un ordenador con una potencia de mediana a alta.

En Three.js hay muchos más ejemplos interesantes, que muestran las posibilidades de los navegadores web actuales.