📐

MacでOpen GLの開発環境(VS Code)を構築する

2022/11/22に公開3件

C++

OpenGL開発環境をMac+VSCodeで構築します。

OpenGLの環境を構築する際、ネット上にはglfwやglut、gradやglewなどOpenGL周辺のものがたくさん出てきて、訳がわかりません。ここではできるだけシンプルに環境構築することを目指します。

PCのスペック

Mac mini (M1, 2020)
Chip Apple M1
Memory 16 GB
macOS Monterey Version 12.6

必要なもの

clang
GLFW3
glad

Clang

C/C++のコンパイラ。
もちろんg++でもよい.

GLFW3

https://www.glfw.org/
ウィンドウの作成などをするためのライブラリです。
GLFWのほかにも、GLUTやSFMLなどがあります。
どれを使えばいいのか比較している動画があったので、気になる人はこちらをご覧ください。

glad

https://github.com/Dav1dde/glad
OpenGL Loading Libraryの一つです。
OpenGL 1.1以上の関数にアクセスするにはローディングライブラリが必要になります。
gladを選んだ理由は、比較的開発も活発で(最新コミットが１ヶ月以内)、新しめのOpenGLの記事ではGladが使われていることが多かったからです。
プログラミングを学ぶ教材として有名なfreeCodeCampやOpenGLを体系的に学べるLearn OpenGLというサイトでも使われていました。

そのほかにもいくつかライブラリが存在します。詳細はこちらのページで確認できます。

開発環境の構築

プロジェクトの作成

プロジェクトフォルダを作ってVSCodeで開きます。

mkdir opengl-mac
code opengl-mac

3つのフォルダを作成します。

opengl-mac
└─ dependencies
   ├ library
   └ include

GLFW3を用意する

以下のリンクでmacOS pre-compiled binariesをダウンロードします。
https://www.glfw.org/download.html
glfw-3.3.8.bin.MACOS > lib-universal の中身を dependencies > libraryの中に、
glfw-3.3.8.bin.MACOS > include の中身を dependencies > includeの中にコピーします。

gladを用意する

次のページにアクセスすると、その人に合ったローダーを生成できるサイトにいきます。
https://gen.glad.sh/
ここでは、画像のように設定しGenerateボタンをクリック。

glad.zipをダウンロードして展開。
glad > include の中身を dependencies > includeの中に、
glad > src の中身を opengl-mac(プロジェクトのルート)にコピーする、

今のディレクトリ構成

opengl-mac
├── dependencies
│   ├── include
│   │   ├── GLFW
│   │   │   ├── glfw3.h
│   │   │   └── glfw3native.h
│   │   ├── KHR
│   │   │   └── khrplatform.h
│   │   └── glad
│   │       └── gl.h
│   └── library
│       ├── libglfw.3.dylib
│       └── libglfw3.a
└── gl.c

VS Codeの設定

VSCodeのメニュバーにあるTerminalのメニューからConfigure Default Build Task...を選択する。

コンパイラがusr/bin/clang++になっているものを選択する。

.vscodeというフォルダとともに、tasks.jsonというファイルが作成されるので、これを次のように編集します。(args:にいくつかオプションを追加するだけです。)
これにてビルドの設定が完了しました。

tasks.json

{
	"version": "2.0.0",
	"tasks": [
		{
			"type": "cppbuild",
			"label": "C/C++: clang++ build active file",
			"command": "/usr/bin/clang++",
			"args": [
				"-std=c++17",
				"-fcolor-diagnostics",
				"-fansi-escape-codes",
				"-Wall",
				"-g",
				"-I${workspaceFolder}/dependencies/include",
				"-L${workspaceFolder}/dependencies/library",
				"${workspaceFolder}/*.cpp",
				"${workspaceFolder}/gl.c",
				"${workspaceFolder}/dependencies/library/libglfw.3.dylib",
				"-rpath",
				"${workspaceFolder}/dependencies/library",
				"-o",
				"${workspaceFolder}/app",
				"-framework",
				"OpenGL",
				"-framework",
				"Cocoa",
				"-framework",
				"IOKit",
				"-framework",
				"CoreVideo",
				"-framework",
				"CoreFoundation",
				"-Wno-deprecated"
			],
			"options": {
				"cwd": "${fileDirname}"
			},
			"problemMatcher": [
				"$gcc"
			],
			"group": {
				"kind": "build",
				"isDefault": true
			},
			"detail": "compiler: /usr/bin/clang++"
		}
	]
}

