Basic OpenGL Instructions

Start to draw something interesting

Basic drawing 1
 Outline
• Overview
• Attribute definition instructions
• Basic drawing instructions
• Data types in OpenGL
• Quadric objects
• Frame buffer I/O Instructions

Basic drawing 2
 Overview
• Purposes:
– In this lecture, basic instructions of drawing, attribute
definition, and frame buffer I/O will be introduced.
• Usage
– To design subroutines for rendering primitives.
• 繪製基本物件:點、線、多邊形
– To implement a callback function of display event.
– To read and store what our app had drawn.
• 輸出繪圖結果
– To read an image from a disk file (BMP?) and display
or blend it in the frame buffer.

Basic drawing 3
 How to draw a simple geometry?
drawing primitives using OpenGL 1.x
The key steps:
1. Define attributes of the object (primitive)
• Color, size, thickness, …
• Using OpenGL instructions
2. Define geometrical information of the object
• Coordinates, normal vector,…
• Using OpenGL instructions
3. Draw the objects using glBegin(…) and glEnd(…);
• Geometrical information are enclosed within these 2 drawing commands.
• Using default OpenGL pipeline

Reminder:
• Just for basic 2D or 3D object without any lighting effect or transformation.
• What are lighting effects? What are transformations?
• Discuss these topics in later lectures about geometrical transformations and shading.
[note] Good for OpenGL 2.x, not working for OpenGL 4.x

Basic drawing 4
 Attributes
• What is an attribute (of an object)?
– color, size, thickness, opacity, material, or optical properties of an object.
• Color attribute:
– For points, lines, polygons, …
• Geometrical attributes:
– Point size for points
– Line width for lines
– Filling modes for polygons…
– Coordinates & normal
• Material & optical attributes
– For polygons, reflectivities (ambient, diffuse, specular…)
• Attributes of windows
– Fonts/font color/…
– Clear color/ front color
– Initial size, position

Basic drawing 5
 OpenGL as a State Machine
Attribute的影響範圍
• In OpenGL environment, basic
//define the current color.
properties (or attributes) are glColor3f(0,1,0); //green
treated as states: (全域狀態)
– Color, line width, point
size,… Green-colored

• These properties once defined

affect all the drawings afterwards, //redefine it.
glColor3f(0,0,1); //blue
until they are re-defined.
– 全域狀態
– 影響往後的繪圖 Blue-colored
– 直到重新定義
Basic drawing 6
 Drawing Instructions and Libraries
• Draw basic geometries: (gl) Primitive objects
– Points & lines, (aka primitives)
– Polygons,
– Triangles,
– Quads.
• Draw quadric objects: (glu)
– Cylinders,
– Circles, (disks)
– Spheres.
• Print a text:
– Locate a raster position (gl).
– Print out the characters (glut)
[note] we can use glut to draw
complicated objects.

Basic drawing 7
 Buffer I/O Functions
• Reading the contents of a buffer. (gl)
– Or the contents of a rectangular block
– Contents = colors, depths, …

• Writing data into a buffer. (gl)

– Locate a position in a buffer.
– Write image data into a buffer.
• Colors, depths, opacities, …

• Displaying buffer contents (gl, glut)

– Swapping buffers
– Flushing out buffer contents
[note] read/write between the hard-disk and buffers are accomplished
by C-programs ( we designed them.)

Basic drawing 8
 Colors, Coordinates, and
Instruction Formats in OpenGL
OpenGL指令格式與程式設計原則

Basic drawing 9
 Set Window Background Color
• Instruction
glClearColor(r, g, b, a); //rgba are floating point numbers
– Set the window background color.
• Usage: used in the callback of the display event to clear the
window. (利用底色, the clear color, 清除視窗)

void display(){
//define background color.
glClearColor(0.0, 0.0, 0.0, 1.0); //black color
//clear color buffer.
glClear(GL_COLOR_BUFFER_BIT);
}

Basic drawing 10
 OpenGL, RGB Color Model
RGB顏色表示法
• A light ray consists of EM
waves (電磁波)of
different frequencies.
• Our eyes can detect only 3
types of colors:
– Red, Green and Blue

• A ray of color is sensed

and decomposed into
RGB components by our
eyes.
– Our brains comprehend the
color based on the
combination of the RGB
components.

illumination models 11
 Define Colors, OpenGL Approaches
• The instructions
glColor3f(r, g, b); // Color=[r, g, b], 0≤ r, g, b ≤1
glColor4f(r, g, b, a); // Color + opacity. 0≤ a ≤1
–r, g, b, & a are floats. //注意它們的值域範圍
• Format of this instruction
gl + color + 3 + f

