Installing Games Sucks!
Learn WebGL
@CoreyClarkPhD
@GameTheoryLabs
Audience Survey Link: meetup.GameTheoryLabs.com
Who Am I?
!   Founder of Game Theory
Labs
!   Professor of Game and
Simulation Programming
! Nanoscale Semiconductor
Growt...
Experience with Matrix or Vector Math?
Survey Link: meetup.gametheorylabs.com
Experience with Canvas (2D or 3D)?
Survey Link: meetup.gametheorylabs.com
What Experience Do You Have With 3D
Graphics?
Survey Link: meetup.gametheorylabs.com
What is WebGL?
OpenGL ES 2.0
Back To Future?
WebGL != Undefined
* **!
* Requires user to enable flag in developer menu
** Requires Plugin (IEWebGL), I know, defeats th...
So Why The Hype?
GPU Acceleration == FAST
How Fast?
http://goo.gl/ukEPV
How Fast?
http://goo.gl/ukEPV
ACHIEVMENT UNLOCKED
You are now smarter than a 5th grader
3D Basics:
Objects
Vertices à Triangles à Surface
viewer.gametheorylabs.com
3D Basics:
Objects and File Type
! WebGL does not have an
defined model format
! Collada, glTF
!   OBJ, FBX, DAE
!   Store...
3D Basics:
Scale, Translate and Rotate
matrix.gametheorylabs.com
Euler Angles
Gimbal Lock
Quaternions
3D Basics:
View Matrix
3D Basics:
Projection Matrix
Level UP
Performance
Blog: goo.gl/hofS2 Demo: http://goo.gl/q2jA7
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
...
Show Me The …
Data?
Browser Verts Polys Draw Calls
Chrome 590,898 333,924 450
Aurora 426,773 241,174 325
WebKit
Nightly
39...
So All Of This Is JavaScript?
Not Exactly…
… GLSL
Shaders
Vertex Shader Pixel/Fragment Shader
Vertex Shader
Fragment Shader
Shaders and Gfx Pipeline
http://dev.opera.com/articles/view/an-introduction-to-webgl/
1 Up:
Programming Language
WebGL Initialization
!  Canvas
! Shaders
!  Models
WebGL
Canvas Initialization
!  Create HTML Canvas Object
!  Set Width Height
!  Get 3D Context
!  Set Viewport dimensions ...
WebGL
Shader Initialization
!  Create Shaders
!   Get Copy of Shader Code (Vertex and Fragment)
!   Create GL Fragment and...
WebGL
Shader Initialization
!  Create Program
!   Create GL Shader Program
!   Attach Vertex and Fragment Shaders to Progr...
WebGL
Shader Initialization
!  Connect JavaScript and GLSL Variables
!   Attributes
! getAttribLocation
! enableVertexAttr...
WebGL
Mesh Initialization
!  Create GL Buffer Object
!  Bind Buffer
!  Fill Buffer with Data
!   Position
!   Color
!   Te...
WebGL
Update and Draw
!   Use requestAnimFrame
!   Update
!   Position, Scale, Rotation, AI, Physics, etc…
!   Draw
!   Se...
WebGL Boss Defeated
Omega Resistance 0v2
! WebGL
!   Gamepad API
!   3D Rigid Body Physics
!   AI Autonomous
Movement
! WebWorkers
Blog: goo.g...
http://or.gametheorylabs.com
WebGL Alternatives
!  3D CSS
!  2.5D (Isometric)
!  2D Top Down
http://goo.gl/L8lwb
WebGL Libraries
! ThreeJS
!   GLGE
! CopperLicht
! CubicVR
And Many Many More….
WebGL Tid Bits
! DebugContex
! WebGL Inspector
! requestAnimFrame
!   Twitter
!   Start with ThreeJS or Learning WebGL
Questions?
Twitter/Facebook:
@CoreyClarkPhD
@GameTheoryLabs
Web: gametheorylabs.com
Dev Wiki: wiki.gametheorylabs.com
Git:...
Upcoming SlideShare
Loading in …5
×

Installing Games Sucks, Learn WebGL

1,794 views
1,564 views

Published on

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.

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,794
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
30
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Installing Games Sucks, Learn WebGL

  1. 1. Installing Games Sucks! Learn WebGL @CoreyClarkPhD @GameTheoryLabs Audience Survey Link: meetup.GameTheoryLabs.com
  2. 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. 3. Experience with Matrix or Vector Math? Survey Link: meetup.gametheorylabs.com
  4. 4. Experience with Canvas (2D or 3D)? Survey Link: meetup.gametheorylabs.com
  5. 5. What Experience Do You Have With 3D Graphics? Survey Link: meetup.gametheorylabs.com
  6. 6. What is WebGL? OpenGL ES 2.0
  7. 7. Back To Future?
  8. 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. 9. So Why The Hype? GPU Acceleration == FAST
  10. 10. How Fast? http://goo.gl/ukEPV
  11. 11. How Fast? http://goo.gl/ukEPV
  12. 12. ACHIEVMENT UNLOCKED You are now smarter than a 5th grader
  13. 13. 3D Basics: Objects Vertices à Triangles à Surface viewer.gametheorylabs.com
  14. 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. 15. 3D Basics: Scale, Translate and Rotate matrix.gametheorylabs.com Euler Angles Gimbal Lock Quaternions
  16. 16. 3D Basics: View Matrix
  17. 17. 3D Basics: Projection Matrix
  18. 18. Level UP
  19. 19. Performance Blog: goo.gl/hofS2 Demo: http://goo.gl/q2jA7
  20. 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. 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. 22. So All Of This Is JavaScript? Not Exactly… … GLSL
  23. 23. Shaders Vertex Shader Pixel/Fragment Shader
  24. 24. Vertex Shader
  25. 25. Fragment Shader
  26. 26. Shaders and Gfx Pipeline http://dev.opera.com/articles/view/an-introduction-to-webgl/
  27. 27. 1 Up: Programming Language
  28. 28. WebGL Initialization !  Canvas ! Shaders !  Models
  29. 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. 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. 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. 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. 33. WebGL Mesh Initialization !  Create GL Buffer Object !  Bind Buffer !  Fill Buffer with Data !   Position !   Color !   Texture ! Normals !   Etc…
  34. 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. 35. WebGL Boss Defeated
  36. 36. Omega Resistance 0v2 ! WebGL !   Gamepad API !   3D Rigid Body Physics !   AI Autonomous Movement ! WebWorkers Blog: goo.gl/5nR0H Game: or.gametheorylabs.com
  37. 37. http://or.gametheorylabs.com
  38. 38. WebGL Alternatives !  3D CSS !  2.5D (Isometric) !  2D Top Down http://goo.gl/L8lwb
  39. 39. WebGL Libraries ! ThreeJS !   GLGE ! CopperLicht ! CubicVR And Many Many More….
  40. 40. WebGL Tid Bits ! DebugContex ! WebGL Inspector ! requestAnimFrame !   Twitter !   Start with ThreeJS or Learning WebGL
  41. 41. Questions? Twitter/Facebook: @CoreyClarkPhD @GameTheoryLabs Web: gametheorylabs.com Dev Wiki: wiki.gametheorylabs.com Git: git.gametheorylabs.com

×