Computer Graphics in Game

programmingBasics. OpenGL. “Hello world”

George Georgiev

http://academy.telerik.com

Technical Trainer

George AtanasovFront-End Developer

academy.telerik.com

/.../3d-game-development-op

engl

Table of Contents Computer graphics

2D 2.5D 3D 3D Graphics Libraries

OpenGL Introduction to OpenGL Setting up OpenGL “Hello World”

2

Computer graphicsTypes, 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 GraphicsBasics, Common practices

2D Game Graphics Primitives

Pixels

Images (textures)

Geometry – Dots, Lines, Triangles (rarely used)

Objects (sprites) Groups of pixels

Images with transparency

Geometry meshes8

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 GraphicsBasics, 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 GraphicsFinally…

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)

Perspective18

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

OpenGLIntroduction. "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/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

OpenGL SetupLive 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

glClear33

OpenGL “Hello World”Live Demo

форум програмиране, форум уеб дизайнкурсове и уроци по програмиране, уеб дизайн – безплатно

програмиране за деца – безплатни курсове и уроцибезплатен SEO курс - оптимизация за търсачки

уроци по уеб дизайн, HTML, CSS, JavaScript, Photoshop

уроци по програмиране и уеб дизайн за ученициASP.NET MVC курс – HTML, SQL, C#, .NET, ASP.NET MVC

безплатен курс "Разработка на софтуер в cloud среда"

BG Coder - онлайн състезателна система - online judge

курсове и уроци по програмиране, книги – безплатно от Наков

безплатен курс "Качествен програмен код"

алго академия – състезателно програмиране, състезания

ASP.NET курс - уеб програмиране, бази данни, C#, .NET, ASP.NETкурсове и уроци по програмиране – Телерик академия

курс мобилни приложения с iPhone, Android, WP7, PhoneGap

free C# book, безплатна книга C#, книга Java, книга C#Дончо Минков - сайт за програмиранеНиколай Костов - блог за програмиранеC# курс, програмиране, безплатно

?

? ? ??

?? ?

?

?

?

??

?

?

? ?

Questions?

?

Comuputer Graphics in Game programming

http://academy.telerik.com/

Free Trainings @ Telerik Academy

3D Graphics and Game Development academy.telerik.com/…/

3d-game-development-opengl

Telerik Software Academy academy.telerik.com

Telerik Academy @ Facebook facebook.com/TelerikAcademy

Telerik Software Academy Forums forums.academy.telerik.com