INTRODUCTION TO GAME GRAPHICS
Tags: gamedev, beginners, programming, tutorial
Published: 2021-12-27 18:13:45

Computer graphics can be seen in many different areas of various media and entertainment fields. The topic of computer graphics is huge and can become very technical when dealing with advanced rendering topics. Having an understanding of computer graphics is the key to being able to create the types of visuals that are becoming commonplace across the various industries. Today, visuals are very important in the entertainment industry, whether these visuals are realistic, nonrealistic, or artistic in some manner.

The focus of this article is computer graphics in modern video games. The effects and visuals seen in today’s games require artistic talent as well as technical knowledge about the software and the hardware technology being utilized. What makes video games and other interactive applications special is that they are indeed interactive products that operate in real time. Video games are progressing in a direction that is getting them closer to the visuals in movies, but, unfortunately, the power of computer hardware still has a ways to go. 

Also, video games have other resource consuming systems such as artificial intelligence, networking, sound, input detection and response, physics, and so forth, each having to operate in real time. This in itself makes creating impressive visuals difficult because games are required to render a number of times per second instead of one frame in X amount of time, which the movie and TV industries can afford when preprocessing visuals. With so many different areas of a game requiring resources, there is often a balance between all systems, where quality, performance, and practicality must be traded around and balanced to complete the project.

## COMPUTER GRAPHICS IN MEDIA

Computer graphics can be seen everywhere from magazines, to video
games, movies, television, and so forth. Visuals are often a huge selling point for many products and services. It is the beautiful graphics that often draw consumers to video games, similar to how special effects, among other things, can be used to draw audiences to a movie theater. Often, the visual representation is mistaken for a representation of the quality of the work. Because what people see is so important to their first impression, computer graphics is a highly important and sought after field of study. It is no wonder that movie and video game trailers often attempt to show off the visuals of a movie or game while giving only a brief look at the story instead of the other way around. Today, gamers have learned to look past just the graphics when purchasing a game, but there was a time in the history of video games when some games truly did sell based on their looks alone.

## COMPUTER GRAPHICS IN PRINT

In magazines, ads often must sell themselves on a visual alone. This visual has many purposes, the most important being to draw readers’ attention to the page and to inform them about some type of product or service in a meaningful way. When it comes to computer-generated images in a print publication, the layout, style, art, and so forth must say a lot to the reader in one or two pages, often using few words. In other words, an image must say a thousand words in an attempt to be as efficient and effective as possible.

### Graphics in Movies and TV

Movies and television are rich sources of computer-generated special effects. Some movies are made using computer generation, as seen in animated films such as Shrek 3 by DreamWorks Animation, Finding Nemo by Pixar, Teenage Mutant Ninja Turtles by Imagi Studios, and many others. In computer-generated animations such as those seen in movies the images are generated offline, meaning they are not done in real time, which is unlike the major requirement of a video game. Since computer-generated movies are not in real time, the level of quality and detail are often much higher than that of a video game because video games must make sacrifices in performance versus detail and quality, whereas offline-rendered products such as animated movies. 

Video games can use a combination of preprocessing rendering effects along with real-time rendering, as shown throughout this article. This allows for complex rendered content to be used in a real-time application.

Other films and TV programs use computer-generated content to create special effects and scenes that blend with live action actors and actresses, which can be seen in the movie 300 and Sin City, which are based on the works of Frank Miller. In the movie 300 the visuals were so impressive that they were a major reason why audiences, both fans of Frank Miller and newcomers to his work, flocked to see the film when it made its debut in movie theaters in 2007. Using computer graphics and live actors, the makers of the movie were able to deliver a story in a unique and creative way. The same can be said of the movie Sin City, in which live actors were used together with computer-generated scenes and special effects.

## COMPUTER GRAPHICS IN VIDEO GAMES

Computer graphics in video games is a huge area of study and will continue to grow as time goes on. Over the past few generations the graphics in games have increased considerably in technical terms, quality, and art style. With this increase in graphical quality also came an increase in what gamers expect from the games they buy. Every time a new game makes a leap in graphical quality, it raises the bar for the entire industry. For many years video games have been sold based on their graphical representation. Today, this is accompanied by increased physics, artificial intelligence, and other areas that in the past took a back seat to the visuals. With games becoming higher in quality, they are starting to gain ground against other entertainment media such as the motion picture industry.

Not all games have to look photo-realistic to look great and to have great visual appeal.

In this article we will examine not only various areas of computer graphics, but we will focus on some modern and upcoming effects and algorithms used to create cutting-edge games. These areas of focus cover both 2D and 3D graphics as well as real-time and preprocessed rendering effects. The information covered in this article can be used outside of the games industry as well as in it, although the game aspects of these effects and their implementations will be discussed.

