computer graphics for technology

1. Computer Graphics
CHAPTER 3 INTRODUCTION TO THE RENDERING PROCESS WITH OPENGL
By Asamenek.

2. Overview
➢Graphics Pipeline
➢OpenGL
➢Coordinate Systems
➢Shaders Fundamentals
➢Summery
➢Lab 2 – Basic of OpenGL and Shader Language

3. Graphics Pipeline(Rendering)
➢ Vectors are the basis for computer generated images specifying the vertexes in the image
➢ Changing these vertexes to beautiful image is not an easy task and it goes through many stages
➢ The Process of changing these vertexes to images is called Graphics Pipeline or Rendering
Pipeline
.
.
.
Graphics Pipeline

4. Graphics Pipeline
➢ The graphics pipeline has up to 7 stages.
➢ Some of these stages need to be implemented by us, some are optional to implement and
some are already implemented for us
➢ The stages are executed by Shader Program
➢ Vertex Shader
➢ Tessellation Shader
➢ Geometry Shader
➢ Rasterization
➢ Clipping
➢ Primitive Setup
➢ Fragment Shader

5. Graphics Pipeline – Vertex Shader
➢ Vertex shading is the stage in the rendering pipeline that handles the processing of individual
vertices
➢ Vertex shaders are fed Vertex data, as specified from a vertex array object by a drawing
command
➢ receives a single vertex from the vertex stream and generates a single vertex to the output
vertex stream
[4, 4]
[8, 0]
[4, -4]
[-4, -4]
[-8, 0]
[-4, 4]
V
Vertex Shader
[1, 0]
[1, 0]
[1, 0]
[1, 0]
[1, 0]
[1, 0]
V +

6. Graphics Pipeline – Tessellation Shader
➢ Tessellation Shader tessellates (subdivide) the object given by the Vertex Shader
➢ This shader allows to add more detail to the already existing object
Tessellation Shader

7. Graphics Pipeline – Tessellation Shader
➢ Tessellation Shader tessellates (subdivide) the object given by the Vertex Shader
➢ This shader allows to more detail to the already existing object

8. Graphics Pipeline – Geometry Shader
➢ Geometry Shader allows additional processing on individual primitive level like creating new
primitive, removing old primitives or manipulating the existing
➢ This allows parts of the graphics to be generated only when they are needed, which saves
storage of the newly generated parts
➢ Grass, Fur and similar graphics can be generated using geometry shader

9. Graphics Pipeline – Primitive Assembly
➢ The previous shaders operate on vertexes and generate new vertexes and primitives
➢ The primitive assembly organize these vertexes to base primitives so that further processing is
easier like rasterizing and clipping

10. Graphics Pipeline – Clipping
➢ The vertexes created until now might out of the view port (the region of the window where we
are permitted to draw)
➢ We use clipping stage to modify the drawing vertex is outside the view port
View Port
Clipping

11. Graphics Pipeline – Clipping and Rasterizing
➢ The vectors that we specify have only mathematical description and doesn’t contain any
information about the screen
➢Rasterization – is the process of defining candidate fragments of the primitives that can be
displayed on the screen

12. Graphics Pipeline – Fragment Shader
➢ Until now, we only manipulate the position of the vertexes and primitives (basic shapes)
➢ We need to manipulate the color and texture of the image
➢ In this stage, we calculate the fragments’ final color

13. Coordinate systems
➢ The use of coordinate systems is fundamental to computer graphics
➢ Coordinate systems are used to describe the locations of points in space

14. Summary
➢ Coordinate Systems are defined by an origin point O and set of basis vectors
➢ Basis vectors are vectors that are linearly independent and span a set of vectors V
➢ Different Coordinate systems can be used based on the problem given
➢ Changing between coordinate systems can be calculated using Transformation
➢ Transformation can be used for Rotation, Reflection, Scaling ….
➢ Homogenous coordinate system is a cartesian coordinate system with extra W component
➢ Used for applying uniform matrix operation across different transformation

15. Output Primitives
 Output Primitives: Basic geometric structures
used to describe scenes.
(points, straight line segment, circles and
other conic sections, quadric surfaces,
spline curve and surfaces, polygon color
areas, and character strings)
These picture components are often
defined in a continuous space.

16. Output Primitives
In order to draw the primitive objects, one
has to first scan convert the object.
Scan convert: Refers to the operation of
finding out the location of pixels to be
intensified and then setting the values of
corresponding bits, in the graphic
memory, to the desired intensity code.

17. Scan Converting A Point
A random-scan (vector) system
stores point-plotting instructions in the
display list, and coordinate values in
these instructions are converted to
deflection voltages that position the
electron beam at the screen locations
to be plotted during each refresh cycle.

18. OpenGL
➢ OpenGL (Open Graphics Library) is an API – Application Programming Interface – which is a
software library for accessing features in computer graphics hardware
➢ Contains more than 500 distinct commands to create computer graphics objects and apply
operation on these objects
➢ OpenGL is designed to be hardware independent and cross platform interface

