Computer Graphics - Dr.
Ahmed Badawy
Computer Graphics
Dr. Ahmed Badawy
1
Lecture 02
Computer Graphics - Dr. Ahmed Badawy
Introduction to Computer Graphics and Python
Graphics pipeline:
• an abstract model that describes a sequence of steps needed to render a three-dimensional
scene.
• refers to a series of interconnected stages through which data and commands related to a scene
go through during rendering process.
• takes us from the mathematical description of an object to its representation on the device.
• allows a computational task to be split into subtasks, each of which can be worked on in parallel
• increase the efficiency of the rendering process, enabling images to be displayed at faster rates.
2
Computer Graphics - Dr. Ahmed Badawy
Introduction to Computer Graphics and Python
Graphics pipeline:
The one described here consists of four stages:
1. Application Stage: initializing the window where rendered graphics will be displayed;
sending data to the GPU.
2. Geometry Processing: determining the position of each vertex of the geometric shapes to be
rendered, implemented by a program called a vertex shader.
3. Rasterization: determining which pixels correspond to the geometric shapes to be
rendered.
4. Pixel Processing: determining the color of each pixel in the rendered image, involving a
program called a fragment shader
3
Computer Graphics - Dr. Ahmed Badawy
Introduction to Computer Graphics and Python
Pixel
In digital imaging, a pixel (or picture element) is a single point in an image. Pixels are placed on a
regular 2-dimensional grid and are often represented using dots or squares.
The intensity of each pixel is variable; in color systems, each pixel typically has three subpixels such
as red, green, and blue.
In the enlarged
portion of the
image individual
pixels are rendered
as squares and can
be easily seen.
4
Computer Graphics - Dr. Ahmed Badawy
Introduction to Computer Graphics and Python
On modern computer systems, pixels specify colors using triples of floating-point numbers between
0 and 1 to represent the amount of red, green, and blue light present in a color;
• a value of (0) represents no amount of that color is present,
• while a value of (1) represents that color is displayed at full (100%) intensity
5
Computer Graphics - Dr. Ahmed Badawy
Introduction to Computer Graphics and Python
The quality of an image depends in part on its:
• resolution (the number of pixels in the raster ( ) )شبكةand
• precision (the number of bits used for each pixel).
As each bit has two possible values (0 or 1), the number of
colors that can be expressed with N-bit precision is 2^N .
• early video game consoles with 8-bit graphics were
able to display 2^8 = 256 different colors.
• Monochrome displays could be said to have 1-bit
graphics (mono means "one", and chrome means
"color"), while
• Modern displays often feature:
“high color” (16-bit, 2^16 = 65,536 color) or
“true color” (24-bit, 2^24 = more than 16 million
colors).
6
Computer Graphics - Dr. Ahmed Badawy
Introduction to Computer Graphics and Python
Resolution (number of pixels in the raster) and Precision (number of bits used for each pixel).
7
Computer Graphics - Dr. Ahmed Badawy
Introduction to Computer Graphics and Python
Programs that are run by GPUs are called shaders, initially so named because they were used for
shading effects but now used to perform many different computations required in the rendering
process.
Just as there are many high-level programming languages (such as Java, JavaScript, and Python)
used to develop CPU-based applications, there are many shader programming languages.
Each shader language implements an application programming interface (API), which
defines a set of commands, functions, and protocols that can be used to interact with an external
system - in this case, the GPU.
Some APIs and their corresponding shader languages include :
1. DirectX API and High-Level Shading Language (HLSL), used on Microsoft platforms,
including the Xbox game console.
2. Metal API and Metal Shading Language, which runs on modern Mac computers,
iPhones, and iPads.
3. OpenGL (Open Graphics Library) API and OpenGL Shading Language (GLSL), a
cross-platform library. The most widely adopted graphics API. As a cross-platform library,
visual results will be consistent on any supported operating system.
8
Computer Graphics - Dr. Ahmed Badawy
Setting up a development environment
1. Installing Python
The Python installer will also install Python’s Integrated Development and Learning
Environment (IDLE).
IDLE has two main window types:
1. The first window type, which automatically opens when you run IDLE, is the shell
window, an interactive window that allows you to write Python code which is then
immediately executed after pressing the Enter key.
2. The second window type is the editor window, which functions as a text editor, allowing
you to open, write, and save files containing Python code, which are called modules and
typically use the (.py) file extension. An editor window can be opened from the shell
window by selecting either File > New File or File > Open... from the menu bar.
9
Computer Graphics - Dr. Ahmed Badawy
Setting up a development environment
2. Install libraries
-pyopengl, glfw, pyrr, pillow
py -m pip install pyopengl glfw pyrr pillow
10
Computer Graphics - Dr. Ahmed Badawy
Setting up a development environment
2. Install libraries
-pyopengl, glfw, pyrr, pillow
PyOpenGL is a large Python package that wraps most of the OpenGL API. OpenGL (Open
Graphics Library) is a cross-language, cross-platform application programming interface (API)
for rendering 2D and 3D vector graphics. The API is typically used to interact with a graphics
processing unit (GPU), to achieve hardware-accelerated rendering.
11
Computer Graphics - Dr. Ahmed Badawy
Setting up a development environment
2. Install libraries
-pyopengl, glfw, pyrr, pillow
GLFW (Graphics Library Framework) is a utility library for use with OpenGL. It provides
programmers with the ability to create and manage windows and OpenGL contexts, as well as
handle joystick, keyboard and mouse input.
Pyrr is a Python mathematical library.
12