WebGL

Presentation by: Viet Nguyen

Final Project Outline Introduction History Support Implementation Advantages Disadvantages Conclusion References

Outline

WebGL and Caustics Must do:

WebGL Implementation Caustic simulation

Optional: Water caustics Objects interaction

Project

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

Introduction

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

Vladimir Vukićević at Mozilla creates Canvas 3D prototype experiments

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

Desktop Browsers Mozilla Firefox - enabled since version 4.0, current

version 7. Google Chrome - enabled since version 9.0, current

version 15. Safari - Safari 5.1 installed on Mac OS X Lion supports

WebGL, but disabled by default. Opera - WebGL has been implemented by Opera in the

latest Opera 12 pre-release snapshots.  Internet Explorer - No official support. The 

Chrome Frame and IEWebGL plugins allow WebGL.

Support

http://doesmybrowsersupportwebgl.com/ Compatible Browser with WebGL enabled DirectX Runtime Video card that supports at least OpenGL 2.0

Use latest drivers

Support

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_editor.html

Implementation - Support

Need to use HTML5 Canvas element Include the program into this element <canvas id=“thisexamplecanvas”>

Include files for helper functions <script type="text/javascript" src="webgl-

utils.js"></script> Various other HTML/Javascript customization

Implementation Example

Implementation – Code Demo

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

Popular Libraries

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

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

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

[1]http://en.wikipedia.org/wiki/WebGL [2]http://learningwebgl.com/blog/?p=11 [3]http://learningwebgl.com/cookbook/index.php/WebGL:_

Frequently_Asked_Questions [4]http://labs.opera.com/news/2011/02/28/ [5]http://www.chromeexperiments.com/webgl [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

[8] http://caniuse.com/webgl

References

Questions?