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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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