1. Computer Graphics Module Overview
CO2409 Computer Graphics
Week 1, Part 1

2. Module Summary
The objective in this module is to create real-time 3D graphics
As used in games, design work, visualisation etc.
Focus is on the technologies not the artwork
Module covers theory in lectures and will do realistic examples in the labs using modern techniques
Assumes you are familiar with introductory C++
Will cover some maths
WARNING: This is a fairly tricky module:
Graphics APIs (e.g. DirectX) involve intricate programming
Maths and theory can be initially daunting

3. 2D Graphics Pixels / Colours 2D Geometry Bitmaps / Sprites 2-3 weeks
Pixel blending
2-3 weeks
A gentle introduction
Module gets harder!

4. 3D Maths - Intro 3D Geometry Maths Essentials C++ Issues
Basic functions
C++ Issues
Numerical limitations
Preparing for 3D work
1-2 weeks

5. 3D Maths – 3D Transformations
Matrices
General and 3D-specific
3D coordinate spaces
Manipulating 3D objects
Transforming them into 2D (the “viewport”)
Cameras
3 weeks: Key topic

6. Using Graphics APIs - DirectX
Rendering Pipeline
Input data / Materials
Transformations
Lighting
Pixel Rendering
Lectures cover theory
Implement in DirectX
DirectX 10
~5 weeks

7. Advanced Topics: Shaders
Vertex & Pixel shaders used throughout
Transformations
Lighting
Texturing
Advanced Techniques
Normal mapping
Cell shading
Reflection and Refraction
Several weeks

8. Advanced Topics: Shadows/Mirrors
Depth / Stencil buffers
Shadows
“Baked” Shadows
Dynamic Shadows
Portals
Reflections
2 weeks

9. Advanced Topics: Animation
Matrix Hierarchies
Rigid body animation
Soft body animation
Skeletons and Skinning
2 weeks

10. ? Other Module Content Graphics Hardware Review & revision
Lab exercise demos (see next slide)
4 weeks ? VS VS VS

11. Materials Lecture and lab material is on this website:
Follow the shortcut on the left from the main page
Also contains assignments, past papers etc.

12. Assessment Exam at the end of the second semester
Worth 50% of the module marks
Covers theory of graphics programming
Portfolio of practical work
Worth 50% of the total module marks
Lab assessments
Choose five labs each semester to demonstrate your progress for marks
Graphics exercise
Do in your own time, exercise released after Christmas
Portfolio split is 40% lab assessments (20% each semester) and 60% for the graphics exercise

13. Computer Graphics Pixels & Colours
CO2409 Computer Graphics
Week 1, Part 2

14. Mini-Lecture Contents
Pixels
RGB colours
HLS colours
Other colour spaces

15. 2D Graphics: Pixels
A computer display is a grid of small rectangular areas called pixels
Pixels are not necessarily square, although they are usually close to square
Each pixel can display a range of colours
But not the entire range of colours the eye can see – depending on the quality of the monitor.
Pixel colours are typically created by blending red, green and blue light
We won’t consider hardware mechanisms for this
All modern computer graphics are simply arrays of coloured rectangles

16. 2D Graphics: Pixel examples
Pixels are made from red, green, and blue components
All images are made from pixels:

17. RGB Colours
One way to define a colour is to specify the Red, Green and Blue components:
Often 3 integers in the range 0 to 255
From no colour to maximum intensity
E.g. Bright red: R=255, G=0, B=0
Or we can use floating point values from 0.0 to 1.0
E.g. Bright green: R = 0.0, G = 1.0, B = 0.0
The colours blend in the same way as light:
Blending maximum R, G & B gives a white colour
No R, G and B gives black (no light)
Another example: R+G = Yellow

18. RGB as a Colour Space Can draw a picture/graph of the RGB colour space
All available colours are mapped to a cube, with axes R, G and B
RGB is simple to use:
Integer RGB often packed into one hexadecimal value, e.g.
Bright red = 0xff0000 (C++ notation)
Red = 0xff (=255 in decimal)
Green = Blue = 0x00
Or using HTML notation:
Bright red = #ff0000

19. The HSL Colour Space Artists often use the HSL (or HLS) colour space
H = Hue (the base colour from the spectrum), range or 0.0 to 1.0
S = Saturation (the richness of the colour), range 0-100, or
L = Lightness (the brightness of the colour), range 0-100, or
Maps the colours to two cones
These values can be more intuitive than RGB

20. Other Colour Spaces
HSV / HSB (Hue, Saturation and Value/Brightness) is closely related to HSL
CMYK (Cyan, Magenta, Yellow and Black) is used for printing and blends colours in the same way as ink
YUV is a colour space used for video. It splits the image into luma (Y, brightness) and chroma (UV, colour)
XYZ and L*a*b* colour are precise colour models, designed to accurately reflect the response of the eye to brightness and colour
You may see some of these in graphics apps