SlideShare a Scribd company logo

Unleash 3D rendering with WebGL and Microsoft Edge

•Download as PPTX, PDF•
•
David Catuhe
David Catuhe

This document provides an overview and introduction to WebGL and Babylon.js for 3D rendering on the web. It discusses how WebGL requires handling all rendering aspects directly, while Babylon.js abstracts this through a scene graph and handles rendering with one line of code. It then demonstrates a basic "hello world" example in both WebGL and Babylon.js. The document also lists many features supported by Babylon.js, such as colliders, physics, animations, particles, textures, cameras and more for building 3D games and scenes on the web.

1 of 27
Unleash 3D rendering with WebGL and Microsoft Edge
davca@microsoft.com - @deltakosh - http://aka.ms/davca DAVIDCATUHE Principal ProgramManager IE /Open Web Standards Developer Experience and Evangelism
LET’S START FROM 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 CONTACT Hello world WebGL
Wireframing
Rasterization
Flat Shading
Gouraud Shading
Texture mapping
Unleash 3D rendering with WebGL and Microsoft Edge
Unleash 3D rendering with WebGL and Microsoft Edge
An average of 1 version per month 44 contributors 36 releases 1255 commits 17000+ 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.com http://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 CONTACT Hello world Babylon.js
Learn & Experiment Playground CYOS
Working with Assets Blender 3D 3DS Max Unity 5 .BABYLON Exporters
.Babylon Formats.BABYLON One scene file JSON format .INCREMENTAL.BABYLON One scene file One data file per mesh JSON format for both .BINARY.BABYLON One scene file One data file per mesh .JSON format for scene BINARY data for mesh Data 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 Orientation Camera based on Device Orientation API Virtual Joysticks Using 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 Rift WebVR CardBoard Gamepad Use your gamepad to control your camera Playing with inputs
COLLISIONS &PHYSICS
OTHER COOL STUFF Debug layer
OTHER COOL STUFF Hardware instances and bones
Did you say features? Complete scene graph with lights, cameras, materials and meshes Collisions engine Physics engine (thanks to cannon.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 (points, directionals, spots, hemispherics) 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, customs...) Lens flares Multi-views Render target textures Dynamic textures (canvas) Video textures Compressed (DDS) 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 Exporter for Blender Exporter for Cheetah3d Exporter for 3ds Max Support 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!

More Related Content

Unleash 3D rendering with WebGL and Microsoft Edge

  • 1. Unleash 3D rendering with WebGL and Microsoft Edge
  • 2. davca@microsoft.com - @deltakosh - http://aka.ms/davca DAVIDCATUHE Principal ProgramManager IE /Open Web Standards Developer Experience and Evangelism
  • 4. WebGL is… • A JavaScript API • Based on OpenGL ES 2.0 • Standardized by Kronos Group
  • 5. 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
  • 14. An average of 1 version per month 44 contributors 36 releases 1255 commits 17000+ 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
  • 15. How to use BABYLON.JS? Open source project (Available on Github) http://www.babylonjs.com http://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);
  • 16. 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(); });
  • 19. Working with Assets Blender 3D 3DS Max Unity 5 .BABYLON Exporters
  • 20. .Babylon Formats.BABYLON One scene file JSON format .INCREMENTAL.BABYLON One scene file One data file per mesh JSON format for both .BINARY.BABYLON One scene file One data file per mesh .JSON format for scene BINARY data for mesh Data loaded directly to GPU Espilit demo: 22MB / 4MB (gzip) Espilit demo: 22MB / 4MB (gzip) Espilit demo: 9MB / 3MB (gzip)
  • 21. Touch Camera based on pointer events Device Orientation Camera based on Device Orientation API Virtual Joysticks Using 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 Rift WebVR CardBoard Gamepad Use your gamepad to control your camera Playing with inputs
  • 24. OTHER COOL STUFF Hardware instances and bones
  • 25. Did you say features? Complete scene graph with lights, cameras, materials and meshes Collisions engine Physics engine (thanks to cannon.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 (points, directionals, spots, hemispherics) 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, customs...) Lens flares Multi-views Render target textures Dynamic textures (canvas) Video textures Compressed (DDS) 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 Exporter for Blender Exporter for Cheetah3d Exporter for 3ds Max Support for drag'n'drop ….

Editor's Notes

  1. Opening demo with Mansion
  2. Create a simple project Add reference to Babylon.js Start with a really simple scene (camera, light, sphere) Then add a material and a bump texture
  3. Use the right Spartan logo here
  4. Step 0 – step 4
  5. Step 0 – step 4
  6. Select code from Playground and copy/paste to previous page
  7. Export v8 from 3dsmax Export from Blender
  8. Show difference on file
  9. Exemple de cameras Step 8 – 1 Step 8 - 2
  10. Step 9 http://www.babylonjs.com/playground/?9
  11. Debug layer
  12. Debug layer