CSC 418 - Notes
Topic 1: Introduction, Display Technology, and Basic Drawing

Navigation: back up next notes exercises

Key Concepts & Readings

• Introduction (Shirley: p. 1-3)
• History (Shirley: p. 12)
• Display Technology (Foley & van Dam: c. 18, p. 855-922)
• Video Raster Graphics (Shirley: p. 49-50)
• Colormaps (Hill: p. 26-29. Foley & vanDam: p. 564-573, 599-600)
• Gamma Correction (Shirley: p. 50-52)
• Line Drawing - Bresenham's (Midpoint) Algorithm (Shirley: p. 55-60. Hill: p. 555-560)
• Polygons (Hill: p. 287-291. Foley & van Dam: p. 471-477)
• Polygon Triangulation
• Triangle Rasterization (Shirley: p. 60-64)
• Sutherland-Hodgman 2D Clipping Algorithm (Hill: p. 202-204. Foley & van Dam: p. 124-127)
• OpenGL (OpenGL, The Red Book c. 2 )

OpenGL

My first Opengl Program

An OpenGL program that draws a colorful, rotating triangle. We use Glut library to setup gui and user interactions with the OpenGL program.

#include <stdio.h>
#include <GL/glut.h>
#include <math.h> 

float angle = 0; 

void draw_scene()
{
 // setup the projection matrix
 glMatrixMode( GL_PROJECTION );
 glLoadIdentity();
 
 
 // setup the modelview matrix
 glMatrixMode( GL_MODELVIEW );
 glLoadIdentity();
 glRotatef(angle,0,1,0); // rotate by angle about  y axis  // clear the color buffer - erase  the scene
 glClear( GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
 
 // draw a triangle into the buffer
 glBegin( GL_TRIANGLES );
 glColor3f(1,0,0); // set vertex 0 color to be  red (R,G,B)
 glVertex3f( 0.0f, 0.5f, 0.0f ); // set vertex  0 coordinate to be (0,0.5,0)
 glColor3f(0,1,0);
 glVertex3f( -0.5f, -0.5f, 0.0f );
 glColor3f(0,0,1);
 glVertex3f( 0.5f, -0.5f, 0.0f );
 glEnd(); // double buffering to avoid flicker
 glutSwapBuffers();
} 

void idle()
{
 // increment the angle
 angle += 0.50;
 
 // tell the opengl machinery to redraw the scene
 glutPostRedisplay();
} 

void keyhit(unsigned char key, int x, int y)
{
 switch(key) {
 case 'q':
 exit(0); 
 }
} 

int main(int argc, char **argv)
{
 // create window and rendering context
 glutInit( &argc, argv );
 glutInitDisplayMode( GLUT_RGB | GLUT_DOUBLE | GLUT_DEPTH );
 glutInitWindowSize( 640, 480 );
 glutCreateWindow( "openGLDemo" );
 
 // specify callback functions
 glutDisplayFunc(draw_world);
 glutIdleFunc(idle);
 glutKeyboardFunc(keyhit);
 
 // enable z-buffering 
 glEnable(GL_DEPTH_TEST); // pass control over  to GLUT
 glutMainLoop();
 return 0; // never reached
}

Points, Lines, and Polygons in OpenGL

Specifying vertices

  glVertex2*(...);
  glVertex3*(...);
  glVertex4*(...);

Drawing points

  GLfloat v1[] = {1.0,1.0,0.0};
  glBegin(GL_LINES);
  glVertex3v(v1); /* draws a point at v1=(1,1,0) */
  glEnd();

Function glPointSize(...) can be used to control the size of the rendered point.

Drawing lines

  GLfloat v1[] = {0.0,0.0,0.0};
  GLfloat v2[] = {1.0,1.0,1.0};
  GLfloat v3[] = {1.0,1.0,1.0};
  GLfloat v4[] = {1.0,2.0,1.0};
  glBegin(GL_LINES);
  glVertex3v(v1); glVertex3f(v2); /* line 1 with end points v1 and v2 */
  glVertex3v(v3); glVertex3f(v4); /* line 2 with end points v3 and v4 */
  glEnd();

Drawing a series of connected line segments

  GLfloat v1[] = {0.0,0.0,0.0};
  GLfloat v2[] = {1.0,1.0,1.0};
  GLfloat v3[] = {1.0,2.0,1.0};
  glBegin(GL_LINE_STRIP);
  glVertex3v(v1); glVertex3v(v2); glVertex3v(v3); /* line segments v1->v2->v3. */
  glEnd();

Drawing a series of connected line segments with an additiional segment from the last to the first vertex

  GLfloat v1[] = {0.0,0.0,0.0};
  GLfloat v2[] = {1.0,1.0,1.0};
  GLfloat v3[] = {1.0,2.0,1.0};
  glBegin(GL_LINE_STRIP);
  glVertex3v(v1); glVertex3v(v2); glVertex3v(v3); /* line segments v1->v2->v3->v1 */
  glEnd();

The following functions can be used to setup line-drawing properties

Drawing a Polygon

  glBegin(GL_POLYGON);
  glVertex3v(v1); glVertex3v(v2); glVertex3v(v3); glVertex3v(v4); /* polygon with vertieces v1, v2, v3, and v4
  glEnd();

Drawing a Triangle

  glBegin(GL_TRIANGLES);
  glVertex3v(v1); glVertex3v(v2); glVertex3v(v3); /* triangle with vertices v1, v2, and v3 */
  glVertex3v(v4); glVertex3v(v5); glVertex3v(v6); /* triangle with vertices v4, v5, and v6 */
  glEnd();
 

Other arguments for glBegin() are GL_POINTS, GL_TRIANGLE_STRIP, GL_TRIANGLE_FAN, GL_QUADS, GL_QUAD_STRIP.

Valid commands between glBegin() and glEnd() are:

By default OpenGL draws polygons as filled faces. Use glPolygonStipple() to fill a polygon with a 32-bit by 32-bit window-aligned stipple pattern.

Use glEnable(GL_POLYGON_STIPPLE)/glDisable() to enable/disable polygon stippling.

Notes

Introduction

• Modeling
• Animation
• Rendering
• Interaction

Applications

• simulation
  • flight
  • driving
• scientific visualization
  • weather
  • MRI
  • chemistry, ...
• CAD/CAM
  • architecture
  • mechanical design
  • electrical design, ...
• art and entertainment
  • film, video
  • games
  • advertising

History

• 2000 B.C.:
  orthographic projection
• 1400s
  Perspective: Italian Renaissance
• 1600s
  coordinate systems: Descartes
  optics: Huygens
  calculus, physics, optics: Newton
• 1897
  oscilloscope: Braun
• 1950-1970
  computers with vector displays
• 1966
  first true raster display
• 1993
  1200x1200, 500k triangles/sec, 36-bit colour, stereo, texture mapping, all at 60Hz.
• 1995
  video holography
  feature-length CG films
• Today
  affordable 3D for PCs
  image-based modelling

Display Technology

History

• 1968
  Evans & Sutherland, flight simulation
  3D vector pipeline, matrix multiplier, clipping
• 1982
  Clarke, Geometry Engine
  IRIS: Integrated Raster Imaging System -- SGI
• 1983
  VRAM: Texas Instruments
  video random access memory for frame buffers
• 1994
  3D hardware support for PCs
• 2001
  vertex shaders, pixel shaders
• future ??
  further IC integration
  compression
  multiple levels of detail

Video Raster Graphics

virtual raster device

gamma correction

Definitions

Basic display architecture

Pixels

Colour maps

What algorithms might one use to generate a colour-map?

The following image is an example of the use of dithering to create an approximation of a continuous-tone image.

Napoleon Visual by www.PDImages.com

Line Drawing

Representations for Lines and Curves

Explicit: y = f(x)

line
circle

Parametric:   x = f(t),   y = f(t)

line
circle

Implicit:  f(x,y) = 0

line
circle

Optimal Line Drawing

straight pass through endpoints smooth independent of endpoint order uniform brightness brightness independent of slope efficient

A Straightforward Implementation

DrawLine(x1,y1,x2,y2)
int x1,y1,x2,y2;
{
  float y;
  int x;

  for (x=x1; x<=x2; x++) {
    y = y1 +  (x-x1)*(y2-y1)/(x2-x1)
    SetPixel(x, Round(y) );
  }
}

A Better Implementation

DrawLine(x1,y1,x2,y2)
int x1,y1,x2,y2;
{
  float m,y;
  int dx,dy,x;

  dx = x2 - x1;
  dy = y2 - y1;
  m = dy/dx;
  y = y1 + 0.5;
  for (x=x1; x<=x2; x++) {
    SetPixel(x, Floor(y) );
    y = y + m;
  }
}

The midpoint algorithm makes use of the the implicit definition of the line, F(x,y) = 0. The E/NE decisions are made as follows.

define

if E is chosen,

if NE is chosen,

The process repeats, stepping along x, making decisions whether to set E or NE pixel.

Initialization

For an integer-only algorithm. Define

Then, the following algorithm produces the desired results for lines having x1 less than x2 and a slope less or equal to 1.

drawline(x1, y1, x2, y2, colour)
int x1, y1, x2, y2, colour;
{
  int dx, dy, d, incE, incNE, x, y;

  dx = x2 - x1;
  dy = y2 - y1;
  d = 2*dy - dx;
  incE = 2*dy;
  incNE = 2*(dy - dx);
  y = y1;
  for (x=x1; x<=x2; x++) {
    setpixel(x, y, colour);
    if (d>0) {
      d = d + incNE;
      y = y + 1;
    } else {
      d = d + incE;
    }
  }
}

Polygons

Different types of polygons:

Triangles are often particularly nice to work with because they are always planar and simple convex.

A variety of polygon representations can be used, one of the most common ones being an ordered list of references to a vertex list. This avoids redundant storage and redundant computations. We'll also be associating a variety of other information with vertices, such as normals, colours, and texture coordinates.

Modeling a square using polygonal faces

Polygon Triangulations

High-speed rendering typically relies on polygonal and curved surfaces being subdivided into triangles that can be handled efficiently by the graphics hardware. Triangles are the simplest polygons and they are the foundation of modern realtime graphics, and are by far the most popular rendering primitive.

Triangle Rasterization

We want to draw 2D triangle with 2D points p0, p1, and p2 in screen coordinates.

2-Step Procedure

• Draw the outline using midpoint line drawing algorithm
• Fill the interior

Filling in the triangle

• Sort the triangle vertices by y
• Lable the top vertex Vt, middle vertex Vm, and the bottom vertex Vb
• Now draw two halfs of the triangle; draw the top half (between ym and yt) and then draw the bottom half (between yb and ym)
• Each of the fill routines consists of filling the triangle region one scanline at a time, using the DDA algorithm to find the x values of the beginning and the end of each pixel span to draw. The top half will uses DDA to find the x values on Ebt and Ebm.The bottom half uses DDA to find the x values on Ebt and Emt.

Polygon Clipping

The Sutherland-Hodgman algorithm can be used to clip any polygon (convex or concave) against any convex clipping polygon. The algorithm clips against one edge at a time, producing a new vertex list each time. The following figure assumes the most common case, a rectangular clipping window.

The algorithm can be summarized as follows:

  for each side of clipping window
     for each edge of polygon
        output points based upon the following table

Example

Using Outcodes for Trivial Accept and Reject

In many cases, two trivial tests can be used to quickly determine whether a polygon is completely inside or outside the viewing window. This then allows us to skip the above clipping procedure.  The trivial tests require first computing outcodes

A vertex outcode consists of four bits: TBRL, where:

• T is set if y > top,
• B is set if y < bottom,
• R is set if x > right, and
• L is set if x < left.

Trivial accept:    all vertices are inside (all outcodes are 0000)
Trivial reject:     all vertices are outside with respect to any given side(bitwise AND is not 0000)

Exercises

Exercise 1

Develop an integer-only algorithm for rasterizing a circle C centered at (0,0) and of radius r, where r is an integer.

Exercise 2

Write programs to determine whether a point is inside a polygon. For simplicity, assume the test point is the origin (0,0). The programs should output the word "inside" or "outside", and should expect the following inputs:

1. n, the number of vertices in the polygon.
2. n pairs of numbers, each pair being the coordinates of a polygon vertex.

Use the Jordan Curve theorem: The test point is inside the curve iff an infinite ray from the point crosses the boundary an odd number of times. For simplicity, let the ray be the positive x-axis.

Exercise 3

Clipping a polygon P to a rectangular window yields a new polygon P, which may have a more or less vertices than P.

• if P is a triangle, how many vertices will CP have, at most?
• if P is a quadrilateral, how many vertices will CP have, at most?
• if P is convex and has N>4 vertices, how many will CP have, at most?
• if P is convex and has N>4 vertices, how many will CP have, at LEAST? (assume P is not trivially clipped).

Exercise 4

1. Use the Sutherland-Hodgman algorithm to clip this polygon on this rectangular window:
   

   Vertex x y 1 50 80 2 250 150 3 50 220 4 210 150

   Clip Line Value B y=100 T y=200 L x=0 R x=200

   
   Clip the polygon in the following order: T,L,B,R, and list the vertices of the intermediate polygon after each pass.
2. What shortcomings in the algorithm are evident? Illustrate with an example. How can you overcome them?