Nous verrons dans cette session comment créer des jeux HTML5 en 3D temps réel à destination du Web (IE11/Chrome/Firefox & Opera) et du Windows Store 8.1. Pour cela, nous vous présenterons un framework de jeux WebGL gratuit et open source nommée Babylon.JS. Il est créé en France et compatible multi-plateformes. Vous découvrirez comment couvrir toutes la chaine de production, de la création des assets 3d depuis Blender, son export vers Babylon, le support de différent type de caméra (touch, accéléromètre, etc.), la gestion du moteur physique et l'implémentation de la logique du jeux en JavaScript. Pour finir, vous verrez que l'intégration dans une application Windows Store se fera en quelques secondes! Speakers : David Catuhe (Microsoft), David Rousset (Microsoft)

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