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

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