babylon.js webgl paris

WebGL Paris

Babylon.js

Qui sommes-nous?Geeks, web developers, 3D addicts

DAVID ROUSSETHTML5 TECHNICAL EVANGELISTMICROSOFT

MICHEL ROUSSEAUUX TECHNICAL EVANGELISTMICROSOFT

Twitter: @davroushttp://blogs.msdn.com/davrous

Twitter: @rousseau_michel http://blogs.msdn.com/designmichel

AGENDA

2

1 Retrouver ses productions Blender & 3DSMax sur Babylon.JS

La philosophie de Babylon.JS: la simplicité

33 Quelques unes de nos optimisations

1ère partie

Les exportateurs Blender & 3DS MaxEt la Sandbox

Creation Pipeline

.babylonconverter

.FBX

.OBJ

.FBX

.OBJ

Blender -> Babylon.js: fonctionnalités supportées

Cameras• Name• Position• Target• Fov• Clip start• Clip end• Check

collisions• Gravity• Ellipsoid

Lights• Type (Point,

directional (Sun), Spot, Hemispheric)

• Name• Position• Direction• Spot size• Spot blend • Energy• Diffuse color

• Specular color

Materials & Multi-mat• Name• Ambient color• Diffuse color• Specular color• Specular

hardness• Emissive color• Alpha• Backface culling• Diffuse texture• Ambient texture• Opacity texture• Reflection texture

• Emissive texture• Bump texture

Textures• Name• Associated file• Level• Use alpha• uOffset / voffset• uScale / uScale• uAng / vAng /

Wang• WrapU / WrapV• Coordinates

index

Meshes• Name• Geometry (Positions &

normals)• Position• Rotation• Scaling• Texture coordinates (2

channels)• Vertex colors• Visibility• Check collisions• Billboard• Receive and cast

shadows• Bones (armatures) and

bones' animations• Animations

Module d’exportation parfaitement intégré

• Exportation en 1 click • Web server intégré

• Exportation:– Cameras, lumières,

meshes– Animations & matériaux

standards

DEMODEMO

BLENDER 3D & 3DS MAX

2ème partie

La simplicité de babylon.js en action

DEMODEMO

QUOI DE MIEUX QU’UNE DEMO DE CODE?

3ème partie

Optimisations

Nos plus grosses optimisations

• Optimisation de notre Math.js pour le GC

• Système de cache en amont des appels WebGL

• Über shader qui s’adapte automatique à la plateforme

• Octree

DEMODEMO

DOWNGRADE AUTO SUR L’EXEMPLE FRESNEL

Utilisation d’IndexedDB via un fichier .manifest

• Activez le support offline en créant un fichier .manifest

• Doit être nommé NomDeVotreScene.babylon.manifest

• Supporte les formats .JPG, .PNG, .DDS & .TGA • Par défaut, LoadScene essaie de charger

un .manifest– Une erreur 404 peut donc être levée dans F12, cela est

normal

{ "version“ : 1, "enableSceneOffline" : true, "enableTexturesOffline" : true }

NomDeVotreScene.babylon.manifest

DEMODEMO

TESTONS LE FONCTIONNEMENT D’IDB AVEC F12

Pour construire une experience 100% offline

• Utilisez un fichier .manifest Babylon.js• Combinez le avec les API HTML5 Offline

CACHE MANIFEST # Version 1.0

CACHE: babylon.jshand.minified-1.2.jsindex.htmlScreenshots/heart.jpgScreenshots/omegacrusher.jpgScenes/Heart/Heart.babylon.manifestScenes/SpaceDek/SpaceDek.babylon.manifest

NETWORK:*

HTML5 Cache Manifest

DEMODEMO

SUPPORT OFFLINE COMPLET

Cours gratuit de 8h sur

Microsoft Virtual Academy

01 | 3D on the Web: Understanding the Basics

02 | WebGL Basics

03 | Using Babylon.js for Beginners 04 | Understanding materials and inputs

05 | Game Pipeline Integration with Babylon.js 06 | Loading Assets

07 | Babylon.js: Advanced Features 08 | Special Effects

Questions ?