Difference between revisions of "BasecodeCSE167S16"

From Immersive Visualization Lab Wiki
Jump to: navigation, search
(→‎Starter Code for Programming Projects)
m (→‎Starter Code for Programming Projects: Cleaned up code download section.)
 
(17 intermediate revisions by 3 users not shown)
Line 1: Line 1:
−
=Starter Code for Programming Projects=
+
==Starter Code for Programming Projects==
  
 
The purpose of this web page is to introduce OpenGL programming and set up your computer so that you can begin developing OpenGL applications.
 
The purpose of this web page is to introduce OpenGL programming and set up your computer so that you can begin developing OpenGL applications.
Line 9: Line 9:
 
For your personal computer we will show you how to download and install GLFW and configure Visual Studio/XCode to use it.  
 
For your personal computer we will show you how to download and install GLFW and configure Visual Studio/XCode to use it.  
  
−
Begin by downloading the starter code available here: https://github.com/CSE167Admin/CSE167-Starter-Code
+
* For project 1, download the starter code available here: https://github.com/CSE167Admin/CSE167-Starter-Code
 +
* For project 2, download here: https://github.com/CSE167Admin/CSE167-Starter-Code-2
  
−
==Starter Code on Lab Computer==
+
==UPDATE YOUR SYSTEM==
  
−
==Starter Code on Personal Computer==
+
We're using modern OpenGL(at least 3.3+) which came out in 2010, meaning most recent systems should support it by default. However, just in case, make sure your graphics drivers are updated to the latest version.
 +
 
 +
* Windows: Update your graphics driver to the latest version.
 +
* OS X: Update your OS X version to at least 10.9.
 +
 
 +
==On Windows==
  
−
===Windows===
 
 
The very first thing you'll be doing is downloading and installing the [https://www.visualstudio.com/en-us/products/visual-studio-community-vs.aspx Microsoft Visual Studio 2015 Community Edition] for free.
 
The very first thing you'll be doing is downloading and installing the [https://www.visualstudio.com/en-us/products/visual-studio-community-vs.aspx Microsoft Visual Studio 2015 Community Edition] for free.
  
Line 30: Line 35:
 
# We can do that by going to our project's(note: NOT solution) Properties. Right-click on '''GLFWStarterProject''' project in the '''Solution Explorer'''.
 
# We can do that by going to our project's(note: NOT solution) Properties. Right-click on '''GLFWStarterProject''' project in the '''Solution Explorer'''.
 
#: [[File:project_properties.png]]
 
#: [[File:project_properties.png]]
−
# Once in project properties, go to Linker->Input to prepend '''opengl32.lib;glu32.lib;''' to Additional Dependencies.
+
# Once in project properties, go to Configuration dropdown to change it to All Configurations. This will ensure we edit both the debug/release configuration at the same time, and don't have to repeat the step.
 +
#: [[File:VS_All_Configuration.png|800px]]
 +
# Navigate to Linker->Input to prepend '''opengl32.lib;glu32.lib;''' to Additional Dependencies.
 
#: [[File:opengl_lib_linker.png|800px]]
 
#: [[File:opengl_lib_linker.png|800px]]
 +
# Change the active configuration to '''release''' for faster execution! If you want to do breakpoint debugging, remember that you'll have to change this back to '''debug''' to make sure you can see the variables.
 +
#: [[File:vs_release_build.png]]
 +
# Once this is done, build and run the program(CTRL+F5) to see a spinning cube!
  
−
===Mac OSX===
+
==On OS X==
−
 
+
 
First, let's make sure we have all of the starter code downloaded (linked above).
 
First, let's make sure we have all of the starter code downloaded (linked above).
  
 
Once you have unzipped the project, open XCode and create a new project.
 
Once you have unzipped the project, open XCode and create a new project.
 +
 
# Select Command Line Tool as the template for the new project.
 
# Select Command Line Tool as the template for the new project.
−
#: [[File:OSX_XCode_Setup_Command_Line_Tool.png|800px]]
+
<!-- #: [[File:OSX_XCode_Setup_Command_Line_Tool.png|800px]] -->
 
# Name your project any name of your choosing.
 
