Lập trình đồ họa

sử dụng OpenGL
Mô hình lập trình ứng dụng của hệ thống đồ họa

Computer Graphics 2
 Nội dung

• 1. Tổng quan về OpenGL và GLUT

• OpenGL là gì?
• Quá trình tạo hình ảnh từ mô hình (Render) trong OpenGL
• APIs của OpenGL
• Quy trình kết xuất hình ảnh (Pipeline rendering) trong
OpenGL
• Kiến thức cơ bản GLUT
• 2. Một số lệnh cơ bản
• 3. Biểu diễn đối tượng hình học

Computer Graphics 3
 1. Tổng quan về OpenGL và GLUT

OpenGL:
• OpenGL là bộ thư viện đồ họa để xây dựng các đối tượng và thao tác cần thiết
trong các ứng dụng đồ họa 2D, 3D.
• API đồ họa:
• Sử dụng nhanh chóng, đơn giản
• Linh động
• Không phụ thuộc thiết bị hiển thị
• Không phụ thuộc cửa sổ: Không có chức năng cho các hoạt động cửa sổ, chẳng
hạn như tạo, thay đổi kích thước, xử lý sự kiện,…
• Không phụ thuộc vào Hệ điều hành: linh động trên các nền tảng khác nhau
• Có sẵn nhiều nền tảng hình học và xử lý pixel
• Tạo hình ảnh chất lượng cao từ hình học và hình ảnh cơ sở

Computer Graphics 4
 1. Tổng quan về OpenGL và GLUT

OpenGL:
• Có một vấn đề khi làm việc với OpenGL !!!
• Đó là OpenGL không hoạt động một mình mà phải liên kết với các thư viện
khác. Chẳng hạn như Glut, Glew, …
• Bởi vì: Giao diện người dùng đồ họa (Graphics User Interfaces –GUI)
• Tạo cửa sổ, thanh trượt, menu, nút…
• Thay đổi kích thước cửa sổ
• Xử lý click chuột, bàn phím….

Computer Graphics 5
 1. Tổng quan về OpenGL và GLUT

Glut:
• Bộ công cụ tiện ích OpenGL (OpenGL Utility Toolkit)
• GLUT cung cấp các chức năng cơ bản để làm việc các cửa sổ.
• Thư viện GLX: làm việc hệ thống cửa sổ X (gọi là X window system) của
Hệ điều hành Unix, Linux
• Thư viện AGL: làm việc hệ thống cửa sổ trong Hệ điều hành Mac OS của
máy Apple
• Thư viện WGL: làm việc hệ thống cửa sổ của Hệ điều hành Microsoft
Windows

Computer Graphics 6
 1. Tổng quan về OpenGL và GLUT

Quá trình tạo hình ảnh từ mô hình (Render) trong OpenGL

• Các hình học cơ sở
• Điểm, đường thẳng, đa giác
• Hình ảnh cơ sở
• Bitmap và ảnh
• Tách bạch quy trình kết xuất hình ảnh và hình học
• Liên kết thông qua ánh xạ texture
• Kết quả render phụ thuộc vào trạng thái
• Màu sắc, vật liệu, nguồn sáng, v.v..

Computer Graphics 7
 1. Tổng quan về OpenGL và GLUT

Quy trình kết xuất hình ảnh (Pipeline rendering) trong OpenGL 1.x

Dữ liệu Tính toán mỗi

các điểm Ước lượng đỉnh, tạo hình Raterization
hình học nguyên thủy

