1. Introduction to Computer Graphics CS 445 / 645 Lecture 3 General Graphics Systems Lecture 3 General Graphics Systems Daniel Rozin, Wooden Mirror (1999)

2. Announcement Assignment 1 (Fire Truck) is outAssignment 1 (Fire Truck) is out –Due Feb 3 rd Overview – Read Chapter 2 and Appendix A1-A5 Display devicesDisplay devices Graphics hardwareGraphics hardware Input devicesInput devices Graphics SoftwareGraphics SoftwareAnnouncement Assignment 1 (Fire Truck) is outAssignment 1 (Fire Truck) is out –Due Feb 3 rd Overview – Read Chapter 2 and Appendix A1-A5 Display devicesDisplay devices Graphics hardwareGraphics hardware Input devicesInput devices Graphics SoftwareGraphics Software

3. Review CRTsCRTs –Vector based –Raster based –Interlacing CRTsCRTs –Vector based –Raster based –Interlacing

4. Review Vector vs. Raster Another place we see this… web-based graphicsAnother place we see this… web-based graphics –Macromedia flash is vector based –JPG images are raster based Vector vs. Raster Another place we see this… web-based graphicsAnother place we see this… web-based graphics –Macromedia flash is vector based –JPG images are raster based So what… Time to transmit vs. time to generateTime to transmit vs. time to generate –Bandwidth vs. CPU Reuse of image descriptionReuse of image description Time to transmit vs. time to generateTime to transmit vs. time to generate –Bandwidth vs. CPU Reuse of image descriptionReuse of image description

5. Vector Graphics How to generate an image using vectors A line is represented by endpoints (10,10) to (90,90)A line is represented by endpoints (10,10) to (90,90) The points along the line are computed using a line equationThe points along the line are computed using a line equation –y = mx + b If you want the image larger, no problem…If you want the image larger, no problem… How to generate an image using vectors A line is represented by endpoints (10,10) to (90,90)A line is represented by endpoints (10,10) to (90,90) The points along the line are computed using a line equationThe points along the line are computed using a line equation –y = mx + b If you want the image larger, no problem…If you want the image larger, no problem… Cheap transmission Computation required

6. Raster Graphics How to generate a line using rasters A line is represented by assigning some pixels a value of 1A line is represented by assigning some pixels a value of 1 The entire line is specified by the pixel valuesThe entire line is specified by the pixel values –What do we do to make image larger? How to generate a line using rasters A line is represented by assigning some pixels a value of 1A line is represented by assigning some pixels a value of 1 The entire line is specified by the pixel valuesThe entire line is specified by the pixel values –What do we do to make image larger? No computation Lot’s of extra info to communicate

7. Display Technology: LCDs Liquid Crystal Displays (LCDs) LCDs: organic molecules, naturally in crystalline state, that liquefy when excited by heat or E fieldLCDs: organic molecules, naturally in crystalline state, that liquefy when excited by heat or E field Crystalline state twists polarized light 90º.Crystalline state twists polarized light 90º. Liquid Crystal Displays (LCDs) LCDs: organic molecules, naturally in crystalline state, that liquefy when excited by heat or E fieldLCDs: organic molecules, naturally in crystalline state, that liquefy when excited by heat or E field Crystalline state twists polarized light 90º.Crystalline state twists polarized light 90º.

8. Display Technology: LCDs Liquid Crystal Displays (LCDs) LCDs: organic molecules, naturally in crystalline state, that liquefy when excited by heat or E fieldLCDs: organic molecules, naturally in crystalline state, that liquefy when excited by heat or E field Crystalline state twists polarized light 90ºCrystalline state twists polarized light 90º Liquid Crystal Displays (LCDs) LCDs: organic molecules, naturally in crystalline state, that liquefy when excited by heat or E fieldLCDs: organic molecules, naturally in crystalline state, that liquefy when excited by heat or E field Crystalline state twists polarized light 90ºCrystalline state twists polarized light 90º

9. Liquid Crystal Display (LCD) Figure 2.16 from Hearn and Baker

