Amsterdam HTML5 Game Developement Meetup - ThreeDee Media presentation

18
1st Amsterdam HTML5 Game Development Meetup Amsterdam August 7, 2014

description

Introduction to WebGL and ThreeDee Media framework.

Transcript of Amsterdam HTML5 Game Developement Meetup - ThreeDee Media presentation

Page 1: Amsterdam HTML5 Game Developement Meetup - ThreeDee Media presentation

1st Amsterdam HTML5 Game Development Meetup

Amsterdam August 7, 2014

Page 2: Amsterdam HTML5 Game Developement Meetup - ThreeDee Media presentation

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

Page 3: Amsterdam HTML5 Game Developement Meetup - ThreeDee Media presentation

Developing Web Graphics with WebGL

Page 4: Amsterdam HTML5 Game Developement Meetup - ThreeDee Media presentation

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

Page 5: Amsterdam HTML5 Game Developement Meetup - ThreeDee Media presentation

What ≠ WebGL?

Ehh no, it’s not Stereoscopic 3D...

Page 7: Amsterdam HTML5 Game Developement Meetup - ThreeDee Media presentation

What can you do with WebGL?

Game developement

3D AdvertisingData visualization

Product visualization

eCommerce, Websites...

Page 8: Amsterdam HTML5 Game Developement Meetup - ThreeDee Media presentation

WebGL Support

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

Page 9: Amsterdam HTML5 Game Developement Meetup - ThreeDee Media presentation

Who has WebGL

Desktop Smartphone

Source: http://webglstats.com

Page 10: Amsterdam HTML5 Game Developement Meetup - ThreeDee Media presentation

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

Page 11: Amsterdam HTML5 Game Developement Meetup - ThreeDee Media presentation

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

Page 12: Amsterdam HTML5 Game Developement Meetup - ThreeDee Media presentation

Web 3D is finally here!

Adformatie Jan’14

Emerce Feb’14

Apple WWDC June’14!

Page 13: Amsterdam HTML5 Game Developement Meetup - ThreeDee Media presentation

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…

Page 14: Amsterdam HTML5 Game Developement Meetup - ThreeDee Media presentation

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

Page 15: Amsterdam HTML5 Game Developement Meetup - ThreeDee Media presentation

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!

Page 16: Amsterdam HTML5 Game Developement Meetup - ThreeDee Media presentation

TDM Engine 3.1.0 beta release following soon!

Email us to get early access:[email protected]

TDM EngineHTML5 and WebGL based graphics engine