Créer des jeux 3D pour le web et pour le Windows Store avec BabylonJS/WebGL

Créer des jeux 3D pour le web et pour le Windows Store avec BabylonJS/WebGL

• 2.
  Créer des jeux3D 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 la3D pour le web #mstechdays Développement
• 5.
  Utilisation du canvas2D Obligation de simuler la 3D grâce au CPU Wireframe #mstechdays Lights & Shadows Rasterization Développement Textures
• 6.
  L’avènement des GPU Renduaccé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-jebesoin ? 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 WebGLest 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.JSPOUR CRÉER DES JEUX ET DES APPLICATIONS #mstechdays Développement
• 10.
  Utilisation de Babylon.js Projectopen 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.jsest 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 Supportdu mode Offline Moteur de collisions complet Optimisations réseau #mstechdays IndexedDB Chargement incrémental Développement
• 13.
  Le pipeline decréation .FBX .FBX .OBJ #mstechdays Online converter .OBJ .babylon Développement
• 14.
  UTILISATION DE BABYLON.JS Suzanneon stage! #mstechdays Développement
• 15.
  LIVE CODE Créer unjeu en 20 minutes – Tetris 3D #mstechdays Développement
• 16.
  Digital is business