Computer Graphics Programming Quiz

Graphics Pipeline, OpenGL, Pygame & Shaders

📋 All Questions

Complete quiz covering all topics

50 Questions

🔄 Graphics Pipeline

Pipeline stages, transformations, and rendering

11 Questions

🖼️ OpenGL & Shaders

GLSL, vertices, buffers, uniforms, APIs

13 Questions

🎮 Pygame & App Phases

Window setup, main loop, events, interactivity

19 Questions

📐 Fundamentals

RGB values, core concepts, resolution

7 Questions

📖 Glossary

All terminology and definitions

Reference

📝 Key Summaries

Important concepts and cheat sheets

Reference

📖 Glossary

🖥️ Core Concepts

Computer Graphics

The use of computers to create and manipulate images.

Modeling

Mathematical specification of shape and appearance properties stored on computer.

Rendering

Creation of shaded images from 3D computer models.

Animation

Technique to create illusion of motion through a sequence of images (frames).

Raster

An array of pixels displayed on screen, arranged in a 2D grid.

Pixel

Picture element—smallest unit of a digital image. Colors specified by RGB triples (0-1 floats).

Resolution

The number of pixels in the raster.

Precision

The number of bits used for each pixel.

Frame

Each individual image displayed in an animation sequence.

Frame Rate (FPS)

The speed/rate at which animation frames appear, measured in frames per second.

💾 Buffer Types

Buffer

Temporary storage in computer memory for data being moved between locations.

Framebuffer

Region of memory storing pixel data. Must contain at minimum a color buffer.

Color Buffer

Stores RGB values for each pixel. Required in all framebuffers.

Depth Buffer

Stores distances from scene objects to virtual camera. Determines front/back visibility.

Stencil Buffer

Stores values for advanced effects: shadows, reflections, portal rendering.

Vertex Buffer Object (VBO)

GPU memory buffer storing vertex attribute data.

Vertex Array Object (VAO)

Manages associations between VBO data and shader attribute variables.

🔄 Graphics Pipeline Stages

Stage 1: Application

CPU-based: creates window, reads data (VBOs, textures, shaders), sends data to GPU via VAOs.

Stage 2: Geometry Processing

Vertex shader determines final position of each vertex through model, view, and projection transformations.

Stage 3: Rasterization

Groups vertices into primitives (points, lines, triangles), identifies pixels, creates fragments.

Stage 4: Pixel Processing

Fragment shader calculates final color using base color, interpolated vertex colors, textures, and lighting.

📐 Transformations

Model Transformation

Translates, rotates, scales objects to world space (origin at scene center).

View Transformation