# Name your project any name of your choosing.
−
#: [[File:OSX_XCode_Setup_Project_Naming.png|800px]]
+
<!-- #: [[File:OSX_XCode_Setup_Project_Naming.png|800px]] -->
 
# Upon completion, you should be presented with something like this:
 
# Upon completion, you should be presented with something like this:
 
#: [[File:OSX_XCode_Setup_Project_Created.png|800px]]
 
#: [[File:OSX_XCode_Setup_Project_Created.png|800px]]
 
# Let's open the directory enclosing our newly created XCode project alongside the unzipped starter code directory.  Drag and drop the files as shown below.
 
# Let's open the directory enclosing our newly created XCode project alongside the unzipped starter code directory.  Drag and drop the files as shown below.
 +
#: [[File:OSX_XCode_Setup_Moving_Files.png|800px]]
 +
# If presented with the option, replace the already existing files (main.cpp in this case)
 +
<!-- #: [[File:OSX_XCode_Setup_Replace_Files.png|800px]] -->
  
 
All is good for now.  We will come back to this later.
 
All is good for now.  We will come back to this later.
  
 
Next, make sure you have a recent version of CMake.  You can download CMake from here: https://cmake.org/
 
Next, make sure you have a recent version of CMake.  You can download CMake from here: https://cmake.org/
 +
 +
You may not already have the /Developer folder. If so, you'll have to make the directory. To do this, open a terminal and type:
 +
* <code>ls /Developer</code>
 +
** If you get an error message that /Developer does not exist we have to create the developer folder.
 +
*: <code>sudo mkdir /Developer</code>
 +
** You may be prompted to enter your password.
 +
 +
From now on, when you're running commands inside /Developer, you'll need to prepend them with sudo
 +
  
 
====Install GLFW====
 
====Install GLFW====
 +
 +
Begin by downloading GLFW: http://www.glfw.org/
 +
 +
#Unzip the downloaded folder
 +
#Drag and drop the glfw folder in its entirety into your /Developer folder.  Authenticate accordingly.
 +
<!-- #: [[File:OSX_XCode_Setup_Moving_GLFW.png|800px]] -->
 +
# Open a terminal
 +
#* <code>cd /Developer/glfw-3.1.2</code>
 +
#* <code>sudo cmake -DBUILD_SHARED_LIBS=ON .</code>
 +
#* <code>sudo make</code>
 +
<!-- #: [[File:OSX_XCode_Setup_Making_GLFW.png|800px]] -->
  
 
====Install GLM====
 
====Install GLM====
 +
 +
Begin by downloading GLM: http://glm.g-truc.net
 +
 +
#Unzip the downloaded folder
 +
#Drag and drop the glm folder in its entirety into your /Developer folder.  Authenticate accordingly.
 +
# Open a terminal
 +
#* <code>cd /Developer/glm</code>
 +
#* <code>sudo cmake . #(Don't miss the dot!)</code>
 +
#* <code>sudo make</code>
 +
<!-- #: [[File:OSX_XCode_Setup_Making_GLM.png|800px]] -->
  
 
====Install GLEW====
 
====Install GLEW====
  
 +
Begin by downloading GLEW: http://glew.sourceforge.net/
 +
 +
#Unzip the downloaded folder
 +
#Drag and drop the glew folder in its entirety into your /Developer folder.  Authenticate accordingly.
 +
# Open a terminal
 +
#* <code>sudo cd /Developer/glew-1.13.0</code>
 +
#* <code>sudo make</code>
 +
 +
====XCode Setup====
 +
 +
The last step is to set up XCode to find where we put all of our code, libraries and headers
 +
# Open up the XCode project
 +
# In the far left panel of the Xcode window, you will see a folder matching the project name.
 +
#* Right click this folder and click "Add files to <project name>".
 +
#* Choose the files as shown below and press "Add"
 +
#: [[File:OSX_XCode_Setup_Adding_Files.png|800px]]
 +
# Above this folder, you will see the top level which shares the same name as your project.
 +
#* Click this and choose the "Build Settings" option at the top.
 +
#* Scroll down to "Search Paths".
 +
#* Add the following paths as shown below so XCode knows where to find all of the glfw, glew, and glm headers in our code.
 +