10. Display Technology: DMD / DLP Digital Micromirror Devices (projectors) or Digital Light Processing Microelectromechanical (MEM) devices, fabricated with VLSI techniquesMicroelectromechanical (MEM) devices, fabricated with VLSI techniques Digital Micromirror Devices (projectors) or Digital Light Processing Microelectromechanical (MEM) devices, fabricated with VLSI techniquesMicroelectromechanical (MEM) devices, fabricated with VLSI techniques

11. Display Technology: DMD / DLP DMDs are truly digital pixelsDMDs are truly digital pixels Vary grey levels by modulating pulse lengthVary grey levels by modulating pulse length Color: multiple chips, or color-wheelColor: multiple chips, or color-wheel Great resolutionGreat resolution Very brightVery bright Flicker problemsFlicker problems DMDs are truly digital pixelsDMDs are truly digital pixels Vary grey levels by modulating pulse lengthVary grey levels by modulating pulse length Color: multiple chips, or color-wheelColor: multiple chips, or color-wheel Great resolutionGreat resolution Very brightVery bright Flicker problemsFlicker problems

12. Display Technologies: Organic LED Arrays Organic Light-Emitting Diode (OLED) Arrays The display of the future? Many think so.The display of the future? Many think so. OLEDs function like regular semiconductor LEDsOLEDs function like regular semiconductor LEDs But they emit lightBut they emit light –Thin-film deposition of organic, light- emitting molecules through vapor sublimation in a vacuum. –Dope emissive layers with fluorescent molecules to create color. Organic Light-Emitting Diode (OLED) Arrays The display of the future? Many think so.The display of the future? Many think so. OLEDs function like regular semiconductor LEDsOLEDs function like regular semiconductor LEDs But they emit lightBut they emit light –Thin-film deposition of organic, light- emitting molecules through vapor sublimation in a vacuum. –Dope emissive layers with fluorescent molecules to create color. http://www.kodak.com/global/en/professional/products/specialProducts/OEL/creating.jhtml

13. Display Technologies: Organic LED Arrays OLED pros: TransparentTransparent FlexibleFlexible Light-emitting, and quite bright (daylight visible)Light-emitting, and quite bright (daylight visible) Large viewing angleLarge viewing angle Fast (< 1 microsecond off-on-off)Fast (< 1 microsecond off-on-off) Can be made large or smallCan be made large or small Available for cell phones and car stereosAvailable for cell phones and car stereos OLED pros: TransparentTransparent FlexibleFlexible Light-emitting, and quite bright (daylight visible)Light-emitting, and quite bright (daylight visible) Large viewing angleLarge viewing angle Fast (< 1 microsecond off-on-off)Fast (< 1 microsecond off-on-off) Can be made large or smallCan be made large or small Available for cell phones and car stereosAvailable for cell phones and car stereos

14. Display Technologies: Organic LED Arrays OLED cons: Not very robust, display lifetime a key issueNot very robust, display lifetime a key issue Currently only passive matrix displaysCurrently only passive matrix displays –Passive matrix: Pixels are illuminated in scanline order (like a raster display), but the lack of phospherescence causes flicker –Active matrix: A polysilicate layer provides thin film transistors at each pixel, allowing direct pixel access and constant illumination See http://www.howstuffworks.com/lcd4.htm for more info OLED cons: Not very robust, display lifetime a key issueNot very robust, display lifetime a key issue Currently only passive matrix displaysCurrently only passive matrix displays –Passive matrix: Pixels are illuminated in scanline order (like a raster display), but the lack of phospherescence causes flicker –Active matrix: A polysilicate layer provides thin film transistors at each pixel, allowing direct pixel access and constant illumination See http://www.howstuffworks.com/lcd4.htm for more info

15. Additional Displays Display Walls PrincetonPrinceton StanfordStanford UVa – Greg HumphreysUVa – Greg Humphreys Display Walls PrincetonPrinceton StanfordStanford UVa – Greg HumphreysUVa – Greg Humphreys

16. Display Wall Alignment

17. Additional Displays StereoStereo

18. Interfaces What is spatial dimensionality of computer screen? What is dimensionality of mouse input? How many degrees of freedom (DOFs) define the position of your hand in space? Space ballSpace ball What is spatial dimensionality of computer screen? What is dimensionality of mouse input? How many degrees of freedom (DOFs) define the position of your hand in space? Space ballSpace ball

