webgl presentation by: viet nguyen. final project outline introduction history support ...
TRANSCRIPT
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?