WebGL is an exciting new HTML5 JavaScript API that allows for rendering real-time 3D graphics in your web browser without a plugin. The technology is gaining fast acceptance and is allowing for truly amazing applications to be built in a native browser environment that were once considered impossible. This new API has it challenges, as it requires an understanding of the low-level Graphics Pipeline and OpengGL ES 2.0. This talk will cover the basics of 3D graphics and the JavaScript API allowing the audience to take away the steps required to create, initialize and run a WebGL application. The talk will also discuss the current state of browser acceptance of WebGL along with existing libraries that can get you up and running with WebGL even faster.

1. Installing Games Sucks!
Learn WebGL
@CoreyClarkPhD
@GameTheoryLabs
Audience Survey Link: meetup.GameTheoryLabs.com

2. Who Am I?
! Founder of Game Theory
Labs
! Professor of Game and
Simulation Programming
! Nanoscale Semiconductor
Growth Kinetics
! Flexible Embedded
Electronics for ABL
! SWARM and C4ISR
Embedded Systems
! Building HTML5 Web
Apps Utilizing:
! Cloud Cluster
Computing
! Game Technology
! Artificial Intelligence
Modeling, Learning and
Optimization
What I Do:What I Did:

3. Experience with Matrix or Vector Math?
Survey Link: meetup.gametheorylabs.com

4. Experience with Canvas (2D or 3D)?
Survey Link: meetup.gametheorylabs.com

5. What Experience Do You Have With 3D
Graphics?
Survey Link: meetup.gametheorylabs.com

6. What is WebGL?
OpenGL ES 2.0

7. Back To Future?

8. WebGL != Undefined
* **!
* Requires user to enable flag in developer menu
** Requires Plugin (IEWebGL), I know, defeats the point
! IE 11 looks to have WebGL added, WHOO HOO!

9. So Why The Hype?
GPU Acceleration == FAST

10. How Fast?
http://goo.gl/ukEPV

11. How Fast?
http://goo.gl/ukEPV

12. ACHIEVMENT UNLOCKED
You are now smarter than a 5th grader

13. 3D Basics:
Objects
Vertices à Triangles à Surface
viewer.gametheorylabs.com

14. 3D Basics:
Objects and File Type
! WebGL does not have an
defined model format
! Collada, glTF
! OBJ, FBX, DAE
! Stores
! Relative Position
! Normals
! Texture
! Animation
! Materials
tri.gametheorylabs.com

15. 3D Basics:
Scale, Translate and Rotate
matrix.gametheorylabs.com
Euler Angles
Gimbal Lock
Quaternions

16. 3D Basics:
View Matrix

17. 3D Basics:
Projection Matrix

18. Level UP

19. Performance
Blog: goo.gl/hofS2 Demo: http://goo.gl/q2jA7

20. Show Me The …
Data?
Verts Polys Draw FPS CPU RAM Video OS
858,750 485,292 654 30 2.2GHz
i7 Quad
Core
4GB Radeon
6750M 1GB
OSX
634,179 353,386 483 30 2.53GHz
Core 2 Duo
4GB 9800+ 1GB Win 7
590,898 333,924 450 33.3 2.53GHz
Core 2 Duo
8GB 9600M GT
512MB
OSX

21. Show Me The …
Data?
Browser Verts Polys Draw Calls
Chrome 590,898 333,924 450
Aurora 426,773 241,174 325
WebKit
Nightly
393,948 222,624 300
Safari 295,473 166,974 225
Firefox 262,648 148,424 200

22. So All Of This Is JavaScript?
Not Exactly…
… GLSL

23. Shaders
Vertex Shader Pixel/Fragment Shader

24. Vertex Shader

25. Fragment Shader

26. Shaders and Gfx Pipeline
http://dev.opera.com/articles/view/an-introduction-to-webgl/

27. 1 Up:
Programming Language

28. WebGL Initialization
! Canvas
! Shaders
! Models

29. WebGL
Canvas Initialization
! Create HTML Canvas Object
! Set Width Height
! Get 3D Context
! Set Viewport dimensions to match canvas
dimensions
! Set Clear Color (and any other properties)

30. WebGL
Shader Initialization
! Create Shaders
! Get Copy of Shader Code (Vertex and Fragment)
! Create GL Fragment and Vertex Shader Objects
! Add Source to Shader
! Compile Shader

31. WebGL
Shader Initialization
! Create Program
! Create GL Shader Program
! Attach Vertex and Fragment Shaders to Program
! Link Program
! Call useProgram to set Linked Program Active

32. WebGL
Shader Initialization
! Connect JavaScript and GLSL Variables
! Attributes
! getAttribLocation
! enableVertexAttribArray
! Uniforms
! getUniformLocation
! gl.uniformMatrix4fv(u.location, false, u.value);
! gl.uniform3fv(u.location, u.value);
! gl.uniform1i(u.location, u.value);

33. WebGL
Mesh Initialization
! Create GL Buffer Object
! Bind Buffer
! Fill Buffer with Data
! Position
! Color
! Texture
! Normals
! Etc…

34. WebGL
Update and Draw
! Use requestAnimFrame
! Update
! Position, Scale, Rotation, AI, Physics, etc…
! Draw
! Set Uniforms
! Bind and Set Vertex Buffers
! Call glDrawElements

35. WebGL Boss Defeated

36. Omega Resistance 0v2
! WebGL
! Gamepad API
! 3D Rigid Body Physics
! AI Autonomous
Movement
! WebWorkers
Blog: goo.gl/5nR0H Game: or.gametheorylabs.com

37. http://or.gametheorylabs.com

38. WebGL Alternatives
! 3D CSS
! 2.5D (Isometric)
! 2D Top Down
http://goo.gl/L8lwb

39. WebGL Libraries
! ThreeJS
! GLGE
! CopperLicht
! CubicVR
And Many Many More….

40. WebGL Tid Bits
! DebugContex
! WebGL Inspector
! requestAnimFrame
! Twitter
! Start with ThreeJS or Learning WebGL

41. Questions?
Twitter/Facebook:
@CoreyClarkPhD
@GameTheoryLabs
Web: gametheorylabs.com
Dev Wiki: wiki.gametheorylabs.com
Git: git.gametheorylabs.com