OpenGLを使う

最後にプロジェクトルートにmain.cppを作成し、OpenGLのコードを書いていきます。
以下のソースコードには最低限の内容しかないので、三角形すら描画されませんが、ここから開発を進めることができるはずです。

main.cpp

#include<iostream>
#include<glad/gl.h>
#include<GLFW/glfw3.h>

int main()
{
	// GLFWの初期化
	glfwInit();

	// GLFWのバージョンを指定
	glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);
	glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);

	// GLFWのプロファイルを指定
	glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE);

#ifdef __APPLE__
    glfwWindowHint(GLFW_OPENGL_FORWARD_COMPAT, GL_TRUE);
#endif

	// Windowを作成 
	GLFWwindow* window = glfwCreateWindow(800, 800, "OpenGL on MAC", NULL, NULL);
	if (window == NULL)
	{
		std::cout << "Failed to create GLFW window" << std::endl;
		glfwTerminate();
		return -1;
	}

	// コンテキストの作成
	glfwMakeContextCurrent(window);
	// GLADをロードしてOpenGLの設定を行う
	gladLoadGL(glfwGetProcAddress);
    


	glViewport(0, 0, 800, 800);
	glClearColor(0.07f, 0.13f, 0.17f, 1.0f);
	glClear(GL_COLOR_BUFFER_BIT);
	glfwSwapBuffers(window);


	while (!glfwWindowShouldClose(window))
	{
		glfwPollEvents();
	}

	glfwDestroyWindow(window);
	glfwTerminate();

	return 0;
}

ビルドと実行

Cmd+Shift+Bでビルドします。
次のように出力されたら成功です。

Build finished successfully.

VSCodeで新しいターミナルを開くとプロジェクトのルートディレクトリが開かれると思うので、そこに出力されているappを実行するとWindowが表示されるはずです。

./app

今回作成したプロジェクト

GitHubに今回作成したプロジェクトを残しておきます。
https://github.com/k41531/opengl-mac

Discussion

nyanchu - okabe

こちらは、windowsやlinuxでも大丈夫でしょうか？
返信楽しみにしてます

nyanchu - okabe

さっきまで上手く行ったのに上手くいきません、どうすればいいですか？
環境：Mac M2
エディター：vscode
kaiseiさんと同じ環境だと思います。

qiita.sh

 *  実行するタスク: C/C++: clang++ build active file 

ビルドを開始しています...
/usr/bin/clang++ -std=c++17 -fcolor-diagnostics -fansi-escape-codes -Wall -g '-I/Users/--/Desktop/OpenGL - Projects/opengl-mac/dependencies/include' '-L/Users/--/Desktop/OpenGL - Projects/opengl-mac/dependencies/library' '/Users/--/Desktop/OpenGL - Projects/opengl-mac/*.cpp' '/Users/--/Desktop/OpenGL - Projects/opengl-mac/gl.c' '/Users/--/Desktop/OpenGL - Projects/opengl-mac/dependencies/library/libglfw.3.dylib' -rpath '/Users/--/Desktop/OpenGL - Projects/opengl-mac/dependencies/library' -o '/Users/--/Desktop/OpenGL - Projects/opengl-mac/app' -framework OpenGL -framework Cocoa -framework IOKit -framework CoreVideo -framework CoreFoundation -Wno-deprecated
clang: error: no such file or directory: '/Users/--/Desktop/OpenGL - Projects/opengl-mac/*.cpp'

ビルドが完了しましたが、エラーが発生しました。

 *  ターミナル プロセスが起動に失敗しました (終了コード: -1)。 
 *  ターミナルはタスクで再利用されます、閉じるには任意のキーを押してください。

再起動やkaiseiさんのブログを何度も見直しましたがわかりませんでした.
知識がありませんが、できるとこならできるとこまで調べましたがわかりませんんでしただから本人に聞こうと思いました
あとユーザー名は--に置き換えました

nyanchu - okabe

ありがとうございました！