2. Créer des jeux 3D pour le
web et pour le Windows
Store avec BabylonJS &
WebGL
David Catuhe
Senior Program Manager
Microsoft
http://aka.ms/david
@deltakosh
Développement
David Rousset
Technical Evangelist
Microsoft
http://aka.ms/davrous
@davrous

3. Donnez votre avis !
Depuis votre smartphone sur :
http://notes.mstechdays.fr
De nombreux lots à gagner toute les heures !!!
Claviers, souris et jeux Microsoft…
Merci de nous aider à améliorer les Techdays !
#mstechdays
Développement

4. INTRODUCTION
Découverte de la 3D pour le web
#mstechdays
Développement

5. Utilisation du canvas 2D
Obligation de simuler la 3D grâce au CPU
Wireframe
#mstechdays
Lights &
Shadows
Rasterization
Développement
Textures

6. L’avènement des GPU
Rendu accéléré
matériellement:
2D Canvas, CSS3
animations
3D accélérée grâce a
WebGL
Décodage matériel du H264
& et des JPG
#mstechdays
Développement

7. De quoi ai-je besoin ?
Nécessite un navigateur compatible :
Un nouveau contexte pour le canvas :
canvas.getContext("webgl", { antialias: true}) ||
canvas.getContext("experimental-webgl", { antialias: true});
#mstechdays
Développement

8. Utilisation de WebGL
WebGL est une API de bas niveau
Besoin de gérer quasiment tout
hormis le rendu





Shaders (chargement, compilation)
Géométrie
Texture et ressources
Boucle de rendu
Etc.
#mstechdays
Développement

9. UTILISATION DE BABYLON.JS POUR
CRÉER DES JEUX ET DES
APPLICATIONS
#mstechdays
Développement

10. Utilisation de Babylon.js
Project open source (disponible sur Github)
http://www.babylonjs.com
https://github.com/babylonjs/babylon.js
Comment s’en servir ? Inclure le fichier suivant et vous êtes prêt !
<script src="babylon.js"></script>
Pour démarrer Babylon.js :
var engine = new BABYLON.Engine(canvas, true);
#mstechdays
Développement

11. Utilisation de Babylon.js
Babylon.js est un scene graph: Toute la tuyauterie est gérée
pour vous !
var scene = new BABYLON.Scene(engine);
var camera = new BABYLON.FreeCamera("Camera", new BABYLON.Vector3(0, 0, -10), scene);
var light0 = new BABYLON.PointLight("Omni0", new BABYLON.Vector3(0, 100, 100), scene);
var sphere = BABYLON.Mesh.createSphere("Sphere", 16, 3, scene);
Exemple : La gestion de la boucle de rendu
engine.runRenderLoop(function() { scene.render(); });
#mstechdays
Développement

12. Fonctionnalités avancées
Moteur physique
Support du mode Offline
Moteur de collisions
complet
Optimisations réseau
#mstechdays
IndexedDB
Chargement incrémental
Développement

13. Le pipeline de création
.FBX
.FBX
.OBJ
#mstechdays
Online converter
.OBJ
.babylon
Développement

14. UTILISATION DE BABYLON.JS
Suzanne on stage!
#mstechdays
Développement

15. LIVE CODE
Créer un jeu en 20 minutes – Tetris 3D
#mstechdays
Développement

16. Digital is
business