• Dữ liệu các điểm hình học để vẽ các hình học (Đỉnh,

Đoạn thẳng, tam giác,… Vùng
Danh sách Phân mảnh đệm
hiển thị • Dữ liệu pixel
khung

Dữ liệu
các pixel Toán tử pixel Tạo kết cấu

Computer Graphics 8
 1. Tổng quan về OpenGL và GLUT

Quy trình kết xuất hình ảnh (Pipeline rendering) trong OpenGL 1.x

Dữ liệu Tính toán mỗi

các điểm Ước lượng đỉnh, tạo hình Raterization
hình học nguyên thủy

• Tất cả các hình học nguyên thủy được mô tả bởi

các đỉnh Vùng
Danh sách Phân mảnh đệm
• Ước lượng: cung cấp phương pháp để lấy ra các
hiển thị khung
đỉnh được sử dụng để tạo hình học nguyên thủy

Dữ liệu
các pixel Toán tử pixel Tạo kết cấu

Computer Graphics 9
 1. Tổng quan về OpenGL và GLUT

Quy trình kết xuất hình ảnh (Pipeline rendering) trong OpenGL 1.x

Dữ liệu Tính toán mỗi

các điểm Ước lượng đỉnh, tạo hình Raterization
hình học nguyên thủy

• Chuyển đổi các đỉnh thành các hình học nguyên thủy Vùng
Danh sách • Loại bỏ những điểm nằm ngoài không gian vẽ Phân mảnh đệm
hiển thị • Bổ sung màu sắc, tọa độ kết cấu hình khung

Dữ liệu
các pixel Toán tử pixel Tạo kết cấu

Computer Graphics 10
 1. Tổng quan về OpenGL và GLUT

Quy trình kết xuất hình ảnh (Pipeline rendering) trong OpenGL 1.x

Dữ liệu Tính toán mỗi

các điểm Ước lượng đỉnh, tạo hình Raterization
hình học nguyên thủy

• Lấy các pixel trong bộ nhớ theo tỷ lệ, độ lệch và

xử lý bằng bản đồ pixel. Đưa đến khối tiếp theo Vùng
Danh sách • Nếu dữ liệu pixel được đọc từ Vùng đệm khung, Phân mảnh đệm
hiển thị thực hiện phép biến đổi pixel và được đóng gói khung
trả về một mảng trong bộ nhớ hệ thống.

Dữ liệu
các pixel Toán tử pixel Tạo kết cấu

Computer Graphics 11
 1. Tổng quan về OpenGL và GLUT

Quy trình kết xuất hình ảnh (Pipeline rendering) trong OpenGL 1.x

Dữ liệu Tính toán mỗi

các điểm Ước lượng đỉnh, tạo hình Raterization
hình học nguyên thủy

• Tạo bề mặt cho đối tượng hình ảnh giống thật Vùng
Danh sách Phân mảnh đệm
hiển thị hơn (tự nhiên)
khung

Dữ liệu
các pixel Toán tử pixel Tạo kết cấu

Computer Graphics 12
 1. Tổng quan về OpenGL và GLUT

Quy trình kết xuất hình ảnh (Pipeline rendering) trong OpenGL 1.x

Dữ liệu Tính toán mỗi

các điểm Ước lượng đỉnh, tạo hình Raterization
hình học nguyên thủy

• Chuyển đổi cả dữ liệu hình học và pixel thành các

mảnh (dạng hình vuông) Vùng
Danh sách • Mỗi hình vuông phân mảnh tương ứng với một Phân mảnh đệm
hiển thị pixel trong Vùng đệm khung khung
• Chứa giá trị màu và độ sâu

Dữ liệu
các pixel Toán tử pixel Tạo kết cấu

Computer Graphics 13
 1. Tổng quan về OpenGL và GLUT

Quy trình kết xuất hình ảnh (Pipeline rendering) trong OpenGL 1.x

Dữ liệu Tính toán mỗi

các điểm Ước lượng đỉnh, tạo hình Raterization
hình học nguyên thủy

• Kiểm tra mỗi phân mảnh có sử dụng kết cấu bề mặt

chưa; kiểm tra: độ trong suốt và độ sâu màu,… Vùng
Danh sách • Lỗi trong quá trình phân mảnh Phân mảnh đệm
hiển thị • Thực hiện pha trộn, phối màu,… khung
• Cuối cùng đưa vào Vùng đệm khung

Dữ liệu
các pixel Toán tử pixel Tạo kết cấu

Computer Graphics 14
 1. Tổng quan về OpenGL và GLUT

Quy trình kết xuất hình ảnh (Pipeline rendering) trong OpenGL 1.x

Dữ liệu Tính toán mỗi

Ước
các điểm đỉnh, tạo hình Raterization
lượng
hình học nguyên thủy

Vùng
Danh sách Phân mảnh đệm
hiển thị khung

Dữ liệu
các pixel Toán tử pixel Tạo kết cấu

Computer Graphics 15
 1. Tổng quan về OpenGL và GLUT

Cấu trúc quan hệ giữa OpenGL, Glut và chương trình đồ họa

Chương trình ứng dụng

OpenGL GLUT
widget

GLX, AGL
GLU
hoặc WGL

Hệ điều hành ( Unix, Linux Win32, Mac O/S) GL

Phần mềm và/hoặc cứng

Computer Graphics 16
 1. Tổng quan về OpenGL và GLUT

• Sử dụng OpenGL và GLUT trong chương trình

• 1. Sử dụng GLUT để thiết lập cấu hình và tạo một cửa sổ (vùng vẽ ảnh)
• 2. Sử dụng OpenGL để khởi tạo OpenGL(khung nhìn, tọa độ vẽ,…): tùy chọn
• 3. Sử dụng GLUT để gọi hàm xử lý các sự kiện. Các sự kiện có thể là:
• a. Sử dụng GLUT để gọi hàm xử lý sự kiện Hiển thị cửa sổ. Hiển thị nội dung gì
thì sử dụng OpenGL
• b. Sử dụng GLUT để gọi hàm xử lý sự kiện “Thay đổi kích thước cửa sổ”. Thay
đổi kích thước cửa sổ để trả về kết quả gì thì sử dụng OpenGL
• c. Các sự kiện: Nhấn phím trên Bàn phím; Thao tác chuột, …
• Tóm lại: Gọi hàm GLUT Xử lý sự kiện, còn thực thi công việc nào đó khi sự kiện
xảy ra do OpenGL
• 4. Sử dụng GLUT để thực hiện lặp lại (đợi) xử lý sự kiện

Computer Graphics 17
 1. Tổng quan về OpenGL và GLUT
Ví dụ Sử dụng OpenGL và Glut trong chương trình
Thiết lập cấu hình: Chế độ hiển thị: RGB (GLUT)
#include <GL/glut.h>
void main(int argc, char **argv)
{
int mode=GLUT_RGB; Khởi tạo cửa sổ có độ phân giải 800*800
glutInit(&argc, argv); Khởi tạo vị trí cửa sổ (0,0)
glutInitDisplayMode(mode); Tạo cửa sổ với tiêu đề: Hello Graphics World
(GLUT)
glutInitWindowSize(800, 800);
glutInitWindowPosition(0, 0); Thiết lập cấu hình tọa độ vẽ (OpenGL)
glutCreateWindow(“Hello Graphics World”);

glOrtho(-1,1,-1,1,-1,1) GLUT gọi hàm glutDisplayFunc() xử lý sự kiện.

Hàm myDisplay (Hàm này sử dụng thư viện
OpenGL) do người lập trình tạo ra.
glutDisplayFunc(myDisplay);
Vòng lặp đợi (để lặp lại) xử lý các sự kiện (GLUT)
glutMainLoop();
}
Computer Graphics 18
 1. Tổng quan về OpenGL và GLUT

• Một số hàm xử lý sự kiện của GLUT

• glutKeyboardFunc(): Gọi hàm xử lý sự kiện khi nhấn phím trên bàn phím
• glutMouseFunc(): Gọi hàm xử lý sự kiện khí click chuột
• glutMotionFunc(): Gọi hàm xử lý sự kiện khi nhấn giữ và di chuyển chuột
• glutIdleFunc(): Gọi hàm xử lý sự kiện khi không có sự kiện nào xảy ra
• glutDisplayFunc(): Gọi hàm xử lý sự kiện hiển thị cửa sổ
• glutReshapeFunc(): Gọi hàm xử lý sự kiện kích thước cửa sổ thay đổi
• … Bài tập sinh viên tìm hiểu các hàm xử lý sự kiện khác!!!

Computer Graphics 19
 1. Tổng quan về OpenGL và GLUT

• Một số hàm quản lý cửa sổ của GLUT

• glutInit(int *argc, char **argv): Khởi tạo GLUT
• glutInitDisplayMode(unsigned int mode): Chỉ định sử dụng mô hình màu RGBA.
•  glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGB | GLUT_DEPTH).
• glutInitWindowPosition(int x, int y): Khởi tạo vị trí cửa sổ
•  glutInitWindowPosition(200, 300)
• glutInitWindowSize(int width, int size): Khởi tạo kích thước cửa sổ
•  glutInitWindowSize(500,500)
• glutCreateWindow(char *string): Tạo 1 cửa sổ mới
•  glutCreateWindow(“Tôi là cửa sổ vừa được tạo”)

