computer graphics 2004

Computer Graphics Lecture notes Copyright Sanjay Goel, JIIT, 2004

Computer Graphics

Sanjay Goel, JIIT, 2004

Course Description Course Code: CI 041 (2-0-2) Prerequisite : A. Essential i. CI 031 - Data Structures ii. CI 021 - Computer System Organisation

iii. Programming experience of at least 5000 lines in C/C++. iv. Sufficient familiarity with vector algebra. B. Desirable

v. CI 023 – Multimedia Laboratory (familiarity with 2D graphics creation and editing workflow using tools like Illustrator and Photoshop)

vi. CI 034 – 2D Animation Workshop (familiarity with animation workflow using tools like Flash / Animo)

Post Courses : Multi-dimensional Data Structures, Advanced Computer Graphics, Digital Image Processing, Computer Games,

Physics based modeling and simulation, Multimedia Systems, Visual Computing, Image based Modeling and Rendering Objectives

- Broaden the understanding of Computer Science and initiate learning of Systems Engineering.

- Strengthen higher-level cognitive skills of analysis, creation and evaluation. - Strengthen ability of data abstraction and problem solving using programming. - Strengthen ability to identify and define problems and also express their

solutions clearly and precisely. - Understand concepts, algorithms, and design principles underlying modern

computer graphics. - Strengthen ability to design and analyse algorithms with a clear focus on

problem domain of image synthesis. - Gain practical experience in graphics programming.

Learning Outcomes

The students shall develop the basic generic skills to design, implement, evaluate and reuse data structures and algorithms for digital image synthesis for a broad-based set of computing problems in various domains. Method

Teaching in this course is designed to engage the students in active and experiential learning by taking a problem solving and design-oriented approach with special emphasis on real world applications. Lectures will be highly interactive and work oriented. Students will have to work individually as well as in groups inside as well


as outside the class. A large proportion of the course will focus on the design, analysis, implementation, integration and applications of data structures and algorithms for digital image synthesis. Students are expected to carry out lot of design and programming oriented project work. Each student is expected to write minimum 3000 lines of documented program code as part of this course. Students are encouraged to learn and use Graphics Libraries like OpenGL for project implemention. Each student is also expected to do literature survey making use of the library and web resources (including Digital Libraries) to identify, understand, summarise and present at least one research paper on science or application of computer graphics. Evaluation Scheme Evaluation scheme is designed to promote and test higher-level thinking skills through holistic and continuous evaluation and de-emphasis rote learning. Written exams will be designed and conducted as open book(s), open notes tests. One of the minor tests may be designed and conducted as a take home test. Evaluation scheme will have following components: Minor test 1 15 Minor test 2 15 Tutorials, Self study and home assignments 30 Class exercises and quizzes 15 Major test 40 Laboratory Assignments 30 Implementation Projects and Viva 55 Total 200 Recommended Reference Books:

1. Foley, van Dam, Feiner and Hughes, Computer Graphics 2. Computer Graphics Using OpenGL, by F.S. Hill, Jr. 3. D Hearn and P M Baker, Computer Graphics 4. D F Rogers, Mathematical Elements for Computer Graphics 5. M. Woo et al, The OpenGL Programming Guide 6. J. Hartmen, J. Werneke, The VRML 2.0 Handbook 7. Angel, Interactive Computer Graphics: A Top-Down Approach Using

OpenGL 8. A. Watt, 3D Computer Graphics


Lecture Notes 7.01.04 2hr.

1. CG has picture description as input and picture as output. 2. Science : output = fn (input) 3. Engineering : Required input = fn (desired output) 4. Output picture taxonomy for CG

i. static vs dynamic picture (degree of dynamism) ii. colour vs B&W (colouredness in the whole spectrum from binary

to true color) iii. interactive vs non-interactive (degree of interactivity) iv. realistic vs symbolic (degree of realism) v. objects vs abstract (degree of abstraction) vi. geometric objects vs natural objects

5. In class Task: identify some static and b&w picture and describe it in a m/c

readable format. Get your description critiqued by your partner and rewrite your description.

6. Discussion on graphics.h, initgraph and closegraph functions. 7. Lab Practice assignment : Practice these and also develop competence to use

other functions of graphics.h 8. Design and Programming Assignment No. 1: Develop a description

scheme for encoding a tree description in m/c readable format on a text file. Create this file. Write a program to read this file and create a tree on the screen.

9. Solution classes proposed by students : i. Row major 1/0 ii. List of points for which colour is 1. (assumption : all others are 0) iii. Vectorised information

14.01.04 ( 2 hr.)

1. Mouse Programming by Ritul 2. Project demos by Ritul, Aditya and Bakul 3. Familiarisation with OpenGL by Anjali Gupta

23.01.04 (2 hr.) 1. Output picture taxonomy for CG

i. static vs dynamic picture (degree of dynamism) ii. colour vs B&W (colouredness in the whole spectrum from binary to

true color) iii. interactive vs non-interactive (degree of interactivity) iv. realistic vs symbolic (degree of realism) v. objects vs abstract (degree of abstraction) vi. geometric objects vs natural objects (degree of naturalism) vii. synthetic vs captured (degree of synthesis)


viii. soundless vs sound (degree of sound capability)

2. Taxonomy of picture drawing techniques i. Stored

i. Vector a. Uncompressed b. Compressed

ii. Raster a. Uncompressed b. Compressed

ii. Procedural

3. Case study on procedural drawing of tree by Sidhartha Bakshi. 4. Add dynamism to your tree keeping your original format (raster/ vector/

procedural) 5. Design and Programming Assignment No. 2 (Group Assignment):

