Slide 1

Computer Graphics how renderings are done on a computer. Art 321 Dr. J Parker Winter Slide 2 How are visuals made using a computer? All computers work in much the same way. Computers only manipulate numbers. To get a computer to create a picture, we must device some sort of code that allows pictures and music to be made into numbers. This is an encoding, and computers use many of them Slide 3 How are visuals made using a computer? A drawing or rendering consists of lines/boundaries, variations in colour or grey, and 3D to 2D transformations that allow a set of objects to be made into an image. Why not use a camera? Slide 4 How are visuals made using a computer? Why not use a camera? Because a camera captures only one face or position at a time. We need to ultimately have a complete 3D view Slide 5 How are visuals made using a computer? Representing colour: Color is specified as red, green, and blue components, just as in images. We can specify most colours this way. Slide 6 How are visuals made using a computer? Coordinates - position In high school we drew graphs using an X and a Y axis. We specified any point as an X and a Y coordinate. x Y 0,0 x, y Slide 7 How are visuals made using a computer? Coordinates - position On the computer screen, its just upside-down from that. The upper-left is 0,0 (origin) and Y coordinates get bigger as we move down the screen x Y 0,0 x, y Slide 8 How are visuals made using a computer? Drawing We now have paper. To draw, we give the computer a command like drawLine or drawPoint x Y 0,0 x, y Slide 9 How are visuals made using a computer? Drawing A point can be just a pixel. The drawPoint command would need to be told where to draw a point (what pixel) drawPoint (x, y); x Y 0,0 x, y Slide 10 How are visuals made using a computer? Drawing We could also say what colour, or we could set a colour to be used until we changed it. setColor (r, g, b); x Y 0,0 Slide 11 How are visuals made using a computer? Drawing A line (line segment, really) occurs between two points. Thus: drawLine (x0,y0, x1,y1); x Y 0,0 x1, y1 x0, y0 Slide 12 How are visuals made using a computer? Were getting into turtle graphics territory. A rectangle is 4 lines or 4 points, take your pick: drawRectangle (x0,y0, x1,y1, x2,y2, x3,y3); x Y 0,0 x1, y1 x0, y0 x2, y2 x3, y3 Slide 13 How are visuals made using a computer? We can fill a rectangle with color. drawFilledRectangle (x0,y0, x1,y1, x2,y2, x3,y3); Best to do it when we draw it rather than after. x Y 0,0 x1, y1 x0, y0 x2, y2 x3, y3 Slide 14 How are visuals made using a computer? See a pattern?. Circles specify centre position and radius. drawCircle (x0,y0, r); drawFilledCircle (x1,y1, r); x Y 0,0 x1, y1 x0, y0 Slide 15 How are 3D visuals made using a computer? We see a projection onto a flat surface from the 3D scene. Slide 16 How are 3D visuals made using a computer? Using a computer we need to specify the point from where we are looking (viewpoint) and the direction we are looking. Slide 17 How are 3D visuals made using a computer? 3D lines and triangles, etc. have 3 Coordinates (x,y,z), not just 2. Slide 18 How are visuals made using a computer? Slide 19 Polygons are used to construct complex 3D shapes. This is called modeling. Slide 20 How are visuals made using a computer? These polygonal objects can be made to look more realistic by shading them; that is, by applying color or greys of various intensities as a function of position on each triangle. Slide 21 How are visuals made using a computer? These polygonal objects can be made to look more realistic by shading them; that is, by applying color or greys of various intensities as a function of position on each triangle. Slide 22 How are visuals made using a computer? These polygonal objects can be made to look more realistic by shading them; that is, by applying color or greys of various intensities as a function of position on each triangle. Slide 23 How are visuals made using a computer? These polygonal objects can be made to look more realistic by shading them; that is, by applying color or greys of various intensities as a function of position on each triangle. Slide 24 How are visuals made using a computer? Slide 25 Slide 26 Slide 27 Lets make something interesting. Search the net for building images Slide 28 Lets make something interesting. Make a background Slide 29 Lets make something interesting. Make a prism (3D rectangle) Slide 30 Lets make something interesting. Map the texture Slide 31 Lets make something interesting. Make a lot of them Slide 32 This is how game worlds are made All objects in a 3D computer game are made of polygons, and have textures, bumps, and grunge mapped onto them. Slide 33 This is how game worlds are made Bumps are achieved by perturbing the surface normals of the object and using the perturbed normal during lighting calculations. The result is an apparently bumpy surface rather than a smooth surface although the surface of the underlying object is not actually changed. Slide 34 This is how game worlds are made All objects in a 3D computer game are made of polygons, and have textures, bumps, and grunge mapped onto them.