Computer Graphics 20
 2. Cấu trúc chương trình
#include <GL/glut.h> #include <GL/glut.h>
void initGL() { Định nghĩa hàm thiết lập cấu hình OpenGL {
glClearColor(0.0f, 0.0f, 0.0f, 1.0f); Thiết lập màu nền
glOrtho(-1,1,-1,1,-1,1); Thiết lập tọa độ vẽ
} }
void mydisplay() { Định nghĩa hàm hiển thị đối tượng vẽ {
glClear(GL_COLOR_BUFFER_BIT); Xóa màu trong buffer (Vùng đệm khung)
glColor3f(1.0f, 0.0f, 0.0f); Thiết lập màu vẽ
glViewport(0,0,600,600) Thiết lập khung nhìn
glBegin(GL_POLYGON); Bắt đầu vẽ (đoạn thẳng, đa giác, ….)
glVertex2f(-0.5f, -0.5f); Sử dụng thuật toán vẽ
glVertex2f( 0.5f, -0.5f); câu lệnh
glVertex2f( 0.5f, 0.5f); câu lệnh
glVertex2f(-0.5f, 0.5f); câu lệnh …
glEnd(); Kết thúc vẽ
glFlush(); Sinh ảnh đưa ra Vùng đệm khung
} }
int main(int argc, char** argv){ Hàm main(){
glutInit(&argc, argv); Khởi tạo GLUT
glutInitDisplayMode(GLUT_RGB); Thiết lập cấu hình (chế độ) vẽ
glutInitWindowSize(600, 600); Thiết kích thước cửa sổ
glutInitWindowPosition(0, 0); Thiết lập vị trí cửa sổ
glutCreateWindow("My OpenGL program"); Tạo cửa sổ
glutDisplayFunc(mydisplay); Xử lý sự kiện
initGL() Gọi hàm để thiết lập cấu hình OpenGL
glutMainLoop(); Lặp đợi xử lý sự kiện
} }
Computer Graphics 21
 2. Một số lệnh cơ bản OpenGL
