Bài giảng

ĐỒ HỌA MÁY TÍNH

Bài 3
Các đối tượng cơ bản
 2

Nội dung

• Thiết lập màu

• Vẽ các đối tượng cơ bản
• Vẽ hình chữ nhật
• Vẽ hình tròn
• Thuộc tính cho: điểm, đường thẳng, đa giác

NGUYEN
Đồ Van Toan
họa máy tính Nguyễn Thị Huyền
 3

Red-Green-Blue

NGUYEN
Đồ Van Toan
họa máy tính Nguyễn Thị Huyền
 4

Chỉ định màu

• Khi vẽ một đối tượng, OpenGL sẽ tự động sử dụng

màu đã được xác định trước đó.
• Ví dụ:
set_current_color(red);
draw_object(A);
draw_object(B);
set_current_ color(green);
set_current_color(blue);
draw_object(C);
• Đối tượng A và B được vẽ với màu Red, C được vẽ
với màu Blue
NGUYEN
Đồ Van Toan
họa máy tính Nguyễn Thị Huyền
 5

Chỉ định màu

• glColor3f(R, G, B);
• Chỉ định màu với 3 thành phần Red, Green, Blue với giá
trị trong khoảng [0.0, …,1.0]
• Ví dụ:
glColor3f(1.0, 0.0, 0.0 ); // red
glColor3f(0.0, 0.0, 1.0 ); // blue
glColor3f(0.0, 1.0, 0.0 ); // green

GLfloat my_color[3] = {1.0, 1.0, 1.0 };

glColor3fv(my_color);

NGUYEN
Đồ Van Toan
họa máy tính Nguyễn Thị Huyền
 6

Màu nền (background color)

• Ví dụ:
glClearColor(0.0, 0.0, 0.0, 0.0);
glClear(GL_COLOR_BUFFER_BIT);

NGUYEN
Đồ Van Toan
họa máy tính Nguyễn Thị Huyền
 7

Ví dụ 1

NGUYEN
Đồ Van Toan
họa máy tính Nguyễn Thị Huyền
 8

Các đối tượng cơ bản

• OpenGL hỗ trợ các đối tượng hình học cơ bản gồm:

điểm, đoạn thẳng, và đa giác nói chung.
• Tất cả các đối tượng hình học cơ bản đều được tạo
thành từ một danh sách các đỉnh theo một nguyên
tắc nhất định.
• Để chỉ định một đỉnh ta dùng lệnh: glVertex*()

NGUYEN
Đồ Van Toan
họa máy tính Nguyễn Thị Huyền
 9

Đỉnh (Vertex)

glVertex3f[v](a);

Số lượng Kiểu dữ liệu - [v] ám chỉ tham

tham số s short số truyền vào là
b signed char vector (mảng)
2 - (x, y) i int or long
f float
các giá trị.
3 - (x, y, z)
4 - (x, y, z, w) d double
ub unsigned char
us unsigned short
ui unsigned int

NGUYEN
Đồ Van Toan
họa máy tính Nguyễn Thị Huyền
 10

Đỉnh (Vertex)

• Ví dụ:
glVertex2i(1, 2); // x=1, y=2
glVertex3f(2.0, 3.0, 1.0); // x=2, y=3, z=1

GLfloat pt[2] = {3.0, 4.0};

glVertex2fv(pt); // x=3, y=4

NGUYEN
Đồ Van Toan
họa máy tính Nguyễn Thị Huyền
 11

Vẽ các đối tượng cơ bản

glBegin(tham số);
glVertex3f(*, *, *); // v0
glVertex3f(*, *, *); // v1
……
glVertex3f(*, *, *); // vn-1
glEnd();

NGUYEN
Đồ Van Toan
họa máy tính Nguyễn Thị Huyền
 12

Vẽ các đối tượng cơ bản: point

glBegin(GL_POINTS);
glVertex3f(*, *, *); // v0
glVertex3f(*, *, *); // v1
……
glVertex3f(*, *, *); // vn-1
glEnd();