19. Video Controllers Graphics Hardware Frame buffer is anywhere in system memoryFrame buffer is anywhere in system memory Graphics Hardware Frame buffer is anywhere in system memoryFrame buffer is anywhere in system memory System Bus CPUVideo Controller System Memory Monitor Frame buffer Cartesian Coordinates

20. Video Controllers Graphics Hardware Permanent place for frame bufferPermanent place for frame buffer Direct connection to video controllerDirect connection to video controller Graphics Hardware Permanent place for frame bufferPermanent place for frame buffer Direct connection to video controllerDirect connection to video controller System Bus CPUVideo Controller System Memory Monitor Frame buffer Cartesian Coordinates Frame Buffer

21. Video Controllers The need for synchronization System Bus CPUVideo Controller System Memory Monitor Frame Buffer synchronized

22. Video Controllers The need for synchronization Double bufferingDouble buffering The need for synchronization Double bufferingDouble buffering System Bus CPUVideo Controller System Memory Monitor Double Buffer synchronized previouscurrent

23. Raster Graphics Systems Display Processor Display Processor System Memory System Memory CPU Frame Buffer Frame Buffer Monitor Video Controller Video Controller System Bus I/O Devices Figure 2.29 from Hearn and Baker

24. Frame Buffer Figure 1.2 from Foley et al.

25. Frame Buffer Refresh Figure 1.3 from FvDFH Refresh rate is usually 30-75Hz

26. DAC Direct Color Framebuffer Store the actual intensities of R, G, and B individually in the framebuffer 24 bits per pixel = 8 bits red, 8 bits green, 8 bits blue 16 bits per pixel = ? bits red, ? bits green, ? bits blue Store the actual intensities of R, G, and B individually in the framebuffer 24 bits per pixel = 8 bits red, 8 bits green, 8 bits blue 16 bits per pixel = ? bits red, ? bits green, ? bits blue

27. Color Lookup Framebuffer Store indices (usually 8 bits) in framebuffer Display controller looks up the R,G,B values before triggering the electron guns Store indices (usually 8 bits) in framebuffer Display controller looks up the R,G,B values before triggering the electron guns Frame Buffer DAC Pixel color = 14 Color Lookup Table 0 1024 14 R G B

28. Software Hide the details User should not need to worry about how graphics are displayed on monitorUser should not need to worry about how graphics are displayed on monitor User doesn’t need to know about how a line is converted into pixels and drawn on screen (hardware dependent)User doesn’t need to know about how a line is converted into pixels and drawn on screen (hardware dependent) User doesn’t need to rebuild the basic tools of a 3D sceneUser doesn’t need to rebuild the basic tools of a 3D scene –Virtual camera, light sources, polygon drawing OpenGL does this for you… Hide the details User should not need to worry about how graphics are displayed on monitorUser should not need to worry about how graphics are displayed on monitor User doesn’t need to know about how a line is converted into pixels and drawn on screen (hardware dependent)User doesn’t need to know about how a line is converted into pixels and drawn on screen (hardware dependent) User doesn’t need to rebuild the basic tools of a 3D sceneUser doesn’t need to rebuild the basic tools of a 3D scene –Virtual camera, light sources, polygon drawing OpenGL does this for you…

29. Software Hide the details User doesn’t need to know how to read the data coming from the mouseUser doesn’t need to know how to read the data coming from the mouse User doesn’t need to know how to read the keystrokesUser doesn’t need to know how to read the keystrokes OpenGL Utility Toolkit (GLUT) does this for you… Hide the details User doesn’t need to know how to read the data coming from the mouseUser doesn’t need to know how to read the data coming from the mouse User doesn’t need to know how to read the keystrokesUser doesn’t need to know how to read the keystrokes OpenGL Utility Toolkit (GLUT) does this for you…

30. Software Hide the details User doesn’t have to build a graphical user interface (GUI)User doesn’t have to build a graphical user interface (GUI) –Pull-down menus, scrollbars, file loaders Fast Light Toolkit (FLTK) does this for you… Hide the details User doesn’t have to build a graphical user interface (GUI)User doesn’t have to build a graphical user interface (GUI) –Pull-down menus, scrollbars, file loaders Fast Light Toolkit (FLTK) does this for you…

