$30 off During Our Annual Pro Sale. View Details »

1. Introduction to OpenGL

1. Introduction to OpenGL

Tatsuya Yatagawa

April 06, 2021
Tweet

More Decks by Tatsuya Yatagawa

Other Decks in Technology

Transcript

  1. 1. Introduction to OpenGL Tatsuya Yatagawa

  2. 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
  3. 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
  4. 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
  5. 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
  6. 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
  7. 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
  8. 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
  9. 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
  10. 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
  11. Create a new project ◼ From “File (F)” menu, choose

    “New (N)” → “Project (P)” Computer Graphics Course @Waseda University
  12. Create a new project Computer Graphics Course @Waseda University 2.

    Find out “Empty project” 3. Press “Next” to proceed 1. Specify language as “C++”
  13. Project settings ◼ For example, each item is set as:

    ◼ Project name: Program01 ◼ Location: C:/graphics/src ◼ Solution name: Day1 Computer Graphics Course @Waseda University
  14. Add another project ◼ While you’re opening a solution, ◼

    File(F) → Add(D) → New project(N) Computer Graphics Course @Waseda University
  15. 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)
  16. 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
  17. Settings for GLFW ◼ Show up “Property Manager” ◼ View(V)

    → Property manager(N) Computer Graphics Course @Waseda University
  18. 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)”
  19. 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
  20. Edit property sheet ◼ Double click the name of sheet

    Computer Graphics Course @Waseda University
  21. Setup include directory Computer Graphics Course @Waseda University ◼ On

    “VC++ directory”, ◼ Click down arrow at the right of “Include directory” ◼ Choose “Edit”
  22. Setup include directory ◼ Click “new folder” icon (see figure

    below) Computer Graphics Course @Waseda University
  23. Setup include directory Computer Graphics Course @Waseda University ◼ Then,

    choose C:/graphics/lib/glfw/include
  24. Setup library directory ◼ For library directory in “VC++ directory”,

    ◼ Choose C:/graphics/libs/glfw/lib-vc2019 Computer Graphics Course @Waseda University
  25. After setup Computer Graphics Course @Waseda University Notice: lib-vcXXXX for

    library directory can be changed depending on your VS version
  26. Setup additional dependencies (library names) Computer Graphics Course @Waseda University

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

    Add “opengl32.lib”, “glu32.lib”, and “glfw3.lib”. (Need line breaks!)
  28. After setup Computer Graphics Course @Waseda University Then click “OK”

    to close window.
  29. 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
  30. 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)”
  31. Add existing property sheet Computer Graphics Course @Waseda University ◼

    Choose the sheet you created before
  32. After setup Computer Graphics Course @Waseda University ◼ Make sure

    the sheet is set to both “Release | x64” and “Debug | x64”
  33. 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)”
  34. Add source code Computer Graphics Course @Waseda University ◼ Specify

    file name (main.cpp), and click “OK”
  35. Copy & paste test code ◼ https://github.com/tatsy/OpenGLCourseJP/tree/master/s rc/open_window Computer Graphics

    Course @Waseda University
  36. 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)
  37. Build project Computer Graphics Course @Waseda University ◼ After build

    Make sure your build finish successfully (yon can find “1 success”)
  38. Run Computer Graphics Course @Waseda University ◼ “Debug (D)” →

    “Start without debug (H)” or ◼ “Ctrl + F5” (press together)
  39. Finish ◼ Red window will be shown up! Computer Graphics

    Course @Waseda University