Enjoy Your Coding - OpenGL 開發環境設定

在本篇文章中，將介紹如何在Windows, Ubuntu (Linux), macOS下安裝及設定OpenGL的開發環境，並撰寫跨三平台的OpenGL C++ 程式碼。

OpenGL 是什麼?

OpenGL（英語：Open Graphics Library，譯名：開放圖形庫或者「開放式圖形庫」）是用於彩現2D、3D向量圖形的跨語言、跨平台的應用程式編程介面（API）。這個介面由近350個不同的函式呼叫組成，用來從簡單的圖形位元繪製複雜的三維景象。而另一種程式介面系統是僅用於Microsoft Windows上的Direct3D。OpenGL常用於CAD、虛擬實境、科學視覺化程式和電子遊戲開發。可搭配freeglut的函示庫加速開發。

freeglut 是什麼?

GLUT (OpenGL Utility Toolkit) 是一個OpenGL的函式庫，主要提供一些I/O及底層呼叫的函式：視窗、滑鼠事件、鍵盤事件、繪圖等。由於GLUT自西元2000年以來沒有再提供更新，freeglut的作者決定實作一個GLUT函式庫「freeglut」，並做維護及其他改善，沿用自今。

上述介紹部分內容取自 維基百科

跨平台的優勢?

上述提到OpenGL是一個跨平台的圖形函示庫，在開發過程中主要使用C++開發應用程式。我們可以依照不同作業系統載入不同的標頭檔(.h)來進行跨平台的設定，透過這樣的方式，撰寫出來的程式，可以在Windows、Ubuntu、macOS上面執行運作。若開發多平台遊戲的話，可以省下不少開發時間，「Write once, run anywhere」。

Sample Code

以下是OpenGL範例程式碼，從前六行程式碼可看到針對不同作業系統使用不同的標頭檔，程式碼修改至此連結:

#ifdef __APPLE__ // 若作業系統為macOS系統，則使用下列header檔案
#include <OpenGL/gl.h>
#include <GLUT/glut.h>
#else
#include <GL/glut.h>
#endif

void init();
void display();

int main(int argc, char* argv[])
{
    glutInit(&argc, argv);
    glutInitDisplayMode(GLUT_RGB | GLUT_SINGLE);
    glutInitWindowPosition(0, 0);
    glutInitWindowSize(300, 300);

    glutCreateWindow("OpenGL 3D View");

    init();
    glutDisplayFunc(display);

    glutMainLoop();
    return 0;
}

void init()
{
    glClearColor(0.0, 0.0, 0.0, 0.0);
    glMatrixMode(GL_PROJECTION);
    glOrtho(-5, 5, -5, 5, 5, 15);
    glMatrixMode(GL_MODELVIEW);
    gluLookAt(0, 0, 10, 0, 0, 0, 0, 1, 0);
}

void display()
{
    glClear(GL_COLOR_BUFFER_BIT);

    glColor3f(1.0, 0, 0);
    glutWireTeapot(3);

    glFlush();
}

環境設定

Windows

安裝 Visual Studio

請先自行安裝Visual Studio，安裝過程記得安裝Visual C++，在本範例使用Visual Studio 2015 Community，此為免費版本。

Visual Studio是一個由微軟公司所開發設計的IDE，主要用來開發Windows裝置、Android、iOS及雲端服務的應用程式，常用Visual Studio 撰寫的語言，像是C#, Visual Basic, TypeScript, C++, C，是微軟官方提供的IDE。

下載 freeglut

請到 freeglut 官網並點選下圖Prepackaged Releases的Martin Payne's Windows binaries (MSVC and MinGW) alt text

點選上圖連結後，會到下圖頁面，請點選freeglut 3.0.0 MSVC Package下的Download freeglut 3.0.0 for MSVC 下載 freeglut-MinGW.zip alt text

新增 Visual C++ 專案

開啟Visual Studio，從左上角選單 File -> New -> Project (英文版) alt text

選擇專案類型，並新增專案，在此範例專案為OpenGLSample alt text

設定OpenGL及freeglut

在方案總管的OpenGLSample Project上點選右鍵，並選取「Open Folder in File Explorer」，將先前下載的 freeglut-MinGW.zip解壓縮後的freeglut資料夾放到此目錄，如下圖

alt text

設定專案屬性，在方案總管的OpenGLSample Project上點選右鍵，並選取「Properties」，如下圖

alt text

下列設定使用 $(ProjectDir) 代表是目前專案在PC上的路徑，若有在不同PC上進行開發，建議使用$(ProjectDir)的方式來設定

設定 Additional Include Directories

將下圖的Additional Include Directories裡面新增項目，內容為$(ProjectDir)freeglut\include

alt text

設定 Additional Library Directories

將下圖的Additional Library Directories裡面新增項目，內容為$(ProjectDir)freeglut\lib

alt text

設定 Build-Events 的 Post-Build Event

Post-Build Event會在專案編譯成功後，執行指令。

在此設定內容為

Copy /Y "$(ProjectDir)freeglut\bin\freeglut.dll" "$(ProjectDir)"

設定結果如下圖

alt text

執行OpenGL 應用程式

可使用上述提供的範例程式碼，測試看看是否可正常運行。

新增一個main.cpp檔案，內容使用剛開始提供的範例程式碼

若順利編譯，執行結果如下圖:

alt text

Ubuntu

使用Ubuntu 16.04.2 LTS Desktop版，進行環境配置，僅須透過以下指令安裝freeglut**

sudo apt install freeglut3 freeglut3-dev

可使用上述提供的範例程式碼，測試看看是否可正常運行。

新增一個main.cpp檔案，內容文章剛開始提供的範例程式碼，透過Terminal下指令編譯及執行:

gcc main.cpp -o main.out -lGL -lGLU -lglut
 # 編譯
./main.out
 # 執行

若順利編譯，執行結果如下圖:

alt text

macOS

在這邊將提到安裝Xcode，新增專案並設定OpenGL函示庫。

Xcode是一個由蘋果公司所開發設計的IDE，主要用來開發macOS、iOS、watchOS、tvOS的應用程式，常用Xcode撰寫的語言，像是Swift, Objective-C, C++, C，是macOS上官方提供的IDE。

安裝 Xcode

請登入App Store，搜尋Xcode，並安裝。

開啟 Xcode 新增 C++ 專案

開啟Xcode後，請點選「Create a new Xcode Project」

alt text

作業系統選擇macOS，類型選取Command Line Tool，按下Next

alt text

專案名稱在此範例為OpenGLSample，語言選擇C++，按下Next後選擇位置，即可建立專案

alt text

點選下圖中的左上角藍色icon的專案名稱，並在Linked Frameworks and Libraries點選+的icon設定Library

alt text

關鍵字輸入GL，並將GLKit.framework、GLUT.framework、OpenGL.framework加入至專案

alt text

設定結果如下圖

alt text

搭配文章開始提供的範例程式碼，若順利編譯，執行結果如下圖:

alt text