Three.js
Three.js
Three.js es una biblioteca escrita con lenguaje JavaScript, usado para mostrar gráficos generalmente animados en 3D. Se usa junto a HTML 5, SVG o WEBGL. Es una librería bastante liviana ideal para HTML 5 y muy útil para generar o animar gráficos en 3D.
El principal uso es para animaciones complejas 3D para ser mostradas en navegadores con la ventaja que no necesita un plugin independiente para que corra. Como es en base a JavaScript es muy fácil de aprender ya que es de scripting que incluye un entorno desarrollado.
Esta biblioteca fue creada por Ricardo Cabello (español), en primeras instancias fue desarrollado en ActionScript y posteriormente traducido al JavaScript. Three.js funciona en todos los navegadores compatibles con WebGL.
Entre las funciones que incluyen three.js se encuentran: detectar colisiones, manejar sprites, aplicar LensFlares, nuevos tipos de cámara (ej. QuakeCamera para hacer flybys) por lo que parece claro cual puede ser un importante campo donde aplicarlo: gaming!
Usando la demo de canvas geometry terrain he mirado el rendimiento y no está mal teniendo en cuenta la plataforma donde nos estamos moviendo y la resolución de 1440×900 que estaba usando en ese momento (Intel Core2Duo 1.8Ghz + Intel X3100 + Chrome 12 canary build).
Las principales novedades incluyen involucran materiales, shaders y post-procesamiento. Actualmente cuenta con la contribución de alrededor de 90 codificadores, entre ellos incluyendo «gero3», «WestLangley», Jerome Etienne, Erik Kitson y «AddictArts» y una comunidad creciente de programadores.
Características
- Escenas: añadir y eliminar objetos en tiempo de ejecución; 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.
- Efectos: anaglifo, bizco y la barrera de paralaje.
- Luces: ambiente, dirección, luz de puntos y espacios, sombras: emite y recibe.
- Materiales: Lambert, Phong, sombreado suave, texturas y otras.
- 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.
- Exportación e importación: utilidades para crear archivos compatibles con JSON Three.js desde: Blender, openCTM, FBX, Max, y OBJ.
Ventajas
- js es popular porque es simple a la hora de usarlo a través de JavaScript, y también porque tiene un equilibrio perfecto entre el diseño y la programación.
- Podemos importar archivos 3D desde Blender o Maya y se puede generar terrenos y objetos complejos.
- Incluye potentes shaders que se pueden personalizar.
- Podemos manipular luces, cámaras, perspectivas, control de visualizaciones, etc.
Conceptos básicos
Lo primero que tenemos que tener es nuestro archivo HTML listo para insertar la ventana donde se visualizará todo el 3D, de una forma muy simple, ya que el objeto del Canvas nos los generaThree.js.
Lo primero es descargar la librería para poderla usar, que pesa unos 300kb. Para realizar la prueba haremos que la visualización ocupe toda el espacio del navegador y lo haremos mediante CSS.
Creación de modelos
Resultaría muy complejo desarrollar escenas con modelos sofisticados a sólo código, por ello THREE.js tiene contemplado la utilización de modelos de softwares de creación de contenido y para ello ha desarrollado un plugin para exportarlos desdeBlender, Maya ó Max a formato JSON.
También existe la posibilidad de crear los modelos en varios formatos y luego convertirlos al formato JSON utilizando scripts desarrollados en Python, que se encuentran disponibles en el repositorio de Three.js.
Bibliografía
http://www.genbetadev.com/javascript/introduccion-a-three-js-la-libreria-3d-numero-uno-para-html5
http://es.wikipedia.org/wiki/Three.js
http://www.genbetadev.com/desarrollo-web/threejs-un-motor-ligero-y-eficiente-en-javascript
