WebGLAn Overview
Dienstag, 20. März 12
WebGLAn Overview
and awesome demos!!
Dienstag, 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
Top Related