Computer Graphics in Game programming
description
Transcript of Computer Graphics in Game programming
![Page 1: Computer Graphics in Game programming](https://reader034.fdocuments.in/reader034/viewer/2022051317/56816381550346895dd46590/html5/thumbnails/1.jpg)
Computer Graphics in Game
programmingBasics. OpenGL. “Hello world”
George GeorgievTelerik Corporationwww.telerik.
com
![Page 2: Computer Graphics in Game programming](https://reader034.fdocuments.in/reader034/viewer/2022051317/56816381550346895dd46590/html5/thumbnails/2.jpg)
Table of Contents Computer graphics
2D 2.5D 3D 3D Graphics Libraries
OpenGL Introduction to OpenGL Setting up OpenGL “Hello World”
2
![Page 3: Computer Graphics in Game programming](https://reader034.fdocuments.in/reader034/viewer/2022051317/56816381550346895dd46590/html5/thumbnails/3.jpg)
Computer graphicsTypes, Geometry, Libraries
![Page 4: Computer Graphics in Game programming](https://reader034.fdocuments.in/reader034/viewer/2022051317/56816381550346895dd46590/html5/thumbnails/4.jpg)
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
![Page 5: Computer Graphics in Game programming](https://reader034.fdocuments.in/reader034/viewer/2022051317/56816381550346895dd46590/html5/thumbnails/5.jpg)
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
![Page 6: Computer Graphics in Game programming](https://reader034.fdocuments.in/reader034/viewer/2022051317/56816381550346895dd46590/html5/thumbnails/6.jpg)
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
![Page 7: Computer Graphics in Game programming](https://reader034.fdocuments.in/reader034/viewer/2022051317/56816381550346895dd46590/html5/thumbnails/7.jpg)
2D Game GraphicsBasics, Common practices
![Page 8: Computer Graphics in Game programming](https://reader034.fdocuments.in/reader034/viewer/2022051317/56816381550346895dd46590/html5/thumbnails/8.jpg)
2D Game Graphics Primitives
Pixels Images (textures) Geometry – Dots, Lines, Triangles
(rarely used) Objects (sprites)
Groups of pixels Images with transparency Geometry meshes
8
![Page 9: Computer Graphics in Game programming](https://reader034.fdocuments.in/reader034/viewer/2022051317/56816381550346895dd46590/html5/thumbnails/9.jpg)
2D Game Graphics Transformations
Translation ‘Mirroring’ Rotation (only for ‘geometry’
sprites) Scaling (only for ‘geometry’ sprites)
9
![Page 10: Computer Graphics in Game programming](https://reader034.fdocuments.in/reader034/viewer/2022051317/56816381550346895dd46590/html5/thumbnails/10.jpg)
2D Game Graphics Coloring
Per-pixel Per-vertex (‘geometry’ sprites)
Animation Image sequences
10
![Page 11: Computer Graphics in Game programming](https://reader034.fdocuments.in/reader034/viewer/2022051317/56816381550346895dd46590/html5/thumbnails/11.jpg)
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
![Page 12: Computer Graphics in Game programming](https://reader034.fdocuments.in/reader034/viewer/2022051317/56816381550346895dd46590/html5/thumbnails/12.jpg)
2.5D Game GraphicsBasics, Common practices
![Page 13: Computer Graphics in Game programming](https://reader034.fdocuments.in/reader034/viewer/2022051317/56816381550346895dd46590/html5/thumbnails/13.jpg)
2.5D Game Graphics Primitives
Images (textures) Objects (sprites)
Multiple images, one for each object orientation
13
![Page 14: Computer Graphics in Game programming](https://reader034.fdocuments.in/reader034/viewer/2022051317/56816381550346895dd46590/html5/thumbnails/14.jpg)
2.5D Game Graphics Transformations
Translation ‘Mirroring’ (not often) Oblique projection (pre-rendered)
Coloring Per-pixel
Animation Image sequences
14
![Page 15: Computer Graphics in Game programming](https://reader034.fdocuments.in/reader034/viewer/2022051317/56816381550346895dd46590/html5/thumbnails/15.jpg)
2.5D Example
15
![Page 16: Computer Graphics in Game programming](https://reader034.fdocuments.in/reader034/viewer/2022051317/56816381550346895dd46590/html5/thumbnails/16.jpg)
3D Game GraphicsFinally…
![Page 17: Computer Graphics in Game programming](https://reader034.fdocuments.in/reader034/viewer/2022051317/56816381550346895dd46590/html5/thumbnails/17.jpg)
3D Game Graphics Primitives
Geometry – Vertices, Lines, Triangles
Objects (sprites) Geometry meshes
Triangles (solid) Lines (wireframe) Vertices (‘constellations’)
17
![Page 18: Computer Graphics in Game programming](https://reader034.fdocuments.in/reader034/viewer/2022051317/56816381550346895dd46590/html5/thumbnails/18.jpg)
3D Game Graphics Transformations
Translation Rotation Scaling
Uniform Non-uniform
Projection Parallel (mainly orthogonal) Perspective 18
![Page 19: Computer Graphics in Game programming](https://reader034.fdocuments.in/reader034/viewer/2022051317/56816381550346895dd46590/html5/thumbnails/19.jpg)
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
![Page 20: Computer Graphics in Game programming](https://reader034.fdocuments.in/reader034/viewer/2022051317/56816381550346895dd46590/html5/thumbnails/20.jpg)
3D Game Graphics Perspective viewing
Elements Eye position View angle Near clipping plane Far clipping plane
20
![Page 21: Computer Graphics in Game programming](https://reader034.fdocuments.in/reader034/viewer/2022051317/56816381550346895dd46590/html5/thumbnails/21.jpg)
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
![Page 22: Computer Graphics in Game programming](https://reader034.fdocuments.in/reader034/viewer/2022051317/56816381550346895dd46590/html5/thumbnails/22.jpg)
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
![Page 23: Computer Graphics in Game programming](https://reader034.fdocuments.in/reader034/viewer/2022051317/56816381550346895dd46590/html5/thumbnails/23.jpg)
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
![Page 24: Computer Graphics in Game programming](https://reader034.fdocuments.in/reader034/viewer/2022051317/56816381550346895dd46590/html5/thumbnails/24.jpg)
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
![Page 25: Computer Graphics in Game programming](https://reader034.fdocuments.in/reader034/viewer/2022051317/56816381550346895dd46590/html5/thumbnails/25.jpg)
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
![Page 26: Computer Graphics in Game programming](https://reader034.fdocuments.in/reader034/viewer/2022051317/56816381550346895dd46590/html5/thumbnails/26.jpg)
OpenGLIntroduction. "Hello World"
![Page 27: Computer Graphics in Game programming](https://reader034.fdocuments.in/reader034/viewer/2022051317/56816381550346895dd46590/html5/thumbnails/27.jpg)
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
![Page 28: Computer Graphics in Game programming](https://reader034.fdocuments.in/reader034/viewer/2022051317/56816381550346895dd46590/html5/thumbnails/28.jpg)
Introduction to OpenGL (2)
Low-level Procedural Shader support
GLSL State-machine Open-source, Open standard
28
![Page 29: Computer Graphics in Game programming](https://reader034.fdocuments.in/reader034/viewer/2022051317/56816381550346895dd46590/html5/thumbnails/29.jpg)
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
![Page 30: Computer Graphics in Game programming](https://reader034.fdocuments.in/reader034/viewer/2022051317/56816381550346895dd46590/html5/thumbnails/30.jpg)
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
![Page 31: Computer Graphics in Game programming](https://reader034.fdocuments.in/reader034/viewer/2022051317/56816381550346895dd46590/html5/thumbnails/31.jpg)
Setting up OpenGL Useful links
Setting up ONLY OpenGL http://thoughtsfrommylife.com/articl
e-748-OpenGL_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
![Page 32: Computer Graphics in Game programming](https://reader034.fdocuments.in/reader034/viewer/2022051317/56816381550346895dd46590/html5/thumbnails/32.jpg)
OpenGL SetupLive Demo
![Page 33: Computer Graphics in Game programming](https://reader034.fdocuments.in/reader034/viewer/2022051317/56816381550346895dd46590/html5/thumbnails/33.jpg)
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
![Page 34: Computer Graphics in Game programming](https://reader034.fdocuments.in/reader034/viewer/2022051317/56816381550346895dd46590/html5/thumbnails/34.jpg)
OpenGL “Hello World”Live Demo
![Page 35: Computer Graphics in Game programming](https://reader034.fdocuments.in/reader034/viewer/2022051317/56816381550346895dd46590/html5/thumbnails/35.jpg)
Comuputer Graphics in Game programming
Questions? ?
?? ? ??
?? ?
?