1. Introduction. 1.1 Graphics Areas. Modeling: building specification of shape and appearance properties that can be stored in computer

Transcription

1 1. Introduction 1.1 Graphics Areas Modeling: building specification of shape and appearance properties that can be stored in computer Rendering: creation of shaded images from 3D computer models 2 Animation: to create an illusion of motion through sequences of images

2 Modeling 3 For example, how should the pyramid on the right be represented internally? You need to record both geometric and topological Information: Vertex Table + Edge Table

3 Modeling or, these? 4 shape design/representation using: implicit surfaces, parametric surfaces, subdivision surfaces,

4 Modeling or, these? particle system 5

5 Modeling 6 Or, these? Context free grammer (fractals, L-system)

6 Rendering How should images like these be generated? 7

7 Rendering Or these? 8

8 Animation How should an illusion of motion be generated? 9

9 Animation Fat horse animation 10

10 Advantages Quantitative description - precise, not easy to be recognized Pictorial description - easy to be recognized 11

11 History Founded by the PhD thesis of Ivan D. Sutherland at MIT in 1963, - A line drawing system with data structures for storing symbol hierarchies and interaction techniques 12 SIGGRAPH: important CG organization, formed in 1969 Website:

12 Computer Graphics & Image Processing (blending together more each year) Image processing 13 Graphics Image Description Pattern recognition (computer vision)

13 1.2 Applications Art, Entertainment, and Publishing Movie production, Animation, and Special Effects Computer Games Browsing on the World Wide Web Slide, Book and Magazine Design 14

14 Examples 15

15 1.2 Applications 16 Process Control (Monitoring) Status display for refineries, power plants, computer networks from sensors attached to critical components Simulation - Flight simulation - Simulation of the movement of a robot - Simulation of virtual world

16 Virtual World 17

17 1.2 Applications Computer Aided Design (CAD) - Computer Aided Mechanical Part Design (big market) - Computer Aided Architectural Design - Electrical Circuit (IC) Design 18

18 Examples of CAD 19

19 1.2 Applications Scientific Analysis and Visualization Assist scientists in understanding measured data Provide insight into complex mathematical ideas 20

20 Bar chart Faculty PhD Students PhDs graduated Mit (1) Staford (2) CMU (3) Berkeley (4) Cornell (5)

21 1.3 Elements of Pictures Created in Computer Graphics Output Primitive: - polylines - text - filled regions - raster images 22

22 Examples 23

23 1.4 A Graphics System Key board Tablet Mouse Processor Memory Frame buffer monitor Output Device 24 Input Device

24 Output Devices (Video monitors) Cathode Ray Tube (CRT) Liquid Crystal Display (LCD) (Flat-panel display) 25

25 Video Monitor (CRT) Metallic coating Heating filament athode 26 Electron gun Control grid Focusing system (Electron lens) Deflection systems Vertical deflection Horizontal deflection Phospher coating Display surface

26 Video Monitor (CRT) Control-grid voltage: control the picture s intensity Focusing system: force the electrons to converge Deflection systems: to trace a picture on screen (most crucial part of the monitor) Phospher Coating: where image is created 27

27 Video Monitor (CRT) Electron gun Vertical deflection Metallic coating Heating filament athode Electrons 28 Negative voltage : : : : : : : : Control grid Focusing system (Electron lens) Horizontal deflection Phospher coating

28 Video Monitor (CRT) Electron gun Vertical deflection Metallic coating Heating filament athode Control grid Focusing system (Electron lens) Horizontal deflection Phospher coating Electron bean

29 Where is light from? 30 Phospher: when struck by electron beams, kinetic energy carried by the electrons is transferred to the electrons of the phospher atoms, so the electrons of the phospher atoms jump to a higher quantum energy levels. These excited electrons return to their previous quantum levels by giving up their extra energy in the form of light at frequency depicted by the quantum theory

30 Energy Light Start to release quantum energy in the form of light Quantum level Energy level is stable again, no light emitted after this point Stable level 31 persistence Time

31 Video Monitor (CRT) Electron gun Vertical deflection Metallic coating Ligh Heating filament athode Control grid Focusing system (Electron lens) Horizontal deflection Phospher coating Electron bean

