1st Amsterdam HTML5 Game Development Meetup
Amsterdam August 7, 2014
Who are we?
Framework and tools for creating WebGL rich content
Founded January 2012, HaarlemThe Netherlands
Jurjen de Wal – Managing DirectorMaarten Steur – Platform Architect
Maarten Heinstra – 3D ArtistTrevor van Hoof – Tools programmer
www.threedeemedia.com
Developing Web Graphics with WebGL
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
What ≠ WebGL?
Ehh no, it’s not Stereoscopic 3D...
History of WebGL
Source: https://github.com/yomotsu/figures-to-explain-webgl-threejs
What can you do with WebGL?
Game developement
3D AdvertisingData visualization
Product visualization
eCommerce, Websites...
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
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
Web 3D is finally here!
Adformatie Jan’14
Emerce Feb’14
Apple WWDC June’14!
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…
What do you need to get started?1. Rendering engine2. Application functionality3. 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
TDM EngineHTML5 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!
TDM Engine 3.1.0 beta release following soon!
Email us to get early access:[email protected]
TDM EngineHTML5 and WebGL based graphics engine
WebGL Resources
http://www.khronos.org/webgl/http://learningwebgl.com/blog/http://tonyparisi.wordpress.com/
@ThreeDeeMedia@pyalot@mrdoob@alteredq@auradeluxe@Tojiro
Stellar StrongholdsMini-Game