1

What happened in the background to render each pixel on screen by shader program?

To Understand how shader programs render each pixel on screen, we need to have a basic understanding of rendering and basic maths used to render things on the computer screen.

What is Rendering?

Rendering or Image synthesis is the process of generating a photorealistic or non-photorealistic image from a 2D or 3D model by means of a computer program. The resulting image is referred to as the render. 

What is Rendering in Game?

In games rendering is the process of generating an image from a game scene like, 2D or 3D meshes based on camera type, camera orientation, position of lights etc. The image generated by the rendering process is called a render or a frame. And this frame is what gets presented to the user on their computer screen.

The part of the game code which is used to render frames in game is called rendering or graphics engine. All the well known game engines like Unity and Unreal have a rendering module, apart from the rendering module they also have modules like physics, UI, multiplayer, audio etc.

Traditionally, most computer graphics renderings have relied solely on powerful CPU’s, but today, we have a specialised unit for rendering calculation that is GPU. 

What is a GPU?

GPU is a specialised electronic circuit designed to accelerate graphics rendering. GPUs can process many pieces of instruction (shader program) simultaneously, and accelerate the creation of images in a frame buffer intended for output to a display device.

As shown in above image we have fewer core in CPU and in GPU we have thousands of core

GPU is much faster than CPU for image manipulation as it can process thousands of pixels parallelly at a time. 

Usually any game scene design with 2D – 3D Meshes, textures, lightings and cameras. They all contributed an important role to make the game screen rich and to shade each pixel on the screen.

What is a Mesh?

Meshes are the way to define shapes in computer graphics. To define a shape, a mesh needs to store information about vertices, normals, UV coords. A Little more information is needed to define shapes like edges and faces which are calculated based on the order of vertices.

[Image showing the vertices, normals, edges and faces]

The Mesh are usually encoded by artist in certain software like max, maya, blender etc. and then exported as file eg. .FBX, .OBJ. Which then our game loads these file data in memory.

Objects:{ 
   	     Model: “model name”, “Mesh” {
  	          […]
                  Vertices: […]   <---- vertices data
                  PolygonVertexIndex: […]  <---- indices 
                  LayerElementNormal: { }  <---- node of the normals
                  LayerElementUV: { }  <---- node of the UV coords
             }
   	     Material: “material name”, “” { } <---- node of the material
             […]
        }

The order of vertices is also important because it’s used to define which side of a mesh face is considered the “front”. If vertices are defined in a counter clockwise order around the center of that polygon, that side of the mesh face is the “front”, and wisewersa for counterclockwise. This ordering is referred to as a mesh’s “winding order”.