Computer Graphics in
Game programming
Basics. OpenGL. “Hello world”
George Georgiev
Telerik Corporation
www.telerik.com
Table of Contents
 Computer graphics
 2D
 2.5D
 3D
 3D Graphics Libraries
 OpenGL
 Introduction to OpenGL
 Setting up OpenGL
 “Hello World”
2
Computer graphics
Types, Geometry, Libraries
Computer graphics
 Computer graphics
are
 Representation of image data
 2 types – 2D and 3D
 Computation-heavy
 Closely related to computer geometry
 Basic
terminology
 Primitives
 Transformations
 Interpolation
4
Computer graphics
 2-Dimensional (2D) graphics
 Space is planar
 Units – usually pixels
 Use 2D geometry
 Drawing order matters
 Image files are essential
 Pseudo 3-D (2.5D) graphics
 Contain per-object depth information
 Use oblique projections of 2D objects
5
Computer graphics
 3-Dimensional (3D) graphics
 Provide depth information
 Units – whatever you like
 Use both 3D and 2D geometry
 Drawing order DOESN’T matter
 except for transparency
 Lighting and texturing are essential
 Model files are essential
6
2D Game Graphics
Basics, Common practices
2D Game Graphics
 Primitives
 Pixels
 Images (textures)
 Geometry – Dots, Lines, Triangles (rarely used)
 Objects (sprites)
 Groups of pixels
 Images with transparency
 Geometry meshes
8
2D Game Graphics
 Transformations
 Translation
 ‘Mirroring’
 Rotation (only for ‘geometry’ sprites)
 Scaling (only for ‘geometry’ sprites)
9
2D Game Graphics
 Coloring
 Per-pixel
 Per-vertex (‘geometry’ sprites)
 Animation
 Image sequences
10
2D Game Graphics
 Rendering process
 Create a color buffer (usually a matrix with the
screen resolution as dimensions)
 Render the background to the buffer
 Render the foreground to the buffer
 Draw the color buffer to the screen
11
2.5D Game Graphics
Basics, Common practices
2.5D Game Graphics
 Primitives
 Images (textures)
 Objects (sprites)
 Multiple images, one for each object
orientation
13
2.5D Game Graphics
 Transformations
 Translation
 ‘Mirroring’ (not often)
 Oblique projection (pre-rendered)
 Coloring
 Per-pixel
 Animation
 Image sequences
14
2.5D Example
15
3D Game Graphics
Finally…
3D Game Graphics
 Primitives
 Geometry – Vertices, Lines, Triangles
 Objects (sprites)
 Geometry meshes
 Triangles (solid)
 Lines (wireframe)
 Vertices (‘constellations’)
17
3D Game Graphics
 Transformations
 Translation
 Rotation
 Scaling
 Uniform
 Non-uniform
 Projection
 Parallel (mainly orthogonal)
 Perspective
18
3D Game Graphics
 Coloring
& Transparency
 Per-vertex
 Drawing order matters for transparency!
 Transparent objects are drawn after opaque ones
 Lighting
 Per-vertex
 Essential
 Texturing
19
3D Game Graphics
 Perspective viewing
 Elements
 Eye position
 View angle
 Near clipping plane
 Far clipping plane
20
3D Game Graphics
 Eye position
 Usually called camera position
 Represents the user’s viewing position
 View angle
 The camera’s “lens width”
 Represents the user’s vision capabilities
 60 or 45 degrees are most commonly used
 The larger the view angle, the larger the view
volume
21
3D Game Graphics
 Near clipping plane
 The nearest visible distance
 Represents the display
 Far clipping
plane
 The farthest visible distance
 Objects behind it are not rendered
22
3D Game Graphics – view
volume
 The “Frustum”
 The view volume, clipped by
 The near clipping plane
 The far clipping plane
 Contains the visible objects
 Visible objects are projected on the near clipping
plane
23
3D Game Graphics
 Rendering process
 Create depth and color buffers (matrices with
the screen resolution’s dimensions)
 Project objects’ vertices on the near clipping
plane
 Fill depth buffer (interpolating vertices depth)
 Clip overlapping objects’ faces (using depth
buffer)
 Interpolate colors and render color buffer
24
3D Game Graphics
 Rendering 3D graphics
to a 2D screen is a very
complicated task
 Computation-heavy
 Knowledge-heavy
 That’s why we use 3D graphics libraries
 OpenGL
 Direct3D
 Nvidia Cuda
25
OpenGL
Introduction. "Hello World"
Introduction to OpenGL
 OpenGL 2.0 & 2.1
 Cross-platform
 Cross-language
 Hardware accelerated
 Reviewed and updated
 ARB, Khronos Group
 Extension mechanism
 Massive community
27
Introduction to OpenGL (2)
 Low-level
 Procedural
 Shader support
 GLSL
 State-machine
 Open-source, Open standard
28
Using OpenGL
 Additional
libraries
 GLEW – The extension wrangler
 Makes it easy to access extensions
 Included before all other OpenGL libraries
 FreeGLUT – The utility toolkit
 Handles window procedures
 Handles input
 Cross-platform
 Supersedes GLUT
29
Setting up OpenGL
 OpenGL & FreeGLUT with MS Visual Studio
 Gathering “include” files
 Compiling “.lib” and “.dll” files
 Adding to the SDKs
 Adding the .dll files to the system
 Making a project
 Linking against the “.lib” files
30
Setting up OpenGL
 Useful links
 Setting up ONLY OpenGL
 http://thoughtsfrommylife.com/article-748OpenGL_and_Visual_Studio_Express_2008
 OpenGL setup and beginner tutorials
 http://www.swiftless.com/opengltuts.html
 Large-scope OpenGL tutorials (currently –
11.07.2011 – under maintenance)
 http://nehe.gamedev.net/
31
OpenGL Setup
Live Demo
OpenGL "Hello World"
 OpenGL “Hello World”
with FreeGLUT
 Goals
 Create a window with OpenGL working in it
 Introduce GLUT window procedures and the
glutMainLoop
 OpenGL knowledge attained:
 OpenGL colors
 Identity matrix
 glClear
33
OpenGL “Hello World”
Live Demo
Comuputer Graphics in Game
programming
Questions?