Enhance your graphics data encoding scheme to add dynamism to static graphics. Specifically work with your earlier design for enriching your static tree with several fluttering symbolic birds of varying sizes, colours, fluttering speeds, fluttering styles and so on. Consider adding sound(s).

Create some different data files. Write a program to read these files and create an animation on the screen.

6. Think about the different file storage techniques that may be useful for storing animations created using tools like Flash and Animo.

7. Discussion on Group and individual projects. 30.01.04 ( 2 hr.) 1. Output picture taxonomy for CG

i. colour vs B&W (colouredness in the whole spectrum from binary

to true color) ii. soundless vs sound (degree of sound quality) iii. objectless vs object oriented (object population) iv. synthetic vs photographed objects (degree of synthesis) v. realistic vs symbolic objects (degree of realism) vi. geometric objects vs natural objects (degree of naturalism) vii. static vs dynamic objects (degree of dynamism) viii. interactive vs non-interactive objects (degree of interactivity) ix. passive objects vs reactive objects vs active objects (degree of

behaviour) x. Single picture vs picture sequence (duration for single picture,

transition event, transition style)

2. Design and Programming Assignment No. 3 (Group Assignment):

A. Design an Game Engine (Scriptor and Player) for children of 4-7 years of age. Using this tool, the children should be able to create and play simple


animations having some trees and fluttering and flying birds. The initial requirements of the engine are as follows:

a. Game Scriptor:

i. The scriptor should offer two readymade object templates i.e. tree and symbolic bird and a collection of bird singing tones.

ii. The users should be able to position any number of objects of the type of the given templates at any position in different sizes. The birds should have following optional variable parameters:

a. Colour b. Fluttering speed c. Singing tone d. Flying trajectory

iii. The user should be able to specify the colour of the background. iv. The graphically inputted script should be stored as a structured

data file.

b. Game Player: v. It should read the script data file, render the initial static

graphics and start the bird fluttering and flying as per the script. vi. It should allow the user to activate any flying/fluttering bird to

make it sing in its predefined tone. vii. It should also allow the user to kill any bird.

B. Write a design story around these basic ideas to develop more interesting

games for the same user group. C. Start creating an animated Concept map of your Game Engine.

6.2.04 ( 2 hrs.) 1. Demonstration and code analysis of raster image based animation of a flying bird

using three BMP files of three frames in a cycling manner by Abhishek. 2. Discussion on opening BMP files

2.1 It is essentially a row major matrix of Pixel colour codes. 2.2 Be careful about the codes used for the colour. If you just skip the header

information, sometimes you will find that the Colour code in TC is different from the code in BMP File. Hence your program will show some pixels in colours different from the display colours by paintbrush.

3. Group Assignment : Find out the details in BMP header and write a program to interpret the rest of the data in BMP file in the light of header information.

4. Group Assignment : Learn about some vector file format (ils, cdr, dxf, and so on) supported by Illustrator so that you can use your existing Illustrator graphics in this course. Write a program to open your existing illustrator files. Limit yourself to the limited set of most essential features potentially useful for drawing some objects for your games.

5. Demonstration of Game engine by Pavani. 6. Identification of some main problems in implementing the Game engine project

by each group.


7. Discussion on algorithm design for achieving ‘simultaneous’ rendering of multiple game objects without using parallel processing or multi-tasking environment 7.1 The game objects could be visual or aural and their rendering may require

you to sequentially display static stages of the visual object or sequentially play sections of the sound.

7.2 Let us call these stages and sections as object states and object rendering should mean iterative and may be cyclic rendering of each object state.

7.3 Achieve ‘simultaneity’ by achieving a well-crafted effective illusion of it by switching your logic’s attention through different states of different objects.

7.4 Assuming you have an array of N objects. 7.5 Each object has Si states : i = 1..N 7.6 If the Si for each object is same then you can render as follows: for statecount = 1 to max for object-no = 1 to N render_object-state (object-no, statecount) ; 7.7 If the Si for each object is not same then you can follow one or mix of the

following approaches: 7.7.1 The object cycles can overlap and different states of different objects

may be rendered in the inner loop of above logic : for statecount = 1 to max for object-no = 1 to N { statenumber = fn(objectno, statecount);

render_object-state (object-no, statenumber); } 7.7.2 The object cycles can have the same legth but some objects do not

do any state rendering in some outer loops for statecount = 1 to max for object-no = 1 to N { render-or-not = fn(objectno, statecount) if (render-or-not = true) { statenumber = fn2 (objectno, statecount)

render_object-state (object-no, statenumber) } }

7.8 Our ear is more sensitive to the gaps in in sound so try and adjust the visual data during the required delays of sound object.

8. Context is the lawful framework within which knowledge and experience occur.

Context is the setting and the rules of the game. Context is the stage on which this drama unfolds.

9. Group Assignments: 9.1 Design one Game context per group member. For the time being, understand

Game context as object set for developing games. 9.2 Design one story per game context.


9.3 Develop animated concept maps for each story. 9.4 Extend your game engine to offer all your game contexts to the game designers. 9.5 Extend your game engine to create new game contexts using predefined objects. 13.02.04 (2 hr.)

1. Layered Architecture of Graphics Application a. Applications using Graphics functions of a Graphics Library b. Graphics Library using basic Graphics functions like putpixel and

so on c. Hardware/Software for realisation of basic Graphics functions like

putpixel and so on. 2. Common Shape drawing functions : Line, circle, arc, ellipse, rectangle and so

on. All these shapes can be drawn using the following ideas:

a. It is like cross-stitching b. On CRT/LCD based computer monitors, we can not draw ‘continuous’