Library functionality Num. of Data type of

name parameters parameter

Basic drawing 12
 Data Types in OpenGL
• For portability, OpenGL defines some data types.

• Most used OpenGL data types:

types meaning abbreviations縮寫
float 32-bit float f
integer 32-bit integer i
unsigned byte unsigned char ub
short short s

Basic drawing 13
 Digression, Other Color Models
其他常見的顏色表示法
• HSL: hue, saturation, light
• HSV: hue, saturation, value
• YCrCb: Luminance (brightness), Cr: saturation of
R, Cb: saturation of B. //human skin color model
• Lab: brightness (lightness), (a=R/G), (b=Y/B)
– Y = yellow
• CMYK: cyan, magenta, yellow, black
(Subtractive color system, for printing images)
• …
Basic drawing 14
 Define a Position
定義一個點座標
• Specify the coordinates of a vertex.
– Defining a position in the 2D, 3D or 4D space.
– But, no geometrical entity (point) is specified!
• OpenGL pipeline will create it. //using glBegin(---); … glEnd();
• Instructions (定義座標，不進行繪圖)
glVertex3f(x, y, z); //3D position
glVertex2i(x, y); //2D position, integer type.
glVertex3fv(p0); // float p0[3]; array.
– 記得glRasterPos2i( x, y);嗎？ // move to a location in the window (frame buffer)

• The format
gl  library name, Vertex  instruction name,
3f  3 float parameters.
– x, y, and z are the parameters.

Basic drawing 15
 Drawing Instructions

For Points, Lines, and Polygons

Basic drawing 16
 How to Draw an Object?
OpenGL 1.x and 2.x
• Define its color and other attributes first;
• Then draw the object:
– Use glBegin() & glEnd() to define the object type & the
vertex coordinates of the object.
– Object types include point, line, polygon, triangle, …
– The vertices are enclosed within glBegin() & glEnd();
glBegin(obj_type);
glVertex3fv(p0);
glVertex3f(x1, y1, z1); Drawn by the
: default shader
glEnd();

Basic drawing 17
 Digression: defining an object
• Basic components: vertices
• Primitive Geometries
– Points = vertices
– Line = 2 vertices
– Triangle = 3 vertices
– Polygon = a list of vertices
(Convex polygons only)

[在OpenGL中vertex不是primitive，它代
表座標資訊。]

Basic drawing 18
 Draw Points and Lines
• Draw points:
glBegin(GL_POINTS); /* Draw 2 points. */
glVertex3f(x, height-y, 0); //define the coordinates of the 1st point.
glVertex2f(10, 29); //define the coordinates of the 2nd point.
glEnd();

• Draw lines:
glBegin(GL_LINES); /* Draw a line */
glVertex2f(pos_x, height - pos_y); //define the coordinates
glVertex2f(x, height - y); //define the coordinates
glEnd();
• Draw several lines= ?

Basic drawing 19
 Attributes of Point & Line
• Define point size
glPointSize(float size);
–Size = point size measured by pixels.
–Why float ? Why not integer ?
–Outside glBegin() & glEnd(); //otherwise no effect!已經完成
primitives的建構了，無法植入attributes.
• Define line width
glLineWidth(float width);
–Width = 3.5, thickness = 3 pixels, 0.5 for anti-aliasing.
–Outside glBegin() & glEnd(); //define attributes before glBegin().
Basic drawing 20
 Draw a Polygon
• A polygon is defined by using a sequence of vertices.
glBegin(GL_POLYGON);
for(i=0;i<side;i++)
glVertex2f(vertex[i][0], height-vertex[i][1]);
glEnd();
• Another example
glBegin(GL_POLYGON);
glVertex2f(0, 0);
glVertex2f(10, 10);
glVertex2f(10, 0);
glEnd();

Basic drawing 21
 Define Polygon Color
• Polygons with single color
glColor3f(r,g,b);
glBegin(GL_POLYGON);
glVertex3f(x1, y1, z1);
:
glEnd();
• Multiple colors (不同點，給不同顏色)
glBegin(GL_POLYGON);
glColor3f(r1,g1,b1);
glVertex3f(x1, y1, z1);
glColor3f(r2,g2,b2);
glVertex3f(x2,y2,z2);
:
glEnd();

Basic drawing 22
 Colored Polygons
• Monotone polygon • Multi-colored polygon
– All vertices share the – Pixel colors are
same color. interpolated by using the
vertex colors.

Basic drawing 23
 Order of Vertices