31. Software Hide the details User shouldn’t have to write code to create a GUIUser shouldn’t have to write code to create a GUI –Positioning text boxes, buttons, scrollbars –Use a graphical tool to arrange visually –Assign callback functions to hook into source code Fast Light User Interface Designer (FLUID) does this for you… Hide the details User shouldn’t have to write code to create a GUIUser shouldn’t have to write code to create a GUI –Positioning text boxes, buttons, scrollbars –Use a graphical tool to arrange visually –Assign callback functions to hook into source code Fast Light User Interface Designer (FLUID) does this for you…

32. OpenGL Design Goals SGI’s design goals for OpenGL: High-performance (hardware-accelerated) graphics APIHigh-performance (hardware-accelerated) graphics API Some hardware independenceSome hardware independence Natural, terse API with some built-in extensibilityNatural, terse API with some built-in extensibility OpenGL has become a standard (competing with DirectX) because: It doesn’t try to do too muchIt doesn’t try to do too much –Only renders the image, doesn’t manage windows, etc. –No high-level animation, modeling, sound (!), etc. It does enoughIt does enough –Useful rendering effects + high performance Open source and promoted by SGI (& Microsoft, half-heartedly)Open source and promoted by SGI (& Microsoft, half-heartedly) SGI’s design goals for OpenGL: High-performance (hardware-accelerated) graphics APIHigh-performance (hardware-accelerated) graphics API Some hardware independenceSome hardware independence Natural, terse API with some built-in extensibilityNatural, terse API with some built-in extensibility OpenGL has become a standard (competing with DirectX) because: It doesn’t try to do too muchIt doesn’t try to do too much –Only renders the image, doesn’t manage windows, etc. –No high-level animation, modeling, sound (!), etc. It does enoughIt does enough –Useful rendering effects + high performance Open source and promoted by SGI (& Microsoft, half-heartedly)Open source and promoted by SGI (& Microsoft, half-heartedly)

33. The Big Picture Who gets control of the main control loop? FLTK – the code that waits for user input and processes itFLTK – the code that waits for user input and processes it –Must be responsive to user… do as I say GLUT – the code that controls the window and refreshGLUT – the code that controls the window and refresh –Must be responsive to windowing system and OS OpenGL – the code that controls what is drawnOpenGL – the code that controls what is drawn –Must be responsive to the program that specifies where objects are located. If something moves, I want to see it. Who gets control of the main control loop? FLTK – the code that waits for user input and processes itFLTK – the code that waits for user input and processes it –Must be responsive to user… do as I say GLUT – the code that controls the window and refreshGLUT – the code that controls the window and refresh –Must be responsive to windowing system and OS OpenGL – the code that controls what is drawnOpenGL – the code that controls what is drawn –Must be responsive to the program that specifies where objects are located. If something moves, I want to see it.

34. The Big Picture Who gets control of the main control loop? Answer: FLTKAnswer: FLTK –We’ll try to hide the details from you for now –But be aware of the conflict that exists FLTK must be aware of GLUT and OpenGL state at all timesFLTK must be aware of GLUT and OpenGL state at all times –Must give code compute cycles when needed We’ll discuss OpenGL as if it were standaloneWe’ll discuss OpenGL as if it were standalone Who gets control of the main control loop? Answer: FLTKAnswer: FLTK –We’ll try to hide the details from you for now –But be aware of the conflict that exists FLTK must be aware of GLUT and OpenGL state at all timesFLTK must be aware of GLUT and OpenGL state at all times –Must give code compute cycles when needed We’ll discuss OpenGL as if it were standaloneWe’ll discuss OpenGL as if it were standalone

35. Review Read Chapter 2 Read Appendix 1 – 5 (for next week) Implement OpenGL Section 2.9 is good introduction to OpenGLSection 2.9 is good introduction to OpenGL Read Chapter 2 Read Appendix 1 – 5 (for next week) Implement OpenGL Section 2.9 is good introduction to OpenGLSection 2.9 is good introduction to OpenGL