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)
Créer des jeux 3D pour le web et pour le Windows Store avec BabylonJS/WebGL
1.
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
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
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