Computer Graphics Lecture 2

Transcription

1 1 / 16 Computer Graphics Lecture 2 Dr. Marc Eduard Frîncu West University of Timisoara Feb 28th 2012

2 2 / 16 Outline 1 Graphics System Graphics Devices Frame Buffer 2 Rendering pipeline 3 Logical Devices 4 Recap

3 3 / 16 Graphics System Basic Graphic System set of equipment programs specialized in visual representation of the information Figure: Angel: Interactive Computer Graphics 4E c Addison-Wesley 2005

4 4 / 16 Graphics Devices Graphics Devices (GD) GD: equipment (hardware) required in order to interact with create graphics Sutherland (MIT 63) established the basic interactive human-computer paradigm: 1 user sees object on the display 2 user points to the object by using an input device 3 object reacts 4 repeat from 1

5 4 / 16 Graphics Devices Graphics Devices (GD) GD: equipment (hardware) required in order to interact with create graphics Sutherland (MIT 63) established the basic interactive human-computer paradigm: 1 user sees object on the display 2 user points to the object by using an input device 3 object reacts 4 repeat from 1 Types physical devices: Raster video display: CRT, LCD, Plasma, LED, video projector,...

6 4 / 16 Graphics Devices Graphics Devices (GD) GD: equipment (hardware) required in order to interact with create graphics Sutherland (MIT 63) established the basic interactive human-computer paradigm: 1 user sees object on the display 2 user points to the object by using an input device 3 object reacts 4 repeat from 1 Types physical devices: Raster video display: CRT, LCD, Plasma, LED, video projector,... Hard-copy devices: printers (Ink-ket, laser), film recorder, pen plotter,...

7 4 / 16 Graphics Devices Graphics Devices (GD) GD: equipment (hardware) required in order to interact with create graphics Sutherland (MIT 63) established the basic interactive human-computer paradigm: 1 user sees object on the display 2 user points to the object by using an input device 3 object reacts 4 repeat from 1 Types physical devices: Raster video display: CRT, LCD, Plasma, LED, video projector,... Hard-copy devices: printers (Ink-ket, laser), film recorder, pen plotter,... Input devices: light pen, keyboard, mouse, joystick, scanner, touch screen, tablet, eye-tracker, gloves, electro-magnetic, VR display,...

8 4 / 16 Graphics Devices Graphics Devices (GD) GD: equipment (hardware) required in order to interact with create graphics Sutherland (MIT 63) established the basic interactive human-computer paradigm: 1 user sees object on the display 2 user points to the object by using an input device 3 object reacts 4 repeat from 1 Types physical devices: Raster video display: CRT, LCD, Plasma, LED, video projector,... Hard-copy devices: printers (Ink-ket, laser), film recorder, pen plotter,... Input devices: light pen, keyboard, mouse, joystick, scanner, touch screen, tablet, eye-tracker, gloves, electro-magnetic, VR display,... logical devices: Graphics APIs, e.g., OpenGL, WebGL, DirectX/XNA, JavaScript based (Three.js, Box2D), X3D,...

9 4 / 16 Graphics Devices Graphics Devices (GD) GD: equipment (hardware) required in order to interact with create graphics Sutherland (MIT 63) established the basic interactive human-computer paradigm: 1 user sees object on the display 2 user points to the object by using an input device 3 object reacts 4 repeat from 1 Types physical devices: Raster video display: CRT, LCD, Plasma, LED, video projector,... Hard-copy devices: printers (Ink-ket, laser), film recorder, pen plotter,... Input devices: light pen, keyboard, mouse, joystick, scanner, touch screen, tablet, eye-tracker, gloves, electro-magnetic, VR display,... logical devices: Graphics APIs, e.g., OpenGL, WebGL, DirectX/XNA, JavaScript based (Three.js, Box2D), X3D,... The separation of physical & logical devices allows for more flexible programs, independent from the actual physical device

10 Graphics Devices Raster Device General notions a raster (bitmap) display consists of a two-dimensional array of pixels (i.e., picture elelements) discretized image shape and size of a pixel: square with a diagonal of 0.5mm the size of the array gives the display resolution (i.e., no. vertical pixels no. horizontal pixels) images are stored inside RAM in an area called a frame buffer a hardware device called video controller reads the frame buffer line by line and produces images on the display Figure: Raster graphics with Display Processor, 5 / 16

