créer des jeux 3d pour le web et pour le windows store avec babylonjs/webgl
DESCRIPTION
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)TRANSCRIPT
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
#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 !
Développement#mstechdays
INTRODUCTION
Découverte de la 3D pour le web
#mstechdaysDéveloppement
Obligation de simuler la 3D grâce au CPU
Wireframe
Rasterization
Lights &
Shadows
Textures
Utilisation du canvas 2D
#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
#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 ?
#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
Développement#mstechdays
UTILISATION DE BABYLON.JS POUR CRÉER DES JEUX ET DES APPLICATIONS
#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
#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
#mstechdaysDéveloppement
Support du mode Offline
IndexedDB
Optimisations réseauChargement incrémental
Moteur physique
Moteur de collisions complet
Fonctionnalités avancées
#mstechdaysDéveloppement
Le pipeline de création
.babylon
Onlin
e co
nverte
r
.FBX
.OBJ
.FBX
.OBJ
démo
#mstechdaysDéveloppement
UTILISATION DE BABYLON.JS
Suzanne on stage!
démo
#mstechdaysDéveloppement
LIVE CODE
Créer un jeu en 20 minutes – Tetris 3D
© 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