Development Environment Setup

You will need a few things to write your programs for this class:

1. A Webbrowser - Most of the major browsers should work but Chrome and Firefox have the best developer tools for our purposes
2. A Text Editor - What we use to type our code
3. Git - A version control program to help us track out work and submit work
4. Javascript WebGL Library Collection - These javasript utilites are used by the book to provide supporting functionality
5. Unity - A framework for developing 2D/3D interactive applications
6. Local Webserver - (optional) A program to help us host our WebGL code like it was online

Install a Text Editor

You can use any text editor you like, but I would hightly recommend Visual Studio Code and that is what I will use throughout the course in demonstrations and it integrates well with Unity. You might want to also turn off the telemetry settings in Visual Studio Code as well if you are privacy minded.

Install Git

Windows Instructions

You can download the installer for the latest version of Git from https://git-scm.com/.

macOS Instructions

On macOS, Git comes with the Xcode command line tools package. This package must be installed separately from Xcode itself. To see if you already have it installed, open up the Terminal application. When you open up Terminal, you will be presented with a black window with some text that will probably have your username in it and possibly the name of your computer in a format like this before a cursor:

Computer-Name:~ Username$

The appearance of your terminal could be different, but you should still be able to run commands using this prompt.

When describing commands in the following steps, I will prefix them with a $ character to indicate that this is a command line instruction. You do not need to type in the first $ character.

First try running Git by typing the following command and hit enter:

$ git

If Git is already installed you will see a usage message. If not, a window will pop up asking if you want to install the Xcode command line tools. Install them now if this happens.

After installing the command line tools, you may get the following message:

Agreeing to the Xcode/iOS license requires admin privileges, please re-run as root via sudo.

If so, run this command:

$ sudo xcodebuild -license

You will be prompted for a password, enter the password for your computer. You can scroll through the license by pressing the spacebar, and press q to stop reading the license. You will then need to type agree and press the enter key. Once you have completed this, try running git again.

Download the Javascript WebGL Library Collection

You can download the Javascript package from here. I suggest making a folder on your computer for the class and then creating separate folder for assignments. Extract the Javascript package and make sure the contents are in a folder named Common (keep the case the same as well). Copy this folder to the assignments directory. You can use git to clone my examples repository from github (https://github.com/dtg3/cs300-examples) that will host all the code examples for class. It is also encouraged to clone the author’s example code repository from github to help follow along with the code in the book (https://github.com/esangel/WebGL).

Your directory structure should look like this:

cs300
|
|--> ./assignments
        |--> ./Common
                |
                |--> initShaders.js
                |--> initShaders2.js
                |--> MV.js
                |--> MV2.js
                |--> webgl-utils.js
|--> ./cs300-examples
        |--> ./example1
        |--> ...
        |--> ./Common
                |
                |--> initShaders.js
                |--> initShaders2.js
                |--> MV.js
                |--> MV2.js
                |--> webgl-utils.js
|--> ./WebGL
        |--> Chap10
        |--> Chap11
        |--> ...
        |--> ./Common
        |--> README.md

Installing Unity

You will need to download Unity Hub and setup a free Unity Personal Account. Use Unity Hub to install Unity 2020 LTS version (should be the recommended version). When prompted what to install you can uncheck the option to install Visual Studio Community (we can use Visual Studio Code instead), make sure that the WebGL platform is selected (you can also select the platform your are developing on Windows/macOS), and leave the option to install the Documentation. Note that the installation might take some time.

To setup the intellisense (code autofill) with VSCode, you can follow these instructions to install the supporting tools: https://code.visualstudio.com/docs/other/unity. NOTE that on windows you might need to install the dotnet sdk version 4.7.1 to get the intellisense to work. Additionally MacOS and Windows requires a few adjusted settings to for omnisharp (the plugin that helps give you code autofill). In your settings.json file you can add:

"omnisharp.path": "1.37.16",
"omnisharp.useGlobalMono": "always"

That should give you everything you need to install intellisense. If you elect to use Visual Studio community instead of VSCode everything you need should be installed already, but the editor will take longer to open the first time you open it to edit code for a Unity project.

Running a Local Webserver

Python actually provides a very simple webserver using the command:

python 2.7

$ python -m SimpleHTTPServer 8000

python 3

$ python3 -m http.server 8000

You can run this command in your macOS Terminal or Windows Command Prompt/Powershell from the root of your class folder. If you visit localhost:8000 in your Webbrowser it will show a file browser to the content in the folder. You can then navigate to the project or example folder you would like to view. To stop the server, you can simply close your terminal or command prompt window.