shapes, we can only create good quality illusion of continuity by creating ‘discrete appproximations’.

c. Try to create an illusion of continuous geometry by ‘selective illumination’ of ‘chosen’ set of discrete points on the monitor using following strategy:

Repeat apply some selection criteria for filtering the points that satisfy the

geometrical constraints if selected(x,y) putpixel (x,y) Until enough points are selected

3. This process is called Rasterisation. 4. Good Quality rasterisation for solid line/circle/ellipse/arc/rectangle or any

other curve will be achieved if pixel selection for discrete approximation through spatial sampling is done at the “highest possible sampling rate” which is determined by the monitor resolution. In other words, member pixels of any pair of two nearest illuminated pixels in this discrete approximation are adjacent to each other in any of the following 8 possible ways shown below with blue lines.

Repeat


- apply some selection criteria for filtering the points that satisfy the geometrical constraints

- if selected(x,y) putpixel (x,y) Until enough points are selected 5. Line is a locus of points that satisfy the equation y = mx +b. 6. Our Options:

a. Find yi(xi) for a required set of appropriately chosen xi for lines having –1<=m<=1 or xi(yi) for a required set of appropriately chosen for yi for lines having slope <-1 or >1.

b. Find xi+1(xi,yi) and yi+1(xi,yi) for a required number of N points such that either xi+1 = xi++ or xi-- for lines having –1<=m<=1 OR yi+1 = yi++ or yi-- for lines having slope <-1 or >1. This is called DDA algorithm (Digital Differential Analyser) and it draws a line as a sequence of small horizontal or vertical steps and on an average, tries to approximate the required slope.

7. Programming Assignment: Write and efficient draw-line function using the putpixel function to draw

good quality lines (without unnecessary gaps) in various styles. Write a program to measure the performance of your draw-line function in lines per minute by repeatedly calling your function to draw lines between randomly generated endpoints in random styles on your monitor. Compare the performance of your function with readymade function of your library.

27.02.04 (2 hr.)

1. Layered Architecture of Graphics Application a. Applications using Graphics functions of a Graphics Library b. Graphics Library using basic Graphics functions like putpixel and so

on c. Hardware/Software for realisation of basic Graphics functions like

putpixel and so on.


. 2. Response of ‘putpixel’ illuminated point on the monitor screen 3. Monitor is usually a CRT based simple system.

Intensity builds and decays slowly in response to electron gun swithing

on/off. Electron Gun switch status Photon Photon Output Intensity Time


4.

5.

6a. Design issues of a single point temporally continuous dot on a CRT type bilevel display system:

- A focused electron gun with a switch to fire electrons or not at a certain switching (refreshing) frequency.

- For an illusion of continuous dot, the dot needs to be refreshed before it ‘disappears’. The image of the refreshed dot gets mixed with the image of dying dot and the illusion of continuous dot is created.

- The refreshing frequency is a function of decay time of the phosphor and human vision limitations.

6b. Design issues of a single point temporally blinking dot on a CRT type bilevel display system:

- The excited phosphor must decay down to the level of ‘blank’, if refreshing has not been done.

- Engineering Task : To strike a proper balance in the two requirements. Choose a phosphor with following criteria:

i. ‘Acceptable’ level of Photon output per strike of the gun , to be determined by the viewing conditions such as viewing distance, ambient light, required wavelength of the light. TV monitor is designed for long distance while computer monitor is designed for short distance viewing.

ii. Decay time (Phosphor must have sufficient persistence) iii. Maximum blinking rate of the application within human

vision limitations (Phosphor must not persist for longer than required).

8. Design issue of single linear array of temporally continuous/blinking dots on a CRT based bilevel display system: - All dots must get refreshed within each cycle.


- For temporal continuity, Phosphor cells must have sufficient persistent to allow the refreshing of all other cells between two refreshing excitations.

- For avoiding ghost effect (unwanted persistence resulting in multiple ‘on’ dots at the same time while one is trying to have a illusion of single moving dot), persistence must be not be longer than time of one refreshing cycle time (T).

Forward Trace T x x x x x

cell1 cell2 Very fast Retrace cell3 cell4 cell5

9. Design issue of 2D array of temporally continuous/blinking dots on a CRT based bilevel display system:

- All dots must get refreshed within each refresh cycle. - For temporal continuity, Phosphor cells must have sufficient persistence

to allow the refreshing of all other cells between two refreshing excitations.

- For avoiding ghost effect (unwanted persistence resulting in multiple ‘on’ dots at the same time while one is trying to have an illusion of single moving dot in this 2D array), persistence must not be longer than time of one refreshing cycle time (T).

- Cells are organised as lines of 1D array of cells. All cells on all lines need to refresh in one refresh cycle.

- Excitation/Refreshing starts at the top left side, scans the first horizontal line, makes a fast horizontal retrace of reaching the end of the line and starts scanning the next line. The process continues till all lines get scanned. Electron gun then makes a vertical retrace to start another refresh cycle at the top left corner. Hence the top left corner is number as (0,0).

-


10. The aspect ratio (horizontal length : vertical length of the display area) of computer screen is 4:3; CGA 320 :240;

VGA : 640 : 480; 800 :600; 1024 :768 16.03.04 (1 hr.) 1. Response of ‘putpixel’ illuminated point on the monitor screen 2. Vector monitors: Computer controls the movement as well as firing of the

electron gun. From a limited perspective of interface between computer and output device, Vector monitors worked almost like the plotters. Computer sends the X,Y and colour information and the Gun like plotter pen moved to the desired location. Vector monitors, also referred to by Atari and others as "XY" or "Quadrascan" monitors, are available in black & white or color.

