Babylon.js

Es bien conocido que WebGL requiere de muchas líneas de código para el despliegue de primitivas 3D dentro de una escena. Numerosos tutoriales existen en la Web, libros, artículos, entre otros que explican paso a paso y con mucho detalle el uso de los buffers y shaders requeridos en WebGL. Sin embargo, para muchos programadores éste lenguaje es complejo en términos de ser muy “bajo nivel” e implicar un conocimiento técnico sólido del pipeline gráfico. Por ello, han surgido diversas bibliotecas que sirven de engine/API/bliblioteca para crear contenido 3D interactivo en la Web utilizando HTML5/SVG/WebGL. Entre las más conocidas están Three.js, C3DL, O3D, PhiloGL, CopperLicht, SpiderGL y Babylon.js. En este post hablaremos un poco sobre Babylon.js.

babylonjs

Website de BabylonJS

Babylon.js (o BabylonJS) es muy sencilla de utilizar en pocas líneas de código y hecho totalmente en JavaScript. Este ofrece optimizaciones para el despliegue de objetos 3D (i.e. octree, clipping, offline mode, etc.). Al mismo tiempo ofrece un engine completo para colisiones y smart shaders. Del mismo modo, ofrecen integración con Oculus, dispositivos touch, caché local con IDB, optimizaciones de red basados en carga incremental, entre otras características.

BabylonJS publica aproximadamente una nueva versión cada mes y contiene aproximadamente +14.000 líneas de código en JavaScript, todo dentro de una comunidad muy activa de usuarios. Un dato interesante es que Babylon está bajo licencia Microsoft y el líder del proyecto es David Catuhe (@deltakosh). Babylon.js es un proyecto OpenSource disponible en Github (https://github.com/babylonjs/babylon.js) y la información completa de todo lo que ofrece se encuentra en http://www.babylonjs.com.

¿Cómo empezar a utilizar BabylonJS?

Es muy sencillo, solamente se debe incluir un archivo y empezar a crear nuestra escena.

<script src="babylon.js"></script>

Luego, se debe crear un objeto del tipo engine:

var engine = new BABYLON.Engine(canvas, true);

Después, ya será posible emplear [pre]engine[/pre] como una variable para almacenar los objetos dentro de un grafo de escena. Es importante destacar que BabylonJS ofrece una abstracción a todas las características complejas de WebGL. Así, una simple esfera iluminada se puede escribir como:

var camera = new BABYLON.FreeCamera("Camera", new BABYLON.Vector3(0, 0, -5), scene);
var light0 = new BABYLON.PointLight("Omni0", new BABYLON.Vector3(10, 40, 4), scene);
var sphere = BABYLON.Mesh.CreateSphere("Sphere", 16, 3, scene);
engine.runRenderLoop(function(){
   scene.render();
});

El resultado debería verse algo como:

sphereBABYLON

Hello Sphere en BabylonJS

Existen diversos ejemplos, tutoriales y una wiki de cómo emplear BabylonJS, pero realmente las funciones provistas son bastantes sencillas. Las primitivas que ofrece se muestran son cajas, esferas, planos, toros, líneas, cilindros y toros-nudos:

primitivasBABYLON

Empleando éstas primitivas y funcionalidades como luces (HemisphericLight, PointLight, SpotLight y DirectionalLight), heightmaps, materiales, cámaras, estructuras de datos, engine de colisiones/física, sprites, sistema de partículas, picking, texturizado avanzado, algoritmos de post-processing, entre muchas otras es posible construir aplicaciones excelentes. Actualmente, existen exporters de modelos para Blender y 3Ds Max, y converters de formatos FBX, COLLADA y OBJ a escenas de formato BabylonJS.

Recomiendo emplear el PlayGround y CYOS que se ofrece en la página de BabylonJS para construir y “jugar” con el API y shaders respectivamente. También, ofrece un SandBox para probar nuestras escenas.

No dejen de ver Assasin’s Creed Pirates de Ubisoft, ¡es increíble!.

Resumen: Si quieres desarrollar 3D sobre la Web con una curva de aprendizaje baja, prueba BabylonJS 🙂

Anuncios

Acerca de smittynpro

Escribiendo algunas cosas de computación gráfica
Esta entrada fue publicada en Bibliotecas, Herramientas y etiquetada , , . Guarda el enlace permanente.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s