Post on 21-Sep-2014
description
transcript
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 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:
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 the point ! IE 11 looks to have WebGL added, WHOO HOO!
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
! Stores ! Relative Position ! Normals ! Texture ! Animation ! Materials
tri.gametheorylabs.com
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
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
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
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 to match canvas
dimensions
! Set Clear Color (and any other properties)
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
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
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);
WebGL Mesh Initialization
! Create GL Buffer Object ! Bind Buffer ! Fill Buffer with Data
! Position ! Color ! Texture ! Normals ! Etc
WebGL Update and Draw
! Use requestAnimFrame ! Update
! Position, Scale, Rotation, AI, Physics, etc
! Draw ! Set Uniforms ! Bind and Set Vertex Buffers ! Call glDrawElements
WebGL Boss Defeated
Omega Resistance 0v2
! WebGL
! Gamepad API
! 3D Rigid Body Physics
! AI Autonomous Movement
! WebWorkers
Blog: goo.gl/5nR0H Game: or.gametheorylabs.com
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: git.gametheorylabs.com