3. Plotters : In plotter, Pen is given 2d relative movement over the surface of the paper. This is achieved with the help of two motors independent motors. In Flatbed plotters the paper is stationary and both the movements are given to pen. The pen arm moves up or down over the paper with the set boundaries giving Y movement to the pen and the pen holder moves within the length of the pen arm and gives X movement to the pen. Select Pen, Pen Up and Pen Down are realised through required mechnical components that are controlled by the electronic hardware on the plotter which is under the command of the plotters firmware which is controlled by the user’s program on computer.

User’s Program using plotter’s vector graphics library

(e.g. HPGL/DMPL)

Plotter’s Firmware

Plotter’s Electronic Circuit

Plotter’s Mechanical Assemblies

The firmware keeps a track of the current location of the pen which set to 0,0 at plotter initialisation. Movement to given X,Y point is achived by translating the delta X to direction (+/-) degree of rotation of motor connected to pen holder and similary delta_y to direction (+/-) degree of rotation of motor connected to pen arm. The speed (degree/sec) and resolution (minimum degree) of these motors are important distinguishing factors in this design.


In alternate option of Drum Plotter, the X movement is given to pen and Y movement is given to paper, which is rotated over a drum with the help of a another motor. Logical principles remain same.

4. Vector monitors: Vector monitors worked on the same model and point coordinates & colour code was required to be sent to monitor which had interpreting hardware/ firmware for creating garphic. The electron guns in the neck of the tube emit a stream of electrons that bombard the face of the tube that would hit dead center if not for the deflection magnets on the neck of the tube. There are two deflection coils. One for horizontal deflection (X) and one for vertical deflection (Y) of the electron beam. Consider the center of the screen to be (0,0) volts to the deflection magnets. If you want to move the beam to the right you put a positive voltage on the horizontal deflection "X" coil (+,0). A negative voltage moves it to the left. Up and down are accomplished with positive or negative voltages to the vertical deflection (Y) coil. The third portion of a vector monitor is what (at least by Atari) is called the "Z" amplifier, whichcontrols the brightness. There is a "Z" amplifier for each electron gun, which means that black and white monitors have only one "Z" amp and color monitors have three. There were more than 30 vector based games made in the 80's. Each monitor had different specs and run at different speeds, making them incompatible between different gaming hardware. Vector monitors in general are less reliable than raster monitors.


Raster Monitors : The computer works in synchronisation with the electron gun of the monitor. Colour monitors have three guns moving simultaneosly and computer sends HSYNC and VSYNC signals to maintain the synchronised deflection of electonic beams as per the Video_out signal from the Computer. If the monitor resolution is 640 x 480 then, the vertical sync signal tells the monitor to start displaying a New image or frame, and the monitor starts in the upper left corner with pixel (0,0). The horizontal sync signal tells monitor to refresh another row of 640

pixel. After 480 rows of pixels are refreshed with 480 horizontal sync signals, a vertical sync signal resets the monitor to the upper left corner and the process continues. During the time when pixel data is not being displayed and the beam is returning to the left column to start another horizontal scan, the RGB signals should all be set to black color ( all zero ).


Depending on the display quality, there are approx. 240-1280 pixels per row, approx. 240-1024 pixel per column and approx. 25/30/60 frames per second to ensure flicker free display. Hence, the the vertical frequency of row per second is in KHz and horizontal frequency of Pixel per sec is in MHz. Vertical frequency = f (frame rate, rows per frame) Hoizontal freqncy = fn(vertical frequency, pixel per row) Computer does not have to send pixel coordinate information to the monitor, it only send the colour information for ordered set of pixels in a predefined sequence such that X = f1 (delta_T, rows per sec, pixels per row)

Y = f2 (delta_T, rows per sec, pixels per row) Where, delta_T is the time elapsed since the beginning of scanning. Hence, for

using monitor as a display device, the computer has to generate and send the following :

a. R value for the current pixel b. G value for the current pixel c. B value for the current pixel d. Hsync e. Vsync

This is very high bandwidth communication. Depending on the monitor type

(digital/analog) different encoding options (with suitable connector type) are used for connecting computer with monitor. DB15 Type for VGA/SVGA for connecting to Analog monitors.

FEMALE connector at the videocard MALE connector at the monitor cable


PIN Details

Pin Name Dir Description 1 RED Red Video (75 ohm, 0.7 V p-p) 2 GREEN Green Video (75 ohm, 0.7 V p-p) 3 BLUE Blue Video (75 ohm, 0.7 V p-p) 4 ID2 Monitor ID Bit 2 5 GND Ground 6 RGND Red Ground 7 GGND Green Ground 8 BGND Blue Ground 9 KEY - Key (No pin) 10 SGND Sync Ground 11 ID0 Monitor ID Bit 0 12 ID1 or SDA Monitor ID Bit 1

13 HSYNC or CSYNC

Horizontal Sync (or Composite Sync)

14 VSYNC Vertical Sync 15 ID3 or SCL Monitor ID Bit 3

6. Study Assignment : Find out different type of display connectors and cables

and their salient features for connecting different kind of display monitors {CRT (Analog, Digital) , LCD, and so on} .

19.03.04 (2 hr.)

1. Game demonstration by Siddharth Jain, Esha and Bakul. 2. Response of ‘putpixel’ illuminated point on the monitor screen 3. Response to ‘putpixel’ Colour signals RGB at appropriate time 4. If pixel rate is HF (Horizontal Frenqiency) i.e. time gap t between two horizontally neighbour pixel = 1/HF, we need a subsystem to convert 2D spatial signal of colour (a function of x,y)