32 Video Monitor (CRT) Electron gun Vertical deflection Metallic coating Light Heating filament athode Control grid Focusing system (Electron lens) Horizontal deflection Phospher coating Electron bean

33 Why is refresh necessary? Persistence: the time from the removal of excitation to the moment when phosphersense decayed to 10% of the initial light output Refresh rate: number of times per second a picture is redrawn (determined by persistence) 34 Fusion frequency: the refresh rate above which a picture stops flickering & fuses into a steady picture

34 Note Refresh rate for raster scan display is fixed (30 to 120), independent of the picture complexity Highly dynamic applications (such as computer games) need low-persistence phospher. CAD applications tend to use long-persistence phospher. The relationship between fusion frequency and persistence is nonlinear. 35

35 1.5 Display Processing Unit CPU Image Creation System Image Storage System Image Display System Display (Scan Conversion) (Frame Buffer) (Image Controller) 36

36 Display Processing Unit (a simple two-color raster scan system) Frame Buffer X-address Y-address 1 Pixel value Scan Controller Intensity Image Controller To Deflection Display Screen 37

37 Image Creation System Scan-converts abstract representation of an image into appropriate pixel values in the frame buffer 38

38 Scan Conversion (p, q) (r, s) (c, d) Frame Buffer (a, b) (Scan Conversion) 39

39 Image Storage System (frame buffer, bitmap) 40 refresh memory arranged as a 2D array; each entry corresponds to a screen pixel (i.e., dimension of the frame buffer is the same as the resolution of the screen) each entry is composed of a number of bits; brightness and/or color value of each pixel of the screen is stored in corresponding entry in frame buffer implemented with solid state RAM

40 Image Storage System (a simple two-color raster scan system) X-address Y-address Scan Controller To Deflection 1 Pixel value Intensity Display Screen Frame Buffer 41

41 Image Display System (video/image controller) cycle through frame buffer row by row, 60 or 120 times/sec memory reference addresses are generated in synchronism with the raster scan; contents of the memory are used to control monitor beam s intensity changes in frame buffer is done during the 1.3 millisecond flyback (or, vertical retrace) time interlaced raster scan (to produce a picture whose effective refresh rate is closer to 120 than to 60 Hz). 42

42 Image Display System (a simple two-color raster scan system) Frame Buffer X-address Y-address Pixel value Scan Controller Intensity Image Controller To Deflection 43

43 Image Display System (a simple two-color raster scan system) Frame Buffer X-address Y-address 1 Pixel value Scan Controller Intensity Image Controller To Deflection 44 First row, first pixel

44 Image Display System (a simple two-color raster scan system) Frame Buffer X-address Y-address 0 Pixel value Scan Controller Intensity Image Controller To Deflection 45 First row, second pixel

45 Image Display System (a simple two-color raster scan system) Frame Buffer X-address Y-address 1 Pixel value Scan Controller Intensity Image Controller To Deflection 46 First row, third pixel

46 Image Display System (a simple two-color raster scan system) Frame Buffer X-address Y-address 1 Pixel value Scan Controller Intensity Image Controller To Deflection 47 Second row, first pixel

47 Image Display System (a simple two-color raster scan system) Frame Buffer X-address Y-address 0 Pixel value Scan Controller Intensity Image Controller To Deflection 48 Last row, last pixel ( 1/ 60 sec)

48 Image Display System (a simple two-color raster scan system) Frame Buffer X-address Y-address. Pixel value Scan Controller Intensity Image Controller To Deflection 49 Fly back (to do the next refresh cycle) (1.3 millisecond; update frame buffer)

49 What if dimension of the frame buffer is different from resolution of the display surface? X-address Y-address? Pixel value Scan Controller Intensity To Deflection Frame Buffer Image Controller 50 Do a right-shift of the X- and the Y-registers before sending the indices to the Frame Buffer

50 What if dimension of the frame buffer is different from resolution of the display surface? X-address Y-address 1 Pixel value Scan Controller Intensity To Deflection After right-shift 51 First row, first pixel, of the screen

51 What if dimension of the frame buffer is different from resolution of the display surface? X-address Y-address 0 Pixel value Scan Controller Intensity To Deflection After right-shift 52 First row, third pixel, of the screen

