Babylon.js WebGL Paris
description
Transcript of 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 ?