11 6 / 16 Frame Buffer Frame Buffer Refresh rate or vertical scan rate usually at 30-75Hz (i.e., Frames Per Second FPS) includes repeated drawing of identical frames Frame rate refresh rate does NOT include the repeated drawing of identical frames usually lower than the refresh rate

12 Frame Buffer Frame Buffer Refresh rate or vertical scan rate usually at 30-75Hz (i.e., Frames Per Second FPS) includes repeated drawing of identical frames Frame rate refresh rate does NOT include the repeated drawing of identical frames usually lower than the refresh rate Interlaced vs. progressive display interlace: technique in which the apparent flickering is diminished by doubling the frame rate (e.g., 50Hz monitor PAL & SECAM set): paint first the odd lines then the even ones only ALiS plasma panels and traditional Cathode Ray Tube (CRT) TV sets use it modern CRT TV: flicker free by using the 100Hz technology progressive: technique in which all lines are drawn in sequence most CRT computer monitors, LCD monitors, HDTV displays LCDs: as much as 120 (i.e., lcm between 24FPS, cinema, and 30FPS, NTSC TV) or 240 Hz advantages over interlace: no visual artifacts (e.g., interline twitter) & no need for blurring to reduce interline twitter clearer and faster results for scaling to higher resolutions frames can be captured as still photos 6 / 16

13 7 / 16 Frame Buffer Color Frame Buffer About colors the method to represent colors depends on pixel depth and on the output device: additive: video displays subtractive: printers pixel depth: the number of bits to represent the color of a pixel (e.g., 24bit Red-Green-Blue model for most video and color LCDs) 8 bits for each color component in the 24 bit model (true-color): 0 for black and 255 for white usually a forth component called alpha (denoted A) is used to achieve various effects such as opacity and transparency color map (or color Look-Up-Table): used for web GIF images each pixel stores an 8bit index (i.e., 256 possible colors) the index points to a LUP containing 24bit colors halftoning: technique to trick the eye into seeing many shades of a color where in reality only a small number of distinct colors exist (e.g., web images)

14 8 / 16 Frame Buffer Color Frame Buffers Figure: Halftoning,

15 Frame Buffer Visible Light Light visible light frequencies (electromagnetic spectrum): from red (700nm) to violet (400nm) light color characterized by: hue: dominant frequency (i.e., highest peak or primary wavelength) of a color saturation: excitation purity (i.e., ratio of highest to rest) of a color lightness: perceived luminance of a color Figure: A diagram of the electromagnetic spectrum, 9 / 16

16 10 / 16 Frame Buffer Color Models Red-Green-Blue Cyan-Magenta-Yellow Hue-Saturation-Lightness... Images on the right from: Figure: RGB color gho/sem_notes/color_2d/ cube html/primary_systems.html Figure: CMY cube Figure: HSV Perceptual Color Spaces