19. OpenGL
➢ OpenGL 1.0, first version, was release in 1994
➢ Now the latest version is 4.3 but we will be using version 3.3 and above
➢ OpenGL uses the full graphics pipeline
➢ It is Client-Server system in which the application we write is the client which simply sends
commands that manipulate images to the server
➢ The server is OpenGL implementation provided by the manufacturer of the hardware and the
software of the machine

20. OpenGL – Graphics Terminologies
➢ Primitives – are basic shapes that allow to create more complex shapes – Point, Line, Triangles
and their derivatives
➢ Models or Objects – are complex structures that are constructed by combining the primitives
➢ Rendering – is the process by which computer creates images from models
➢ Pixel – is the smallest visible elements of the computer/mobile display
➢ Framebuffer – is the memory space on which the pixels are stored

21. OpenGL – Syntax
➢ All OpenGL function start with ‘gl’ prefix
➢ Some have glUniform*() structure describing the arguments
glClear(GL_COLOR_BUFFER_BIT)
glColor3f(1.0, 0.0, 0.0)
glBegin(GL_POINTS)
glVertex2f(0.0, 0.0)
glEnd()
glFlush()
glUniform2f()
glUniform3fv()
glUniform2fv()

22. Drawing using OpenGL
➢ OpenGL by itself doesn’t provide windowing functionalities apart from graphics processing
commands
➢ We use PyGame to create and provide windowing functionalities
➢ We also need to initialize OpenGL with default values

23. OpenGL – before all
➢ Import important libraries
import pygame
from OpenGL.GL import *
from OpenGL.GLU import *
from pygame.locals import *
from OpenGL.GL.shaders import *
import numpy as np

24. OpenGL – Window Loop
➢ Graphical Applications need a main loop to stay open until the user closes it
def main():
init()
while True:
for event in pygame.event.get():
if event.type == pygame.QUIT:
pygame.quit()
quit()
draw()
pygame.display.flip()
pygame.time.wait(10)

25. Shader Language
➢ Most operations on the vertexes can be done in parallel processing
➢ Sadly, CPUs like sequential computation and not parallel computation
➢ GPUs offer parallel computation scheme, allowing us to compute thousands of operation in a
single unit time

26. Shader Language
➢ The graphics pipeline in computer graphics requires parallel computation
➢ Shader Language is specialized programming language for computer graphics pipeline that
allows us to use the parallel computation power of the GPU
➢ Shaders must be compiled by OpenGL before loading them to memory

27. Shader Language – Vertex Shader
vec4 vPosition;
void main()
{
gl_Position = vPosition;
}

28. Shader Language – Fragment Shader
void main()
{
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}

29. Shader Language – Compiling and Loading Shader
# read Shader File content
vertexShaderContent = getFileContent("triangle.vertex.shader")
fragmentShaderContent = getFileContent("triangle.fragment.shader")
# compile Shader content
vertexShader = compileShader(vertexShaderContent, GL_VERTEX_SHADER)
fragmentShader = compileShader(fragmentShaderContent, GL_FRAGMENT_SHADER)
# Compile shader program
program = glCreateProgram()
glAttachShader(program, vertexShader)
glAttachShader(program, fragmentShader)
glLinkProgram(program)

30. OpenGL - Buffers
➢ OpenGL stores any kind of data on buffer memory
➢ This buffer memory need to be first allocated for specific kind of of data (position vector, color,
image)
➢ Once, a buffer memory space is created, the vertexes are stored on it

31. OpenGL – Creating vertexes
# Create vertexes
vertexes = np.array([
[0.5, 0.0, 0.0],
[-0.5, 0.0, 0.0],
[0, 0.5, 0.0]], dtype=np.float32)

32. OpenGL – Creating Buffer Memory
# Get memory space and load it with the vetrtexes
triangleVBO = glGenBuffers(1)
glBindBuffer(GL_ARRAY_BUFFER, triangleVBO)
glBufferData(GL_ARRAY_BUFFER, vertexes.nbytes, vertexes, GL_STATIC_DRAW)

33. OpenGL – Loading the vertexes
# Load the new memory space with our vertexes
triangleVAO = glGenVertexArrays(1)
glBindVertexArray(triangleVAO)
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * vertexes.itemsize, None)

34. Summary
➢ The Graphics Pipeline – The stages in which vertexes pass through
➢ Vertex Shader – Processing individual vertexes
➢ Tessellation Shader – subdividing the patches of the model to further process in detail
➢ Geometry Shader – Processing basic primitives
➢ Primitive Assembly – organizing primitive so that it is easier for further processing
➢ Clipping – Modifying primitives by clipping vertexes outside the view port
➢ Rasterizing – Converting mathematical description of shapes to candidate fragments on the screen
➢ Fragment Shader – processing the color of individual fragments

35. Summary
➢ OpenGL – API for processing computer graphics
➢ Cross Platform and Hardware Independent
➢ Client-Server Architecture
➢ Doesn’t contain windowing functionality, so we use PyGame’s windowing functionality
➢ Shaders
➢ Small programs of computer graphics that run on GPU for parallel computation of vertexes and
primitives
➢ Must be compiled by OpenGL and loaded to memory

36. CG – Lab 2 Hello World in OpenGL
➢ Create a “shader” program, compile and load it in OpenGL
➢ Create our triangle vertices and load it to GPU
➢ Draw the vertexes – A Triangle