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

David Catuhe
Senior Program Manager
Microso...
Donnez votre avis !
Depuis votre smartphone sur :
http://notes.mstechdays.fr
De nombreux lots à gagner toute les heures !!...
INTRODUCTION
Découverte de la 3D pour le web

#mstechdays

Développement
Utilisation du canvas 2D
Obligation de simuler la 3D grâce au CPU

Wireframe
#mstechdays

Lights &
Shadows

Rasterization
...
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éri...
De quoi ai-je besoin ?
Nécessite un navigateur compatible :

Un nouveau contexte pour le canvas :
canvas.getContext("webgl...
Utilisation de WebGL
WebGL est une API de bas niveau

Besoin de gérer quasiment tout
hormis le rendu






Shaders (c...
UTILISATION DE BABYLON.JS POUR
CRÉER DES JEUX ET DES
APPLICATIONS
#mstechdays

Développement
Utilisation de Babylon.js
Project open source (disponible sur Github)
http://www.babylonjs.com
https://github.com/babylonj...
Utilisation de Babylon.js
Babylon.js est un scene graph: Toute la tuyauterie est gérée
pour vous !
var scene = new BABYLON...
Fonctionnalités avancées
Moteur physique

Support du mode Offline

Moteur de collisions
complet

Optimisations réseau

#ms...
Le pipeline de création

.FBX

.FBX
.OBJ
#mstechdays

Online converter

.OBJ

.babylon

Développement
UTILISATION DE BABYLON.JS
Suzanne on stage!

#mstechdays

Développement
LIVE CODE
Créer un jeu en 20 minutes – Tetris 3D

#mstechdays

Développement
Digital is
business
Créer des jeux 3D pour le web et pour le Windows Store avec BabylonJS/WebGL
Prochain SlideShare
Chargement dans…5
×

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

772 vues

Publié le

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)

Publié dans : Technologie
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
772
Sur SlideShare
0
Issues des intégrations
0
Intégrations
2
Actions
Partages
0
Téléchargements
16
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive
  • davca
  • Davca -
  • davrous
  • Créer des jeux 3D pour le web et pour le Windows Store avec BabylonJS/WebGL

    1. 1. 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
    2. 2. 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
    3. 3. INTRODUCTION Découverte de la 3D pour le web #mstechdays Développement
    4. 4. Utilisation du canvas 2D Obligation de simuler la 3D grâce au CPU Wireframe #mstechdays Lights & Shadows Rasterization Développement Textures
    5. 5. 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
    6. 6. 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
    7. 7. 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
    8. 8. UTILISATION DE BABYLON.JS POUR CRÉER DES JEUX ET DES APPLICATIONS #mstechdays Développement
    9. 9. 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
    10. 10. 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
    11. 11. Fonctionnalités avancées Moteur physique Support du mode Offline Moteur de collisions complet Optimisations réseau #mstechdays IndexedDB Chargement incrémental Développement
    12. 12. Le pipeline de création .FBX .FBX .OBJ #mstechdays Online converter .OBJ .babylon Développement
    13. 13. UTILISATION DE BABYLON.JS Suzanne on stage! #mstechdays Développement
    14. 14. LIVE CODE Créer un jeu en 20 minutes – Tetris 3D #mstechdays Développement
    15. 15. Digital is business

    ×