### 2D Graphics

2D graphics have been around in some form since the beginning of game graphics. In the early days of video games, 2D side-scrolling games were popular. Later, 3D games started to emerge and became the standard in the industry. Although 3D graphics have taken a huge role in video games, 2D gaming applications are still very popular. It can also be seen on Microsoft’s Xbox, Sony’s PlayStation, and Nintendo’s Wii video game consoles, where past arcade and console games are making a comeback as downloadable games. Along with bringing back old-school games, new 2D games are also being made available for download on each of these systems. 

The photo below is of Contra, a very popular 2D game.

![Contra](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i4vjkvu2txj371npfhct.png)

The rise of the casual gamer and casual gaming market is allowing easy-to-use and fun 2D games to become quite successful. At one time, video games were more for the hard-core gaming audience. 

There is still a place for 2D-based games in the marketplace, and they can prove to be a very valuable way into the games industry for enthusiasts, students, and those looking to make their way into professional game development. Not only are past arcade and console games doing quite well on the newer generation consoles, but new games based in or partially in 2D are also becoming very successful.

Not all games that are simple have to be 2D, just like not all 2D games are simple

In this article, 2D graphics are discussed along with their 3D counterparts. 2D graphics are essential and can be used as a stepping stone to moving toward the 3D realm for beginners. With the success 2D games enjoy today, it is important to discuss the topics that concern those types of applications since not all topics that apply to 2D games apply to 3D games and vice versa. Also, even in 3D games 2D elements are often used for user interfaces, menus elements, particles, and so forth.

### 3D Graphics

3D graphics really started to take a strong hold in the mid 1990s on the PC and have been used extensively ever since. Today’s 3D games have evolved and now include not only 3D graphics but also 3D interactions through realistic physics, much more advanced and realistic artificial intelligence, and much more complex engineering designs, to name a few. Each of these areas are highly technical professions on their own. As computer processing power increases, so does our ability to create more complex gaming applications through many of these different areas.

3D games offer a new level of realism. In 3D games, lighting and shadows can be simulated to appear more realistic, objects can have dynamic and complex animations that are physics based, reflections can appear on surfaces in real time, and the overall difference between interactive and noninteractive entertainment, such as animated movies, is starting to decrease greatly in terms of popularity and sales. The popularity of 3D games and the evolution of gaming as a whole have allowed video games to compete with all other entertainment industries, and they are worth billions.

Preprocessing effects are computed ahead of time, and the results are used later during run time. Post Processing effects are added to a rendered scene after the scene has been rendered, and effects are calculated in real time during an application’s execution.

One of the first types of popular 3D game genres where graphics pushed what is cutting-edge was the first-person shooter. First-person shooters have always been very popular styles of games on the PC.

First-person shooters are known for both their game-play and their graphics. Some of the biggest game engines, the Quake engine and the Unreal engine, started out as frameworks for first-person shooting games on the PC. The CryEngine, used to power the game Crysis from Crytex, is among the first games to run using DirectX 10 and shader model 4.0 technology. You will find more details about these technologies by following the articles.

Many, but not all, game engines are developed around first-person shooters. Some of these engines include the Quake Engine, Doom 3 Engine, Crysis Engine, Far Cry Engine, Offset Engine, Unreal Engine, Half-Life Engine (which was originally a variation of the Quake 2 Engine), and others.

Understanding what professional game studios are using and knowing how they work can allow you to create your own rich and detailed game worlds that can visually compete in the marketplace. For this, I will try to give examples and really explain the subject in detail. It will be important for you to read this article and the others articles about that subject.

### Rasterization and the Rendering Pipeline

Rasterization is the rendering technique used to display virtual scenes in real-time applications and is the technique commonly used in PCs, home consoles, and mobile video game systems. Rasterization is fast, whereas other techniques, such as ray tracing, are not as fast to process in real time using available hardware. Ray tracing is generally not as fast due to the amount of processing power and the number of computations needed to render a complex scene at a high resolution, especially at high definition, but rasterization offers an efficient alternative for games. 

Although rasterization is fast, it is more complex to implement than ray tracing. On PCs, the top two graphics application programming interfaces (graphics APIs) are OpenGL and Direct3D. These graphics APIs are standard methods used to talk directly to the hardware on PCs, and they perform rasterization to create rendered scenes.