into a 1D temporal signal and place the signal at appropriate pins of the connector on video board as colour(a function of T) and colourcode for pixel (x=0,y=0) is sent at T = 0 then colourcode for (x=1,y=0) is required to be sent at t, for (x=2,y=0) at 2t, and so on. The process is required to continuously repeated frame after frame with a particular frame rate.

5. This task is carried out by DPU (Display Processor Unit) which reads the digital colour codes in an ordered manners, converts it into analog version and output the signal on video port for controlling analog monitor.

6. The colour codes for every point are stored in a reserved location in the address space. This portion of the RAM is called Frame Buffer /Video RAM.

7. Putpixel(x,y) is realised by making CPU write required colour code at memory location corresponding to (x,y) using Direct addressing mechnism.

8. Getpixel(x,y) is realised by making CPU read exsiting value of colour code at memory location corresponding to (x,y) using Direct addressing mechnism.


9. For Colour display, the colour code is a structure (R,G,B) rather than a single value.

10. Animation can be created using extra video pages through set-active-page and set-visual-page constructs. Each slide of the visual story board is constructed and stored on a different page. Generally, the slide content is not displayed during construction and constructed graphics of a slide is displayed while the CPU is directed to construct the next slide on the nonvisual(active) page. Example, following two shapes are constructed on two pages and these pages alternately become the visual pages. This creates an illusion of a rotating hand.

Slide 0 on page 0 Slide 1 on page 1 11. These extra pages can also be used to store temporary graphical objects without

showing these objects on the screen. These objects can be used by constructs like Getpixel for constructing the some graphics on the visual page. Example, you can store some text on nonvisual page, scan this page for nonbackground pixels, display a pattern at a mapping location in the visual page. Another example, you can store a trajectory in nonvisual page, on the visual page, the moving objects is displayed at different points of this trajectory without shopwing the trajectory.

12. These extra pages require extra Video RAM. Set-active-page establishes the connection of CPU with the chosen page, set-visual-page connects DPU with the chosen frame buffer.

12. Graphics Pipeline a. Putpixel

Program calls Putpixel (randomly) {image is a 2D digital spatial signal in 2D logical space } CPU writes (randomly) colour code in the chosen page (area) of the frame buffer at appropriate location through direct addressing {Now image is a 2D digital spatial signal that is mapped on 1D Array of Physical RAM} DPU reads it (sequentially) and gives it to DAC {Now image is digital temporal signal}

DAC converts it into analog value and put it on the connector at required time {Now Image is an analog temporal signal}

Cable picks up the signal through its connector and carries the signal to Monitor. {Now Image is an analog temporal signal}


Monitor reads is and creates illuminated point on the monitor screen. {Now Image is 2D spatial signal on Physical screen}

b. Getpixel

Program calls getpixel (randomly) {image is a 2D digital spatial signal in 2D logical space }

CPU read (randomly) colour code from the chosen page (area) of the frame buffer at appropriate location through direct addressing {Now image is a 2D digital spatial signal that is mapped on 1D Array of Physical RAM}

13. Assignment : Examine the design options of creating large size frame buffers without using much of address space.

26.03.04 (2 hr.) 1. Program demonstrations by Vikas, Ritul and Lomesh. 2. Review of Graphics Pipeline for Puitpixel and getpixel.

3. The original PC design was based upon the capabilities of the 8086/8088, which

allowed for only 1 MB of memory, of which a small range (128K: A0000 to BFFFF) was allotted for graphics memory. Hence, several framebuffer design approaches have been developed to enable the CPU to address large frame buffer with small address space.

4. Frame Buffer design approaches : Packed Vs. Planer. 5. Planer Frame Buffer : CPU assigns only one bit of address space to every

pixel rather than one full or more bytes. It is parallely connected to n memory blocks (called planes) for n bit pixels. For example, if 24 bit pixels are needed to achieve 256 shades of reds, greens and also blues; then 24 memory blocks (planes) will be parallely connected to CPU. Each of this plane will have only one of the bits (0-23) of the 24 bit colour code for every pixel in the frame buffer. Hence the address space requirement for frame buffer is made independent of the colour resolution. It only depends on the spatial resolution. Through appropriate in-between circuitry (to be discussed once again) on the video controller card, CPU simultaneously accesses these meomory blocks (on the video controller card)) for reading/writing 1 bit in each plane during getpixel/putpixel.Uisng this scheme, 640x 480 x 256 colours will require only (640 x 480)/8 of address space rather than (640 x 480). Though the framebuffer


will still need 640 x 480 byte of video memory. This means 8 pixels share the same address at the level of the byte addressing. The exact pixel adressing is achieved by extracting/changing the required bit . Hence, (x,y) coordinates of the pixel are mapped to Byte offset and Bit number at the time of putpixel and getpixel.

Block Diagram showing parts and interface for a generic Display

controller for analog monitor using planer frame buffer

Colour Code bits of a pixel 0 1 2 3 n Colour Code bits of a pixel Analog

Monitor DAC

CLUT (Optional)

Plane n

CPU Address Bus

Plane 2

Plane 3

Plane 1

Data Bus

Plane 0

All the planes of the framebuffer share the same address space and get

simultaneously activated. However different bits of the colourcode of a pixel go to (or get pickedup) corresponding planes in the frame buffer. Each plane has one bit for every pixel. The number of planes equal the number of bits per pixel.

6. Colour Look Up Table (CLUT): When this is used, the framebuffer stores the