NGUYEN
Đồ Van Toan
họa máy tính Nguyễn Thị Huyền
 13

Point Size

glPointSize(size);
• Đặt kích thước (pixel) cho điểm.
• Kích thước phải > 0, mặc định là 1
– Nếu size = 1.0  kích thước điểm 1 X 1 pixel
– Nếu size = 2.0  kích thước điểm 2 X 2 pixels
– ….
• Ví dụ:

NGUYEN
Đồ Van Toan
họa máy tính Nguyễn Thị Huyền
 14

Vẽ các đối tượng cơ bản: line

Tham số Ý nghĩa

GL_LINES Đoạn thẳng v0v1; v2v3; : : : ; vn-2vn-1

GL_LINE_STRIP Đường gấp khúc không khép kín

GL_LINE_LOOP Đường gấp khúc khép kín

NGUYEN
Đồ Van Toan
họa máy tính Nguyễn Thị Huyền
 15

Wide Lines

glLineWidth(width);
• Đặt bề rộng (pixel) cho đường thẳng.
• Bề rộng phải > 0, mặc định là 1
– Nếu width = 1.0  bề rộng của đường thẳng là 1 pixel
– Nếu width = 2.0  bề rộng của đường thẳng là 2 pixels
– ….
• Ví dụ:

NGUYEN
Đồ Van Toan
họa máy tính Nguyễn Thị Huyền
 16

Stippled Lines

glEnable(GL_LINE_STIPPLE); //enable kiểu vẽ

glLineStipple(factor, pattern);
/* thực hiện các thao tác vẽ */
glDisable (GL_LINE_STIPPLE); //disable kiểu
vẽ

NGUYEN
Đồ Van Toan
họa máy tính Nguyễn Thị Huyền
 17

Stippled Lines

glLineStipple(factor, pattern);
• pattern là một chuỗi 16 bits 0/1
– 1: được vẽ
– 0: không được vẽ
• Pattern: có thể được kéo dài bằng cách sử dụng tham số factor
• Factor: là một giá trị nằm giữa 1 và 255, mặc định là 1.

NGUYEN
Đồ Van Toan
họa máy tính Nguyễn Thị Huyền
 18

Stippled Lines

• glLineStipple(1,0x5555);
vì 0x5555 = 0101010101010101

• glLineStipple(5,0x5555);

NGUYEN
Đồ Van Toan
họa máy tính Nguyễn Thị Huyền
 Vẽ các đối tượng cơ bản: polygon 19

Tham số Ý nghĩa
GL_POLYGON Đa giác lồi v0 v1 …. vn-1
GL_TRIANGLES Tam giác
GL_TRIANGLE_STRIP Một dải các tam giác liên kết với nhau
GL_TRIANGLE_FAN Các tam giác liên kết theo hình quạt
GL_QUADS Tứ giác
GL_QUAD_STRIP Một dải các tứ giác liên kết với nhau

NGUYEN
Đồ Van Toan
họa máy tính Nguyễn Thị Huyền
 20

Polygon mode

glPolygonMode(face, mode);
• Tham số face có thể là:
– GL_FRONT_AND_BACK
– GL_FRONT
– GL_BACK
• Tham số mode có thể là:
– GL_POINT
– GL_LINE
– GL_FILL
• Ví dụ: glPolygonMode(GL_FRONT, GL_FILL);

NGUYEN
Đồ Van Toan
họa máy tính Nguyễn Thị Huyền
 21

Ví dụ 2

• Nate robins: Shapes p: GL_POINTS

B: hiện các đỉnh l: GL_LINES

O: hiện các cạnh g: GL_POLYGON

C: Màu cho từng điểm t: GL_TRIANGLES

q: GL_QUADS

y: GL_LINE_STRIP

n: GL_LINE_LOOP

x: GL_TRIANGLE_STRIP

f: GL_TRIANGLE_FAN

u: GL_QUAD_STRIP
NGUYEN
Đồ Van Toan
họa máy tính Nguyễn Thị Huyền
 22

Hướng của tam giác

