3. Color and Blending¶

Unit 3 Lecture 1: Color Principles ¹¶

Light has two properties:
- Illuminance:
  - It is the amount of light that falls on a surface.
  - It is measured in lux (lumens per square meter).
  - It is the intensity of light or brightness.
  - It is sensed using the rods in the retina.
- Color:
  - It is the frequency and wavelength of light rays that are emitted or reflected from an object.
  - It is measured in nanometers.
  - It is sensed using the cones in the retina.
  - Chromaticity is the color of light without brightness.
When a light hits an object, it absorbs some of it and reflects the rest; the reflected light is what we see as color.
Primaries:
- Red: 700nm. #FF0000.
- Green: 546.1nm. #00FF00.
- Blue: 435.8nm. #0000FF.
Mixing RGB colors:
- Black: No light. #000000.
- White: Full light. #FFFFFF.
Emissive colors:
- If you mixed all RGB colors, you would get white.
- Usually with monitors.
- RGB model is emissive.
Transmissive colors:
- If you mixed all RGB colors, you would get black.
- Usually with printers (ink).
- CMYK model is transmissive.
Color Depth:
- It is the number of bits used to represent a color.
- 8-bit color depth: 256 colors.
- 24-bit color depth: 16.7 million colors.
- 32-bit color depth: 16.7 million colors + alpha channel.

RGBA color model:
- By adding the alpha channel to RBG, we can add transparency and blending: RGBA.
- It represents the portion of color that is blended with other colors (usually the background or the color behind the target).
- The alpha channel is a value between 0 and 1.
- 0: Fully transparent, 0% of the original color is mixed with the background.
- 1: Fully opaque, 100% of the original color is mixed with the background.
Pseudo colors:
- Representing data with one or more colors based on a specific range of values.
- Example: Heat map based on the temperature of objects in the scene.

We usually use the right-hand 3D coordinate system (x right, y up, z out towards us).
Point:
- It is a position in space defined by its coordinates (x, y, z).
- We see points as vertices in 3D space.
Line:
- It is a 1 dimensional object defined by two points (line segment) or a point and a direction vector (ray).
- For a line starts from point P0, and goes in the direction of vector V, the line is defined as P(t) = P0 + tV, where t is a scalar multiple of the direction vector V.
- If you have a line between two points P0 and P1, the line is defined as P(t) = P0 + t(P1 - P0) = (1 - t)P0 + tP1.
- Ray: A line that starts from a point and goes infinitely in a direction; only positive values of t are considered, aka, it only include points that are greater than or equal to the starting point (half-line).
Parametric curves:
- It is a curve defined by a set of equations that depend on a parameter.
- For a 3D curve, it is defined by 3 functions that drive the values for x, y, and z: P(t) = (x(t), y(t), z(t)).
- For any point t, you to consult the 3 functions of the curve to compute the x, y, and z values.
Vector:
- It is defined by a tuple of three values (x, y, z), but it is not a point.
- Vector lengthL ||V|| = sqrt(x^2 + y^2 + z^2).
- Unit vector has a length of 1.
- Vectors start from the origin (0, 0, 0), and their components are the coordinates of some point (or the end point) on that vector.

First, a specific color is called a hue.
Color can be thought of as an objects’ ability to absorb some wavelengths of light and reflect others.
Every color consists of a specific wavelength of light. Light is composed of photons that are emitted as energy.
White: teh object does not absorb any light, but reflects all of it.
Black: the object absorbs all light and reflects none.
Most graphics systems can support 16,581,375 different color hues.
This depth of color, often 255 intensities of each of the primary colors, is called true color, where each pixel requires 24 bits of color information.
For a 1024*768 resolution:
- We have 786,432 pixels.
- For a true color system, we need 24 * 786,432 = 18,874,368 bits which is approximately 2,359,296 bytes or 2.3MB of memory to store the color information for the entire screen.
True Color => 24 bits per pixel, they support 16,581,375 different color hues.
High Color => 16 bits per pixel, they support 4,096 different color hues.
Medium Color => 8 bits per pixel, they support 256 different color hues.
WebGL supports true color.

‌

Unit 3 Lecture 1: Color Principles | Home. (2024). Uopeople.edu. https://my.uopeople.edu/mod/kalvidres/view.php?id=444268 ↩
Unit 3 Lecture 2: Color Blending, Transparency, and the Alpha Channel | Home. (2024). Uopeople.edu. https://my.uopeople.edu/mod/kalvidres/view.php?id=444269 ↩
Unit 3 Lecture 3: Mathematics for modelling Part 1 | Home. (2024). Uopeople.edu. https://my.uopeople.edu/mod/kalvidres/view.php?id=444270 ↩
Learning Guide Unit 3: Introduction | Home. (2024). Uopeople.edu. https://my.uopeople.edu/mod/book/view.php?id=444261&chapterid=540592 ↩
Massachusetts Institute of Technology (2020). Coordinates and Transformations. MITOpenCourseware. https://ocw.mit.edu/courses/electrical-engineering-and-computer-science/6-837-computer-graphics-fall-2012/lecture-notes/. Review Lecture #3: Coordinates and Transformations. Read Lecture #5: Color. Read Lecture #15: Shading & Material Appearance. ↩↩↩
Guha. S. (2019). Computer graphics through OpenGL: From theory to experiments, 3^rd edition. Read Chapter 11 (Sections 11.1, 11.3, 11.4, 11.7, 11.8, 11.11, 11.14) ‌ ‌ ‌ ↩