VHA

computer graphics

describes the use of computers to create and manipulate images.

Modeling

deals with the mathematical specification of shape and appearance properties in a way that can be stored on the computer.

Rendering

deals with the creation of shaded images from 3D computer models

Animation

technique to create an illusion of motion through a sequence of images.

Rendering a scene

produces a raster

raster

• an array of pixels (picture elements) displayed on a screen, arranged in a grid with two (2) dimensions.

• specify colors using triples of floating-point numbers between 0 and 1, which represent the amount of red, green, and blue light existing in a color

a value of 0

indicates that no amount of that color exists

a value of 1

represents that color is displayed at full intensity.

quality of an image

depends partly on its resolution and precision.

Resolution

the number of pixels in the raster

precision

the number of bits used for each pixel.

buffer

a part of a computer's memory that serves as temporary storage for data while being moved from one location to another.

framebuffer

• Pixel data is stored in a region of memory

• must contain color buffer, depth buffer, stencil buffer

color buffer

contain a depth buffer

depth buffer

stores distances from points on scene objects to the virtual camera.

Depth values

• determine whether the object’s points are in front of or behind other objects (from the camera’s perspective).

• can also determine whether the points on each object will be visible when the scene is rendered

stencil buffer

may be used to store values used in generating advanced effects, such as shadows, reflections, or portal rendering.

Animations

consist of a sequence of images quickly displayed.

frame

Each of the images that is displayed

frame rate

• speed or rate at which these images appear

• measured in frames per second (FPS).

Graphics Processing Unit (GPU)

features a highly parallel structure that makes it more efficient than CPUs for rendering computer graphics.

shaders

• Programs run by GPUs

• are used to perform many different computations required in the rendering process.

application programming interface (API)

• implemeneted by Shader programming languages

• which defines a set of commands, functions, and protocols that can be used in interacting with an external system such as the GPU.

DirectX API & High-Level Shading Language (HLSL)

used on Microsoft platforms, including the Xbox game console

Metal API & Metal Shading Language

runs on modern Mac computers, iPhones, and iPads

OpenGL (Open Graphics Library) API & OpenGL Shading Language (GLSL)

a cross-platform library – OpenGL is the most widely adopted graphics API

graphics pipeline

• is an abstract model used to describe a sequence of steps needed in rendering a three-dimensional scene.

• enables a computational task to be split into subtasks thus increasing overall efficiency

• increase the efficiency of the rendering process, enabling images to be displayed at faster rates.

Application

initializing the window where rendered graphics will be displayed; sending data to the GPU

Geometry Processing

determining the position of each vertex of the geometric shapes to be rendered, implemented by a program known as vertex shade

Rasterization

determining which pixels correspond to the geometric shapes to be rendered

Pixel Processing

determining the color of each pixel in the rendered image, involving a program called a fragment shader

Stage 1: Application

• application stage primarily involves processes that run on the CPU.

• Processes during this stage:

  • Creating a window where the rendered graphics will be displayed

  • Reading data required for the rendering process

  • Sending data to the GPU

Creating a window where the rendered graphics will be displayed

• The window must be initialized to read the graphics from the GPU framebuffer.

• For animated and interactive applications, the main application contains a loop that repeatedly re-renders the scene, usually aiming for a rate of 60 FPS.

Reading data required for the rendering process

• This data may include vertex attributes, which describe the appearance of the geometric shapes being rendered.

• The vertex attribute data is stored in GPU memory buffers called vertex buffer objects (VBOs), while images to be used as textures are stored in texture buffers.

• source code for the vertex shader and fragment shader programs needs to be sent to the GPU, compiled, and loaded

Sending data to the GPU

• The application needs to specify the associations between attribute data stored in VBOs and attribute variables in the vertex shader program.

• A single geometric shape may have multiple attributes for each vertex (such as position and color).

• The corresponding data is streamed from buffers to variables in the shader during rendering.

• Frequently, it is also necessary to work with many sets of such associations.

• Multiple geometric shapes may be rendered by the same shader program.

• Each shape may also be rendered by a different shader program.

• These sets of associations can be managed using vertex array objects (VAOs). VAOs store this information and can be activated and deactivated as needed during the rendering process.

Stage 2: Geometry Processing

• Apart from the object’s overall shape, additional information may be required to describe how the object should be rendered.

• the vertex shader is applied to each of the vertices; each attribute variable in the shader receives data from a buffer according to previously specified associations.

mesh

• shape of a geometric object is defined by ________

• a collection of points that are grouped into lines or triangles.

vertex

• The properties or attributes that are specific to rendering each individual point are grouped together into a data structure _________

• should contain the three-dimensional position of the corresponding point.

• additional data contained by this:

  • color

  • texture coordinates

  • normal vector

color

be used when rendering the point

Texture coordinates (or UV coordinates)

which indicate a point in an image that is mapped to the vertex

normal vector

which indicates the direction perpendicular to a surface and is typically used in lighting calculations

primary purpose of vertex shader

