"Aujourd’hui, la meilleure solution pour afficher du contenu 3D dans une page web est d’utiliser la technologie WebGL. KEYVEO utilise cette technologie basée sur le WebGL avec le moteur open source Babylon.js, qui vous permet de créer très facilement un monde virtuel à intégrer dans un site web. Fluide, légère, sans plug-in, cette technologie vous ouvre un champs des possibles dont seule votre imagination est la limite ! Parce qu'une démo vaut toutes les explications, venez découvrir comment créer une scène virtuelle 3D, en live, avec Babylon.js. Enfin, un temps d'échange nous permettra de répondre à vos questions autour de la 3D sur le web."

1. La 3D sur le web avec Babylon.js pas à
pas

2. @temechon – www.pixelcodr.com
JULIAN CHENARD
Chef de projet technique chez Keyveo
N° 2

3. Qu’est-ce que le WebGL ?

4. Le WebGL ?
N° 4

5. Le WebGL ?
Des maths…
N° 5

6. Le WebGL ?
N° 6

7. Help !

8. Environ 2 versions par an
94 contributeurs
44 releases
4 312+ commits
59000+ lignes de code TypeScript
Plus de 150 fichiers TypeScript
Environ 950 forks
Une librairie minifiée, compressée et optimisée de 1.28MB
Un forum actif, une doc vivante
Babylon.js à la rescousse !
N° 8

9. Le tout GRATUIT et OPEN-SOURCE !
Babylon.js à la rescousse !
N° 9

10. Comment l’utiliser
Hello World !
N° 10
engine.runRenderLoop(() => { scene.render(); });
<script src=‘babylon.js’></script>
let engine = new BABYLON.Engine(canvas, true);
let camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 2, BABYLON.Vector3.Zero(), scene);
let light = new BABYLON.HemisphericLight("Omni", new BABYLON.Vector3(0,1, 0), scene);
let box = BABYLON.Mesh.CreateBox(“box", 1, scene);
camera.attachControl(engine.getRenderingCanvas());
let scene = new BABYLON.Scene(engine);

11. Comment l’utiliser
Hello World !
N° 11

12. N° 12
Démo time !

13. http://www.babylonjs-playground.com/#RIXWT#0
Playground
Ou comment tester rapidement
N° 13

14. Fonctionnalités

15. Fonctionnalités
Vous avez dit fonctionnalités ?
N° 15
Complete scene graph with lights, cameras, materials and
meshes
Collisions engine
Physics engine (thanks to cannon.js and oimo.js)
Scene picking
Antialiasing
Animations engine
Particles Systems
Sprites and 2D layers
Frustum clipping
Sub-meshes clipping
Hardware scaling
Selection octrees
Offline mode (Assets are saved locally to prevent reloading
them)
Incremental loading
Binary format
Hardware accelerated instances
Diffuse lightning and texture
Ambient lightning and texture
Specular lightning
Opacity texture
Reflection texture (Spheric, planar, cubic and projection)
Mirror texture
Emissive texture
Specular texture
Bump texture
Up to 4 lights (point, directional, spot, hemispheric)
Custom materials
Skybox
Vertex color
4 bones per vertex
Fresnel term
Fog
Alpha blending
Alpha testing
Billboarding
Fullscreen mode
Shadow Maps and Variance Shadow Maps
Rendering layers
Post-processes (blur, refraction, black'n'white, fxaa,
Lens flares
Multi-views
Render target textures
Dynamic textures (canvas)
Video textures
Compressed (DDS) textures
Targa textures
Arc rotate camera
Free camera
Touch camera
Virtual Joysticks camera
Oculus Rift camera
Gamepad camera
Mesh cloning
Dynamic meshes
Height maps
Bones
Constructive solid geometries
Babylon scene file can be converted from .OBJ, .FBX, .MXB
Exporters (Blender ,Cheetah3d, 3ds Max, Unity …)
Support for drag'n'drop
Support du WebVR
Bloom
Canvas2D – Moteur 2D
Reflection probes
Support des squelettes et bones avec animations
Support left-handed mode and right-handed mode
Compilation avec optimize-js for faster load
….

16. Documentation
N° 16

17. Travailler avec des assets 3D

18. Exporters
N° 18

19. Sandbox
N° 19

20. N° 20
Démo time !

21. DavidCatuhe
@deltakosh
DavidRousset
@davrous
Michel Rousseau
@rousseau_michel
Etienne Margraff
@meulta
Loïc Baumann
@loicbaumann
Jérôme Bousquié
@jbousquie
RaananWeber
@RaananW
Julien Moreau-Mathis
@luaacro
Personnes à suivre
N° 21

22. N° 22

23. @microsoftfrance @Technet_France @msdev_fr
@temechon
N° 23

24. Notez cette session
Et tentez de gagner un Surface Book
Doublez votre chance en répondant aussi
au questionnaire de satisfaction globale
* Le règlement est disponible sur demande au commissariat général de l’exposition. Image non-contractuelle