colour number rather than the colour code. The colour number from the framebuffer is used to read the corresponding colour code in the colour look up table. Setcolorpallete/getcolorpallet functions in TurboC give the access to this look up table. If we need to display only 16 simultaneous colours on the screen we need only 16 entries in the Colour Look up Table. Hence the framebuffer needs to to only 4 bit per pixel in order to give colour number (0..15). The corresponding colour code in the CLUT can have much larger bits. In VGA, it is 6 bit for Red,Green and Blue each making 18 bit colour code. Hence, any 16 out of 218 colours can be simultaneously created on monitor. This helps in economising the framebuffer size at the cost of large number of simulatneous colours. Indexed BMP file format also corresponds to this scheme.


7. Creating Animation using CLUT manipulation : If we need very fast animation of otherwise complex shapes without many colours we can use CLUT for creating animation effect suing following strategy:

i. Model the animation as a slide show in different slides of the object

keeping the background as it is.

Slide 0 Slide 1 Slide 2 Slide 3

Slide 4 Slide 5 Slide 6 Slide 7 Slide 8 Slide 9 Slide 10 Slide 11

Slide 12 Slide 13 Slide 14

ii. In the above slide show, the object (it may have very complex shape within the constrain that it does not require more colours) moves along the periphery and then towards the centre. There are only two colours , one for the background and one for the object.

iii. Initialise the CLUT as follows:

INDEX RED GREEN BLUE 0 255 255 0 1 255 255 0 2 255 255 0 3 255 255 0 4 255 255 0


5 255 255 0 6 255 255 0 7 255 255 0 8 255 255 0 9 255 255 0 10 255 255 0 11 255 255 0 12 255 255 0 13 255 255 0 14 255 255 0 15 255 255 0

iv. Draw object at all the non-overlapping 15 positions using different

colour index (1-15). No object will be visible on the screen as all colours are mapped to background colour only.

In this figure each colour represents a colour number in the CLUT.

It is not the actual colour. On the screen only yellow colour will be visible at every point on the screen as the colour codes for every colour number is YELLOW.

v. Now start changing the CLUT entries in such a manner that in the

beginning only entry number 1 is given RED colour keeping all other as YELLOW only. Then after a delay entry number 2 is give RED code while all other 1-15 are made YELLOW. This is continued in this manner by making onle one entry in the CLUT correspond to RED while all others are YELLOW. We get an illusion of moving RED ball as we see only one (at non overlapping different positions) at a time.

CLUT for selective display of Slide 1

INDEX RED GREEN BLUE 0 255 255 0 1 255 0 0 2 255 255 0 3 255 255 0 4 255 255 0 5 255 255 0 6 255 255 0


7 255 255 0 8 255 255 0 9 255 255 0 10 255 255 0 11 255 255 0 12 255 255 0 13 255 255 0 14 255 255 0 15 255 255 0


INDEX RED GREEN BLUE 0 255 255 0 1 255 255 0 2 255 0 0 3 255 255 0 4 255 255 0 5 255 255 0 6 255 255 0 7 255 255 0 8 255 255 0 9 255 255 0 10 255 255 0 11 255 255 0 12 255 255 0 13 255 255 0 14 255 255 0 15 255 255 0


INDEX RED GREEN BLUE 0 255 255 0 1 255 255 0 2 255 255 0 3 255 0 0 4 255 255 0 5 255 255 0 6 255 255 0 7 255 255 0 8 255 255 0 9 255 255 0 10 255 255 0 11 255 255 0 12 255 255 0 13 255 255 0


14 255 255 0 15 255 255 0


INDEX RED GREEN BLUE 0 255 255 0 1 255 255 0 2 255 255 0 3 255 255 0 4 255 0 0 5 255 255 0 6 255 255 0 7 255 255 0 8 255 255 0 9 255 255 0 10 255 255 0 11 255 255 0 12 255 255 0 13 255 255 0 14 255 255 0 15 255 255 0

This process continues in the similar manner. Hence, this scheme allows us to first create all the slides (in invisible mode) and then make their content visible selectively just by changing two entries in the CLUT.

16.04.04 (2 hr.) 1. In order to relieve CPU from doing graphics processing, GPU, (Graphics

Processing Unit) a dedicated processor is integrated into the system. The CPU does not have to execute many graphics algorithms in detail as it uses GPU as a slave processor that has its own RAM and ROM and works on behalf of the CPU. Standard Graphics operations like line, circle, area fill, polygon and many others are available to the CPU as GPU commands. Hence CPU can pay more attentions to other parts of the application like simulation, database retrieval and so on.


Block Diagram showing parts and interface for a generic Display controller (with Graphics Accelerator) for analog monitor using planer frame buffer

CPU Address Bus

Plane 0

Plane 2

Plane 3

Plane 1

Analog Monitor

CLUT (Optional)

DAC

Data Bus

Plane n

GPU

2. Rovolving an object around a point along the circumference of a circle: Two options : Object may be defined as a raster (Bitmap) or as a vector image. Revolving Raster based object will be computationally more expensive as it would require trigonometric operations for every point in the raster. Vector definitions are more suitable for animation pupose because only the end points of lines need to be revolved and lines can be drawn between new endpoints using simple linbe function.

3. The revolution is obtained by drawing realigned object at new positions on the circumference of the circle. In order to achieve illusion of smooth movement, these positions should be as close as possible . If the object is a simple dot, you get a circular movement of a dot usinf folowing formulation:

for (θ :=0 , θ < 2 Π, θ = θ + ∆θ) {draw dot; delay; erase dot }

4. What is the ideal value of ∆θ ? The number of steps in which revolution should be completed α r, 1/∆θ


∆θ α (object width) ; 5. For a dot, the object width = 1 pixel

We need to place the dot at 2 Π r pixel positions for continuous and smooth movement thru an angular movement of 2 Π.

Hence, in one step, ∆θ = 1/r 6. For wider objects, we can increase ∆θ to some extent without any visible