determine the final position of each of the points being rendered.

Model transformation

• collection of points defining the intrinsic shape of an object may be translated, rotated, and scaled.

• the object appears to have a particular location, orientation, and size with respect to a virtual three-dimensional world.

• coordinates expressed from this frame of reference are in world space.

world space

origin is at the center of the scene.

View transformation

Coordinates in this context are said to be in view space.

view space (or camera space, or eye space)

result when world-space coordinates are transformed to coordinates in front of the user's view.

Projection transformation

any points outside the specified region are discarded or clipped from the scene

clip space

coordinates expressed at this stage are in _______

Stage 3: Rasterization

• Once the vertex shader has specified the final positions of each vertex, the rasterization stage begins.

• points themselves must first be grouped into the desired type of geometric primitive: points, lines, or triangles, consisting of sets of 1, 2, or 3 points.

• For lines and triangles, additional information must be specified. For example, an array of points [A, B, C, D, E, F] is to be grouped into lines.

• They could be grouped in disjoint pairs, such as (A, B), (C, D), (E, F), producing a set of disconnected line segments.

• They could also be grouped in overlapping pairs, such as (A, B), (B, C), (C, D), (D, E), (E, F), producing a set of connected line segments (called a line strip).

• The type of geometric primitive and method for grouping points is specified using an OpenGL function parameter when the rendering process begins.

primitive assembly

The process of grouping points into geometric primitives

criterion

must be specified to clarify which pixels are in the interior

fragment

• created for each pixel corresponding to the interior of a shape.

• a collection of data used to determine the color of a single pixel in a rendered image

raster position

• also called pixel coordinates

• data stored in a fragment always includes the ________

Stage 4: Pixel Processing

• determine the final color of each pixel

• storing this data in the color buffer within the framebuffer

fragment shader

• first part of pixel processing

• applied to each of the fragments to calculate their final color.

• may involve a variety of data stored in each fragment,

data available during rendering

• A base color applied to the entire shape

• Colors stored in each fragment (interpolated from vertex colors)

• Textures where colors are sampled from locations specified by texture coordinates

• Light sources. whose relative position and/or orientation may lighten or darken the color, depending on the direction the surface is facing at a point, specified by normal vectors

window

is a graphical interface element that displays an application’s content

Startup

During this stage, objects are created, values are initialized, and any required external files are loaded.

Main Loop

• This stage repeats continuously while the application is running

• three substages:

  • process input

  • update

  • render

Process Input

checks if the user has performed any action that sends data to the computer, such as pressing keys on a keyboard or clicking buttons on a mouse

Update

changes values of variables and objects.

Render

creates graphics that are displayed on the screen

Shutdown

• typically begins when the user performs an action indicating that the program should stop (for example, by clicking a button to quit the application).

• may involve tasks such as signaling the application to stop checking for user input and closing any windows created by the application

Pygame

• set of Python modules designed for creating video games. It is a popular Python game development library.

pygame.display.set_mode()

• set up a window using Pygame

• requires two (2) parameters to define the width and height of the window

point

• location in space. It is the most basic graphical element.

• render a single point on the screen, use a vertex shader.

main()

Every shader must contain

void

indicates that no values are returned and the main function requires no parameters

purpose of the vertex shader

• set up the gl_Position variable, a special, global, and built-in GLSL variable

• used to store the position of the current vertex.

GLSL has vector data types

are often used for storing values that indicate positions, colors, and texture coordinates.

two, three, or four

Vectors may have __________________ indicated by vec2, vec3, and vec4

four (4) float values

represent the vertex's x, y, z, and w positions

fourth parameter (w)

• used to manipulate the clipping of the vertex position in the 3D space.

• default value is 1.0.

vertex buffers

• Every vertex shader that you write will use arrays of data stored

Multiple points

are needed to specify the shapes of two-dimensional or three-dimensional objects

glVertex3f

Each of the triangle’s vertices is specified by a call ________

Vertices

must be specified between calls to glBegin and glEnd.

The parameter to glBegin

tells which type of primitive is being drawn.

Uniform variables

are global variables that can be accessed by the vertex shader or the fragment shader, and whose values are constant while each shape is being drawn (can be changed between draw function calls).

Uniform shader variables, declared with the type qualifier uniform

• provide a mechanism for directly sending data from variables in a CPU application to variables in a GPU program.

• must obtain a reference to the location of the uniform variable before data may be sent to it.

glGetUniformLocation(programRef, variableName)

• returns a value used to reference a uniform variable (indicated by the type qualifier uniform) with the name indicated by the parameter variableName and declared in the program referenced by the parameter programRef.

• If the variable is not declared or not used in the specified program, -1 is returned

Keydown

events occur the moment a key is initially pressed

keyup events

occur the moment the key is released

discrete

f it happens once at an isolated point in time.

continuous

it continues happening during an interval of time.

keydown and keyup events

• are discrete

• but many applications also feature continuous actions (such as moving an object on the screen) that occur for as long as a key is being held down.