• Hướng của một tam giác là hướng của các đỉnh (cùng
chiều hoặc ngược chiều kim đồng hồ)
• Hướng của tam giác được xác định dựa vào thứ tự
các điểm được chỉ định giữa glBegin() và
glEnd();
• Tập hợp các tam giác trên một mặt phẳng được gọi
là hướng đồng nhất (consistently oriented) nếu
hướng của các tam giác là như nhau.

NGUYEN
Đồ Van Toan
họa máy tính Nguyễn Thị Huyền
 23

Ví dụ

Hướng đồng nhất

NGUYEN
Đồ Van Toan
họa máy tính Nguyễn Thị Huyền
 24

Hướng của tam giác (2)

NGUYEN
Đồ Van Toan
họa máy tính Nguyễn Thị Huyền
 25

Ví dụ

• Vẽ hình sau sử dụng tham số: GL_TRIANGLE_STRIP

NGUYEN
Đồ Van Toan
họa máy tính Nguyễn Thị Huyền
 26

v7 v5
glBegin(GL_TRIANGLE_STRIP);
v0
v1
v2 v4
v6
v3
v4
v5
v6
v7
v0 v0 v2
v1
glEnd();

v1 v3

NGUYEN
Đồ Van Toan
họa máy tính Nguyễn Thị Huyền
 27

Bài tập

• Vẽ hình sau sử dụng tham số: GL_TRIANGLE_STRIP

NGUYEN
Đồ Van Toan
họa máy tính Nguyễn Thị Huyền
 28

Hình chữ nhật (glRect)

glRect{i,s,f,d}(x1, y1, x2, y2)

glRect{i,s,f,d}v(*v1, *v2)
• Vẽ hình chữ nhật được chỉ ra bởi hai đỉnh góc (x1, y1)
và (x2, y2).
• Ở dạng vector, v1, v2 là các vector gồm cặp giá trị
(x,y).
• Hình chữ nhật được vẽ trong mặt phẳng z=0

NGUYEN
Đồ Van Toan
họa máy tính Nguyễn Thị Huyền
 29

Ví dụ
glBegin(GL_POLYGON);
glVertex2f (0.25, 0.25);
glVertex2f (0.75, 0.25);
glVertex2f (0.75, 0.75);
glVertex2f (0.25, 0.75);
glEnd();

glRectf(0.25, 0.75, 0.75, 0.25);

GLfloat v1[2] = {0.25, 0.75};

GLfloat v2[2] = {0.75, 0.25};
glRectfv(v1, v2);

NGUYEN
Đồ Van Toan
họa máy tính Nguyễn Thị Huyền
 30

Vẽ đường tròn

NGUYEN
Đồ Van Toan
họa máy tính Nguyễn Thị Huyền
 31

Ví dụ
#define PI 3.1415926535898

static float R = 40.0; // Radius of circle.

static float X = 50.0; // X-coordinate of center of
circle.
static float Y = 50.0; // Y-coordinate of center of
circle.
static int numVertices = 50; // Number of vertices on
circle.

glBegin(GL_LINE_LOOP);
for (i = 0; i < numVertices; i++) {
t = 2*PI*i/ numVertices ;
glVertex3f(X + R * cos(t), Y + R * sin(t), 0.0);
}
glEnd();
NGUYEN
Đồ Van Toan
họa máy tính Nguyễn Thị Huyền
 32

Ví dụ

Vẽ hình đĩa

glBegin(GL_TRIANGLE_FAN);
glVertex3f( X, Y, 0.0);
for(i = 0; i < numVertices; i++)
{
t = 2*PI*i/ numVertices ;
glVertex3f(X + R * cos(t), Y + R * sin(t), 0.0);
}
glEnd();

NGUYEN
Đồ Van Toan
họa máy tính Nguyễn Thị Huyền
 33

Bài tập
Vẽ hình dưới đây sử dụng:
GL_TRIANGLE_STRIP

NGUYEN
Đồ Van Toan
họa máy tính Nguyễn Thị Huyền