difference in smoothness of the movement. 8. Assignments :

Study Assignment (Group Project) : Find out the details of the API for a GPU.

Programming Assignment (Individual Assignment) : Write a program to display a revolving object (e.g. bird,man and so on) along

the circumference of a circle. The circle’s centre and radius should be allowed to be specified by the user. Define your data structucture and algorithm such that the same program can be used to revolve different kind of objects with different speed. Please pick up some objects from your ongoing games. Members of the same group should revolve different objects. If possible, incorporate some kind of revolution in your game story.

23.04.04 (2 hr.)

1. Geometrc Operations like Translation, Rotation, Scaling, Shear on graphical

objects. 2. Comparison of the algorithmic complexity of performing these operations on

raster Vs vector definitions of graphical objects. 3. Usually vector definitions will be more efficient. 4. Data Structure for modeling vector based graphics :

i. Scene Description Table : List of Objects with geometric dispplay parameters

Geometric display parameters Object No

Basic Object id

Position parameters to specify the position of origin of the basic shape definition {X,Y,Z}

Orientation parameters with respect to the basic shape definition {Axis of rotation, Angle of rotation}

Size parameters with respect to the basic shape definition { Sx,Sy,Sz}

Shear parameters with respect to the basic shape definition {Shx,Shy,Shz}

1 A 2 B 3 A 4 A 5 D

Notice that any basic shape may be reused several time for creating many objects in a scene by varying its one or more geometric parameters. ii. Object shape description : Description of the basic shape of every vector

object


Basic Object id

Basic Shape description using the vector primitives

A L P1, P2; L P1,P3; L P2,P4….., ;C P10,R, A P10,R2, θ1,θ2;.... B C P1, R1 C

The above example uses a vocabulary which is to be interpreted as follows:

L indicates a line between two points C indicated a circle at given centre and or given radius A indicates an arc at a given centre, of a given radius and between

two angles and so on…

Different Vocabulary may be followed by different systems.

iii. Vertex List : coordinates of every vertex in the basic shape.

Basic Object id Vertex No.

Coordinates with respect to the local coordinate system of the given object i.e. there need not be any relationship between the vertices of object A and Object B (X,Y,Z)

A P1 (0,0,0) P2 (10,5,6) … .. B P1 (0,0,0)

5. Alternatively, if the objects are defined using polygonal faces (Wire Mesh

Modeling) only, the basic shape description can be changed as follows: i. Object description : List of Polygonal faces that define an object.

Basic Object

id

Basic Shape description using the Polygonal Face ids.

A F1, F2, F3, F5, F6 B F1, F2, F3, F4 C


ii. Face List : List of edges that define a polygonal face

Basic Object id

Polygonal face id

List of edge-ids that define the polygonal Face

A F1 E1,E2,E3,E4 F2 E1,E5,E6 F3 E2,E3,E4,E7,E8

iii. Edge List : List of Vertices that define an Edge.

Basic Object id

Edge id Vertices

A E1 P1, P2 E2 P2,P3 E3 P3,P4

The Scence dscription and Vertex List is used as earlier. The graphics database can be created on the above principles by increasing or reducing redundancy as per the choice of designers. Different systems use different kind of adaptation of this basic model. 5. Geometric Transformation of Vectorised Objects: Just Transform the

Vertex list using appropriate geometric parameters as per the Scene description table and run the process using other lists to render the graphics. The Scene Description Table itself may be continuously updated by another process.

6. The geometric Transformations can be modeled as follows: P’ = f (P, Geometric display parameters); Where P and P’ are vectors (X,Y,Z) and f is a linear function. Simple geometric transformation have following formulations: Translation : P’x = Px + δX; P’y = Py + δY P’z = Pz + δZ Scaling about origin : P’x = Sx. Px P’y = Sy. Py P’z = Sz. Pz Shear : P’x = Px + Sh1.Py + Sh2 Pz P’y = Py + Sh3.Px + Sh4 Pz P’z = Pz + Sh5.Px + Sh6 Py Rotation about Z axis : P’x = Cosθ Px - Sinθ Py P’y = Sinθ.Px + Cosθ Py P’z = Pz


More complex linear rigid body geometric transformations can be formulated as a series of these basic transformations. P’x = a Px + b Py + c Pz + d P’y = e Px + f Py + g Pz + h P’z = i Px + j Py + j Pz + k These Linear Transformations are called Affine Transformations. They preserve the lines and the parallelism amongst parallel lines.

7. These transformations can be represented as matrices using homogeneous

coordinates where (Px, Py, Pz) is represented as (Px-w, Py-w, Pz-w, w). w can be any scalar with following interpretaion:

Px = Px-w/w Py = Py-w/w

Pz = Pz-w/w Use w= 1.

8. [P’] = [T] [P] where, [P] and [P’] are column matrices representing homogeneous represention of P and P’ as (Px, Py, ’z, 1) and (P’x, P’y, P’z, 1) T is 4x 4 matix representing affine tranformations as {(a,b,c,d), (e,f,g,h), (i,j,k,l), (0,0,0,1)}

9. The advantage of homogeneous representation is in its power of representing all linear transformation including translation as a matrix.

10. Complex Transformation that are caused by a series of several siomple transformation can be modeled as a single matrix by multiplying all the matrices in correct order.

11. T = T3 T2 T1 means First apply T1, then apply T2 then T3. This composite result can simply be obtained by multiplying the point column matrix with T as follows:

[P’] = T1 [P] [P’’] = T2 [P’] [P’’’] = T3 [P’’] This process can be simplified as follows: T = [T3 ][T2 ][T1] [P’’’] = [T ][P] 12. For transforming object, Create a matrics of the vertices to be tranformed out

