Software Setup

Choosing a software stack for graphics is awkward these days. 30 years ago, you either wrote a renderer from scratch, which was a lot of work, or you bought a license for one that someone else wrote, like the Doom engine from id Software. 20 years ago, the industry was converging on two graphics libraries: Microsoft's Direct3D and the open standard OpenGL. 10 years ago the market started to fracture. Apple stopped updating OpenGL. The company directed graphics developers to use Metal, their propietary low-level graphics toolkit. The open standard Vulkan appeared as a competitor to Metal. At the same time, game engines like Unity and Unreal Engine became free for non-commercial users. These game engines handle more than just graphics, including physics, sound, asset management, and user interfaces. Today, there is no clear starting point for someone wanting to learn computer graphics.

Complicating things further is C++, which has been the language of choice for many years in game development and graphics research. Unlike many of its younger competitors, C++ code compiles down to the native machine code of the processor. It doesn't need to be translated to machine code at runtime like Java or C#. Additionally, it doesn't run an intermittent and unpredictable garbage collection routine to reclaim unused memory. Graphics developers need speed and predictability to render complex 3D scenes at interactive framerates, and C++ delivers. However, C++ is also a complex language, and it becomes more complex with each new version. If this course used C++, we'd have to spend a non-trivial amount of time learning it. Even worse, the graphical applications we'd develop would only run on the platform for which we compiled them.

Given the state of affairs of graphics and C++, we're going to deviate from the norm of computer graphics courses. Our platform for learning graphics will be the web. Targeting the web will be considerably easier than targeting C++, but we'll still need to install some software to write our renderers.

WebGL

The graphics library we will use is your web browser's implementation of WebGL2, an open standard for managing and drawing geometric models. Unlike Direct3D, which runs on Windows, and unlike OpenGL, which has been crippled on macOS, WebGL runs on all major operating systems, including mobile.

Your current web browser is almost certainly already capable of rendering WebGL2 applications. Test your browser to make sure. If the page doesn't work, update your browser to the latest version.

Git

Your code in this course will be under version control. You will store it in a Git repository that both you and your instructor can access. To see if you have Git installed, try running this command in your terminal:

git --version

git --version

If Git isn't found, install it.

Visual Studio Code

The official development environment for this course is Visual Studio Code. Install it, even if you prefer a different editor. The lab exercises in this course will be collaborative, and your team will use Visual Studio and its extensions to edit the code simultaneously from your individual computers.

Follow these steps to install the collaborative extensions:

Node.js

There was a time when you could write web applications with just plain HTML, JavaScript, and CSS. Those days are gone. Modern web applications require dependency management, support for browser differences, and a build system. Node.js is one such platform. Install and test it through the following steps:

WebGL runs in a web browser, so JavaScript seems like a fitting language in which to write graphics applications. However, JavaScript lacks static types—which means we don't discover errors until we actually run the code. For instance, this code seems reasonable, but it's got a subtle error:

"SHHH".toLowercase()

"SHHH".toLowercase()

If this code is in a conditional statement that rarely gets executed and the unit tests provide poor coverage, the error might not show itself until long after it is written. Since we plan on making many errors, we'd like to know about them as soon as possible. Enter TypeScript, which is JavaScript with type declarations. The TypeScript compiler will report immediately that there's no toLowercase method on the string type. It's toLowerCase.

Browsers don't run TypeScript. We must translate our checkable TypeScript into executable JavaScript using the TypeScript compiler.

Next we'll set up a Node.js project that uses TypeScript.