intro comp graphics

Rasterization

Process of converting raw image into a pixelated image so that the computer can display it or the GPU can display it. Also called the process that makes raster images. Happens after primitive assembly and before fragment shader in the GPU pipeline.

Raster Image

A digital image composed of pixels, where each pixel has a specific color. Lacks geometric properties (unlike vector graphics).

BMP(Bitmap Image File)

Large files, high-quality, uncompressed image data.

PPM(Portable Pixelmap Image File)

Uncompressed, LDR (simplest image format available), 1/8/16 bits per channel.

PNG(Portable Graphics Format)

Lossless compression, LDR, 8/16 bits per channel or color table (2 to 256 colors).

GIF(Graphics Interchange Format)

Lossless compression, LDR, Color Table (2 to 256 colors).

JPEG(Join Photographic Experts Group)

Lossy compression (doesn't reproduce exact image when uncompressed), LDR, Equivalent of 8 bits per channel.

EXR(OpenEXR)

Most common HDR file format, Lossy/Lossless Compression, HDR, 16/32 bits per channel.

WebGL

JavaScript Graphics API that works on browsers without needing plugins. Based on OpenGL and runs on the GPU.

Vertex Shader

A program that runs on the GPU to process and transform the data of each vertex, which are the points that define a 3D object. Mainly changes the vertex's coordinates and position, which helps determine visibility, and modifies other vertex attributes such as color or texture coordinates.

Uniforms

Variables that remain constant across all vertices/fragments in a single draw call. Set from JavaScript, read-only in shaders. Used for transformation matrices, colors, light positions, time values, textures. More efficient than sending the same data per-vertex.

Vertex Processing

Takes each vertex (corner point) and moves it to the right place on screen (coordinate transformation). Calculates properties for that vertex like color, lighting, texture position.

Low/High Dynamic Range

Dynamic Range = The difference between the darkest and brightest parts of an image. HDR = Much wider range of brightness values (values above 255), uses more bits per channel, more detailed. LDR = Limited range of brightness values (0-255 per color channel), most standard monitors/images use 8 bits per channel.

Lossless Compression

Reproduces exact image when uncompressed, no data loss, larger file sizes.

Lossy Compression

Does NOT reproduce exact image when uncompressed, sacrifices some quality for smaller file size, data is permanently lost.

Gamma Correction

Adjusts the brightness of an image to match human perception. Human vision is more sensitive to differences in dark ranges than bright ranges (non-linear perception).

Alpha Blending

A technique to make objects transparent or semi-transparent. Combines the color of a foreground object with the background behind it based on an alpha value. Alpha = 0.0 → Fully transparent, Alpha = 1.0 → Fully opaque.

Affine Transformations

Most basic and common transformations: translation, rotation, scaling, shear. Straight lines remain straight, parallel lines remain parallel.

Linear Transformations

Subset of affine transformations. Preserves the origin (no translation allowed). Rotation, scaling, shearing (around origin). Excludes translation.

Perspective Projection

Non-affine transformation. Creates realistic depth: objects farther away appear smaller. Simulates how human eyes see the world. Used in 3D games, VR/AR, realistic rendering.

GPU(Graphics Processing Unit)

Specialized for graphics and parallel computations. Processes tasks in parallel (thousands at once). Thousands of smaller cores. Handles vertex shaders, fragment shaders, rasterization.

CPU(Central Processing Unit)

General-purpose processor. Handles logic, game rules, AI, physics. Processes tasks sequentially (one after another). Few powerful cores (4-16 typically).

State Machine

System that "remembers" settings until you explicitly change them. Example: gl.enable(gl.DEPTH_TEST) stays ON until you turn it OFF.

Retained Mode Graphics

Graphics system that stores/remembers the scene description. You build a scene graph or object list once. System handles when/how to render automatically. Examples: Three.js, Unity, scene graphs. Pros: Easier to use, system optimizes. Cons: Less control, potentially less efficient.

Immediate Mode Graphics

You directly command the system to draw each frame. No memory of previous frames. Must re-specify everything every single frame. Examples: WebGL, OpenGL. Pros: Full control, potentially more efficient. Cons: More work for programmer.

Buffering (single and double)

Buffer: Chunk of memory that stores data. Single Buffering: One buffer, draw directly to screen, may cause tearing/flickering. Double Buffering: Two buffers, back buffer drawn to, front buffer displayed, swap buffers for smooth animation. Standard for modern graphics.

General Buffering

Using memory to store various types of data: Vertex buffer (stores vertex positions), Color buffer (stores pixel colors), Depth buffer (stores depth values), Stencil buffer (stores masking values).

Buffer Swaps and Triggering

Exchange front and back buffers in double buffering. Back buffer becomes visible (front), old front becomes new back ready for next frame.

Attributes

Per-vertex data sent from CPU to vertex shader. Different value for each vertex. Examples: position, color, normal, texture coordinates. Stored in vertex buffer objects (VBOs) on GPU. Declared with attribute keyword in vertex shader.