WebGL - An Overview

WebGLAn Overview

Dienstag, 20. März 12

WebGLAn Overview

and awesome demos!!


Jens [email protected]

github.com/jensarps

uxebu.comDienstag, 20. März 12

- Introduction- Technology- History- Mobile Browsers- Use Cases- Demos


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 card's Graphics Processing Unit (GPU).

What is this?

http://en.wikipedia.org/wiki/WebGL


http://en.wikipedia.org/wiki/Software_library

http://en.wikipedia.org/wiki/Software_library

http://en.wikipedia.org/wiki/JavaScript

http://en.wikipedia.org/wiki/JavaScript

http://en.wikipedia.org/wiki/3D_graphics

http://en.wikipedia.org/wiki/3D_graphics

http://en.wikipedia.org/wiki/Web_browser

http://en.wikipedia.org/wiki/Web_browser

http://en.wikipedia.org/wiki/Graphics_Processing_Unit

http://en.wikipedia.org/wiki/Graphics_Processing_Unit



Use JavaScript to program the GPU and display output in a browser,

without the use of plugins.

What is this?


Enable 3D applications in the web.

What is this?


WebGL is an Open Standard

What is this?

(Maintained by the Khronos Group)


Technology


Technology

JavaScript + OpenGL

http://en.wikipedia.org/wiki/OpenGL

(OpenGL is the non-Microsoft standard for 3D programming)




Technology

OpenGL Shading Language

http://en.wikipedia.org/wiki/GLSL

(Not really JavaScript)




History


History

Chrome: Feb 2011Firefox: Mar 2011


History

Chrome: Feb 2011Firefox: Mar 2011Opera: Feb 2011


History

Chrome: Feb 2011Firefox: Mar 2011Opera: Feb 2011Safari: Now


History

Chrome: Feb 2011Firefox: Mar 2011Opera: Feb 2011Safari: NowIE: Never


History

Q: 3D before 2011?

A: No.


History

Q: 3D before 2011?

A: No Plugins.


Mobile Browsers


Mobile Browsers

Firefox mobile: yesAndroid webkits: someMobile Safari: Only Ads*Chrome Android: noOpera mobile: no


Mobile Browsers

Firefox mobile: yesAndroid webkits: someMobile Safari: Only Ads*Chrome Android: noOpera mobile: no

(But don‘t ask about performance)


Do we need it?


Do we need it?

Content types in the web:

Consumption Interaction

Text centric

Visual centric


Do we need it?

Content types in the web:

Consumption Interaction

Text centric not at all still, no

Visual centric yes definitely!


Do we need it?

#1: Presentation focused websites


Do we need it?

#2: Gaming


Do we need it?

#2: Gaming

($$$)


Do we need it?

#3: Art


Demos


Demos

Flight of the Navigator

http://videos.mozilla.org/serv/mozhacks/flight-of-the-navigator/

The first large WebGL Demo, by Mozilla.




Demos

Rome

http://www.ro.me/

Commercial project to present the artists Danger Mouse and Norah

Jones.


http://www.ro.me/

http://www.ro.me/

Demos

Quake level demo

http://media.tojicode.com/q3bsp/

One of the first level ports from a commercial game.




Demos

Team Fortress 2

Sadly, video only due to copyrighted material.

http://www.youtube.com/watch?v=DQrC5YLKFUY




Demos

Doom like map

http://www.glge.org/demos/leveldemo/




Demos

Wloom

http://plsw.net/webgl/wloom6/shooter.htm




Demos

RavenJS

Gothic II port

http://www.youtube.com/watch?v=OWy96m8lo-U




Perspective


Perspective

Performance will increase


Perspective

Other specs/features will rise – e.g. NaCl, WebCL


Perspective

Spec will increase – e.g. 3D positional Audio


Perspective

WebGL will become usable on mobile devices


Libraries


Libraries

three.js

https://github.com/mrdoob/three.js/

http://mrdoob.github.com/three.js/






Libraries

GLGE

https://github.com/supereggbert/GLGE

http://www.glge.org/






Thanks!

@jensarpsjensarps.de

github.com/jensarps


WebGL - An Overview

Technology

Transcript of WebGL - An Overview