Zenn
📐

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

2022/11/22に公開
C++
OpenGL
#
clang
#
glfw
#
glad
tech

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などがあります。
どれを使えばいいのか比較している動画があったので、気になる人はこちらをご覧ください。
https://www.youtube.com/watch?v=zQUYsMYElC0

glad

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

そのほかにもいくつかライブラリが存在します。詳細はこちらのページで確認できます。
https://www.khronos.org/opengl/wiki/OpenGL_Loading_Library

開発環境の構築

プロジェクトの作成

プロジェクトフォルダを作って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