WebGLAn Overview

Dienstag, 20. März 12

WebGLAn Overview

and awesome demos!!

Dienstag, 20. März 12

Jens Arps@jensarpsjensarps.de

github.com/jensarps

uxebu.comDienstag, 20. März 12

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

Dienstag, 20. März 12

What is this?

Dienstag, 20. März 12

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

Dienstag, 20. März 12

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

without the use of plugins.

What is this?

Dienstag, 20. März 12

Enable 3D applications in the web.

What is this?

Dienstag, 20. März 12

WebGL is an Open Standard

What is this?

(Maintained by the Khronos Group)

Dienstag, 20. März 12

Technology

Dienstag, 20. März 12

Technology

JavaScript + OpenGL

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

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

Dienstag, 20. März 12

Technology

OpenGL Shading Language

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

(Not really JavaScript)

Dienstag, 20. März 12

History

Dienstag, 20. März 12

History

Chrome: Feb 2011Firefox: Mar 2011

Dienstag, 20. März 12

History

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

Dienstag, 20. März 12

History

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

Dienstag, 20. März 12

History

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

Dienstag, 20. März 12

History

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

Dienstag, 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 Browsers

Dienstag, 20. März 12

Mobile Browsers

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

Dienstag, 20. März 12

Mobile Browsers

Firefox mobile: yesAndroid webkits: someMobile Safari: Only Ads*Chrome Android: noOpera 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 centric

Dienstag, 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 definitely!

Dienstag, 20. März 12

Do we need it?

#1: Presentation focused websites

Dienstag, 20. März 12

Do we need it?

#2: Gaming

Dienstag, 20. März 12

Do we need it?

#2: Gaming

($$$)

Dienstag, 20. März 12

Do we need it?

#3: Art

Dienstag, 20. März 12

Demos

Dienstag, 20. März 12

Demos

Flight of the Navigator

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

The first 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 first level ports from a commercial game.

Dienstag, 20. März 12

Demos

Team Fortress 2

Sadly, video only due to copyrighted material.

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

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

Dienstag, 20. März 12

Demos

RavenJS

Gothic II port

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

Dienstag, 20. März 12

Perspective

Dienstag, 20. März 12

Perspective

Performance will increase

Dienstag, 20. März 12

Perspective

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

Dienstag, 20. März 12

Perspective

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

Dienstag, 20. März 12

Perspective

WebGL will become usable on mobile devices

Dienstag, 20. März 12

Libraries

Dienstag, 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!

@jensarpsjensarps.de

github.com/jensarps

Dienstag, 20. März 12