notes/docs/lectures/graphics/01_rendering.md

Rendering

Rendering is the process of drawing images on the computer display. In this course we will focus on images which are made up of triangles.

Rendering in 2-Dimensions involves the following

1. The graphics programmer specifies vertices which make up some triangles to be drawn.
2. The API assembles triangles from the vertices.
3. The API rasterises the triangles to calculate which pixels are inside each triangle.
4. The pixels inside triangles, called fragments, are shaded to calculate the colour.
5. The colours are displayed at the appropriate pixels.

A vertex is a point in space and is used to model geometry. A vertex can be presented using a vector, which is like an arrow. Can be written as v=(3,2,0)

A fragement is a piece of a triangle which will be drawn to a pixel.

A section of memory called a frame buffer (or colour buffer) stores the colour values that will be used at each pixel.

A shader is a program. Shaders are run on the GPU.

Rendering Stages

1. Vertex Specification
   • In the application the vertices making up the triangles are specified, that is, given positions. The application is a software program which might be a Computer Aided Design (CAD), some kind of simulation, a visualisation, or a videogame. The graphics programmer specifies the location of vertices which make up the triangles to be rendered. These vertices are passed to the vertex shaders.
2. Vertex Shader
   • Vertex processing by the vertex shader moves the vertices around. . The Vertices are used to construct triangles.
3. Rasterisation
   • There may be empty space around the triangles. Rasterisation is the process of taking all of the triangles and figuring out which pixels are inside each of the triangles.
   • Each of these pixels inside the triangles is called a fragment.
   • Rasterisation will generate a fragment for each pixel which is inside a triangle. The fragments are passed to the fragment shaders.
4. Fragment Shader

• The colour of Fragments is calculated by the fragment shader.

Rasterisation

for each pixel y in Y dimension {
	for each pixel x in X dimension {
		for each triangle t {
 			if pixel x,y is inside triangle t {
                Call fragment shader to
				calculate the fragment colour
			}
        }
	}
}

Barcentric Coordinates

We can use this to calculate if a point is inside a triangle or not.

The barrcentric coordintates are \alpha, \beta, \gamma.

\alpha corresponds to the normalised linear distance of P between the line $\alpha$=0 and $\alpha$=1

\beta corresponds to the normalised linear distance of P between the line AC and point B

\gamma corresponds to the normalised linear distance of P between the line AB and point C

If \alpha, \beta, \gamma are all in the range [0..1] then the point is within the triangle.

Calculating Barycentric Coordinates

line(A, B, P) = (B_y-A_y)P_x+(A_x-B_x)P_y+B_xA_y-A_xB_y

\alpha = \frac{line(B,C,P)}{line(B,C,A)}

\beta = \frac{line(A,C,P)}{line(A,C,B)}

\gamma = \frac{line(A,B,P)}{line(A,B,C)}