1. WebGL Presentation by: Viet Nguyen

2.  Final Project Outline  Introduction  History  Support  Implementation  Advantages  Disadvantages  Conclusion  References Outline

3.  WebGL and Caustics  Must do:  WebGL Implementation  Caustic simulation  Optional:  Water caustics  Objects interaction Project

4.  WebGL  Software library extending Javascript  Allows 3D Graphics using compatible web browser  Runs on GPUs and supports shaders  Version 1.0 released March 3, 2011.  http://www.chromeexperiments.com/webgl http://www.chromeexperiments.com/webgl Introduction

5.  WebGL  Based on OpenGL ES 2.0  Uses HTML 5.0 canvas element and accessed using Document Object Model interface  Specifically for embedded systems  Mobile Phones – iOS, Android  Video Game Consoles – PS3, Nintendo 3DS Introduction

6.  Vladimir Vukićević at Mozilla creates Canvas 3D prototype experiments Vladimir VukićevićMozilla  Vukićević demonstrates Canvas 3D prototype in 2006.  In 2009, Mozilla and Khronos group start WebGL working group.  March 2011 – Version 1.0!  Notable apps include Google MapsGL History

7.  Desktop Browsers  Mozilla Firefox - enabled since version 4.0, current version 7. Mozilla Firefox  Google Chrome - enabled since version 9.0, current version 15. Google Chrome  Safari - Safari 5.1 installed on Mac OS X Lion supports WebGL, but disabled by default. SafariMac OS X Lion  Opera - WebGL has been implemented by Opera in the latest Opera 12 pre-release snapshots. Opera  Internet Explorer - No official support. The Chrome Frame and IEWebGL plugins allow WebGL. Internet ExplorerChrome FrameIEWebGL Support

8.  http://doesmybrowsersupportwebgl.com/ http://doesmybrowsersupportwebgl.com/  Compatible Browser with WebGL enabled  DirectX Runtime  Video card that supports at least OpenGL 2.0  Use latest drivers Support

9.  Maya plugin  Blender – “Blender to WebGL Exporter”  Animations!  CopperCube – 3D Editor for Flash/WebGL  Ability to import Maya and export to WebGL  Inka3D – imports Maya, exports WebGL  Real time Editing  http://www.kickjs.org/example/shader_editor/shader_e ditor.html http://www.kickjs.org/example/shader_editor/shader_e ditor.html Implementation - Support

10.  Need to use HTML5 Canvas element  Include the program into this element   Include files for helper functions   Various other HTML/Javascript customization Implementation Example

11. Implementation – Code Demo

12.  WebGLU WebGLU  GLGE GLGE  C3DL C3DL  Copperlicht Copperlicht  SpiderGL SpiderGL  PhiloGL PhiloGL  gwt-g3d – G3D (WebGL wrapper) for GWT (Google Web Toolkit) gwt-g3d  SceneJS, SceneJS  Oak3D, Oak3D  Processing.js Processing.js  Three.js Three.js  ….to name a few. Popular Libraries

13.  May 2011 – Context Information Security publishes a paper on flaws in WebGL leading to vulnerabilities.  Khronos Group including Google and Mozilla have suggested fixes and are developing solutions  Denial of Service, Cross-origin attacks using kernel-mode privileges Security

14.  Security Issues  Flaws and vulnerabilities, papers written  Any attacks?  No official support from Microsoft IE due to Security  (Plug-ins - IEWebGL)  Not supported by many web browsers on mobile devices  No 3D Texture Support  No Double Precision Floats ( No GL_Double)  Only OpenGL ES 2.0 supports programmable shaders  OpenGL ES 2.0 not backwards compatible.  No glBegin/End, use vertex arrays/buffers  No gl_quads, use triangles only. Disadvantages

15.  3D Graphics Applications in Web Browsers  No plug-ins needed!....for some(Chrome, Firefox)  Programmable Shaders!  3D Graphics applications in mobile devices (apps)  Portable for OpenGL ES supported devices  Triangle Strips supported  WebGL support for Apple’s iAds  Learning OpenGL ES 2.0 Advantages

16.  [1]http://en.wikipedia.org/wiki/WebGL [1]http://en.wikipedia.org/wiki/WebGL  [2]http://learningwebgl.com/blog/?p=11 [2]http://learningwebgl.com/blog/?p=11  [3]http://learningwebgl.com/cookbook/index.php/WebGL: _Frequently_Asked_Questions [3]http://learningwebgl.com/cookbook/index.php/WebGL: _Frequently_Asked_Questions  [4]http://labs.opera.com/news/2011/02/28/ [4]http://labs.opera.com/news/2011/02/28/  [5]http://www.chromeexperiments.com/webgl [5]http://www.chromeexperiments.com/webgl  [6]http://www.kickjs.org/example/shader_editor/shader_editor. html [6]http://www.kickjs.org/example/shader_editor/shader_editor. html  [7] http://iphonedevelopment.blogspot.com/2009/05/opengl-es- from-ground-up-table-of.html http://iphonedevelopment.blogspot.com/2009/05/opengl-es- from-ground-up-table-of.html  [8] http://caniuse.com/webglhttp://caniuse.com/webgl References

17. Questions?