Installing Games Sucks, Learn WebGL

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)?


What Experience Do You Have With 3D Graphics?


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

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


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


! 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