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

  • More established (2009)
  • New(er) and shiny ( 2013 )
  • "Closer to the metal"
  • Higher Abstraction
  • More web examples
  • Feels a bit more polished, almost like Unity
  • JS feels 'older', but solid
  • Typescript-centric source
  • Supposedly superior renderer/ performance
  • Most popular on Github, SO, etc.

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

  • Select a light
  1. Point
  2. Directional
  3. Spot
  4. Hemispheric
var light = new BABYLON.PointLight(
    "pointLight", 
    new BABYLON.Vector3(1, 10, 1), 
    scene
);
  • Put in scene
  • Configure
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

  • Enable the physics engine
  1. Cannon.js
  2. Oimo.js 
  3. Energy.js (soon)
var scene = new BABYLON.Scene(engine);
var gravityVector = new BABYLON.Vector3(0,-9.81, 0);
var physicsPlugin = new BABYLON.CannonJSPlugin();
scene.enablePhysics(gravityVector, physicsPlugin);
  • Attach Impostors to Meshes

Particles

Particles

  • Make a container
  • Make Particle system
  • Configure
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
);
  • Attach
particleSystem.emitter = fountain;

The rest of the owl:

AKA: Tooling

Blender

Cheetah 3D

Unity 5

http://materialeditor.raananweber.com/

Text

http://materialeditor.raananweber.com/

Material Editor

http://johann.langhofer.net/PBRComposer/

http://johann.langhofer.net/PBRComposer/

PBR Material Editor

http://editor.babylonjs.com/

http://editor.babylonjs.com/

Scene Editor

http://www.babylonjs-playground.com/

Whizzbang in your browser.

Me IRL

Jesse Harlin

@5imian

Babylon JS Feb 20, 2018

By Jesse Harlin

Babylon JS Feb 20, 2018

A Talk about babylonjs givent ot he okc.js user group on feb 20, 2018

  • 2,421

More from Jesse Harlin