Ray tracing for real-time applications has become a reality on today’s hardware (GPU, cell processors, multicore processors, etc.). After the release of Nvidia's Turing GPU family in 2018, the ray tracing method has become very controversial and used. Nvidia's then-brand new "RTX" series of graphics cards brought support for something called "Real-Time Ray Tracing" in games. Most people weren't sure what this new feature was and why it was implemented so heavily by Nvidia, but they were also excited and interested in the technology. Ray Tracing was such a big spot for Nvidia that they felt it necessary to name the products they were launching correctly. The new GeForce “RTX” series cards have replaced the old “GTX” variant when it comes to top SKUs like the 60, 70, 80 and -80Ti SKUs that Nvidia usually releases.

Rasterization works by taking a 3D scene made up of polygons and primitives and generating a 2D image out of it. Generally, a polygon in an application such as a video game describes a triangle made up of three points. A stream of triangles is passed to the graphics hardware, is transformed into 2D form, and is displayed to the screen. Transformations are done using various mathematical matrices that describe the view, the scene, and object positions and orientations.. The points of the polygons are known as vertices. Polygons that are transformed to 2D but are partially outside of the bounds of the screen are clipped to the rendering area. Clipping is a way to truncate polygons that are outside of the rendering area, which is often the window’s screen.

Once polygons have been transformed to 2D and have been clipped to the screen bounds, the color information is stored and the surfaces that make up the polygon are filled in line-by-line, where each line is known as a scan-line.

In order to better understand what we are talking about, we can examine the images below.

![Triangle List](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k2klmyeean089mnyiq87.png)


![Polygon](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/klmcxiocd3sni3td7obm.png)

A polygon is a geometric shape made up of three or more connected points. In games, polygons often refer to three-point polygons, also known as triangles. So to summarize, we can think of everything as consisting of small triangles.

In the early days of 3D graphics, APIs such as OpenGL and Direct3D used fixed algorithms that were executed during the rendering process. These series of fixed algorithms are known as the fixed-function pipeline. Today we use programmable shaders, which are custom-written algorithms that we can create and use in our applications instead of the fixed function pipeline. We discuss programmable shaders in more detail later. 

Programmable shaders are the future for many reasons, one being that they are not restricted like the fixed-function pipeline, which could not be customized but instead could generally only have fixed features enabled or disabled. By being able to write our own algorithms we are able to create just about any effect that we can dream of.

In common graphics APIs such as OpenGL and Direct3D the information generated for a frame to be displayed includes not just color information but also depth, stencil flags, and anything else that can be used to perform rendering tasks. 

With rasterization, polygons are transformed and clipped, and then the volume that makes up the shape is filled in. This happens with all polygons, and to boost performance optimizations other techniques are usually used to prevent rendering of polygons that are not visible or are occluded by other pieces of geometry.

### XNA

The XNA Game Studio is a development tool created by Microsoft to allow developers of all levels to create video games on their Windows based operating systems and their Xbox 360 video game consoles. XNA Game Studio is composed of the XNA framework along with a content pipeline tool and is based on Microsoft’s Visual Studio toolset. By using this framework and the C# programming language development teams can more quickly develop their gaming projects. 

The XNA framework is made up of the following items and more:

- Content pipeline
- Rendering libraries
- Input libraries (which include Xbox 360 controllers)
- Sound libraries
- Starter kits

XNA has become a great way for hobbyists, students, and independent game developers to create not only games on Microsoft’s Windows operating system but also Microsoft home consoles. XNA marked a major step forward in game development by supplying anyone who is interested with a free set of professional tools and utilities. The release of XNA was quite an event in the independent game-development scene. Although Microsoft is not the first to allow development on their consoles outside of licensed developers, they are the first to do it in a way that has really helped the game development scene with easy-to-use and free tools supported and documented by a major development company. By giving the tools away for free, Microsoft is truly allowing anyone and any team to start making games immediately.

Because XNA uses the same shader language as Direct3D, a lot of the information and code can also be used by anyone using the XNA framework. Anyone who is new to computer graphics and development can consider using XNA as a way to get started in the field and as a way to gain experience.

Also, XNA is the name of the framework and is not an acronym for anything.


## Summary

This article was a brief introduction to computer and game graphics. If you follow the next topics, you can step into a more detailed and full of examples world.

The following elements were discussed in this article:

- General uses of computer graphics in the entertainment industry
- Brief overview of 2D computer graphics
- Brief overview of 3D computer graphics
- Brief overview of ray tracing
- Brief overview of rasterization
- Brief overview of OpenGL, Direct3D, and XNA

In the next stages, we take a closer look at the common mathematics that are used in video game graphics as well as other topics such as geometry, primitives, transformation spaces, colors, pixels, and more.