vertex list, by creating a column for every vertex using homomgeneous representation [P1 P2 P3…..Pn] where each P is a column of 4 elements {Px,Py,Px,1}.

13. Multiply this matrix with Geometric Transformation Matrix to get transformed vertices as follows:

[P’1 P’2 P’3…..P’n] = [T] [P1 P2 P3…..Pn]; 14. Use various lists described in 4 above to render tranformed object.

30.04.04 (2 hrs.)

1. Demonstrations by Abhishek Sikdar, Ankit Dalmia, Ankit Chaturvedi. 2. Projections: It is a way of dimension reduction. Projects are created to create

2D image of 3D point. Hence a point (x,y,z,1) is converted as (x’y’,0,1) or


(x’,0,z’,1) or (o,y’,z’1) and is displayed at (x”,y”) on the screen. Where x” and y” are direction cosines with respect to screen coordinate system, while x, y, z are direction cosines with respect to world coordinates and x’, y’ and z’ are direction cosines on the projection plane with respect to world coordinates. Parallel and Perspective projections are important types of projections. There are other types of projection as well for specific applications.

3. Parallel Projection : Top view (Plan, projection on x-y plane), Front view (elevation, projection on xz plane) and Side view (projection on yz plane) are main sub types of parallel projections. Any plane can be used to project all the ‘world points’ using parallel projectors that are orthogonal to ‘projection plane’ and do not have a finite ‘centre of projection’. The content of projection plane is then displayed on the screen. Parallel lines in all orientations remain parallel. All lines perpendicular to the projection plane reduce to points.

If z axis represents the height then, Top view : x” = f (x’ = x); y” = f (y’ = y); z’ = 0; w’ = w = 1; Elevation : x” = f (x’ = x); y’ = 0 y” = f(z’ = z); w’ = w = 1; Side View : x’ = 0; x” = f(y’ = y); y” = f(z’ = z); w’ = w = 1;

All these transformations ( sets of 4 linear equations) can be easily written as matrices that can be concatanated with other geometric transformation matrices and the resultant matrix can be used to find the screen projection of all the points even when they are continuously undergoing some geometrically transformed points just with one matrix multiplication operation. The arithmatic operations can be reduced by taking advantage of the fact that many entries in the matrix will be zero.

4. Perspective projection : The projectors are not orthogonal to projection

plane. They meet at a finite centre of projection (can be considered as the position of eye/synthetic camera).

If the projection is taken on X,Y plane and the centre of projection is

assumed to be at (0,0,-E,1; where E is positive number) with respect to the homogeneous world coordination system. All the points in the world (x,y,z,1) need to to projected at XY plane such that the projectors meet at centre of projection casting the projection of every point on XY plane.


P2 (x2,y2,z2) Y axis P1(x1,y1z1)

P1’

P2’ X axis (0,0,-E1) C.P. Z axis Using similar triangle, the projections of P1 and P2 can be found on XY

plane as P1’ and P2’. x1’ / x1 = E / (z1 + E); y1’ / y1 = E / (z1 + E) ; z1’ = 0 x2’ / x2 = E / (z1 + E); y2’ / y2 = E / (z1 + E) ; z2’ = 0 This is simplified as ; x’ = x / ((z/E) + 1) y’ = y / ((z/E) + 1) z’ = 0; The denominator can be treated as w’ in homogenous coordinate

representaion where; w’ = ((z/E) + 1). The set of these 4 linear equations cane written as a matrix that can be used as

earlier projection matrices giving more realistic imagery on computer screen.

5. Z Buffer Algorithm: It is used for displaying a set of of planer faces on 2D screen. The colour of each point on projection plane (x’,y’) is to be set as the colour of the corresponding point (x,y,z) on nearest face along the depth of the world. The depth is taken along z axis as above The vertices of each Planer faces can be used to find out a,b,c,d parameters of the normal of plane as ax + by + cz + d = 0. Hence, z = - (ax +by+d)/c hence , for a given planer face, this can used to more effciently compute the z values using already stored z of neighbours. zx+1,y = zx,y – a/c zx,y+1 = zx,y – b/c


We maintain a buffer (in software or in hardware of some graphics accelerators) to store the nearest z value for every x’,y’. Algorithm works as follows: 1. Apply the geometric and perspective transformations to all the vertices and

get new plane parameters. 2. For x’ = 0 to max-x’ For y’ = 0 to max-y’ { Initialise z-min (x’,y’) to a very large value (more than the largest depth) ; Initialise the colour(x’,y’) to the colour of background. } For facenumber= 0 to max-faces For x’ = 0 to max-x’ For y’ = 0 to max-y’ { If (x’,y’) is inside currently chosen face { Find z as depth of the face from this pont ; If z < z-min (x’,y’) { z-min (x’,y’) = z colour (x’,y’) = colour (x,y,z) } }

07.05.04 (2 hrs.)

1. Window-viewport tranformation. 2. Clipping a ploygon with rectangle 3. Clipping with arbitrary shaped (even concave) polygons. 4. Inside test. 5. Flood filling by supplying a seed point inside the region to be coloured :

Recursive, Stack based and Queue based algorithms. 6. Surface of revolution (e.g. sphere, flask and so on) and Lofting for

modelling of 3d geometric objects. 7. Applying interpolation and approximation (learnt in Numerical Analysis

course) for smooth 2d and 3d curves.

computer graphics 2004

Education

d computer graphics

graphics programming

interactive computer

computer graphics sanjay

graphics libraries

functions of graphics

moderncomputer graphics

d graphics creation