Babylon.js es el motor más popular para trabajar con juegos 3D en HTML5. A diferencia de Three.js, también muy conocido, Babylon.js se enfoca totalmente a juegos con audio, físicas, controles, etc mientras que Three.js es un motor gráfico, sin más.
¿Qué necesitamos para empezar?
Abre un navegador que soporte WebGL. Tanto Firefox como Chrome son buenos, nosotros usaremos Firefox. Edge y Safari también lo soportan pero las herramientas de desarrollo que incorporan no son tan buenas.Crea una carpeta para guardar tus proyectos. Descárgate la última versión de Babylon.js desde la página oficial.
Fichero HTML
Todas las aplicaciones HTML5 no dejan de ser páginas web corrientes que usan unas APIs que antes no existían. Así pues, y aunque la programación dura se haga con JavaScript, siempre es necesario un fichero HTML para empezar. La estructura para empezar va a ser la siguiente:¿Qué podemos apreciar? Es una página corriente con su título y su charset, sin embargo dentro del body solo encontramos la etiqueta Canvas y la etiqueta Script con un fichero escena.js. La etiqueta Canvas fue añadida en HTML5 y sirve para dibujar en ella. Es agnóstica, en el sentido de que varias APIs diferentes pueden trabajar y mostrar sus resultados en Canvas. Los dos modos principales son 2d y webgl. La API 2D está pensada para juegos, animaciones, etc en dos dimensiones. La API WebGL nos permite usar el poderío de la tarjeta gráfica, pues es simplemente un puente con los drivers OpenGL de tu tarjeta. Una vez hecha esta aclaración vamos a crear la escena.
Iniciando la escena
Dentro del archivo escena.js, que debe estar en la misma carpeta que el fichero HTML escribimos.
var canvas = document.getElementById("main");
var engine = new BABYLON.Engine(canvas);
var scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color3(0.6,0.6,0.6);
Con esto primero obtenemos el elemento canvas para que pueda ser usado por JavaScript. A continuación creamos una nueva instancia del motor Babylon.js, usando como lienzo el canvas que acabamos de obtener. A continuación creamos una escena. Una escena es un conjunto de objetos, cámaras y luces y puede ser renderizado. A esa escena le asignamos un color de fondo con una terna de números siguiendo el patrón RGB. Es decir, 0.6 sobre 1 de rojo, 0.6 sobre 1 de verde y 0.6 sobre 1 de azul.
Renderizando la escena
Antes de continuar vamos a ver como se renderiza la escena. En Babylon tenemos que usar una función como render loop. Esta función se encargará de dibujar constantemente la escena, un frame, haya habido cambios o no. El número de frames que se han generado en un segundo se conoce popularmente como FPS y para un rendimiento óptimo los FPS nunca deberían ser inferiores a 30. Añade en el mismo archivo más abajo lo siguiente:
function renderLoop(){
scene.render();
// box.rotation.x += 0.01;
// box.rotation.y += 0.01;
}
engine.runRenderLoop(renderLoop);
He comentado una rotación de un cubo que vamos a añadir después, al final puedes quitar el comentario y ver como gira el cubo.
Cámaras
Las cámaras son objetos dentro de una escena que sirven para indicar qué y cómo ha de renderizarse. Piensa como si fuera una cámara de cine, la escena puede ser muy amplia, pero solo se verá lo que enfoques con la cámara. Babylon.js trae muchos tipos de cámara, para empezar usaremos la FreeCamera.
var camera = new BABYLON.FreeCamera("camera", new BABYLON.Vector3(0,0,-10),scene);
Para crear la cámara le asignamos un identificador (camera), le indicamos su posición con un vector X,Y,Z y con respecto a qué escena.
Las luces
La geometría 3D se aprecia en las pantallas de los ordenadores y los móviles gracias a los efectos luminosos. Por ello la luz es muy necesaria. Vamos a crear una luz puntual, es decir, concentrada en un punto y que dispersa en todas direcciones.
var light = new BABYLON.PointLight("light", new BABYLON.Vector3(10,10,0),scene);
Como podrás comprobar, las luces se crean de manera similar a las cámaras.
Mesh
Los Mesh son los objetos "que se ven", es decir todo lo que hay en una escena que no es cámara ni luz. Los Mesh están compuestos de una geometría, que define su forma, y un material, que define cómo le afecta la luz. Babylon.js tiene unas geometrías ya precargadas, realizaremos un cubo.
var box = new BABYLON.Mesh.CreateBox("box",2,scene);
box.rotation.x = -0.2;
box.rotation.y = -0.4;
box.material = new BABYLON.StandardMaterial("material",scene);
box.material.emmisiveColor = new BABYLON.Color3(0, 0.58, 0.86);
Con esto creamos el Mesh con geometría de cubo. Además lo hemos rotado en dos de sus ejes para así apreciar mejor el 3D. El material que hemos usado es StandardMaterial, al que le hemos configurado que cuando le llegue luz emita ese color.