O Babylon.js é um engine de para desenvolvimento de jogos 3d bem populares que tem sido utilizado por diversos desenvolvedores. Como em qualquer outra biblioteca 3D, ele fornece funções integradas para ajudá-lo a implementar a funcionalidade 3D comum mais rapidamente. Ele é muito fácil de configurar e utilizar, seguindo o padrão de qualquer biblioteca JavaScript, você apenas precisar colocar em uma tag script o link para o arquivo em seu projeto ou em algum lugar na web.
Projetos utilizando o Babylon.js
Após fazer uma pesquisa rápida, foi possível encontrar alguns projetos bem legais utilizando como:
Um jogo de corrida de barcos do Assassins Creed criado pela Ubisoft (http://race.assassinscreedpirates.com/)
Um jogo de corrida desenvolvido por Julian Chenard (http://pixelcodr.com/games/block/index.html)
Um simulador de voo feito pela equipe da Microsoft (http://flightarcade.com/)
Um jogo de tower defense criado por Carlos Velasco (https://xtreemze.github.io/defend/)
Exemplo básico do Babylon.JS
Certo, mas vamos ver o que precisamos para fazer um projeto. A ideia é tentar deixar tudo em um arquivo e coloquei a descrição do que está ocorrendo no comentário de cada parte.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Babylon.js demo</title>
<!-- apenas algumas linhas de css para darmos forma ao canvas e renderização da image -->
<style>
html,
body,
canvas {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-size: 0;
}
</style>
</head>
<body>
<canvas id="render-canvas"></canvas>
<!-- link para a biblioteca do bayblon.js -->
<script src="https://preview.babylonjs.com/babylon.js"></script>
</body>
</html>
No final da página HTML, adicione o seguinte script
// captura o canvas em uma variavel para que possamos manipula-lo mais a frnete
let canvas = document.getElementById("render-canvas");
// inicializa o engine do babylon.JS passando o canvas como parametro
// todas as funções do babylon estarão dentro deste objeto
let engine = new BABYLON.Engine(canvas);
// O objeto scene é o lugar onde todo o conteúdo do jogo é exibido.
// Ao criar novos objetos na demonstração, adicionaremos todos eles ao scene para torná-los visíveis na tela.
let scene = new BABYLON.Scene(engine);
// após criar o objeto, define a cor de fundo com cinza
scene.clearColor = new BABYLON.Color3(0.8, 0.8, 0.8);
// a camera é o objeto que define o ponto de vista no usuario com a cena (scene)
// FreeCamera é uma das opções, mas não iremos entrar em detalhes neste tutorial
let camera = new BABYLON.FreeCamera("camera", new BABYLON.Vector3(0, 0, -10), scene);
//PointLight, é uma forma de iluminação que funciona como uma lanterna
// Adicione a seguinte linha abaixo da sua definição de câmera.
let light = new BABYLON.PointLight("light", new BABYLON.Vector3(10, 10, 0), scene);
// neste passo criaremos um cubo e vamos gira-lo um pouco para mostrar
// melhor suas "propriedades 3d"
let box = BABYLON.Mesh.CreateBox("box", 2, scene);
box.rotation.x = -0.2;
box.rotation.y = -0.4;
// Apesar de criado, nosso cubo não cores ou superficie, para isso precisamos do objeto Material
// No nosso caso, vamos usar o StandardMaterial para definir a superficie e pinta-la de azul.
let boxMaterial = new BABYLON.StandardMaterial("material", scene);
// Pinta de azzul
boxMaterial.emissiveColor = new BABYLON.Color3(0, 0.58, 0.86);
// atribui o Material ao cubo
box.material = boxMaterial;
// Para tornar a cena (scene) visivel, precisamos renderiza-la
// o código abaixo irá renderiza-la continuamente.
let renderLoop = function () {
scene.render();
};
engine.runRenderLoop(renderLoop);
Feito, com isso você deverá ter um resultado similar a imagem abaixo. Simples, mas perfeito para um exemplo inicial, agora acesse a documentação do BabylonJS e comece a dar vida ao seu projeto!!
Conclusão
Então era isso, é possível ver que o babylon.js tem um potencial bem legal para o desenvolvimento de jogos e ambientes 3d em geral. Caso você tenha curiosidade de saber mais, acesse o site oficial deles e faça os exercícios para aprender mais sobre como essa ferramenta funciona.
Fonte