• Tọa độ vẽ ảnh hưởng đến sự hiển thị của đối tượng vẽ
Giả sử vẽ hình tam giác A(1,1) B(1,3) C(2,1)

Y Cùng một thuật toán vẽ đối tượng Y

nhưng với các hệ tọa độ vẽ khác
nhau sẽ cho kết quả khác nhau
B(1,3) B(1,3)
3 3

C(4,1) C(4,1)
1 1
A(1,1) A(1,1)
1 4 X X 4 1

Computer Graphics
 2. Một số lệnh cơ bản OpenGL
• Thiết lập hệ tọa độ vẽ:
• Cú pháp: glOrtho(left, right, bottom, top, near, far);
• Công dụng: Thiết lập tọa độ vẽ (khung nhìn) các đối tượng hiển thị trên màn hình cho
đối tượng nhìn
Top
A B
ABCD: Top
Left EFGH: Botton
ABFF: left
D
C DCGH: Right
ADHE: Near
Đối BCGF: Far
Điểm Hướng đến điểm nhìn
nhìn tượng Far
E hiển thị
F
Near
H Right G
bottom 23
Computer Graphics
 2. Một số lệnh cơ bản OpenGL
• Thiết lập hệ tọa độ vẽ 2 chiều: glOrtho(left, right, bottom, top, near, far);
near, far để mặt định -1, 1 y
(-0.5, 0.5) 0.5 ( 0.5, 0.5); Nếu không sử dụng hàm
glVertex2f(-0.5f, -0.5f);
glVertex2f( 0.5f, -0.5f); glOrtho() thì OpenGL mặc định:
glVertex2f( 0.5f, 0.5f); top = 1; bottom = -1
-x -0.5 O 0.5 x right = 1; left = -1
glVertex2f(-0.5f, 0.5f);
near = -1; far = 1
(-0.5, -0.5) -0.5 (0.5, -0.5)
top = 1
bottom = -1 top
top -y 1
right = 1 1
left = -1 0.5
0.5
top = 1
bottom = 0 0 1
-1 1 0.5
0.5 right = 1 left right
left -0.5 right
left = 0
-0.5
-1 bottom bottom

Computer Graphics 24
 • Thiết lập khung nhìn:
2. Một số lệnh cơ bản OpenGL
• Khung nhìn là vùng trên cửa sổ để chứa tọa độ vẽ và các đối tượng vẽ
• Khi sử dụng khung nhìn thì tọa độ vẽ và đối tượng vẽ sẽ dãn ra hoặc co lại cho vừa với
khung nhìn
• glViewport(x, y, chiều rộng, chiều cao); với x, y là gốc tọa độ và đơn vị tính bằng pixel
• Nếu không thiết lập khung nhìn thì khung nhìn mặc định là toàn bộ cửa sổ ứng
dụng
Y

top = 1
bottom = -1 top Chiều
right = 1 1
cao
left = -1
0.5

glVertex2f(-0.5f, -0.5f); -1 1
0.5 (x,y) Chiều rộng
glVertex2f( 0.5f, -0.5f); left -0.5 right
glVertex2f( 0.5f, 0.5f);
glVertex2f(-0.5f, 0.5f); -0.5
-1 bottom (0,0) X
Computer Graphics 25
 2. Một số lệnh cơ bản OpenGL

Cú pháp hàm OpenGL

