Introduction to WebGL - 1st WebGL meetup Amsterdam
2 likes1,054 views
1. The document summarizes a meetup about developing graphics with WebGL. It discusses WebGL and how it allows 3D rendering in browsers using OpenGL ES and JavaScript. 2. It then provides information about the company ThreeDee Media and their WebGL framework and tools. Examples of what can be done with WebGL are shown. 3. The document outlines how WebGL works, integrating 3D graphics with HTML5 pages using WebGL contexts on canvas elements. It discusses why one would use WebGL for rich internet experiences with hardware-accelerated 3D.
Introduction to WebGL - 1st WebGL meetup Amsterdam
- 1. 1st OpenGL and WebGL Meetup Khronos Benelux Chapter Amsterdam February 13, 2014
- 2. Developing Web Graphics with WebGL
- 3. About us • ThreeDee Media Framework and tools for creating WebGL rich content • • • • Jurjen de Wal – Founder/Managing Director Maarten Steur – Co-founder/Platform Architect Maarten Heinstra – 3D Artist Trevor van Hoof – Tools programmer
- 4. What is WebGL? WebGL: real-time 3D rendering • • • • • • OpenGL ES in a browser JavaScript API bindings Supported in nearly all modern browsers Supported on many devices Shipped since early 2011 Standard is maintained by Khronos Group
- 5. What ≠ WebGL? Ehh no, it’s not Stereoscopic 3D...
- 7. What can you do with WebGL? Source: http://www.awwwards.com/22-experimental-webgl-demo-examples.html
- 9. Who has WebGL Personal computer Smartphone Source: http://webglstats.com
- 10. How WebGL works WebGL is a JavaScript drawing API • Draw to HTML5 canvas element using a (“webgl”) context • • • • • Low-level drawing – buffers, primitives, textures and shaders Accelerated by graphics hardware (GPU) Can draw 2D as well as 3D graphics Integrates seamlessly with other page content There is no file format; no markup language; no DOM
- 11. Why use WebGL? • • • • • • • Rich internet experiences with hardware-accelerated 3D No downloads, no plugins Complete integration with HTML5 page elements Cross-platform Rapid development with the right tools Performance – it’s faster than 2D canvas Royalty-free - no licensing issues
- 12. Web 3D is finally here! • WebGL is solid for developing games and other rich content • OpenGL ES under the hood (it’s what’s running on your phone and tablet) • Huge development, testing and conformance effort by browser vendors • Strong standards group maintaining it (www.khronos.org) • In most browsers and growing number of devices • A few enhancements will help…
- 13. Web 3D is finally here! Adformatie Jan’14 Emerce Feb’14
- 14. What do you need to get started? 1. Rendering engine 2. Application functionality 3. Content creation pipeline - 3D tools e.g. Autodesk Maya, Blender WebGL Game Engines & Tools • • • • • • • • ThreeDee Media GooTechnologies PlayCanvas Turbulenz Three.js Verold Studio Babylon.js (Google) Scene.js
- 16. TDM Engine HTML5 and WebGL based graphics engine Engine Features: • • • • • • • Modular Animation (key frame, skeletal) Input (Keyboard, Mouse, Accelerometer, Touch, etc) Dynamic lighting Post-effects Integrate external libraries (Physics, Sound) Documentation & Resources
- 17. TDM Editor A 3D scene editor for the web • • • • • • • Import 3D assets (drag-drop files) Assemble 3D scene Adjust materials, textures, lighting, cameras Add post-effects Default Shaders Publish & share to the web Powered by TDM Engine
- 18. WebGL (Re)sources • http://www.khronos.org/webgl/ • http://learningwebgl.com/blog/ • http://tonyparisi.wordpress.com/ @pyalot @mrdoob (Three.js) @alteredq @auradeluxe @Tojiro
- 19. Interested in building your own 3D Game? @ThreeDeeMedia [email protected] www.threedeemedia.com Demo time!
Editor's Notes
- #4: WebGL will have a bid impact on the web.We’ve been working on WebGL for the last 2 yearsWe’re building tools to create application and games.Will show some demo’s on the engine we’re building.
- #5: At its most basic level, WebGL (Web Graphics Library) is a JavaScript extension that uses the processing power of your Graphic Processing Unit (GPU) to create 3D graphics that update in real time. WebGL is bringing hardware accelerated 3D graphics to modern web browsers. This means you can launch any rich 3D experience in your browser without the need for installing plugins or additional software.WebGL is managed by the not for profit industry consortium The Khronos Group. It is an open technology backed by several enterprise giants such as Apple, Google, Mozilla, Opera, AMD, and NVIDIA.
- #7: Virtual Reality Modeling Language (VRML) is een markup-taal waarin driedimensionale objecten kunnen worden beschreven, speciaal ontworpen voor het wereldwijde web. Door middel van een VRML-browserplug-in kan het object dan van alle kanten worden bekeken, geroteerd, in- en uitgezoomd worden enzovoort. Dit maakt het mogelijk driedimensionale scènes via het internet te presenteren zonder dat hier extreem veel gegevens voor moeten worden verstuurd. VRML heeft een opvolger, X3D, die bedoeld is om VRML te vervangen.
- #8: Game developement, Advertising (3D mobile advertising), Data visualization, Products, eCommerce, Websites.
- #10: Tablet, Games consoles Smart TV
- #11: Libraries and frameworks are key to fast ramp up and productive developmentWebGL is a Javascript layer access to the graphics card, as you would have when building native apps
- #12: Cross platfrom (sort off)
- #13: Web3D is here today – you can start building commercial applicationsIts is not only for big game / development studio’s – it for you.Frameworks like what we’re building is making is accessible.Tools and frameworks are young and evolvingExport from pro tools a bit shakyStill not ubiquitous on mobileDevice input – mouse lock API comingAudio and video API chaosFormats and delivery - streaming, compression, binaryhttp://www.slideshare.net/KhaledMAMOU/gl-tf-siggraph2013
- #17: October 2010 – TodayX3D > XML3D > Three.js > TDM.jsThree.js bottlenecksHet voornaamste probleem met Three.js zat in de materials.Het had een aantal built-in materials en een custom shader material en ze werkten allemaal weer net even wat anders. Dit wouden we gelijk trekken, wat wat lastiger was dan gehoopt. Ook de post-processors en controls werkten allemaal net weer anders. Er waren wel mogelijkheden om te importeren, maar het opslaan van een scene was nog niet mogelijk. Kortom, veel mogelijkheden, maar weinig standarizatie.
- #18: Arrange your 3D models, adjust materials, textures, lighting, cameras, environment, and post effects to create exactly the scene you want for your game or app.3D scene creation in WebGL, allowing non-technical users to create every aspect of an interactive 3D scene, such as cameras, lights, meshes, materials etc.lab.threedeemedia.com/editor/target/classes/editor.html
- #20: Questions?lab.threedeemedia.com/tutorial/TD01_Build/Build/index.htmllab.threedeemedia.com/editor/target/classes/editor.html