• Enumerate vertices in the following orders:
– Counter-clockwise, 逆時針
– Clockwise， 順時針
– Counter-clockwise is better! (the default orientation)
– 不可混用!!!
• Don’t enumerate vertices in arbitrary order.
p2
p1

p3
p2 p3
p1

p0
p0
Basic drawing 24
 Special Polygons
• Triangles
glBegin(GL_TRIANGLES);
glVertex3fv(p0);
glVertex3fv(p1);
glVertex3fv(p2);
glEnd();

• Triangles are the most used polygons in geometrical modeling.

Reasons:
– Easy to render (filling, shading, …),
– Easy to process (clipping, interpolation, …),
– Hardware acceleration,
– Can model any shapes.
Basic drawing 25
 Special Polygons
• Quads– defined by using 4 vertices.
– No longer popular in new version OpenGL.
• Come from CAGD tools.
glBegin(GL_QUADS); //counterclockwise order
glVertex3fv(p0);
glVertex3fv(p1);
glVertex3fv(p2); p3 p2
glVertex3fv(p3);
glEnd();

p0 p1

Basic drawing 26
 Filling Modes
• A polygon can be filled or 2 filling modes
outlined. Outlined mode

• A polygon has two faces.

– Front and back faces.
• Define drawing mode by using
Filled mode
glPolygonMode(face, mode);

Face = {GL_FRONT, GL_BACK,

GL_FRONT_AND_BACK}.
Mode = {GL_LINE, GL_FILL}.

Basic drawing 27
 Polygon Faces
• Front face and back face
are relative terms. Normal (法向量) is decided
– The side facing us is the by the right-hand rule.
front face, while the other
side is the back face.
– Using the face normal to
distinguish face type. Back face
– (discuss this more in the
shading lecture.) Front face
• In OpenGL, the order of
vertices decides the face
normal. (counterclockwise)

Basic drawing 28
 Remind Again
• Any attribute is a state variable.

• Once defined, it influences all the following drawing

instructions.
– Unless, we over-rule (re-define) it.
• Attributes
– Point size, line width, color, drawing mode, …

Basic drawing 29
Drawing Quadric Surfaces

Circles, spheres, cylinders

Using the glu library

Basic drawing 30
 Draw Quadric Objects
• Objects: Spheres, disks (circles), and cylinders.
– Drawn by using glu commands.
• Steps of drawing quadric objects:
1. Declare them (利用內建型態)
GLUquadricObj *sphere=NULL, *cylinder=NULL, *disk=NULL;
•Pointers， initially NULL.
2. Create them //using an internal instruction
if(sphere==NULL) sphere = gluNewQuadric();
3. Define attributes for them
4. Draw them.

Basic drawing 31
 Draw a Disk
• Draw a disk. Outer ring

GLUquadricObj *disk=NULL;

gluDisk( disk, //object name slice

inner_radius,
outer_radius,
num_of_slices,
num_of_ring);

– Center = (0,0); Inner ring

– In the x-y plane.
//using glRasterPos2i(x, y) to redefine the center.
Basic drawing 32
 Draw a Sphere
• Define its radius, #(slices), A sphere is a quadric surface

and #(stacks).
GLUquadricObj *sphere = NULL;

gluSphere(sphere, //name
radius, //radius
slices, // num. of slices
stacks); //num. of latitude
curves.
– Center=(0,0,0);
stack
slice

Basic drawing
33
 Draw a Cylinder
• Define base & top radii, height, num. of slices, and
num of stacks.
gluCylinder(cyliner,
Top circle
base_radius,
top_radius,
height,
slices,
stacks); Z

– No top or base circle.

– Extruding toward z-axis.
– Center of base circle = (0, 0, 0);
Base circle
Basic drawing 34
 Draw Style & Attributes
• Draw style command: • Other attribute
gluQuadricDrawStyle(sphere,
style); commands (in gl).
– This command defines the • For example, color:
fill mode of the quadric
object.
– Execute this command glColor3f(r, g, b);
before drawing the quadric
objects
• Options:
GLU_FILL //default
GLU_LINE
GLU_POINT
GLU_SILHOUETTE
Basic drawing 35
 Questions
• The default center of the afore-mentioned quadric object is
(0, 0, 0), the origin.

• How can we draw a circle centered at the cursor’s position ?

glRasterPos2i(x, height-y); //move to new origin

– height = window height

– (x, y) = cursor position
• How can we draw a sphere at an arbitrary 3D or 2D
position?
– Discussed in the geometrical transformation lectures.

Basic drawing 36
Frame Buffer I/O Instructions
Read from frame buffer
Write to frame buffer
(Lecture 4, Frame Buffer Structure)