• Các hàm sử dụng các ký tự tiền tố: gl
• Ví dụ: glColor3f(1.0f, 0.0f, 0.0f)
• Các hằng số sử dụng ký tự:
• Chữ cái viết hoa và dấu gạch dưới “_”, bắt đầu (tiền tố) bằng: GL
• Ví dụ: GL_COLOR_BUFFER_BIT
• Ký tự hậu tố cho biết kiểu dữ liệu được dùng
• Ký tự số đứng trước ký tự hậu tố cho biết số lượng đối số của hàm
• Ví dụ: glColor3f(1.0f, 0.0f, 0.0f)

Computer Graphics 26
 2. Một số lệnh cơ bản OpenGL

• Ký tự hậu tố và kiểu dữ liệu các đối số tương ứng

Ký tự hậu tố Kiểu dữ liệu Định nghĩa kiểu trong

OpenGL
b 8-bit integer GLbyte
s 16-bit integer GLshort
i 32-bit integer GLint, GLsizei
f 32-bit floating-point GLfloat, GLclampf
d 64-bit floating-point GLdouble, GLclampd
ub 8-bit unsigned integer GLubyte, GLboolean
us 16-bit unsigned integer GLushort
ui 32-bit unsigned integer GLuint, GLenum,
GLbitfield

Computer Graphics 27
 2. Một số lệnh cơ bản OpenGL

• Ví dụ:
• (1) glVertex2i(1, 3) : Hàm của OpenGL trả về kiểu số nguyên và có 2 tham số
Vẽ 1 điểm có tọa độ nguyên (1,3)
• (2) glVertex2f(1.0, 3.0): Hàm của OpenGL trả về kiểu số thực và có 2 tham số
Vẽ 1 điểm có tọa độ (1.0, 3.0)
• (3) glColor3f(1.0, 0.0, 0.0): Thiết lập màu vẽ (R,G,B) = (1.0, 0.0, 0.0) : màu Red
• Thay thế (3) bằng
• (4) GLfloat color_array[] = {1.0, 0.0, 0.0};
• (5) glColor3fv(color_array);
• Ký tự hậu tố v cho biết color_array là con trỏ, nó trỏ đến mảng color_array

Computer Graphics 28
 2. Một số lệnh cơ bản OpenGL

Dạng tổng quát hàm OpenGL

Tên hàm Chiều
(số lượng
các tham số)
glUniform3f(x,y,z)

x,y,z tham số (khi sử dụng

Cho biết thư viện GL
gọi là đối số)

glUniform3fv(p)
p con trỏ mảng/vector

Computer Graphics 29
 2. Một số lệnh cơ bản OpenGL

Một số chức năng đồ họa OpenGL

• Vẽ các đối tượng nguyên thủy (cơ sở)
• Điểm, Đoạn thẳng, Tam giác
• Thuộc tính
• Chuyển đổi
• Khung nhìn, Mô hình
• Tham khảo tại link: http://glprogramming.com/red/

Computer Graphics 30
 3. Các đối tượng cơ sở trong openGL

Vẽ hình vuông:
glBegin(GL_POLYGON);
glVertex2f(-0.5f, -0.5f); GL_POINTS
glVertex2f( 0.5f, -0.5f); GL_LINE_STRIP GL_LINE_LOOP
glVertex2f( 0.5f, 0.5f);
glVertex2f(-0.5f, 0.5f);
glEnd();

GL_LINES
GL_TRIANGLE_FAN GL_QUADS

GL_TRIANGLES
GL_TRIANGLE_STRIP
GL_POLYGON GL_QUAD_STRIP

Computer Graphics 31
 3. Các đối tượng cơ sở trong openGL

Sphere
Cube

And others…
Teapot
Computer Graphics 32
 2. Một số lệnh cơ bản OpenGL

• Vẽ ấm trà: https://www.opengl.org/archives/resources/code/samples/simple/teapot.c
• Vẽ mặt trăng:
• https://www.opengl.org/archives/resources/code/samples/redbook/colormat.c
• Vẽ bánh xe răng cưa:
• https://www.opengl.org/archives/resources/code/samples/glut_examples/mesademos/gears.c
• Vẽ các vòng tròn biểu tượng Olympic:
• https://www.opengl.org/archives/resources/code/samples/glut_examples/examples/olympic.c
• Vẽ nhiều chiếc nhẫn xoay:
• https://www.opengl.org/archives/resources/code/samples/glut_examples/contrib/rings.c
• Vẽ đường nhòe hình cánh quạt bằng rê chuột:
• https://www.opengl.org/archives/resources/code/samples/glut_examples/contrib/lineblend.c

Computer Graphics 33
Lập trình đồ họa sử dụng OpenGL

Computer Graphics 34