WebGL Paris, session Babylon.js by Michel Rousseau & David Rousset

1. WebGL Paris
Babylon.js

2. Qui sommes-nous?
Geeks, web developers, 3D addicts
DAVID ROUSSET
HTML5 TECHNICAL EVANGELIST
MICROSOFT
MICHEL ROUSSEAU
UX TECHNICAL EVANGELIST
MICROSOFT
Twitter:@davrous
http://blogs.msdn.com/davrous
Twitter:@rousseau_michel
http://blogs.msdn.com/designmichel

3. AGENDA
1 Retrouver ses productions Blender & 3DSMax sur Babylon.JS
2
La philosophie de Babylon.JS: la simplicité
33
Quelques unes de nos optimisations

4. 1ère partie
Les exportateurs Blender & 3DS Max
Et la Sandbox

5. Creation Pipeline
.babylon
converter
.FBX
.OBJ
.FBX
.OBJ

6. 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

7. Module d’exportation parfaitement intégré
• Exportation en 1 click
• Web server intégré
• Exportation:
– Cameras, lumières, meshes
– Animations & matériaux standards

8. BLENDER 3D & 3DS MAX
DEMO

9. 2ème partie
La simplicité de babylon.js en action

10. QUOI DE MIEUX QU’UNE DEMO DE CODE?
DEMO

11. 3ème partie
Optimisations

12. 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

13. DOWNGRADE AUTO SUR L’EXEMPLE FRESNEL
DEMO

14. 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

15. TESTONS LE FONCTIONNEMENT D’IDB AVEC F12
DEMO

16. 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.js
hand.minified-1.2.js
index.html
Screenshots/heart.jpg
Screenshots/omegacrusher.jpg
Scenes/Heart/Heart.babylon.manifest
Scenes/SpaceDek/SpaceDek.babylon.manifest
NETWORK:
*
HTML5 Cache Manifest

17. SUPPORT OFFLINE COMPLET
DEMO

18. 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

19. Questions ?