Transforms world-space coordinates to view/camera/eye space (in front of user's view).

Projection Transformation

Discards/clips points outside specified region; coordinates in clip space.

Equivalent Spaces:

View space = Camera space = Eye space. Object space is different.

🖼️ OpenGL & Shaders

GPU

Graphics Processing Unit—highly parallel structure more efficient than CPUs for rendering.

Shader

Programs run by GPUs to perform rendering computations.

Vertex Shader

Applied to each vertex; determines final position. Uses gl_Position (vec4).

Fragment Shader

Applied to each fragment; calculates final pixel color.

GLSL

OpenGL Shading Language—cross-platform shader language.

HLSL

High-Level Shading Language—used with DirectX API on Microsoft platforms.

Metal

Apple's API and shading language for Mac, iPhone, iPad.

Mesh

Collection of points grouped into lines or triangles defining object shape.

Fragment

Collection of data used to determine color of a single pixel. Includes raster/pixel coordinates.

Primitive Assembly

Process of grouping points into geometric primitives (points, lines, triangles).

🎮 Pygame & Application Phases

Startup

Objects created, values initialized, external files loaded. One-time phase.

Main Loop

Repeats continuously: Process Input → Update → Render.

Process Input

Checks user actions (key presses, mouse clicks).

Update

Changes values of variables and objects.

Render

Creates graphics displayed on screen.

Shutdown

Stops input checking, closes windows. NOT part of main loop.

Discrete Event

Happens once at an isolated point in time (e.g., keydown, keyup).

Continuous Event

Continues happening during an interval (e.g., holding a key down).

📝 Key Summaries

🔄 Graphics Pipeline (4 Stages)

1. Application (CPU): Create window, read data (VBOs, textures, shaders), send to GPU via VAOs.
2. Geometry Processing: Vertex shader applies model/view/projection transformations to determine vertex positions.
3. Rasterization: Primitive assembly → identify pixels → create fragments (data for each pixel's color).
4. Pixel Processing: Fragment shader calculates final color using base color, interpolated vertex colors, textures, lighting.

📐 Transformations (MVP)

Model: Object → World space (translate, rotate, scale). Origin at scene center.
View: World → View/Camera/Eye space (in front of user).
Projection: Clip space—discard points outside region.
NOT a transformation: Image transformation.

🖼️ OpenGL & GLSL

Vertex data: Position, color, normal vector, texture coordinates. NOT buffer.
gl_Position: vec4 variable storing vertex position (x, y, z, w). w=1.0 default.
GLSL types: vec2, vec3, vec4 for float vectors (positions, colors, tex coords).
Drawing triangle: glBegin(GL_TRIANGLES) → glVertex3f() × 3 → glEnd().
Uniform variables: Constant across a draw call. Use glGetUniformLocation() to reference.
APIs: DirectX/HLSL (Microsoft), Metal (Apple), OpenGL/GLSL (cross-platform, most widely adopted).

💾 Buffer Types

Framebuffer: Contains color buffer (required), depth buffer (3D visibility), stencil buffer (advanced effects).
Depth buffer: Stores distances to camera—determines front/back visibility.
Stencil buffer: Used for shadows, reflections, portal rendering.
VBO: Stores vertex attribute data in GPU memory.
VAO: Manages VBO-to-shader attribute associations.

🎮 Pygame Application Phases

Startup: Initialize objects, values, load files. One-time.
Main Loop: Process Input → Update → Render (repeats continuously).
Shutdown: Stop input, close windows. NOT part of main loop.
Window setup: pygame.display.set_mode((width, height)).
Events: Discrete (keydown/keyup = once) vs Continuous (holding key = ongoing).
Key detection: event.type == pygame.KEYDOWN, event.key == pygame.K_w.

🎨 RGB Color Reference

Red: (1, 0, 0) | Orange: (1, 0.5, 0) | Yellow: (1, 1, 0)
Green: (0, 1, 0) | Blue: (0, 0, 1) | Violet: (0.5, 0, 1)
Black: (0, 0, 0) | White: (1, 1, 1) | Gray: (0.5, 0.5, 0.5)
Brown: (0.5, 0.2, 0) | Pink: (1, 0.5, 0.5) | Cyan: (0, 1, 1)

🔁 Application Stages

Startup: Creates objects, initializes values, loads external files.
Main Loop (3 substages): Process Input → Update → Render.
Shutdown: NOT a substage—occurs after loop ends.

Quiz

Question 1/50 Score: 0

💡 Why this is the correct answer:

📊 Comparison of Options:

Option	Status	Description

Computer Graphics Programming Quiz

📋 All Questions

🔄 Graphics Pipeline

🖼️ OpenGL & Shaders

🎮 Pygame & App Phases

📐 Fundamentals

📖 Glossary

📝 Key Summaries

📖 Glossary

🖥️ Core Concepts

💾 Buffer Types

🔄 Graphics Pipeline Stages

📐 Transformations

🖼️ OpenGL & Shaders

🎮 Pygame & Application Phases

📝 Key Summaries

🔄 Graphics Pipeline (4 Stages)

📐 Transformations (MVP)

🖼️ OpenGL & GLSL

💾 Buffer Types

🎮 Pygame Application Phases

🎨 RGB Color Reference

🔁 Application Stages

Quiz

💡 Why this is the correct answer:

📊 Comparison of Options:

📚 Additional Information:

Quiz Complete!