17 11 / 16 Rendering pipeline The rendering (graphics) pipeline typically accepts some representation of a three-dimensional primitives as an input and results in a 2D raster image as output (source: Figure: Rendering pipeline

18 12 / 16 Rendering pipeline points vertices fragments pixels in mathematics a point is a zero-dimensional primitive in CG a vertex is a data structure that describes a point in 2D/3D space: position color normal textures reflectance in CG a fragment is a pre-pixel, i.e., data necessary to generate a single pixel (shade test): raster position depth color, texture coordinates,... stencil alpha...

19 13 / 16 Rendering pipeline Shaders programs used primarily to calculate rendering effects on graphics hardware vertex shader: run once for each vertex transform each vertex s 3D position in virtual space to the 2D coordinate in screen space fragment (pixel) shader: executed after the vertex shader compute the color and other attributes of each pixel alone they cannot produce complex effects as they operate on a per pixel basis used for: bump mapping, shadows, specular highlights, translucency,... geometry shader: relatively new can generate new graphics primitives from primitives sent at the beginning of the graphics pipeline operate between the vertex and a fragment shaders used for: point sprite generation, geometry tessellation, shadow volume extrusion, single pass cube map rendering,...

20 13 / 16 Rendering pipeline Shaders programs used primarily to calculate rendering effects on graphics hardware vertex shader: run once for each vertex transform each vertex s 3D position in virtual space to the 2D coordinate in screen space fragment (pixel) shader: executed after the vertex shader compute the color and other attributes of each pixel alone they cannot produce complex effects as they operate on a per pixel basis used for: bump mapping, shadows, specular highlights, translucency,... geometry shader: relatively new can generate new graphics primitives from primitives sent at the beginning of the graphics pipeline operate between the vertex and a fragment shaders used for: point sprite generation, geometry tessellation, shadow volume extrusion, single pass cube map rendering,... Example: GLSL (OpenGL Shading Language) high level shading language based on C syntax. No need to use assembly language or hardware specific languages!

21 14 / 16 Logical Devices Logical input Consider the C code: 1: int x; 2: scanf( %d, &x);

22 14 / 16 Logical Devices Logical input Consider the C code: 1: int x; 2: scanf( %d, &x); What is the input device?

23 14 / 16 Logical Devices Logical input Consider the C code: 1: int x; 2: scanf( %d, &x); What is the input device? cannot tell from the code can be anything: keyboard, file, another file,...

24 14 / 16 Logical Devices Logical input Consider the C code: 1: int x; 2: scanf( %d, &x); What is the input device? cannot tell from the code can be anything: keyboard, file, another file,... The code provides logical input, i.e., an int is returned regardless of the physical device

25 14 / 16 Logical Devices Logical input Consider the C code: 1: int x; 2: scanf( %d, &x); What is the input device? cannot tell from the code can be anything: keyboard, file, another file,... The code provides logical input, i.e., an int is returned regardless of the physical device Graphical logical devices graphical input is more varied than input to standard programs Six types of logical input (for older APIs: GKS, PHIGS): 1 keyboard: returns ASCII characters 2 locator: position in world coordinates through mouse, trackball,... 3 pick: identifies an object 4 choice: selection of a discrete number of objects 5 dial: provides analog input to the program 6 stroke: device returns an array of locations through mouse clicks (button down start transfer, release button end transfer)

26 Logical Devices Logical input Consider the C code: 1: int x; 2: scanf( %d, &x); What is the input device? cannot tell from the code can be anything: keyboard, file, another file,... The code provides logical input, i.e., an int is returned regardless of the physical device Graphical logical devices graphical input is more varied than input to standard programs Six types of logical input (for older APIs: GKS, PHIGS): 1 keyboard: returns ASCII characters 2 locator: position in world coordinates through mouse, trackball,... 3 pick: identifies an object 4 choice: selection of a discrete number of objects 5 dial: provides analog input to the program 6 stroke: device returns an array of locations through mouse clicks (button down start transfer, release button end transfer) Newer APIs (e.g., OpenGL) do not take this approach 14 / 16

27 15 / 16 Input Modes Input devices contain triggers (e.g., mouse button, keys) which can be used to send signals (e.g., information: position mouse, ASCII code keyboard) to the OS Input modes request mode: input provided only when user triggers the device (e.g., keyboard input) event mode: input stored in an event queue for later examination each time the device is triggered (e.g., window: resize; mouse: click, move; keyboard: key press/release)

28 15 / 16 Input Modes Input devices contain triggers (e.g., mouse button, keys) which can be used to send signals (e.g., information: position mouse, ASCII code keyboard) to the OS Input modes request mode: input provided only when user triggers the device (e.g., keyboard input) not sufficient for Human-Computer-Interface event mode: input stored in an event queue for later examination each time the device is triggered (e.g., window: resize; mouse: click, move; keyboard: key press/release) ideal for environments with multiple input devices

29 Input Modes Input devices contain triggers (e.g., mouse button, keys) which can be used to send signals (e.g., information: position mouse, ASCII code keyboard) to the OS Input modes request mode: input provided only when user triggers the device (e.g., keyboard input) not sufficient for Human-Computer-Interface event mode: input stored in an event queue for later examination each time the device is triggered (e.g., window: resize; mouse: click, move; keyboard: key press/release) ideal for environments with multiple input devices Callbacks programming interface for event-driven input one callback function for each type of event the graphics system recognizes the user defined callback function is executed when the corresponding event occurs: 1: public void display(glautodrawable canvas) { 2: GL2 gl = canvas.getgl().getgl2(); 3: gl.glclear(gl.gl COLOR BUFFER BIT); 4: //Add here the code for generating the scene 5: //... 6: gl.glflush(); 7: } Figure: Java for OpenGL: display callback, called each time the scene is rendered 15 / 16

30 16 / 16 Lecture Recap graphics system = equipment (graphics devices) specialized programs/graphics APIs physical logical devices images stored inside a memory zone called frame buffer before being rendered on the display real light (wave particle), simulated light (various models: RGB, CMY, HSL) rendering pipeline: converts a 3D model to a 2D raster image points vertices fragments pixels input modes: request vs. event based event based wins in graphics contest