WebGL Demos and Intro to Development

1 . WebGL The HTML5/JavaScript 3D Computer Graphics API Phillihp Harmon Principal, Consultant Co-Founder, CTO Xelltech, Inc CoutureMafia, Inc http://www.xelltech.com http://www.couturemafia.com 

2 .Phillihp Harmon Read my Tech Blog @ http://www.phillihp.com Some of my work: 

3 .WebGL Seminar Prerequisites Agenda ● HTML ● Introduction ● JavaScript ● What is WebGL? ● Interest in 3D Graphics ● How to Learn WebGL ● Demonstration of WebGL This session is intended as demo Capabilities and introduction to WebGL for ● Future of 3D Web Graphics an audience with basic ● Create your own 3D Web programming experience or Application by example interested in beginning ● Code explore WebGL Tetris programming or 3D graphics. But, we will get Complex! Please ask questions. 

4 .What is WebGL? 

5 .What is WebGL? WebGL: ● JavaScript's 3D computer graphics API ● No need for plugins ● Must be browser supported ● WebGL is based on OpenGL ES ● WebGL's syntax is nearly identical to OpenGL Ecosystem: OpenGL - Cross platform 2D/3D computer graphics OpenGL ES - OpenGL for Embedded Systems (iPhone, iPad, Android, BlackBerry) OpenMax - Audio, Video, Images OpenIL - OpenMax Integration Layer EGL - High performance graphics context management OpenCL - Parallel computing: CPU, GPU, Processor API 

6 .The Web Environment Where does WebGL fit into the Web? 

7 .What is WebGL? Q: Is WebGL HTML5? A: Not exactly, WebGL extends HTML5, utilizing the HTML5 Canvas element. Q: Where did WebGL come from? A: WebGL came out of Canvas 3D experiments by Vladimir Vukićević from Mozilla, prototyped in 2006 Q: How is WebGL managed? A: WebGL is managed by Khronos Group, a working group, chaired by Ken Russel. The group includes Apple, Google, Mozilla, and Opera; although the invitation is open, not Microsoft. 

8 .WebGL in your Browser! Chrome! 

9 .WebGL Compatible Browsers Desktop: Google Chrome 9.0+ Mozilla Firefox 4.0+ Safari 5.1+ (disabled) Opera 12.0+ (planned) IE 10.0+ (unknown) Mobile: iOS Safari Opera Mini Opera Mobile Android 2.3 Firefox Fenec (beta) Please update Chrome or Firefox for future slides 

10 .WebGL Compatible Video Cards ● WebGL extends OpenGL ● Any Video Card that supports OpenGL 2.0 ○ Adobe Photoshop CS4, CS5 utilize OpenGL ● Two Competing Advanced GPU Chipsets ○ ATI Radeon Series ○ NVIDIA GeForce, Quadro Series ○ Supported ● Integrated Graphics ○ Intel GMA 500+ Chipset ○ Supported 

11 .The WebGL Community Giles Thomas ● !! to have programming background: Python, Java, Perl, C ● Not a JavaScript / OpenGL expert ● Describes WebGL as almost-finalized ● http://learningwebgl.com which he derived from http://nehe. gamedev.net/ Aleksandar Rodic ● Never learned C++ ● Never learned OpenGL ● First programming language was JavaScript ● Focuses on Shading Technology ● http://aleksandarrodic.com/ Building on top of each others work 

12 .Enable WebGL for Firefox ● In the address bar, type in "about:config" ● Click [I'll be Careful] ● Filter for "webgl" ● Make sure the settings are as follows: 

13 .Enable WebGL for Chrome Make sure that you have Google Chrome 9.0+ 

14 .Demonstration of WebGL 3D Shapes ● http://webgl.pythonocc.org/ ● http://web.chemdoodle.com/demos/molgrabber-3d Google Search Volume by Language ● http://data-arts.appspot.com/globe-search Google Cow ● http://bodybrowser.googlelabs.com/body.html#m=2 Let's try on Firefox ● http://www.silexars.com/demo/web/creation/ 

15 .Time to get dirty! 

16 .

17 .WebGL Components HTML DOM: ● JavaScript ● Canvas ○ HTML5 ● WebGL JavaScript API WebGL / OpenGL: ● Transforms and Viewport ● Matrix Manipulation ● Textures, Shading, Buffers ○ Store vertex data in RAM ● Identity (2D/3D) ● Rendering Pipeline 

18 .Understanding Transforms & Views ● 3D Graphics has 3 vertex points: x, y, z ● Where is my Camera? ○ 0, 0, 0 ● How can I Transform my Viewport? ○ Translate(x, y, z) ○ Rotate(angle, x, y, z) ● Perspective ● Pong: ○ http://pointmarker.com/webgl/test2.html 

19 .Matrix Pushing and Popping Important: The purpose of the Matrix stack is to programmatically navigate around your 3D world. How? mvPushMatrix() // Actions mvPopMatrix() What? 

20 .Understanding Textures ● Use Graphics to make your objects look nice ● Load the Graphic ● Bind (i.e. Attach in RAM) ● That first JavaScript looks ok. 

21 .Understanding Textures ● Create Buffer ● Bind Buffer ● Setup Face Coordinates 

22 .Understanding Shading ● Shading Technology deals with calculation on how pixels are rendered inside your OpenGL world. ● Shader's are complex calculations, literal programs that are written for Graphics Processor Units. ● Pipelines ● Variable Variables ● Vertex, Geometric, Pixel 

23 .HTML5 Sounds Wait, this looks kind of familiar... better than that GL stuff <audio> <audio src=""></audio> <source></source> </audio> var el = document.getElementById('soundtoplay'); el.play(); el.pause(); el.volume = 1; WebGL is still just JavaScript. Utilize the environment, just the same. 

24 .Create your own 3D Web Application http://content.phillihp.com/ http://www.learningwebgl.com Lessons: 2, 4, 13, 16 

25 .Code Explore WebGL Tetris My WebGL Tetris project for fun and learning. WebGL 0.2: http://phillihp. com/2011/06/11/webgl- tetris-v0-2-out/ 

26 .Tetris Components The Tetris Board ● Utilize a Multi-Dimensional Array for cube locations and colors. ● Below is a programmatic representation of a manual initialization. 

27 .Tetris Components The Objects Themselves: ● There are seven pieces used in Tetris ● All mapped using an array 

28 .Easy Transforms to Draw Cubes Drawing the Object: 

29 .Tetris Events (Hey, JS Events!) Setup your key events: Left and Right move the object Up flips the object Down moves the object Remember to preventDefault() and to add your EventListener. And Yes, jQuery is fine with WebGL. Any Framework is fine.