2.1 - Introduction to Languages and Tools

The purpose of these tutorials is to help you learn 3D computer graphics. However, you can’t really get started with WebGL without a basic understanding of HTML and CSS along with a comprehensive understanding of JavaScript. The next section of tutorials will get you “up to speed” on these preliminary skills.

Install the Tools

Please note: To avoid USAFA proxy and scanning issues, please get your installation files from the K:\DF\DFCS\CS474 folder. The files must be copied to your hard drive before installing.

A good integrated development environment (IDE) is an essential tool for developing software. PyCharm is the recommended IDE for these tutorials. Please download and install the Professional Edition of PyCharm now. Make sure you register the software using your usafa.edu email address to get the free, academic only, license.

To test your programs you must run a local web server on your computer. Many features of WebGL program 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. Please download and install the Apache2 web server now. If you already have XAMPP (Apache + MariaDB + PHP + Perl) installed, you already have everything you need.

Configure PyCharm

Please make the following configuration changes to PyCharm. All of the settings are in the File –> Settings dialog box.

  • Editor –> General –> Appearance: Enable “Show line numbers”.
  • Editor –> Code Style –> CSS: Set “Tab size”, “Indent” and “Continuation indent” all to 2 spaces.
  • Editor –> Code Style –> HTML: Set “Tab size”, “Indent” and “Continuation indent” all to 2 spaces.
  • Editor –> Code Style –> JavaScript: Set “Tab size”, “Indent” and “Continuation indent” all to 2 spaces.

Configure Apache2

You should run the Apache2 web server as a service.

Next Section - 2.2 - HTML and CSS