Amsterdam HTML5 Game Developement Meetup - ThreeDee Media presentation
Download as PPTX, PDF0 likes680 views
This document summarizes a meetup about HTML5 game development with WebGL. It introduces ThreeDee Media, which develops tools like the TDM Engine for WebGL game creation. It explains what WebGL is, how it works, browser support, and how to get started with WebGL game development using engines, content creation tools, and resources provided. The document conveys that WebGL allows for hardware-accelerated 3D graphics in browsers without plugins, and its support in iOS 8 marks a tipping point for web-based 3D games.
Amsterdam HTML5 Game Developement Meetup - ThreeDee Media presentation
- 1. 1st Amsterdam HTML5 Game Development Meetup Amsterdam August 7, 2014
- 2. Who are we? Framework and tools for creating WebGL rich content Founded January 2012, Haarlem The Netherlands Jurjen de Wal – Managing Director Maarten Steur – Platform Architect Maarten Heinstra – 3D Artist Trevor van Hoof – Tools programmer www.threedeemedia.com
- 3. Developing Web Graphics with WebGL
- 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...
- 6. History of WebGL Source: https://github.com/yomotsu/figures-to-explain-webgl-threejs
- 7. What can you do with WebGL? Game developement 3D Advertising Data visualization Product visualization eCommerce, Websites...
- 9. Who has WebGL Desktop 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! Adformatie Jan’14 Emerce Feb’14 Apple WWDC June’14!
- 13. 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 • Apple’s announced support for WebGL in iOS 8 marks the tipping point! • A few enhancements will help…
- 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
- 15. TDM Engine HTML5 and WebGL based graphics engine • Entity-component system • Animation • Input (keyboard, mouse, touch) • Dynamic lighting • Post-effects • Support for external libraries (physics, sound, monetization) • Documentation & tutorials Our game engine gives you all the features you need to make stunning cross platform 3D web games!
- 16. TDM Engine 3.1.0 beta release following soon! Email us to get early access: info@threedeemedia.com TDM Engine HTML5 and WebGL based graphics engine
Editor's Notes
- #4: WebGL will have a bid impact on the web. We’ve been working on WebGL for the last 2 years We’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 development WebGL 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 applications Its is not only for big game / development studio’s – it for you. Frameworks like what we’re building is making is accessible. Suddenly WebGL is the largest cross browser gaming platform!
- #14: Device input – mouse lock API coming Audio and video API chaos Formats and delivery - streaming, compression, binary WebGL is the largest 3D gaming platform out there. Tools and frameworks are young and evolving Export from pro tools a bit shaky
- #16: TDM Engine is built using the entity-component-system pattern. This avoids complex object hierarchies, provides excellent composition capabilities and is easily extensible. http://docs.threedeemedia.com/jsdoc/index.html
- #20: http://lab.threedeemedia.com/jsdoc/index.html