![Page 1: Créer des jeux 3D pour le web et pour le Windows Store avec BabylonJS/WebGL](https://reader036.vdocuments.site/reader036/viewer/2022062513/5560b6a7d8b42af43b8b4a4b/html5/thumbnails/1.jpg)
![Page 2: Créer des jeux 3D pour le web et pour le Windows Store avec BabylonJS/WebGL](https://reader036.vdocuments.site/reader036/viewer/2022062513/5560b6a7d8b42af43b8b4a4b/html5/thumbnails/2.jpg)
Développement
Créer des jeux 3D pour le web et pour le
Windows Store avec BabylonJS & WebGL
David CatuheSenior Program ManagerMicrosoft
http://aka.ms/david@deltakosh
David RoussetTechnical Evangelist
Microsoft
http://aka.ms/davrous@davrous
![Page 3: Créer des jeux 3D pour le web et pour le Windows Store avec BabylonJS/WebGL](https://reader036.vdocuments.site/reader036/viewer/2022062513/5560b6a7d8b42af43b8b4a4b/html5/thumbnails/3.jpg)
#mstechdaysDéveloppement
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 !
Donnez votre avis !
![Page 4: Créer des jeux 3D pour le web et pour le Windows Store avec BabylonJS/WebGL](https://reader036.vdocuments.site/reader036/viewer/2022062513/5560b6a7d8b42af43b8b4a4b/html5/thumbnails/4.jpg)
Développement#mstechdays
INTRODUCTION
Découverte de la 3D pour le web
![Page 5: Créer des jeux 3D pour le web et pour le Windows Store avec BabylonJS/WebGL](https://reader036.vdocuments.site/reader036/viewer/2022062513/5560b6a7d8b42af43b8b4a4b/html5/thumbnails/5.jpg)
#mstechdaysDéveloppement
Obligation de simuler la 3D grâce au CPU
Wireframe
Rasterization
Lights &
Shadows
Textures
Utilisation du canvas 2D
![Page 6: Créer des jeux 3D pour le web et pour le Windows Store avec BabylonJS/WebGL](https://reader036.vdocuments.site/reader036/viewer/2022062513/5560b6a7d8b42af43b8b4a4b/html5/thumbnails/6.jpg)
#mstechdaysDéveloppement
Rendu accéléré matériellement:2D Canvas, CSS3
animations3D accélérée grâce a
WebGL
Décodage matériel du H264 & et des JPG
L’avènement des GPU
![Page 7: Créer des jeux 3D pour le web et pour le Windows Store avec BabylonJS/WebGL](https://reader036.vdocuments.site/reader036/viewer/2022062513/5560b6a7d8b42af43b8b4a4b/html5/thumbnails/7.jpg)
#mstechdaysDéveloppement
Nécessite un navigateur compatible :
Un nouveau contexte pour le canvas :
canvas.getContext("webgl", { antialias: true}) || canvas.getContext("experimental-webgl", { antialias: true});
De quoi ai-je besoin ?
![Page 8: Créer des jeux 3D pour le web et pour le Windows Store avec BabylonJS/WebGL](https://reader036.vdocuments.site/reader036/viewer/2022062513/5560b6a7d8b42af43b8b4a4b/html5/thumbnails/8.jpg)
#mstechdaysDéveloppement
WebGL est une API de bas niveau
Besoin de gérer quasiment touthormis le rendu
Shaders (chargement, compilation) Géométrie Texture et ressources Boucle de rendu Etc.
Utilisation de WebGL
![Page 9: Créer des jeux 3D pour le web et pour le Windows Store avec BabylonJS/WebGL](https://reader036.vdocuments.site/reader036/viewer/2022062513/5560b6a7d8b42af43b8b4a4b/html5/thumbnails/9.jpg)
Développement#mstechdays
UTILISATION DE BABYLON.JS POUR CRÉER DES JEUX ET DES APPLICATIONS
![Page 10: Créer des jeux 3D pour le web et pour le Windows Store avec BabylonJS/WebGL](https://reader036.vdocuments.site/reader036/viewer/2022062513/5560b6a7d8b42af43b8b4a4b/html5/thumbnails/10.jpg)
#mstechdaysDéveloppement
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 !
Pour démarrer Babylon.js :
<script src="babylon.js"></script>
var engine = new BABYLON.Engine(canvas, true);
Utilisation de Babylon.js
![Page 11: Créer des jeux 3D pour le web et pour le Windows Store avec BabylonJS/WebGL](https://reader036.vdocuments.site/reader036/viewer/2022062513/5560b6a7d8b42af43b8b4a4b/html5/thumbnails/11.jpg)
#mstechdaysDéveloppement
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);
engine.runRenderLoop(function() { scene.render(); });
Babylon.js est un scene graph: Toute la tuyauterie est gérée pour vous !
Exemple : La gestion de la boucle de rendu
Utilisation de Babylon.js
![Page 12: Créer des jeux 3D pour le web et pour le Windows Store avec BabylonJS/WebGL](https://reader036.vdocuments.site/reader036/viewer/2022062513/5560b6a7d8b42af43b8b4a4b/html5/thumbnails/12.jpg)
#mstechdaysDéveloppement
Support du mode Offline
IndexedDB
Optimisations réseauChargement incrémental
Moteur physique
Moteur de collisions complet
Fonctionnalités avancées
![Page 13: Créer des jeux 3D pour le web et pour le Windows Store avec BabylonJS/WebGL](https://reader036.vdocuments.site/reader036/viewer/2022062513/5560b6a7d8b42af43b8b4a4b/html5/thumbnails/13.jpg)
#mstechdaysDéveloppement
Le pipeline de création
.babylon
Onlin
e co
nverte
r
.FBX
.OBJ
.FBX
.OBJ
![Page 14: Créer des jeux 3D pour le web et pour le Windows Store avec BabylonJS/WebGL](https://reader036.vdocuments.site/reader036/viewer/2022062513/5560b6a7d8b42af43b8b4a4b/html5/thumbnails/14.jpg)
démo
#mstechdaysDéveloppement
UTILISATION DE BABYLON.JS
Suzanne on stage!
![Page 15: Créer des jeux 3D pour le web et pour le Windows Store avec BabylonJS/WebGL](https://reader036.vdocuments.site/reader036/viewer/2022062513/5560b6a7d8b42af43b8b4a4b/html5/thumbnails/15.jpg)
démo
#mstechdaysDéveloppement
LIVE CODE
Créer un jeu en 20 minutes – Tetris 3D
![Page 16: Créer des jeux 3D pour le web et pour le Windows Store avec BabylonJS/WebGL](https://reader036.vdocuments.site/reader036/viewer/2022062513/5560b6a7d8b42af43b8b4a4b/html5/thumbnails/16.jpg)
© 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.
Digital is business