1. Introduction to OpenGL Tatsuya Yatagawa

What is OpenGL？ ◼ OpenGL (Open Graphics Library) ◼ Standard library for 3D graphics programming ◼ Khronos Group manages OpenGL ◼ OpenGL features ◼ OS independent (it works on Windows, Mac etc.) ◼ Hardware independent (it works on every CPU, GPU) ◼ Others? ◼ DirectX: Graphics library for Windows (by Microsoft) ◼ Metal: Graphics library for MacOS (by Apple) ◼ Vulkan: Modern (but super-complicated!) graphics library (by Khronos Group) Computer Graphics Course @Waseda University

How can we use OpenGL? ◼ No installation required! ◼ Already installed when your OS is setup. ◼ But, you should use utility libraries ◼ OpenGL itself does not have OS-dependent features ◼ E.g.) Show up windows, mouse and keyboard interaction. ◼ GLUT (GL Utility Toolkit), GLFW (GL Framework), Qt, openFrameworks are famous utility libraries ◼ This course uses GLFW (it’s basic and good for study!) Computer Graphics Course @Waseda University

GLFW ◼ GLFW (OpenGL Framework) ◼ Utility library for easily using OpenGL ◼ GLUT is quite similar, but is rather out-dated ◼ Pros of GLFW ◼ OpenGL version is controllable (4.6 is latest version in 2020) ◼ Easy to implement OS-independent programs ◼ Possible to implement object-oriented programs ◼ Cons of GLFW ◼ GLFW provides minimum (but often enough) functions ◼ Compared to Qt/openFrameworks, source code will be longer Computer Graphics Course @Waseda University

Download GLFW ◼ Access https://github.com/glfw/glfw/releases ◼ Click “glfw-3.x.x.bin.WIN64.zip” in the list Click here! Computer Graphics Course @Waseda University

Where to place GLFW files? ◼ Recommends ◼ Make a folder at C:/graphics/lib/ ◼ Place “glfw-3.x.x.bin.WIN64” in this folder after renaming it to “glfw” ◼ Locations of your source codes ◼ Make a folder at C:/graphics/src/ ◼ Inside this, make “Day1”, and include source codes in it. Computer Graphics Course @Waseda University

Quick introduction to Visual Studio ◼ Visual Studio ◼ IDE for multiple languages by Microsoft ◼ In this course, we use it for C++ ◼ Both code editor and compilers are available ◼ Latest version is Visual Studio 2019 (in Mid 2020.) ◼ Terms for Visual Studio ◼ Build: ◼ Compile source codes and link binaries. ◼ Project: ◼ Set of source codes for building a single executable (or library). ◼ Solution: ◼ Set of projects to provide a solution to your problem. ◼ For this course, you should use 1 solution to 1 class. Computer Graphics Course @Waseda University

