Una de las ventajas de WebGL (la API de gráficos para la Web que conocemos en el último artículo) es la existencia de muchas bibliotecas externas que facilitan en buena medida su uso. Entre ellas encontramos Three.js, una API/biblioteca diseñada para crear animaciones en 3D que puedan mostrarse en un navegador web.

HexGL, un videojuego desarrollado con Three.js

Three.js abstrae muchas de las características de WebGL, volviéndolas más fácil de manipular para el programador. Por ejemplo, podemos aprovechar todas las prestaciones de OpenGL Shading Language (GLSL), el lenguaje de programación de shaders (segmentos independientes que conforman un programa gráfico) de WebGL. Three.js es una biblioteca de alto nivel, y esto supone una menor complejidad que si utilizáramos WebGL (de bajo nivel) sin ninguna capa de abstracción superior.

Three.js ofrece varios elementos que no son directamente soportados por WebGL, al menos con la misma facilidad:

• Escenas. Contendrán todos los elementos gráficos que queramos mostrar. En las escenas encontramos los siguientes elementos esenciales:
  • Cámara. Define el punto de vista del usuario. Se pueden crear cámaras perspectivas u ortográficas. Si lo deseamos, el usuario puede controlar variables como la posición, el zoom y el FPS (cantidad de cuadros por segundo).
  • Mesh (malla). Es cualquier colección de vértices, bordes y caras que define la forma de un objeto poliédrico. Como veremos en los siguientes ítems, Three.js ya trae algunos meshes definidos y muchas herramientas para editar su aspecto.
  • Luz. Define la iluminación que recibirán los objetos. Podemos editar parámetros como el ambiente, la dirección y las sombras que proyectan las luces.
• Renderers. Elementos que podemos usar para mostrar las escenas en nuestra página web: WebGL, <canvas>, SVG, CSS3/DOM, etc.
• Geometría. Poliedros listos para usar, como planos, cubos, esferas, toroides, texto en 3D, etc.
• Objetos. Meshes, partículas, sprites, líneas, cintas, bones, etc. Cabe destacar que los bones, o huesos, forman la estructura interna (esqueleto) que permite a los objetos tener un movimiento articulado; mientras que los meshes integran la capa externa que ve el usuario.
• Materiales. Describen la apariencia de los objetos. Podemos elegir entre distintos algoritmos de shading (crean la ilusión de profundidad en la pantalla) e iluminación.
• Importación y exportación. Podemos migrar modelos 3D entre Three.js y otras herramientas, como Blender, Maya, Cinema3D, etc.

Además de estas ventajas, Three.js cuenta con buena documentación y una gran comunidad de usuarios alrededor del mundo, que, en caso de tener dificultades, nos facilitarán más aun el trabajo con gráficos en WebGL.

Enlaces externos

• Three.js