Jesse Harlin
2.20.2018
What is Babylon.js?
Web GL Framework
Web VR Framework
Comes from "Microsoft Land"
( Hello, Typescript )
Similar (but not identical) to Three.js
Hello World.
function createScene() {
var scene = new BABYLON.Scene(engine);
// create a FreeCamera, and set its position to (x:0, y:5, z:-10)
var camera = new BABYLON.FreeCamera('camera', new BABYLON.Vector3(0, 5,-10), scene);
// target the camera to scene origin
camera.setTarget(BABYLON.Vector3.Zero());
// attach the camera to the canvas
camera.attachControl(canvas, false);
// create a basic light, aiming 0,1,0 - meaning, to the sky
var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0,1,0), scene);
// create sphere
var sphere = BABYLON.MeshBuilder.CreateSphere('sphere', {segments:16, diameter:2}, scene);
sphere.position.y = 1;
var ground = BABYLON.Mesh.CreateGround('ground1', {height:6, width:6, subdivisions: 2}, scene);
return scene;
}
var canvas = document.getElementById('renderCanvas');
var engine = new BABYLON.Engine(canvas, true);
var scene = createScene(); //get scene from scene-builder.
engine.runRenderLoop(function() {
scene.render();
});
window.addEventListener('resize', function() {
engine.resize();
});
How to do cool stuff in WebGL
Lighting
Lighting
var light = new BABYLON.PointLight(
"pointLight",
new BABYLON.Vector3(1, 10, 1),
scene
);
light.diffuse = new BABYLON.Color3(1, 0, 0);
light.specular = new BABYLON.Color3(0, 1, 0);
Pointlight
Directional
Spotlight
Hemispheric
Lighting
SSAO
Volumetric Light
Shadows
Shadows
Shadows
( even more sparkle magic tho )
SSAO
Volumetric Light
Physics
Physics
var scene = new BABYLON.Scene(engine);
var gravityVector = new BABYLON.Vector3(0,-9.81, 0);
var physicsPlugin = new BABYLON.CannonJSPlugin();
scene.enablePhysics(gravityVector, physicsPlugin);
Particles
Particles
particleSystem.particleTexture = new BABYLON.Texture(
"some-image-sprite.png",
scene
);
particleSystem.textureMask = new BABYLON.Color4(0.3, 0.9, 0.8, 1.0);
var fountain = BABYLON.Mesh.CreateBox("foutain", 1.0, scene);
var particleSystem = new BABYLON.ParticleSystem(
"particles",
2000,
scene
);
particleSystem.emitter = fountain;
The rest of the owl:
AKA: Tooling
Blender
Cheetah 3D
Unity 5
http://materialeditor.raananweber.com/
Text
Material Editor
http://johann.langhofer.net/PBRComposer/
PBR Material Editor
http://editor.babylonjs.com/
Scene Editor
http://www.babylonjs-playground.com/
Whizzbang in your browser.
Me IRL
Jesse Harlin
@5imian