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

Amsterdam HTML5 Game Developement Meetup - ThreeDee Media presentation

Jan 15, 2015

Download

Software

ThreeDee Media

Introduction to WebGL and ThreeDee Media framework.
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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