Amsterdam HTML5 Game Developement Meetup - ThreeDee Media presentation

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...

WebGL Support

Source: http://beta.caniuse.com/#feat=webgl

Who has WebGL

Desktop Smartphone

Source: http://webglstats.com

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:info@threedeemedia.com

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