Your SlideShare is downloading. ×
Installing Games Sucks, Learn WebGL
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Installing Games Sucks, Learn WebGL

1,257
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 …

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,257
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
27
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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