52 What if dimension of the frame buffer is different from resolution of the display surface? X-address Y-address 0 Pixel value Scan Controller Intensity To Deflection After right-shift 53 First row, fourth pixel, of the screen

53 What if dimension of the frame buffer is different from resolution of the display surface? X-address Y-address 1 Pixel value Scan Controller Intensity To Deflection After right-shift 54 Second row, first pixel, of the screen

54 What if dimension of the frame buffer is different from resolution of the display surface? X-address Y-address 1 Pixel value Scan Controller Intensity To Deflection After right-shift 55 Second row, 2nd pixel, of the screen

55 What if dimension of the frame buffer is different from resolution of the display surface? X-address Y-address 0 Pixel value Scan Controller Intensity To Deflection After right-shift 56 Second row, 3rd pixel, of the screen

56 What if dimension of the frame buffer is different from resolution of the display surface? X-address Y-address 0 Pixel value Scan Controller Intensity To Deflection After right-shift 57 Second row, 4th pixel, of the screen

57 1.6 Shadow Mask Color Monitor Green gun Red gun Blue gun Screen Shadow mask Blue Red 58 Green

58 Shadow Mask Color Monitor 59 phospher dots (red, green, blue) are arranged in triangular pattern called triad (or, pixel) three electron guns are used A shadow mask, behind the view surface, is equipped so that each small hole for each triad (holes are aligned so that each electron gun excites its corresponding phospher dot) resolution of these monitors is limited - (high resolution: triads are on about.21mm centers) - (home TV: triads are on about.60mm centers)

59 1.7 Display with Lookup Table (LUT) X address (x0, y0) Y address 12 bits Scan Controller R G B To Deflection Frame Buffer LUT (x0, y0) 60 Shadow mask CRT CRT Screen

60 Display with Lookup Table (LUT) each number stored in frame buffer is an index (address) into a lookup table (color table or color map) Lookup table provides significant saving on memory while gives the ability to change colors from picture to picture 61

61 1.8 Flat-Panel Displays Liquid-crystal display (LCD) Active matrix panel (AMP) Plasma panel 62

62 Reflective Liquid-crystal display (LCD) View direction Reflective layer Horizontal polarizer Horizontal grid wires Liquidcrystal layer Vertical grid wires Vertical polarizer 63

63 Reflective Liquid-crystal display (LCD) 64 Reflective layer Horizontal polarizer Horizontal grid wires Liquidcrystal layer Vertical grid wires With polarizing effect Vertical polarizer

64 Reflective Liquid-crystal display (LCD) 65 Reflective layer Horizontal polarizer Horizontal grid wires Liquidcrystal layer Vertical grid wires With polarizing effect Vertical polarizer

65 Reflective Liquid-crystal display (LCD) nothing 66 Reflective layer Horizontal polarizer Horizontal grid wires Liquidcrystal layer Vertical grid wires Vertical polarizer Without polarizing effect

66 Reflective Liquid-crystal display (LCD) nothing 67 Reflective layer Horizontal polarizer Horizontal grid wires Liquidcrystal layer Vertical grid wires Vertical polarizer Without polarizing effect

67 Reflective Liquid-crystal display (LCD) Six layers (see the above figure) Liquid-crystal is made up of long crystalline molecules arranged in a spiral fashion Direction of polarization of polarized light passing through is rotated 90 degrees The crystals line up in the same direction when in an electric field, therefore no polarizing effect 68

68 Reflective Liquid-crystal display (LCD) In this case the light passing through the liquidcrystal layer will be absorbed by the rear polarizer, so the viewer sees a dark spot on the display 69 To create a dark spot at (x1, y1), use matrix addressing: applying a negative voltage V to the vertical grid wire x1 and a positive voltage +V to the horizontal grid wire y1 to create an electric field at (x1, y1). x1 y1

69 Reflective Liquid-crystal display (LCD) To display dots at (x1, y1) and (x2, y2), cannot simply apply negative voltage to x1 and x2 and positive voltage to y1 and y2: that would cause dots to appear at (x1, y1), (x1, y2), (x2, y1) and (x2, y2). We have to activate them one at a time. The display is refreshed one row at a time. 70

70 Transmissive LCD (single pixel) 71

71 Color Transmissive LCD (single pixel w/ rgb sub) 72

