WebGL Demos and Intro to Development
2.Phillihp Harmon Read my Tech Blog @ http://www.phillihp.com Some of my work:
4.What is WebGL?
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
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!
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?
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
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.