#: [[File:OSX_XCode_Setup_Adding_Header_Paths.png|800px]]
 +
# Do the same for the library paths as shown below.
 +
#: [[File:OSX_XCode_Setup_Adding_Library_Paths.png|800px]]
 +
# At the top of this window, click "Build Phases"
 +
#* Open up the "Link Binary with Libraries" pull down
 +
#* Press the little "+" sign and type "OpenGL"
 +
#* Choose "OpenGL.framework" and press "Add"
 +
#: [[File:OSX_XCode_Setup_Adding_OpenGL_Library.png|800px]]
 +
#* Press the "+" sign again and choose "Add Other..."
 +
#* Navigate to /Developer/glfw-3.1.2/src, choose "libglfw.dylib" and press "Open"
 +
#: [[File:OSX_XCode_Setup_Adding_GLFW_Library.png|800px]]
 +
# Optional: We like to see a good frame rate, so we prefer you run in Release (at least during the grading demo).
 +
#* Open Product > Scheme > Edit Scheme, and choose "Release"
 +
#: [[File:OSX_XCode_Setup_Release_Mode.png|800px]]
 +
# Run that baby (press the play button at the top left or press Command + r)
 +
#: [[File:OSX_XCode_Setup_Running.png|800px]]
  
−
===Linux===
+
==On Linux==
−
The staff doesn't officially support Linux, but the ingredients you'll need is GLFW3.x.x, GLM 0.9.x.x, and GLEW 1.10+.x. You might be able to find these libraries in your favorite package managers, but make sure the versions match.
+
The staff don't officially support Linux, but the ingredients you'll need is GLFW3.x.x, GLM 0.9.x.x, and GLEW 1.10+.x. You might be able to find these libraries in your favorite package managers, but make sure the versions are sufficient/compatible.

Latest revision as of 23:14, 18 April 2016

Contents

Starter Code for Programming Projects

The purpose of this web page is to introduce OpenGL programming and set up your computer so that you can begin developing OpenGL applications.

In order to display an image, you must create a drawing canvas, which is essentially a window. With OpenGL, you create a window and then create an OpenGL drawing context associated with that window, which allows you to use your video hardware to draw 3D objects directly into that window. Opening that window and creating the OpenGL context is cumbersome and varies from system to system. The purpose of GLFW is to simplify and unify this initial step.

The PCs in the computer lab already have GLFW and Visual Studio installed.

For your personal computer we will show you how to download and install GLFW and configure Visual Studio/XCode to use it.

UPDATE YOUR SYSTEM

We're using modern OpenGL(at least 3.3+) which came out in 2010, meaning most recent systems should support it by default. However, just in case, make sure your graphics drivers are updated to the latest version.

  • Windows: Update your graphics driver to the latest version.
  • OS X: Update your OS X version to at least 10.9.

On Windows

The very first thing you'll be doing is downloading and installing the Microsoft Visual Studio 2015 Community Edition for free.

Once that is done and you have unzipped your starter code, we're ready to begin configuring our Microsoft Visual Studio solution to work with OpenGL.

  1. Open the solution GLFWStarterProject.sln with Microsoft Visual Studio 2015.
  2. Open the NuGet Package Manager by selecting Tools->NuGet Package Manager->Manage NuGet Packages for Solution...
    Nugetpackagemanger.png
  3. Make sure you're in the Browse tab. Search for nupengl and install the nupengl.core package (NOT nupengl.core.redist).
    • If the install button is greyed out, make sure the GLFWStarterProject checkbox is on.
    Nupengl.png
  4. Similarly, install the glm package.
    Glm.png
  5. Now that we have all our packages, we just need to Link against the OpenGL libraries.
  6. We can do that by going to our project's(note: NOT solution) Properties. Right-click on GLFWStarterProject project in the Solution Explorer.
    Project properties.png
  7. Once in project properties, go to Configuration dropdown to change it to All Configurations. This will ensure we edit both the debug/release configuration at the same time, and don't have to repeat the step.
    VS All Configuration.png
  8. Navigate to Linker->Input to prepend opengl32.lib;glu32.lib; to Additional Dependencies.
    Opengl lib linker.png
  9. Change the active configuration to release for faster execution! If you want to do breakpoint debugging, remember that you'll have to change this back to debug to make sure you can see the variables.
    Vs release build.png
  10. Once this is done, build and run the program(CTRL+F5) to see a spinning cube!

