Using Babylon.js for beginner Introduction to WebGL 3D with HTML5 and Babylon.js

WHO ARE WE? DAVID ROUSSET DAVID CATUHE Geeks, web developers, 3D addicts DAVID ROUSSET DAVID CATUHE TECHNICAL EVANGELIST PRINCIPAL PROGRAM MANAGER Twitter: @davrous http://blogs.msdn.com/davrous Twitter: @deltakosh http://blogs.msdn.com/eternalcoding Do not try to tune your speakers, the weird sound is due to French accent…

Introduction to WebGL 3D with HTML5 and Babylon.js Course topics Introduction to WebGL 3D with HTML5 and Babylon.js Day One 01 | 3D on the Web: Understanding the Basics 02 | WebGL Basics 03 | Using Babylon.js for Beginners 04 | Understanding materials and inputs Day Two 01 | Game Pipeline Integration with Babylon.js 02 | Loading Assets 03 | Babylon.js: Advanced Features 04 | Special Effects

TEASER – WHAT YOU’LL LEARN DEMO Playground with all Babylon.JS meshes

AGENDA Basic scene components: meshes, lights and cameras 1 Basic scene components: meshes, lights and cameras Using the Playground 2

Basic scene components: meshes, lights and cameras Section One Basic scene components: meshes, lights and cameras

BABYLON.JS Meshes main primitives Sphere Plane Box Torus Cylinder Lines TorusKnot

Ground & Ground From HeightMap + =

BABYLON.JS Lights HemisphericLight PointLight SpotLight DirectionalLight

USING MESHES, CAMERAS & LIGHTS DEMO

Section Two Using the Playground

Learning Babylon.js using the playground Get sample code Try and experiment Share with friends Learn by reading examples

USING THE PLAYGROUND DEMO

Going further with some online tutorials Creating a Basic Scene Create Basic Elements (shapes/meshes) Position, Rotation and Scaling Babylon.JS Cameras Lights Cameras collisions Height map