Installing Games Sucks, Learn WebGL
0 likes2,191 views
The document discusses the installation and utilization of WebGL in game development, outlining the fundamentals of 3D graphics, shaders, and performance metrics. It provides insights into the required initialization processes and the connection between JavaScript and GLSL, as well as performance comparisons across different systems and browsers. Additionally, it highlights various WebGL libraries, alternatives, and resources for further learning.
![Strategic Picks — Prioritising the Right Agentic Use Cases [2/6]](https://cdn.slidesharecdn.com/ss_thumbnails/session-2-250902135931-4c97717a-thumbnail.jpg?width=560&fit=bounds)
![From Curiosity to ROI — Cost-Benefit Analysis of Agentic Automation [3/6]](https://cdn.slidesharecdn.com/ss_thumbnails/session-3-250903141006-a3917e1a-thumbnail.jpg?width=560&fit=bounds)
Installing Games Sucks, Learn WebGL
- 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
- 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
- 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
- 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/
- 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
- 36. Omega Resistance 0v2 ! WebGL ! Gamepad API ! 3D Rigid Body Physics ! AI Autonomous Movement ! WebWorkers Blog: goo.gl/5nR0H Game: 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