Unleash 3D rendering with WebGL and Microsoft Edge

davca@microsoft.com - @deltakosh - http://aka.ms/davca

DAVIDCATUHEPrincipal Program ManagerIE / Open Web StandardsDeveloper Experience and Evangelism

LET’S STARTFROM SCRATCH

WebGL is…• A JavaScript API• Based on OpenGL ES 2.0• Standardized by Kronos Group

Using WebGL directly• You need to handle everything except the

rendering• You have to:

– Create shaders code– Create geometry and topology– Handle textures and resources management– Manage the render loop

FIRST CONTACTHello world WebGL

Wireframing

Rasterization

Flat Shading

Gouraud Shading

Texture mapping

An average of 1 version per month 44 contributors 36 releases 1255 commits17000+ lines of code More than 140 files of code More than 474 forks A bandwidth of 1 TB per month for the website 1.4GB (Code and samples)

BABYLON.JS

How to use BABYLON.JS?Open source project (Available on Github)

http://www.babylonjs.comhttp://cdn.babylonjs.com/2-0/babylon.js

How to use it? Include one file and you’re ready to go!

To start Babylon.js, you’ve just need to create an engine object:

<script src="babylon.js"></script>

var engine = new BABYLON.Engine(canvas, true);

How to use BABYLON.JS?Babylon.js is a scene graph: All complex features are abstracted for YOU!

Handling rendering can be done in one line:

var scene = new BABYLON.Scene(engine);

var camera = new BABYLON.FreeCamera("Camera", new BABYLON.Vector3(0, 0, -10), scene);var light0 = new BABYLON.PointLight("Omni0", new BABYLON.Vector3(0, 100, 100), scene);var sphere = BABYLON.Mesh.createSphere("Sphere", 16, 3, scene);

engine.runRenderLoop(function() { scene.render(); });

FIRST CONTACTHello world Babylon.js

Learn & Experiment

Playground CYOS

Working with Assets

Blender 3D 3DS Max Unity 5

.BABYLON

Exporters

.Babylon Formats.B

AB

YLO

N One scene fileJSON format

.INCR

EMEN

TAL.BA

BYLO

N One scene fileOne data file per meshJSON format for both

.BINAR

Y.BA

BYLO

N One scene fileOne data file per mesh.JSON format for sceneBINARY data for meshData loaded directly to GPU

Espilit demo: 22MB / 4MB (gzip)

Espilit demo: 22MB / 4MB (gzip)

Espilit demo: 9MB / 3MB (gzip)

Touch

Camera based on pointer events

Device Orientatio

nCamera

based on Device

Orientation API

Virtual JoysticksUsing pointer events, this

camera generates

two joysticks on

top of the scene

Anaglyph

Use this camera with Red/Green

glasses

VR

Control camera

orientation with:

Oculus RiftWebVR

CardBoard

Gamepad

Use your gamepad to control your

camera

Playing with inputs

COLLISIONS & PHYSICS

OTHER COOL STUFFDebug layer

OTHER COOL STUFFHardware instances and bones

Did you say features?Complete scene graph with lights, cameras, materials and meshesCollisions enginePhysics engine (thanks to cannon.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 (points, directionals, spots, hemispherics)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-views

Render target texturesDynamic textures (canvas)Video texturesCompressed (DDS) texturesArc rotate cameraFree cameraTouch cameraVirtual Joysticks cameraOculus Rift cameraGamepad cameraMesh cloningDynamic meshesHeight mapsBonesConstructive solid geometriesBabylon scene file can be converted from .OBJ, .FBX, .MXBExporter for BlenderExporter for Cheetah3dExporter for 3ds MaxSupport for drag'n'drop….

USEFUL LINKS

http://www.babylonjs.com

http://www.babylonjs.com/playground

http://www.babylonjs.com/cyos

https://doc.babylonjs.com

http://www.html5gamedevs.com/forum/16-babylonjs

THANK

YOU!