FAQ ◼ I’m a Mac user! ◼ Use Homebrew (https://brew.sh/index) ◼ Only what you can do is type “brew install glfw” on terminal ☺ ◼ Be careful, homebrew needs Xcode installation (it takes hours!) ◼ What editor should I use? ◼ Visual Studio would be the best (it’s free!) ◼ For Mac users, VS code would be the best choice (sorry, but please setup by yourself). ◼ You should prepare “launch.json” and “tasks.json” for your convenience (check by yourself for details) Computer Graphics Course @Waseda University

Install IDEs (start now!) ◼ Visual Studio Community (for Windows) ◼ Access: https://visualstudio.microsoft.com/ja/vs/community/ ◼ Download and install it. ◼ When installing, please tick the package “Desktop development with C++”. ◼ It may take hours! ◼ Xcode (for Mac) ◼ It’s necessary even if you use VS code as an editor. ◼ Install it through Apple Store app. ◼ It may take hours! Computer Graphics Course @Waseda University

Start Visual Studio ◼ Search from application list (with Win-key) ◼ Following display is shown up ◼ Proceed to click “Continue without code” Computer Graphics Course @Waseda University Click here

Create a new project ◼ From “File (F)” menu, choose “New (N)” → “Project (P)” Computer Graphics Course @Waseda University

Create a new project Computer Graphics Course @Waseda University 2. Find out “Empty project” 3. Press “Next” to proceed 1. Specify language as “C++”

Project settings ◼ For example, each item is set as: ◼ Project name: Program01 ◼ Location: C:/graphics/src ◼ Solution name: Day1 Computer Graphics Course @Waseda University

Add another project ◼ While you’re opening a solution, ◼ File(F) → Add(D) → New project(N) Computer Graphics Course @Waseda University

Add a new project Computer Graphics Course @Waseda University ◼ Setup project as you did to create one Add a project to solution when you work on an assignment (1 project for 1 assignment)

Settings for GLFW ◼ Property sheet ◼ Setup include (for header files) and library directories ◼ This can skip common settings for different projects Computer Graphics Course @Waseda University

Settings for GLFW ◼ Show up “Property Manager” ◼ View(V) → Property manager(N) Computer Graphics Course @Waseda University

Add a property sheet Computer Graphics Course @Waseda University ◼ Add a new property sheet ◼ Right click “Release | x64” in “Program01” ◼ Choose “Add new property sheet(P)”

Add a property sheet ◼ Specify name and location ◼ Name(N): OpenGL.Common.x64.props (Extension necessary!) ◼ Location(L): C:/graphics/src/props/ Computer Graphics Course @Waseda University

Edit property sheet ◼ Double click the name of sheet Computer Graphics Course @Waseda University

Setup include directory Computer Graphics Course @Waseda University ◼ On “VC++ directory”, ◼ Click down arrow at the right of “Include directory” ◼ Choose “Edit”

Setup include directory ◼ Click “new folder” icon (see figure below) Computer Graphics Course @Waseda University

Setup include directory Computer Graphics Course @Waseda University ◼ Then, choose C:/graphics/lib/glfw/include

Setup library directory ◼ For library directory in “VC++ directory”, ◼ Choose C:/graphics/libs/glfw/lib-vc2019 Computer Graphics Course @Waseda University

After setup Computer Graphics Course @Waseda University Notice: lib-vcXXXX for library directory can be changed depending on your VS version

Setup additional dependencies (library names) Computer Graphics Course @Waseda University ◼ On “Linker” → “Inputs” → “Additional dependencies” ◼ Choose “Edit” from pull-down menu

Setup additional dependencies (library names) Computer Graphics Course @Waseda University Add “opengl32.lib”, “glu32.lib”, and “glfw3.lib”. (Need line breaks!)

After setup Computer Graphics Course @Waseda University Then click “OK” to close window.

Save property sheet ◼ Make sure setting on the sheet is saved! ◼ Every time after setup, click “Save OpenGL.Common.x64”. Computer Graphics Course @Waseda University

Add existing property sheet Computer Graphics Course @Waseda University ◼ You can use the sheet in other settings. ◼ Right click “Debug | x64” Choose “Add existing property sheet (E)”

Add existing property sheet Computer Graphics Course @Waseda University ◼ Choose the sheet you created before

After setup Computer Graphics Course @Waseda University ◼ Make sure the sheet is set to both “Release | x64” and “Debug | x64”

Add source code Computer Graphics Course @Waseda University ◼ Add a C++ source for project ◼ From “Solution explorer” at the side (maybe at left or right) Right click “Program001” → “Source Files” Then, choose “Add(D)” → “New item(W)”

Add source code Computer Graphics Course @Waseda University ◼ Specify file name (main.cpp), and click “OK”

Copy & paste test code ◼ https://github.com/tatsy/OpenGLCourseJP/tree/master/s rc/open_window Computer Graphics Course @Waseda University

Build project Computer Graphics Course @Waseda University ◼ Change build mode to “Release” and “x64” ◼ “Build(B)” → “Build solution(B)” or ◼ “Ctrl + Shift + B” (Press together)

Build project Computer Graphics Course @Waseda University ◼ After build Make sure your build finish successfully (yon can find “1 success”)

Run Computer Graphics Course @Waseda University ◼ “Debug (D)” → “Start without debug (H)” or ◼ “Ctrl + F5” (press together)

Finish ◼ Red window will be shown up! Computer Graphics Course @Waseda University