La 3D sur le web avec Babylon.js pas pas
La 3D sur le web avec Babylon.js pas pas
1
@temechon www.pixelcodr.comJULIAN CHENARDChef de projet
technique chez Keyveo
N 2
2
Quest-ce que le WebGL ?
3
Le WebGL ?
N 4
4
Le WebGL ?Des maths
N 5
5
Le WebGL ?
N 6
6
Help !
7
Environ 2 versions par an94 contributeurs44 releases 4 312+
commits59000+ lignes de code TypeScriptPlus de 150 fichiers
TypeScript Environ 950 forks Une librairie minifie, compresse et
optimise de 1.28MBUn forum actif, une doc vivanteBabylon.js la
rescousse !
N 8
8
Le tout gratuit et open-source !Babylon.js la rescousse !
N 9
9
Comment lutiliserHello World !N 10engine.runRenderLoop(() =>
{ scene.render(); });
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);
10
Comment lutiliserHello World !N 11
11
N 12Dmo time !
12
http://www.babylonjs-playground.com/#RIXWT#0PlaygroundOu comment
tester rapidementN 13
13
Fonctionnalits
14
FonctionnalitsVous avez dit fonctionnalits ?N 15Complete scene
graph with lights, cameras, materials and meshesCollisions
enginePhysics engine (thanks to cannon.js and oimo.js)Scene
pickingAntialiasingAnimations engineParticles SystemsSprites and 2D
layersFrustum clippingSub-meshes clippingHardware scalingSelection
octreesOffline mode (Assets are saved locally to prevent reloading
them)Incremental loadingBinary formatHardware accelerated
instancesDiffuse lightning and textureAmbient lightning and
textureSpecular lightningOpacity textureReflection texture
(Spheric, planar, cubic and projection)Mirror textureEmissive
textureSpecular textureBump textureUp to 4 lights (point,
directional, spot, hemispheric)Custom materialsSkyboxVertex color4
bones per vertexFresnel termFogAlpha blendingAlpha
testingBillboardingFullscreen modeShadow Maps and Variance Shadow
MapsRendering layersPost-processes (blur, refraction,
black'n'white, fxaa, customs...)Lens flaresMulti-viewsRender target
texturesDynamic textures (canvas)Video texturesCompressed (DDS)
texturesTarga texturesArc rotate cameraFree cameraTouch
cameraVirtual Joysticks cameraOculus Rift cameraGamepad cameraMesh
cloningDynamic meshesHeight mapsBonesConstructive solid
geometriesBabylon scene file can be converted from .OBJ, .FBX,
.MXBExporters (Blender ,Cheetah3d, 3ds Max, Unity )Support for
drag'n'dropSupport du WebVRBloomCanvas2D Moteur 2DReflection
probesSupport des squelettes et bones avec animationsSupport
left-handed mode and right-handed modeCompilation avec optimize-js
for faster load.
15
Documentation
N 16
16
Travailler avec des assets 3D
17
Exporters
N 18
18
SandboxN 19
19
N 20Dmo time !
20
David Catuhe@deltakosh
David Rousset@davrous
Michel Rousseau@rousseau_michel
Etienne Margraff@meulta
Loc Baumann@loicbaumannJrme Bousqui@jbousquieRaanan
Weber@RaananWJulien Moreau-Mathis@luaacro
Personnes suivre
N 21
21
N 22
22
@temechonN 23
@microsoftfrance @Technet_France @msdev_fr
23
Notez cette sessionEt tentez de gagner un Surface BookDoublez
votre chance en rpondant aussi au questionnaire de satisfaction
globale* Le rglement est disponible sur demande au commissariat
gnral de lexposition. Image non-contractuelle
24