72 Transmissive Liquid-crystal display (LCD) Backlight source 73 Reflective layer Horizontal polarizer Horizontal grid wires Liquidcrystal layer Vertical grid wires With polarizing effect Vertical polarizer Bright spot

73 Transmissive Liquid-crystal display (LCD) nothing Backlight source 74 Reflective layer Horizontal polarizer Horizontal grid wires Liquidcrystal layer Vertical grid wires Vertical polarizer Without polarizing effect dark spot

74 Active Matrix Panel (TFT LCD) LCD panel with a thin-film transistor (TFT) at each grid point Transistor can hold the cell in "adjusted" state until changed The display need not be refreshed and is brighter 75

75 Color Transmissive LCD (single pixel w/ rgb sub) 76

76 Plasma Panel Similar to the center part of the previous figure Array of tiny neon bulbs Need not be refreshed 77

77 1.9 Input Devices Logical Classes of devices and techniques Logical Device Function Physical device 78 Keyboard Locator Input character string Alphnumeric keyboard Indicate a position and/or orientation Tablet, mouse, joystick Pick Select a displayed entity Light pen Choice Dial (Valuator) Select from a set of actions or choices Input an analog value (number) PFK, mouse Slidebar, potentiometer

78 Mouse most commonly used 79

79 Mouse most commonly used using mechanical detector or optical detector to measure motion mechanical mice measure distance by turning a ball (at the bottom) and consequently a pair of encoders. The encoders measure motion in two directions. old optical mice measure distance traveled by counting lines on a special pad 80

80 Mouse most commonly used modern surface-independent optical mice work by using an optoelectronic sensor (essentially, a tiny low-resolution video camera) to take successive images of the surface on which the mouse operates. the surface is lit at a grazing angle by a light emitting diode (LED). 81

81 Mouse most commonly used 82

82 Mouse most commonly used the purpose is for the texture of the surface to cast shadows on the surface itself, like the situation of a hilly terrain lit at sunset. images taken of the surface are then compared to determine how far the mouse has moved. the displacement information is then sent to the computer to update the location of the mouse cursor. 83

83 Mouse most commonly used a relative device, has no absolute origin, report only changes from their former position the application program can reposition the cursor anywhere on the screen 84

84 1.10 Input Modes Defined by the relationship between the measure process and the trigger Measure: what the device returns to the user program Trigger: a physical action on the device The display processing unit contains a number of registers (buffers). Once initialized, input devices store appropriate values in these registers 85

85 Image Display System (a simple two-color raster scan system) X-address Y-address Scan Controller To Grid wires 1 Pixel value Intensity 86 Frame Buffer Input device Input device Input device

86 Input modes Request mode: application program requests input from a device, the graphics user interface returns control and the measure of the device only after the user has triggered the device Used with only one device at a time Application program cannot provide dynamic feedback, because application program does not regain control until the trigger action occurs 87

87 Input modes Sample mode: a single device is sampled, and the measure of the device is immediately returned. No trigger is needed Sequence of user inputs might be lost in sampling Sequence of user events might be lost in sampling Well-suited for dynamic feedback from the application program 88

88 Input modes Event mode: when a device is triggered, the device measure with the identifier for the deivce is placed in an "event queue (but application program is not interrupted) Application program first enables all devices whose use is to be permitted Once enabled, a trigger action for any of them places an event report in an input queue, in order of occurrence 89

89 Input modes: event mode Events GUI Application Program Examine events, Call processing module Process event type 1 Process event type 2 Process event type more natural mode for systems with several independent processes and shared input devices - typical for a graphical user interface (GUI) and is supported by the library. - handles both hardware interrupts and software interrupts

90 1.11 Clients and Servers Primary motivation for the development of X Window System: "do graphics over a network In a world of distributed computing and networks, building blocks are entities called "server" Printer Server Client Client File Server Computer Server Client 91 (Server: remote machine supporting client workstations)

91 Clients and Servers However, for X Window System & OpenGL Server: device that displays the graphics (machine in front of the user) Client: device that does computation (whatever machine running the application) 92

92 Concept of X Server Then (Vector Display Device): Host (CPU) Display DPU Display file Input Devices 93

93 Concept of X Server Now Client X Protocol X Protocol File Server CPU Display device 94 Display file Input devices Server

94 End 95