Chuẩn bị môi trường lập trình OpenGL

CG2018LAB-01 Nguyễn Đắc Dzự Trình Chuẩn bị mơi trường lập trình OpenGL Mục lục Giới thiệu Mục tiêu Thư viện SDL2 Thư viện GLEW Môi trường lập trình Visual Studio 2015 (14.0) Mơi trường lập trình MinGW32 Trình biên dịch GNU C/C++ Ubuntu Linux Trình biên dịch GNU C/C++ OSX Sử dụng SDL2 GLEW Một ví dụ minh họa Lưu ý Bài tập 10 Giới thiệu OpenGL thư viện lập trình đồ họa t Thư viện lập trình đồ họa vẽ thứ mà ta yêu cầu Tuy nhiên, OpenGL lại khơng có tập lệnh để xử lý việc xuất/nhập từ bàn phím, chuột, tập tin thao tác cửa sổ ứng dụng, quản lý tập mở rộng OpenGL, đọc/ghi tập tin hình ảnh May mắn nay, có nhiều thư viện hỗ trợ kèm theo FreeGLUT, SDL, SDL2, SFML, GLFW, GLEW, SOIL… Các thư viện lập trình ngồi tính thư viện đồ họa, chúng cho phép ta xử lý dễ dàng vấn đề nêu Hơn nữa, thư viện lập trình bổ sung khơng phụ thuộc tảng hệ điều hành, có nghĩa ngồi Windows, chúng cịn hoạt động Linux OSX Đây điều mà lập trình viên OpenGL mong muốn chất OpenGL độc lập tảng Trong loạt tập này, ta lựa chọn sử dụng thư viện SDL2 GLEW để phục vụ cho ứng dụng OpenGL xây dựng Ngơn ngữ lập trình lựa chọn sử dụng xuyên suốt loạt tập thực hành C++ Mục tiêu Một số hướng dẫn để thiết lập thơng số cho trình biên dịch, cài đặt thư viện hỗ trợ lập trình SDL2 GLEW phục vụ cho việc xây dựng ứng dụng OpenGL trình biên dịch Visual Studio 2015, MinGW Windows, GNU C/C++ Linux OSX Trong phần trình bày đây, ta cần CG2018LAB-01 Nguyễn Đắc Dzự Trình tìm hiểu thực phần nội dung có liên quan đến trình biên dịch tảng hệ điều hành mà ta sử dụng để triển khai ứng dụng OpenGL mà thôi, không thiết phải thực toàn hướng dẫn trừ ta cần triển khai ứng dụng OpenGL tất tảng Thư viện SDL2 Ta truy cập vào trang chủ thư viện SDL2 để tải gói thư viện phát triển (development libraries) tiến hành cài đặt thư viện vào hệ thống Địa trang chủ thư viện SDL2 https://www.libsdl.org/ Lưu ý: ta tải development library ứng với tảng hệ điều hành trình biên dịch mà ta sử dụng mà Phiên thời điểm biên soạn tập SDL 2.0.8 Thư viện GLEW Tương tự SDL2, để sử dụng thư viện lập trình GLEW, ta truy cập vào liên kết http://glew.sourceforge.net để tải thư viện lập trình cài đặt vào hệ thống Phiên GLEW 2.1.0 Lưu ý, hệ điều hành OSX hệ điều hành sử dụng để viết ứng dụng OpenGL, ta bỏ qua q trình cài đặt thư viện framework OpenGL hệ điều hành đảm nhiệm vai trị GLEW Mơi trường lập trình Visual Studio 2015 (14.0) Cài đặt SDL2 GLEW Tải tập tin SDL2-devel-2.0.8-VC.zip glew-2.1.0-vc-win32.zip, giải nén chúng thư mục riêng biệt thực thao tác sau: a Đối với SDL2: - Sao chép tập tin h từ thư mục include gói SDL2 giải nén vào thư mục C:\Program Files (x86)\Microsoft Visual Studio 14.0\VC\include\SDL2 - Sao chép tập tin lib cho kiến trúc x86 thư mục lib\x86 vào thư mục C:\Program Files (x86)\Microsoft Visual Studio 14.0\VC\lib - Tương tự, chép tập tin lib cho kiến trúc 64-bit bên thư mục lib\x64 vào thư mục C:\Program Files (x86)\Microsoft Visual Studio 14.0\VC\lib\amd64 - Đối với thư viện liên kết động dll, ta copy tập tin SDL2.dll cho kiến trúc x86 vào thư mục C:\Windows\SysWOW64 tập tin SDL2.dll cho kiến trúc 64-bit vào thư mục C:\Windows\System32 b Đối với GLEW: - Sao chép tập tin glew32.dll thư mục bin\Release\Win32 giải nén vào thư mục C:\Windows\SysWOW64 CG2018LAB-01 - Nguyễn Đắc Dzự Trình Sao chép tập tin glew32.dl thư mục bin\Release\x64 vào thư mục C:\Windows\System32 - Sao chép toàn thư mục GL thư mục include vào thư mục C:\Program Files (x86)\Microsoft Visual Studio 14.0\VC\include\ - Sao vào Sao vào chép tập tin lib (glew32.lib, glew32s.lib) từ thư mục lib\Release\Win32 thư mục C:\Program Files (x86)\Microsoft Visual Studio 14.0\VC\lib\ chép tập tin lib (glew32.lib, glew32s.lib) từ thư mục lib\Release\x64 thư mục C:\Program Files (x86)\Microsoft Visual Studio 14.0\VC\lib\amd64\ Biên dịch project có sử dụng SDL2 GLEW Để tiện việc biên dịch ứng dụng OpenGL có sử dụng SDL2 GLEW từ Visual Studio, ta sử dụng thị liên kết trực tiếp mã nguồn sau mà không cần phải thiết lập thông qua chức Properties project phần mềm: #ifdef # # # # #endif _MSC_VER pragma comment pragma comment pragma comment pragma comment (lib, (lib, (lib, (lib, "SDL2.lib") "SDL2Main.lib") "glew32.lib") "opengl32.lib") // // // // thư thư thư thư viện viện viện viện SDL2 chứa hàm SDL2_Main GLEW OpenGL Đoạn mã thường đặt sau phần thị #include danh sách thư viện Và có Visual Studio hỗ trợ liên kết thư viện theo cách nên ta cần đặt chúng bên cặp thị #ifdef _MSC_VER #endif Điều giúp cho trình biên dịch khác bỏ qua thị liên kết trực tiếp mà không thông báo lỗi Khi đó, ta cần biên dịch project ứng dụng OpenGL cách dễ dàng biên dịch project phần mềm khác Mơi trường lập trình MinGW32 Cài đặt SDL2 GLEW Ta tải tập tin SDL2-devel-2.0.8-mingw.tar.gz giải nén vào thư mục riêng biệt Đối với GLEW, thư viện lập trình khơng cung cấp gói thư viện biên dịch sẵn cho MinGW32, ta liên hệ với giảng viên phụ trách môn học để chép gói thư viện tìm hiểu cách thức biên dịch để tự biên dịch hồn chỉnh thư viện GLEW trước sử dụng với MinGW32 Phần nội dung sau giả sử ta biên dịch thành công GLEW tiến hành cài đặt thư viện vào hệ thống Ta giả sử MinGW32 cài đặt C:\MinGW a Đối với SDL2 - Copy tập tin - thư mục i686-w64-mingw32/include/SDL2 vào thư mục C:\MinGW\include\SDL2 Copy tập tin a la thư mục i686-w64-mingw32/lib vào thư mục C:\MinGW\lib .h CG2018LAB-01 - Nguyễn Đắc Dzự Trình Copy tập tin SDL2.dll thư mục i686-w64-mingw32/bin vào thư mục C:\Windows\SysWOW64 b Đối với GLEW - Sao chép tập - tin glew32.dll vào thư mục C:\Windows\System32 C:\Windows\SysWOW64 tùy thuộc vào kiến trúc mã lệnh sử dụng để phát sinh thư viện glew32.dll Sao chép toàn thư mục GL bên thư mục include vào C:\MinGW\include Sao chép toàn tập tin a (libglew32.a, libglew32.dll.a) vào thư mục C:\MinGW\lib Biên dịch project có sử dụng SDL2 GLEW Mặc định MinGW khơng cung cấp mơi trường phát triển tích hợp Visual Studio, để biên dịch ứng dụng OpenGL với SDL2 GLEW, ta có hai lựa chọn: - Nhập trực tiếp lệnh biên dịch từ cửa sổ dòng lệnh sau: CMD Cú pháp biên dịch g++ –std=c++11 lab01.cpp –o lab01.exe –lmingw32 –lSDL2Main –lSDL2 –lopengl32 -lglew32 Trong đó: • • • - Tập tin Tập tin tập tin chứa mã nguồn cần biên dịch lab01.exe tập tin mã máy sau biên dịch thành công -lmingw32, -lSDL2Main, -lSDL2, -lopengl32, -lglew32: liên kết thư viện lập trình vào ứng dụng OpenGL sau biên dịch Sử dụng MAKEFILE tiện ích MinGW32-make: tập tin MAKEFILE có nội dung tổng quát sau đây, để biên dịch ứng dụng, ta cần nhập dòng lệnh mingw32-make cửa sổ dòng lệnh CMD Để sử dụng MAKEFILE cho tập khác, ta thay tên tập tin mã nguồn tập vào giá trị macro SOURCE= lab01.cpp CXX=g++ # trình biên dịch C++ CFLAGS=-Wall -std=c++11 # sử dụng chuẩn C++11 hiển thị tất cảnh báo LFLAGS=–lmingw32 –lSDL2Main –lSDL2 –lopengl32 -glu32 -lglew32 SOURCE=lab01 # ta thay tên tập tin mã nguồn all: $(SOURCE).cpp # phụ thuộc vào tập tin lab01.cpp $(CXX) $(CFLAGS) $< -o $(SOURCE) $(LFLAGS) clean: del $(SOURCE).exe # gõ ‘mingw32-make clean’ để thực đoạn lệnh CG2018LAB-01 Nguyễn Đắc Dzự Trình Trình biên dịch GNU C/C++ Ubuntu Linux Cài đặt SDL2 GLEW a Đối với SDL2 Trên môi trường Linux, cụ thể Ubuntu, trình cài đặt thư viện SDL2 đơn giản cần thực câu lệnh: sudo apt-get install libsdl2-dev Kế đến, ta nhập mật tài khoản quản trị để phép cài đặt thư viện vào hệ điều hành Lưu ý ta cần có kết nối Internet để trình quản lý gói apt Ubuntu tải gói thư viện cần thiết b Đối với GLEW Tương tự môi trường MinGW32, GLEW khơng cung cấp gói thư viện biên dịch sẵn Ubuntu Linux, ta cần biên dịch thư viện từ mã nguồn Chi tiết cách thức biên dịch GLEW Linux tham khảo địa chỉ: http://glew.sourceforge.net/build.html Biên dịch project có sử dụng SDL2 GLEW Q trình biên dịch ứng dụng đồ họa OpenGL kết hợp với SDL2 GLEW Ubuntu Linux thực thông qua trình biên dịch GNU C/C++ cửa sổ Terminal thực thơng qua cách tương tự phần Biên dịch project có sử dụng SDL2 GLEW với MinGW32 Chỉ có khác biệt nhỏ phần liên kết thư viện OpenGL tham số -lopengl32 trở thành -lGL, tham số -lglew32 trở thành -lglew Chi tiết sau: g++ –std=c++11 lab01.cpp –o lab01.exe –lSDL2Main –lSDL2 –lGL -lglew Trình biên dịch GNU C/C++ OSX Cài đặt SDL2 Như trình bày, hệ điều hành OSX, ta không cần thiết phải sử dụng đến thư viện GLEW, phần nội dung khơng trình bày mà nêu cách thức cài đặt, sử dụng SDL2 mà Quá trình cài đặt SDL2 hệ điều hành OSX đơn giản, ta tải tập tin SDL22.0.8.dmg, double-click để mount tập tin copy tập tin SDL2.framework vào thư mục /Library/Framework Lưu ý ta cần phải nhập mật tài khoản quản trị để thực điều Biên dịch project có sử dụng SDL2 Đối với OSX, việc biên dịch ứng dụng OpenGL sử dụng SDL2 thông qua GNU C/C++ tương tự việc biên dịch môi trường MinGW có khác biệt Trong đó, thư viện lập trình OpenGL SDL2 trở thành framework CG2018LAB-01 Nguyễn Đắc Dzự Trình hệ điều hành OSX, ta sử dụng tham số –framework tham số –l Cú pháp biên dịch sau: thay cho g++ –std=c++11 lab01.cpp –o lab01 –framework OpenGL –framework SDL2 Sử dụng SDL2 GLEW Sau cài đặt thành công SDL2 GLEW vào hệ thống, ta sử dụng thư viện thơng qua thị #include đầu chương trình sau: #include #include Lưu ý: - Ta cần include thư viện glew.h mà thơi, ngồi khơng cần include thêm thư viện gl.h glu.h chúng include tự động glew.h Trong số trường hợp, tập tin glew.h phải xuất trước SDL.h danh sách include Một ví dụ minh họa Trong phần ta thực ứng dụng đồ họa OpenGL đơn giản kết hợp sử dụng SDL2 GLEW Nhiệm vụ ứng dụng khởi tạo môi trường đồ họa OpenGL sử dụng SDL2, khởi tạo hệ thống tập mở rộng OpenGL thông qua GLEW vẽ tam giác cửa sổ dựng hình OpenGL Q trình kiểm sốt vịng lặp ứng dụng thực thông qua SDL2 a Tập tin LAB01.CPP: #ifndef APPLE # include #else # include # include #endif #include #include #ifdef _MSC_VER # pragma comment(lib, # pragma comment(lib, # pragma comment(lib, # pragma comment(lib, # pragma comment(lib, #endif #define WND_NAME #define WND_WIDTH // // // // // header cho thư viện SDL2 // cần cho hàm std::cout // "opengl32.lib") // "glu32.lib") // "glew32.lib") // "sdl2.lib") // "sdl2main.lib") // "Lab01" 640 Sử dụng GLEW OSX ngược lại, include header OpenGL chuẩn - OSX OpenGL header - OSX OpenGL Utility header phần dành riêng cho MSVC thư viện OpenGL thư viện OpenGL Utility thư viện GLEW thư viện SDL2 thư viện chứa hàm SDL_main // tiêu đề cửa sổ SDL // chiều rộng cửa sổ SDL (pixel) CG2018LAB-01 #define WND_HEIGHT Nguyễn Đắc Dzự Trình 480 SDL_Window * mainWindow = NULL; SDL_GLContext context = NULL; // chiều cao cửa sổ SDL (pixel) // trỏ đến cửa sổ SDL // ngữ cảnh OpenGL GLboolean appInit() { // hàm khởi tạo if (SDL_Init(SDL_INIT_VIDEO) < 0) return GL_FALSE; mainWindow = SDL_CreateWindow( // tạo cửa sổ SDL, canh vào hình WND_NAME, SDL_WINDOWPOS_CENTERED, SDL_WINDOWPOS_CENTERED, WND_WIDTH, WND_HEIGHT, SDL_WINDOW_OPENGL); // tạo ngữ cảnh OpenGL kết nối vào cửa sổ SDL có context = SDL_GL_CreateContext(mainWindow); #ifndef APPLE glewExperimental = GL_TRUE; if (GLEW_OK != glewInit()) return GL_FALSE; #endif // khởi tạo GLEW khơng phải OSX // Có thể bỏ phần khơng sử dụng // tính từ OpenGL 2.0 trở lên glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluOrtho2D(0, WND_WIDTH, WND_HEIGHT, 0); return GL_TRUE; // thứ ổn } void appDraw() { glClearColor(0, 0, 0, 0); glClear(GL_COLOR_BUFFER_BIT); glBegin(GL_TRIANGLES); glVertex2i(320, 160); glVertex2i(160, 320); glVertex2i(480, 320); glEnd(); } // hàm dựng hình // xóa buffer màu đen // vẽ tam giác có tọa độ đỉnh // v1 = (320, 160) // v2 = (160, 320) // v3 = (480, 320) void appExec() { // vịng lặp GLboolean loop = GL_TRUE; while (loop) { SDL_Event event; if(SDL_PollEvent(&event)) { // lấy kiện if (event.type == SDL_QUIT || event.key.keysym.sym == SDLK_ESCAPE) loop = GL_FALSE; // nhấ n ESC = vịng lặp } appDraw(); // đặt hàm dựng hình SDL_GL_SwapWindow(mainWindow); // swap buffers } } void appShutdown() { SDL_GL_DeleteContext(context); // hàm dọn dẹp // hủy bỏ ngữ cảnh OpenGL CG2018LAB-01 Nguyễn Đắc Dzự Trình SDL_DestroyWindow(mainWindow); SDL_Quit(); // hủy cửa sổ OpenGL // kết thúc phiên làm việc SDL } // Do sử dụng thư viện SDL nên hàm main bắt buộc phải có đối số int main(int argc, char ** argv) { if (GL_FALSE == appInit()) { std::cout ^ | | v +< -+ CG2018LAB-01 Nguyễn Đắc Dzự Trình glClear(GL_COLOR_BUFFER_BIT); GLint w = 400, h = 200; GLint x = (WND_WIDTH-w)/2; GLint y = (WND_HEIGHT-h)/2; glRect(x, y, w, h); // chiề u rộng = 400, chiều cao = 200 // canh vào hình } Bài Áp dụng kỹ thuật Bài 1, bổ sung thêm mã hàm hình chữ nhật biểu diễn Hình glRect Bài để vẽ Hình Kết xuất Bài Mã nguồn chương trình: void glRect(GLint x, GLint y, GLint width, GLint height) { glBegin(GL_POLYGON); glColor3f(1.0f, 0.0f, 1.0f); // đỉnh có màu màu hồng glVertex2i(x, y); // (trên, bên trái) glColor3f(0.0f, 1.0f, 1.0f); // đỉnh có màu xanh da trời glVertex2i(x + width, y); // (trên, bên phải) glColor3f(1.0f, 1.0f, 0.0f); // đỉnh có màu xanh vàng glVertex2i(x + width, y + height); // (dưới, bên phải) glColor3f(1.0f, 1.0f, 1.0f); // đỉnh có màu trắng glVertex2i(x, y + height); // (dưới, bên trái) glEnd(); } Bài 5* Sử dụng glBegin GL_TRIANGLE_FAN, xây dựng hàm vẽ hình trịn có tâm (𝑥, 𝑦) bán kính 𝑟 Áp dụng vẽ hình trịn có 𝑟 = 150 tâm tọa độ (320, 240) Hình 13 CG2018LAB-01 Nguyễn Đắc Dzự Trình Mã nguồn chương trình: #define STEPS 40 // số cung hình trịn, STEPS lớn hình trịn mịn void glCircle(GLint x, GLint y, GLint radius) { GLfloat twicePi = (GLfloat) 2.0f * M_PI; glBegin(GL_TRIANGLE_FAN); glVertex2i(x, y); // tâm for(int i = 0; i 0; r -= 30) { glColor3f(red, green, blue); glCircle(320, 240, r); red -= 0.1f; green -= 0.2f; blue -= 0.3f; } // bán kính ban đầu r = 200 Lặp // r màu thang xám glColor3f(sky[i].intensity, sky[i].intensity, sky[i].intensity); glCircle(sky[i].x, sky[i].y, sky[i].radius); // cập nhật vị trí dựa vận tốc chuyể n động sky[i].x += sky[i].velocity; // phát sinh lại vượt chiều rộng cửa sổ if (sky[i].x >= WND_WIDTH) { sky[i].x = 0; // vị trí bắt đầ u cạnh trái cửa sổ sky[i].y = rand() % WND_HEIGHT; sky[i].radius = + rand() % 3; sky[i].intensity = sky[i].radius / 3.0f; sky[i].velocity = sky[i].radius * + rand() % 3; } } } void appExec() { GLboolean loop = GL_TRUE; // vịng lặp // đồng tốc độ hoạt cảnh với thời gian quét hình (Vertical Sync) SDL_GL_SetSwapInterval(1); skyInit(); // phát sinh bầu trời while (loop) { SDL_Event event; if(SDL_PollEvent(&event)) { if (event.type == SDL_QUIT || event.key.keysym.sym == SDLK_ESCAPE) loop = GL_FALSE; } skyDraw(); // vẽ tạo chuyển động cho bầu trời SDL_GL_SwapWindow(mainWindow); // swap buffers } } Bài 8: Chỉnh sửa hàm skyDraw Bài 7* để đảo ngược chuyển động theo chiều từ phải sang trái 17 CG2018LAB-01 Nguyễn Đắc Dzự Trình Gợi ý: - Ta giảm tọa độ 𝑥 lượng Δ𝑣𝑖 Khi cơng thức tính vị trí lần lặp trở thành: 𝑥𝑘𝑖 = 𝑥𝑘−1 − Δ𝑣𝑖 𝑖 Xét thứ 𝑖, sau di chuyển hết cạnh trái cửa sổ, 𝑥𝑖 < Ta phát sinh lại với 𝑥𝑖 = 𝑊𝑁𝐷_𝑊𝐼𝐷𝑇𝐻 , tức cạnh phải cửa sổ OpenGL Khi đó, đoạn mã hàm skyDraw void skyDraw() { glClearColor(0, 0, 0, 0); glClear(GL_COLOR_BUFFER_BIT); trở thành sau: // tạo hoạt cảnh chuyển động for(int i = 0; i < MAX_STARS; i++) { glColor3f(sky[i].intensity, sky[i].intensity, sky[i].intensity); glCircle(sky[i].x, sky[i].y, sky[i].radius); sky[i].x -= sky[i].velocity; // phát sinh lại ngơi vượt q chiều rộng cửa sổ if (sky[i].x < 0) { sky[i].x = WND_WIDTH; sky[i].y = rand() % WND_HEIGHT; sky[i].radius = + rand() % 3; sky[i].intensity = sky[i].radius / 3.0f; sky[i].velocity = sky[i].radius * + rand() % 3; } } } 18