The result is the following (use the cursors keys to move and the mouse to change your point of view by clicking and moving it. Beware not to fall off of the ground):http://www.babylonjs.com/tutorials/simple5.html

Babylon.js can even handle stairs as you can see in the “Espilit demo” on the main site.

Particle systems

Particle systems are a cool toy when you play with 3D. They can easily add stunning effects on your scene (explosions, impacts, magic effects, etc.).

Creating a particle system is simple as follow:

var particleSystem = new BABYLON.ParticleSystem("particles", 4000, scene);

You have to define the maximum capacity of a particle system to allowbabylon.jsto create associatedWebGLobjects. So in this case, there will be no more than 4000 active particles simultaneously.

Particle systems are highly configurable with the help of the following set of properties:

• particleTexture: Defines the texture associated with every particle
• minAngularSpeed/maxAngularSpeed: The range of the angular rotation speeds of every particle
• minSize/maxSize: The range of sizes of every particle
• minLifeTime/maxLifeTime: The range of lifetimes for every particle
• minEmitPower/maxEmitPower:: The range of emission powers (emission speed) of every particle
• minEmitBox/maxEmitBox:: The box from where every particle starts (can be a point if min == max)
• direction1/direction2: The range of directions for every particle
• color1/color2: The range of colors for every particle
• colorDead: The color of a dead particle (Babylon.jswill interpolate particle’s color to this color)
• deadAlpha: The alpha of a dead particle (in a same way,babylon.jswill interpolate particle’s alpha to finish with this specific alpha)
• textureMask: A mask used to filter which part of the texture is used for every particle
• blendMode: Alpha blending mode (BLENDMODE_ONEONEto add current color and particle color orBLENDMODE_STANDARDto blend current color and particle color using particle’s alpha)
• emitter:A Vector3 to define the position of the particle system. You can also used a mesh here and in this case the particle system will use the mesh position
• emitRate: How many particles are launched on every frame.
• manualEmitCount: Specifying a value greater or equal to zero here will disable emitRate. You are then responsible for feeding this value to control the particles count emitted.
• updateSpeed: The global speed of the system
• gravity:Graviy applied to particles
• targetStopDuration:Stops the particle system after a specific duration
• disposeOnStop: Disposes the particle system on stop (Very useful if you want to create a one shot particle system with a specifictargetStopDuration)

  Every range values are used to generate a controlled random value for every particle.

You can control a particle system by calling start/stop functions.

That’s a lot of properties, isn’t it ?The best way to understand them is to try all of them on a test scene and play with properties. For instance, the following code:

var particleSystem = new BABYLON.ParticleSystem("particles", 4000, scene);
particleSystem.particleTexture = new BABYLON.Texture("Flare.png", scene);
particleSystem.minAngularSpeed = -0.5;
particleSystem.maxAngularSpeed = 0.5;
particleSystem.minSize = 0.1;
particleSystem.maxSize = 0.5;
particleSystem.minLifeTime = 0.5;
particleSystem.maxLifeTime = 2.0;
particleSystem.minEmitPower = 0.5;
particleSystem.maxEmitPower = 1.0;
particleSystem.emitter = new BABYLON.Vector3(0, 0, 0);
particleSystem.emitRate = 500;
particleSystem.blendMode = BABYLON.ParticleSystem.BLENDMODE_ONEONE;
particleSystem.minEmitBox = new BABYLON.Vector3(0, 0, 0);
particleSystem.maxEmitBox = new BABYLON.Vector3(0, 0, 0);
particleSystem.direction1 = new BABYLON.Vector3(-1, -1, -1);
particleSystem.direction2 = new BABYLON.Vector3(1, 1, 1);
particleSystem.color1 = new BABYLON.Color4(1, 0, 0, 1);
particleSystem.color2 = new BABYLON.Color4(0, 1, 1, 1);
particleSystem.gravity = new BABYLON.Vector3(0, -5, 0);
particleSystem.disposeOnStop = true;
particleSystem.targetStopDuration = 0;
particleSystem.start();

var spriteManager = new BABYLON.SpriteManager("MonsterA", "MonsterARun.png", 100, 64, scene);
for (var index = 0; index < 100; index++) {
    var sprite = new BABYLON.Sprite("toto", spriteManager);
    sprite.position.y = 0;
    sprite.position.z = Math.random() * 10 - 5;
    sprite.position.x = Math.random() * 10 - 5;
    sprite.invertU = (Math.random() < 0.5);

    sprite.playAnimation(0, 9, true, 100);
}

 var background0 = new BABYLON.Layer("back0", "Layer0_0.png", scene);
 var background1 = new BABYLON.Layer("back1", "Layer1_0.png", scene);
 var foreground = new BABYLON.Layer("fore0", "Layer2_0.png", scene, false);

// Animations
var animation = new BABYLON.Animation("anim0", "scaling.x", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, 
                                                                BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);

var keys = [];
keys.push({
    frame: 0,
    value: 1
});

keys.push({
    frame: 50,
    value: 0.2
});

keys.push({
    frame: 100,
    value: 1
});

animation.setKeys(keys);

box.animations.push(animation);

scene.beginAnimation(box, 0, 100, true);

var dynamicTexture = new BABYLON.DynamicTexture("dynamic texture", 512, scene, true);
dynamicTexture.hasAlpha = true;
material.diffuseTexture = dynamicTexture;

var count = 0;
scene.beforeRender = function() {
    // Dynamic
    var textureContext = dynamicTexture.getContext();
    var size = dynamicTexture.getSize();
    var text = count.toString();

    textureContext.save();
    textureContext.fillStyle = "red";
    textureContext.fillRect(0, 0, size.width, size.height);

    textureContext.font = "bold 120px Calibri";
    var textSize = textureContext.measureText(text);
    textureContext.fillStyle = "white";
    textureContext.fillText(text, (size.width - textSize.width) / 2, (size.height - 120) / 2);

    textureContext.restore();

    dynamicTexture.update();
    count++;
};

// Mirror
var mirror = BABYLON.Mesh.createBox("Mirror", 1.0, scene);
mirror.material = new BABYLON.StandardMaterial("mirror", scene);
mirror.material.diffuseColor = new BABYLON.Color3(0.4, 0, 0);
mirror.material.reflectionTexture = new BABYLON.MirrorTexture("mirror", 512, scene, true);
mirror.material.reflectionTexture.mirrorPlane = new BABYLON.Plane(0, -1.0, 0, -2.0);
mirror.material.reflectionTexture.renderList = [box, sphere];