Lecture #01. Image. Clearing of the image

Computer graphics in Game development

Ivan Belyavtsev


Course instructor

My name is Ivan Belyavtsev

Position: Senior developer technology engineer in computer graphics

Qualification: Researcher and educator in Computer science

Webpage: djbelyak.ru


The views and opinions expressed in this course are those of my own and do not represent those of my employer, NVIDIA

Let’s get acquainted

Please, introduce yourself and tell us about your most favorite game

Administrative: Schedule

  1. 09.09.2022-10.09.2022 - 5 classes
  2. 30.09.2022-01.10.2022 - 5 classes
  3. 21.10.2022-22.10.2022 - 5 classes
  4. 02.12.2022-03.12.2022 - 5 classes + Final assessment


  1. 09.09.2022-10.09.2022 - Basics of rasterization
  2. 30.09.2022-01.10.2022 - Basics of ray tracing
  3. 21.10.2022-22.10.2022 - Basics of DirectX 12
  4. 02.12.2022-03.12.2022 - Advanced technics and algorithms

How we will work

  • During classes
    • Half of each class is a theoretical lecture
    • The second half are practical exercises (labs)
  • Between blocks
    • Repeat of materials
    • Complete all labs
    • Do creative tasks to get highest mark
    • Submit you your labs before deadline
  • Final
    • Test in Moodle

Course check points

  1. Lab “Basic of rasterization” - 20 points + 5 points for creative task
  2. Lab “Basics of ray tracing” - 20 points + 5 points for creative task
  3. Lab “Basics of DirectX 12” - 25 points
  4. Final test - 25 points


  1. Lab “Basic of rasterization” - 30.09.2022
  2. Lab “Basics of ray tracing” - 21.10.2022
  3. Lab “Basics of DirectX 12” - 02.12.2022
  4. Final test - 03.12.2022

Target audience

This course was designed with the next suppositions:

  • students have strong knowledge in linear algebra
  • students have strong knowledge of C++
  • students don’t have any experience with computer graphics, graphics APIs, and game engines

This course requires a lot of discipline and energy

Expectations vs reality

From: https://t.co/OBcsTyfUfi

What we won’t cover

  • 3D modeling as art
  • Animation
  • Game engines
  • Music and sounds
  • Game design
  • Network

Hardware requirements

DirectX 12 works on Windows only

You need PC with Win10/11 or VM with Win10/11

Basics of rasterization and ray tracing could be executed on different platforms

Software requirements

The simplest way to install all needed software

  1. Run Visual Studio Community installation
  2. Choose the next workloads and components during installation:
    1. Desktop development with C++
    2. Game development with C++
    3. Git for Windows
  3. (Optional) Install CLion

These slides

  • Moodle page: [https://moodle.innopolis.university/course/view.php?id=1176]https://moodle.innopolis.university/course/view.php?id=1176)
  • My webpage: djbelyak.ru

Communication channels

Course chat in Telegram: https://t.me/+2typYwmZ4uQ5ZDcy

telegram chat

Do you have any questions about administrative part?

Let’s dive into computer graphics

From: https://i.imgur.com/6qgzdkE.jpg

Types of sciences

  • Social
  • Natural
  • Axiological [1]

Aim and principles of applied sciences

  • Aim to make something the most effective way
  • Efficiency maximization principle [2]

Aim and principles of computer science

  • Is computer science an applied science? [1]
  • Aim to process, store, and transfer information by the most effective way [3]

Aim and principles of computer graphics

  • Is computer graphics a computer science?
  • Aim to create, process, store, and transfer visual information by the most effective way

Aim and principles computer graphics in game development

  • Aim to create, process, store, and transfer of visual representation of an in-game world to a player by the most effective way
  • What’s mean “the most effective way” here?


Rendering is a process of generating a photorealistic or non-photorealistic image from 2D or 3D model by means of a computer program [4]

Rendering pipeline

Rendering pipeline

Let’s define what is the image

Physics and anatomy will help us

What is the light

From: https://www.color-management-guide.com/eye-and-colors.html


Human eye

  • Rods - light quantity
  • Cones - light quality
    • S-cones - blue
    • M-cones - green
    • L-cones - red


Color perception

From: https://www.color-management-guide.com/eye-and-colors.html



Pixel is the smallest part of the image

From: https://www.color-management-guide.com/eye-and-colors.html


Pixel density

From: https://www.extremetech.com/computing/122725-what-the-ipad-3s-retina-display-looks-like-under-a-microscope


Color quantization and sRGB gamut

From: https://upload.wikimedia.org/wikipedia/commons/a/a8/CIExy1931_sRGB.png


Image and render target

Image is an \(N \times M\) array of pixels, where each pixel stores information about the intensity of red, blue, and green colors [9]

Render target is a region of memory in which the image will be drawn

Lab: 1.01 Preparations

  1. Create your own repo base upon the template: https://github.com/djbelyak/computer-graphics-in-game-development-fall2022
  2. Don’t forget git submodule update --init --recursive to get all submodules
  3. Explore the project files

Lab: 1.02 Image clearing

  1. Implement cg::resource class
  2. Implement cg::color and cg::unsigned_color structs
  3. Implement set_render_target, set_viewport, clear_render_target methods of cg::renderer::rasterizer class
  4. Implement image clearing & saving in cg::renderer::rasterization_renderer class


Kanke V.A. Istoriya, filosofiya i metodologiya tehniki i informatiki. uchebnik. Uriat, 2014.
Kanke V.A. Metascientific foundations of understanding of status of technology // Nuclear Energy and Technology. 2017. Vol. 3. P.
Kanke V.A. Metascientific and philosophical reasons to define the status of computer science // Automatic Documentation and Mathematical Linguistics. 2017. Vol. 51. P. 101–107.
Strothotte T., Schlechtweg S. Non-photorealistic computer graphics: Modeling, rendering, and animation // Morgan Kaufmann. 2002. P.
Frich A. The human eye and colour perception [Electronic resource]. 2015. URL: https://www.color-management-guide.com/eye-and-colors.html.
McGuire M. The graphics codex. 2.14 ed. Casual Effects, 2018.
Anthony S. What the iPad 3’s retina display looks like under a microscope [Electronic resource]. 2012. URL: What the iPad 3’s Retina display looks like under a microscope.
Hunt R.W.G., Pointer M.R. Measuring colour. Wiley, 2011.
Lyon R. A brief history of ’pixel // Proceedings of SPIE - The International Society for Optical Engineering. 2006. Vol. 6069. P.
// reveal.js plugins