Slide 1

Slide 1 text

1. Introduction to OpenGL Tatsuya Yatagawa

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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)

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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)”

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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)”

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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)”

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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)

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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