Unleash 3D rendering with WebGL and Microsoft Edge
-
Upload
david-catuhe -
Category
Software
-
view
248 -
download
2
Transcript of Unleash 3D rendering with WebGL and Microsoft Edge
Unleash 3D rendering with WebGL and Microsoft Edge
[email protected] - @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!