On OS X

First, let's make sure we have all of the starter code downloaded (linked above).

Once you have unzipped the project, open XCode and create a new project.

  1. Select Command Line Tool as the template for the new project.
  2. Name your project any name of your choosing.
  3. Upon completion, you should be presented with something like this:
    OSX XCode Setup Project Created.png
  4. Let's open the directory enclosing our newly created XCode project alongside the unzipped starter code directory. Drag and drop the files as shown below.
    OSX XCode Setup Moving Files.png
  5. If presented with the option, replace the already existing files (main.cpp in this case)

All is good for now. We will come back to this later.

Next, make sure you have a recent version of CMake. You can download CMake from here: https://cmake.org/

You may not already have the /Developer folder. If so, you'll have to make the directory. To do this, open a terminal and type:

  • ls /Developer
    • If you get an error message that /Developer does not exist we have to create the developer folder.
    sudo mkdir /Developer
    • You may be prompted to enter your password.

From now on, when you're running commands inside /Developer, you'll need to prepend them with sudo


Install GLFW

Begin by downloading GLFW: http://www.glfw.org/

  1. Unzip the downloaded folder
  2. Drag and drop the glfw folder in its entirety into your /Developer folder. Authenticate accordingly.
  3. Open a terminal
    • cd /Developer/glfw-3.1.2
    • sudo cmake -DBUILD_SHARED_LIBS=ON .
    • sudo make

Install GLM

Begin by downloading GLM: http://glm.g-truc.net

  1. Unzip the downloaded folder
  2. Drag and drop the glm folder in its entirety into your /Developer folder. Authenticate accordingly.
  3. Open a terminal
    • cd /Developer/glm
    • sudo cmake . #(Don't miss the dot!)
    • sudo make

Install GLEW

Begin by downloading GLEW: http://glew.sourceforge.net/

  1. Unzip the downloaded folder
  2. Drag and drop the glew folder in its entirety into your /Developer folder. Authenticate accordingly.
  3. Open a terminal
    • sudo cd /Developer/glew-1.13.0
    • sudo make

XCode Setup

The last step is to set up XCode to find where we put all of our code, libraries and headers

  1. Open up the XCode project
  2. In the far left panel of the Xcode window, you will see a folder matching the project name.
    • Right click this folder and click "Add files to <project name>".
    • Choose the files as shown below and press "Add"
    OSX XCode Setup Adding Files.png
  3. Above this folder, you will see the top level which shares the same name as your project.
    • Click this and choose the "Build Settings" option at the top.
    • Scroll down to "Search Paths".
    • Add the following paths as shown below so XCode knows where to find all of the glfw, glew, and glm headers in our code.
    OSX XCode Setup Adding Header Paths.png
  4. Do the same for the library paths as shown below.
    OSX XCode Setup Adding Library Paths.png
  5. At the top of this window, click "Build Phases"
    • Open up the "Link Binary with Libraries" pull down
    • Press the little "+" sign and type "OpenGL"
    • Choose "OpenGL.framework" and press "Add"
    OSX XCode Setup Adding OpenGL Library.png
    • Press the "+" sign again and choose "Add Other..."
    • Navigate to /Developer/glfw-3.1.2/src, choose "libglfw.dylib" and press "Open"
    OSX XCode Setup Adding GLFW Library.png
  6. Optional: We like to see a good frame rate, so we prefer you run in Release (at least during the grading demo).
    • Open Product > Scheme > Edit Scheme, and choose "Release"
    OSX XCode Setup Release Mode.png
  7. Run that baby (press the play button at the top left or press Command + r)
    OSX XCode Setup Running.png

On Linux

The staff don't officially support Linux, but the ingredients you'll need is GLFW3.x.x, GLM 0.9.x.x, and GLEW 1.10+.x. You might be able to find these libraries in your favorite package managers, but make sure the versions are sufficient/compatible.

Retrieved from "http://ivl.calit2.net/wiki/index.php?title=BasecodeCSE167S16&oldid=9669"