WebGL - An Overview

WebGL An OverviewDienstag, 20. März 12

WebGL An Overview and awesome demos!!Dienstag, 20. März 12

Jens Arps @jensarps jensarps.de github.com/jensarps uxebu.comDienstag, 20. März 12

- Introduction - Technology - History - Mobile Browsers - Use Cases - DemosDienstag, 20. März 12

What is this?Dienstag, 20. März 12

What is this? WebGL (Web-based Graphics Library) is a software library that extends the capability of the JavaScript programming language to allow it to generate interactive 3D graphics within any compatible web browser. WebGL code executes on a computer display cards Graphics Processing Unit (GPU). http://en.wikipedia.org/wiki/WebGLDienstag, 20. März 12

What is this? Use JavaScript to program the GPU and display output in a browser, without the use of plugins.Dienstag, 20. März 12

What is this? Enable 3D applications in the web.Dienstag, 20. März 12

What is this? WebGL is an Open Standard (Maintained by the Khronos Group)Dienstag, 20. März 12

TechnologyDienstag, 20. März 12

Technology JavaScript + OpenGL (OpenGL is the non-Microsoft standard for 3D programming) http://en.wikipedia.org/wiki/OpenGLDienstag, 20. März 12

Technology OpenGL Shading Language (Not really JavaScript) http://en.wikipedia.org/wiki/GLSLDienstag, 20. März 12

HistoryDienstag, 20. März 12

History Chrome: Feb 2011 Firefox: Mar 2011Dienstag, 20. März 12

History Chrome: Feb 2011 Firefox: Mar 2011 Opera: Feb 2011Dienstag, 20. März 12

History Chrome: Feb 2011 Firefox: Mar 2011 Opera: Feb 2011 Safari: NowDienstag, 20. März 12

History Chrome: Feb 2011 Firefox: Mar 2011 Opera: Feb 2011 Safari: Now IE: NeverDienstag, 20. März 12

History Q: 3D before 2011? A: No.Dienstag, 20. März 12

History Q: 3D before 2011? A: No Plugins.Dienstag, 20. März 12

Mobile BrowsersDienstag, 20. März 12

Mobile Browsers Firefox mobile: yes Android webkits: some Mobile Safari: Only Ads* Chrome Android: no Opera mobile: noDienstag, 20. März 12

Mobile Browsers Firefox mobile: yes Android webkits: some Mobile Safari: Only Ads* Chrome Android: no Opera mobile: no (But don‘t ask about performance)Dienstag, 20. März 12

Do we need it?Dienstag, 20. März 12

Do we need it? Content types in the web: Consumption Interaction Text centric Visual centricDienstag, 20. März 12

Do we need it? Content types in the web: Consumption Interaction Text centric not at all still, no Visual centric yes deﬁnitely!Dienstag, 20. März 12

Do we need it? #1: Presentation focused websitesDienstag, 20. März 12

Do we need it? #2: GamingDienstag, 20. März 12

Do we need it? #2: Gaming ($$$)Dienstag, 20. März 12

Do we need it? #3: ArtDienstag, 20. März 12

DemosDienstag, 20. März 12

Demos Flight of the Navigator http://videos.mozilla.org/serv/mozhacks/ﬂight-of-the-navigator/ The ﬁrst large WebGL Demo, by Mozilla.Dienstag, 20. März 12

Demos Rome http://www.ro.me/ Commercial project to present the artists Danger Mouse and Norah Jones.Dienstag, 20. März 12

Demos Quake level demo http://media.tojicode.com/q3bsp/ One of the ﬁrst level ports from a commercial game.Dienstag, 20. März 12

Demos Team Fortress 2 http://www.youtube.com/watch?v=DQrC5YLKFUY Sadly, video only due to copyrighted material.Dienstag, 20. März 12

Demos Doom like map http://www.glge.org/demos/leveldemo/Dienstag, 20. März 12

Demos Wloom http://plsw.net/webgl/wloom6/shooter.htmDienstag, 20. März 12

Demos RavenJS http://www.youtube.com/watch?v=OWy96m8lo-U Gothic II portDienstag, 20. März 12

PerspectiveDienstag, 20. März 12

Perspective Performance will increaseDienstag, 20. März 12

Perspective Other specs/features will rise – e.g. NaCl, WebCLDienstag, 20. März 12

Perspective Spec will increase – e.g. 3D positional AudioDienstag, 20. März 12

Perspective WebGL will become usable on mobile devicesDienstag, 20. März 12

LibrariesDienstag, 20. März 12

Libraries three.js https://github.com/mrdoob/three.js/ http://mrdoob.github.com/three.js/Dienstag, 20. März 12

Libraries GLGE https://github.com/supereggbert/GLGE http://www.glge.org/Dienstag, 20. März 12

Thanks! @jensarps jensarps.de github.com/jensarpsDienstag, 20. März 12

WebGL - An Overview

by Jens Arps

Accessibility

Categories

Upload Details

Usage Rights

Statistics

WebGL - An Overview Presentation Transcript