2.1 - Tools Setup

You need two tools for WebGL program development:

  1. An IDE (integrated development environment) to assist in writing good code.
  2. A web server.

Install an IDE

A good integrated development environment (IDE) is an essential tool for developing good software. Configure your favorite IDE to perform syntax highlighting, style checking, and error checking for the following languages:

  • HTML
  • CSS
  • JavaScript
  • GLSL

If you don’t already have a favorite IDE, JetBrain’s PyCharm-edu or WebStorm are good options.

Install a Web Server

To test your WebGL programs, run a local web server on your computer. Many features of WebGL programs will not execute in your browser if you simply open files locally. The program files must be loaded into your browser by a web server. You will load your programs using ‘localhost’ with a URL something like

http://localhost/path/to/file/file.html

The Apache2 web server is recommended, but any web server will do. After you install the web server, configure it to access your WebGL program files. The configuration will vary based on your operating system and the specific web server you install.

If you are on a Macintosh, the Apache2 web server is already installed. Configure it using these instructions.

If you are on a Microsoft Windows computer, install Apache2 from here and then configure it. You should run the Apache2 web server as a “service” so that it starts every time you reboot. See the instructions for this in configure it.

Glossary

integrated development environment (IDE)
a program that combines a text editor with syntax highlighting, syntax checking, error checking and version control features to enhance code development.
web server
a program that listens for HTTP requests and responds by sending requested web pages and other files back to the requester.

Self-Assessments

    Q-27: Which of the following languages should be supported by your IDE? (Select all that apply.)
  • HTML
  • Correct, HTML is the web page description.
  • CSS
  • Correct, CSS formats the HTML elements.
  • JavaScript
  • Correct, JavaScript allows programming logic to execute on the client.
  • GLSL
  • Correct, GLSL is the language for WebGL shaders.
  • Java
  • Incorrect, you will not be using Java.
Q-29: Q-28: What IDE will you be using for code development?

    Q-30: What server name will you use when you are testing your WebGL programs using your locally installed web server?
  • localhost
  • Correct, localhost evaluates to your local IP address.
  • webgl.com
  • Incorrect, a remote server will not be able to serve up files on your hard drive.
  • apache2
  • Incorrect, apache2 is the name of the program that is running the local web server, but it is not the server's name.
  • mylocalserver
  • Incorrect, this name has no predefined meaning.
Next Section - 2.2 - HTML and CSS