Basic drawing 37
 Frame Buffer I/O
• We can read portion contents of the frame
buffer.
– Color buffers (front or back)
– R, G, B, A channels, (the 4 values of a pixel)
– Depth buffer, …
• We can also write image data into these
buffers.
– Especially color buffers

Basic drawing 38
 Read from Frame Buffer
• Read the contents of a rectangle in the frame
buffer.
• Procedure
1. Select the buffer to read from;
2. Define the pack-alignment;
3. Read the contents and store them into an array.

• What is pack alignment?

– See the next slide.
Basic drawing 39
Memory Alignment: Pack and Unpack
• Pack and unpack (between the frame buffer and the main
memory)
pack

Frame buffer
Main memory
unpack

(Graphics card)

• Alignment method:
– Specify the starting address (in bytes) for storing
each pixel in the main memory.

Basic drawing 40
 Memory Alignment Examples
• Alignment = 4. The starting address of each
item is a multiple of 4.

0 1 2 3 4 5 6 7 8

• Alignment=1, the starting address = any

position.

0 1 2 3 4 5 6 7 8

Basic drawing 41
 Scope of Buffer for Reading
• We can read the contents of a rectangle in a buffer.
X window
X_size
Y

Y_size
注意視窗座標系 Rectangle to be read
統與一般3D座標 y
系統的不同

x
Lower left corner of the rectangle

42
Basic drawing
 Buffer Reading Example
• Read RBGA values from the front buffer.
unsigned char image[XSIZE][YSIZE][4]; //declare an RGB array.
int pos_x, pos_y;

glReadBuffer(GL_FRONT); /* select the front buf */

glPixelStorei(GL_PACK_ALIGNMENT, 1); /* alighment=1 */

/*---Read the front buffer and store its contents in image[][][],

(pos_x,pos_y) is the lower-left corner. The size is XSIZE by YSIZE---*/
glReadPixels(pos_x, 500-pos_y, //lower left corner, 500=window height.
XSIZE, YSIZE, //shape of the rectangle
GL_RGBA, //Read RGBA channels.
GL_UNSIGNED_BYTE, //Convert data into unsigned bytes.
image); //Keep data in the array.

Basic drawing 43
 Write into Frame Buffer
• Write data into a rectangle of a buffer.
• Procedure
– Select the destination buffer, back or front;
– Define unpack alignment;
– Define the lower-left corner;
– Write the data;

Basic drawing 44
 Scope of Buffer Writing
• Write data into a rectangle in a buffer.
window
X_size

Y-size
Rectangle to be written

Lower left corner of the rectangle

Basic drawing 45
 Define Lower-Left Corner
• Specify as position (as the lower-left corner) in the
current buffer.
glRasterPos2i(pos_x, 500-pos_y); //window height=500
–

Basic drawing 46
 The Procedure of Buffer-Writing
• Select the destination buffer.
glDrawBuffer(GL_FRONT); /*Select front buffer as destination*/
• Define unpack alignment.
glPixelStorei(GL_UNPACK_ALIGNMENT, 1);
• Define lower left corner.
glRasterPos2i(pos_x, 500-pos_y);
• Write data into the destination.
glDrawPixels(xsize, ysize, //Data size
GL_RGBA, // channels
GL_UNSIGNED_BYTE, //Data type
image); //source data are in image[][].

Basic drawing 47
 When Buffer Writing?
• Automatically save buffer contents
– Controlled using a Finite State Machine;
• What’s a finite state machine?

– Create an array to hold the frame buffer data;

– Read buffer contents into the array;
• Trigger the reading by using idle events;
• But, only perform the reading after a new drawing operation;
– Write the buffer contents back when display events occur;
• So that we don’t have to redraw everything each.

Basic drawing 48
 Readings
• Please review the following sections of our
textbook:
– Sec. 2.2-2.5 of Chapter 2
– All sections of Chapter 3
– Sec. 4.1, 4.4, and 4.6
– But try all the following simple codes:
• simple.c, menu.c, draw.c, mouse_key.c,
pix_rw_sample.c

Basic drawing 49
 Picking
• Please learn the method to pick an objection
shown in the window.
• It is tedious and not robust.
• But, no better way is possible.
• It is useful for geometrical design.

Basic drawing 50
 Practice
• Try the basic instructions.
• Try the sample programs.
• Start to do the computer project.
• Reading
– Chapters 1 and 2, old version textbooks
– (new book: introduction to Web OpenGL)

• Reminder: finish the 1st computer project as

soon as possible!
Basic drawing 51