¿Qué es Babylon.js?
Un motor 3D basado 100% en JavaScript, desarrollado por programadores de Microsoft. Un framework completo para crear juegos 3D con la ayuda de HTML5 y WebGL.
Beneficios de WebGL
WebGL le da capacidades 3D al elemento Canvas para la mayoría de los navegadores, una de las herramientas 3D más interesantes, pero al mismo tiempo nada fácil de usar. Por ejemplo, para crear un juego se necesitan muchísimas capacidades adicionales como detección de colisiones, partículas y muchos efectos especiales, y todas estas cosas son las que han creado los programadores de Microsoft con Babylon.js.
Babylon.js y el soporte en navegadores
Por el momento funciona adecuadamente en Firefox y Chrome. Aparentemente es una plataforma neutral, sin embargo, el sitio web del motor gráfico advierte que para Internet Explorer 11 aún está como preview y muchos shaders no funcionan aún.
Características
Babylon.js es compatible con las siguientes características:
- Gráficas completas de escenas, luz, cámaras, materiales y texturas
- Motor de colisiones
- Selección de escenas
- Antialiasing
- Motor de animaciones
- Sistemas de partículas
- Sprites y capas 2D
- Motores de optimización
- Materiales estándar a nivel pixel
- Niebla
- Blending alpha
- Pruebas alpha
- Billboarding
- Modo de pantalla completa
- Mapas de sombras y mapas de variación de sombras
- Rendereo de texturas
- Texturas dinámicas (canvas)
- Texturas de video
- Cámaras (perspectivas y ortogonalidad)
- Clonación de mesh
- Meshes dinámicos
- Mapas de altura
- Las escenas de Babylon puede convertirse en .OBJ, .FBX, .MXB
- Exporta a Blender
Un probadita de Babylon.js
En el siguiente video podemos observar cómo trabaja el motor, así como las múltiples posibilidades que Microsoft le ha dado con JavaScript puro.
http://www.youtube.com/watch?feature=player_embedded&v=ZY8TTTeP4k8
Introducción a babylon.js
Lo único que requieres para tener todo el poder de babylon.js es un pequeño archivo JS y hand.js (para eventos de toque).
Ya teniendo éstos, tendrás que importarlos a tu archivo HTML y crear un canvas (aquí babylon.js representará las escenas).
<!DOCTYPE html>
<em id="__mceDel"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Using babylon.js - Test page</title>
<script src="babylon.js"></script>
<style>
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}
#renderCanvas {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<canvas id="renderCanvas"></canvas>
</body>
</html>
Babylon.js se construye en torno a un objetivo principal: el motor. Este objeto le permitirá crear una escena en la que serás capaz de añadir mallas (los objetos 3D), luces, cámaras y materiales:
<script>
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
</script>
Con el siguiente código puedes probar si WebGL es compatible con tu navegador actual utilizando el siguiente código:
<script>
if (BABYLON.Engine.isSupported()) {
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
}
</script>
El motor es el eje entre babylon.js y WebGL, el encargado de enviar las órdenes y la creación interna de los objetos relacionados en WebGL.
Una vez creado el motor, podemos crear la escena:
<code>var</code> <code>scene = </code><code>new</code> <code>BABYLON.Scene(engine);</code>
La escena puede ser vista como un contenedor para todas las entidades que trabajan en conjunto para crear una imagen en 3D. Con la escena puedes crear una luz, una cámara y una malla (en este caso una esfera):
var camera = new BABYLON.FreeCamera("Camera", new BABYLON.Vector3(0, 0, -10), scene);</pre>
<em>var light0 = new BABYLON.PointLight("Omni0", new BABYLON.Vector3(0, 100, 100), scene);
var sphere = BABYLON.Mesh.createSphere("Sphere", 16, 3, scene); </em>
Babylon.js soporta diferentes tipos de cámaras, luces, mallas y viene con una biblioteca matemática completa donde puedes manejar vectores, matrices, colores, rayas y cuaterniones. Debes tener en cuenta que babylon.js utiliza un sistema de coordenadas de mano izquierda:
La última cosa que necesitamos hacer es registrar un bucle de render:
// Render loop
var renderLoop = function () {
// Start new frame
engine.beginFrame();
scene.render();
// Present
engine.endFrame();
// Register new frame
BABYLON.Tools.QueueNewFrame(renderLoop);
};
BABYLON.Tools.QueueNewFrame(renderLoop);
Usando QueueNewFrame, un llamado a requestAnimationFrame cuando están apoyados en un setTimeout se le pide al navegador llame a renderloop tan pronto como sea posible.
El renderloop en sí se basa en 4 partes:
- engine.beginFrame: Este es un llamado necesario para determinar el inicio de un nuevo frame.
- scene.render: Pide al frame hacer que todas las entidades sean de su propiedad.
- engine.endFrame : Cierra el frame actual y lo presenta en el canvas.
- QueueNewFrame : registra un nuevo frame para la representación.
Para agregarle más realismo podemos hacer que sea en tiempo real añadiendo la función scene.beforeRender, de ésta manera animaremos la esfera:
var alpha = 0;
sphere.scaling.x = 0.5;
sphere.scaling.z = 1.5;
scene.beforeRender = function() {
sphere.rotation.x = alpha;
sphere.rotation.y = alpha;
alpha += 0.01;
};
Y así es cómo quedará, si no logras visualizar la animación con el código da clic en la imagen, se deberá a que tu navegador no soporta WebGL.
¿Qué tal? Está super padre el efecto, no? Pues no solamente puedes hacer esto con Babylon, te dejaré otro ejemplo visual para que te animes, pruebes el motor y nos comentes como te fue en el intento.
Descargas
La biblioteca está bajo la licencia pública de Microsoft y tiene muy pocas restricciones. El código está en GitHub y Codeplex.
Igualmente puedes darle un vistazo a la página oficial de Babylon.js, ver y probar el motor 3D tu mismo.
No olvides dejarnos tus comentarios, dudas, opiniones, ni de seguirnos en nuestras redes sociales.
Exelentee! voy buscar mas acerca de el…! Gracias.
Desarrollado por Microsoft pero no compatible con Internet Explorer, ummm que bien!!!
Seria mejor que three.js?
No es un proyecto completamente de Microsoft http://www.babylonjs.com/ Y si es mejor que Three.js
Web sitio webgl con babylon.js