CPSC 424 Lab 2: WebGL

Due: Tue 9/16 at the start of lab

This lab introduces WebGL.

Successful completion of this lab means that you:

• can edit and view a WebGL program
• can create a basic WebGL program, including setting up vertex and fragment shaders and passing values from the JavaScript program to the shaders

Collaboration and Use of AI

This is an individual lab. You may get technical help from others, but the effort and ideas that go into producing solutions should be yours.

You may use AI as outlined in the Use of AI policy — Copilot's inline coding suggestions, explain, fix, review and comment features but not code generation from English prompts. Also:

• Attribution required: you must include a comment in your program indicicating what features you used and how often you used them.
• Maintain agency: always be diligent about maintaining agency with your coding and your understanding of the code and the underlying concepts — don't let Copilot become Autopilot!

Handin

Hand in your work by copying your ~/cs424/lab2 folder into your handin folder (/classes/cs424/handin/username, where username is your username).

Check that the result is that your files are contained in /classes/cs424/handin/username/lab2 — if not, fix it!

Preliminaries

Setup

Make sure that your lab2 and lib directories are named exactly like that and are at the same level in your workspace directory. This is important so that the relative path names used to access common files remain the same so your program doesn't break when you hand it in.

Provided Code

The lib directory you copied contains one file:

• webgl-utils.js contains some utility routines for setting up shader programs.

Reference

Your best reference sources are the slides from class (which pull out and organize the key points), the examples from class (which put all the pieces together), and the textbook.

VS Code

Web development requires a text editor (for writing code), a web browser (for testing code), and a local web server (in order for loading external files, such as image textures, to work). We will be using Visual Studio Code (VS Code) for editing and viewing WebGL programs and it provides most of these things (along with some useful development-related functionality), is free to download and use, and is available for Mac, Windows, and Linux.

VS Code is available on the Linux systems on campus — in Lansing 310, on the dual-boot computers in Demarest 002, and through the Linux VDI. Note: there is currently an issue with Live Preview on the Linux-boot computers (Lansing 310, Demarest 002) — for those systems, you'll need the workaround described below. Live Preview works fine in the VDI.

Setup

(Optional — come back to this later if you want to set it up) To use Copilot:

• Install the GitHub Copilot extension: go to View→Extensions or click on the Extensions icon on the left side of the VS Code window, then type "copilot" into the search box. The one you want is called "GitHub Copilot" and is from GitHub. Click on the "Install" button.

• Sign up for GitHub Copilot Free: click on the GitHub Copilot extension in the Extensions panel, then scroll through the information about the extension until you find the "Getting access to GitHub Copilot" section.

Using VS Code

Opening Folders and Files

While you can open individual files, it is more convenient to open the folder that contains your files instead. When opening a new folder for the first time, you may be asked if you trust the author of these files. You should in this case, but it is wise not to blindly run things you've downloaded if you aren't sure of the trustworthiness of the source.

Opening a folder will probably also open the Explorer sidebar, where you can browse the contents of the folder. If the Explorer sidebar doesn't open or gets lost at some point, you can open it with View→Explorer or click on the on the left side of the VS Code window

Create a new file with File→New File... This will prompt you for a filename, then open the Create File dialog for you to select what folder the file should go into.

From the Explorer sidebar, you can open a file for temporary viewing with a single click ("temporary" means the tab displaying the file contents will go away if you click on another file without making any changes) or for persistent viewing (it will stay open until closed) with a double-click or by dragging it onto an editor pane.

You can have multiple files open at once — they appear on separate tabs within an editor pane. If you want to view two (or more) things at the same time, you can reconfigure the current layout (and add, remove, or rearrange editor panes) with View→Editor Layout. Opening or creating a new file will add a tab for that file in the current editor pane. You can drag a file's tab to the title bar of another editor pane to change what pane it is in, or drag it into the main content area of a pane to either move the tab or create a new editor pane depending on where you drop it.

Command Palette

VS Code is extensible and only the core features appear on menus — additional functionality, as well as functionality provided by extensions, is accessed via the Command Palette. The Command Palette can be opened with View→Command Palette... or the keyboard shortcut ctrl-shift-P. You can then search for the desired command or browse the list. Recently-used commands will be at the top.

Editing Files

VS Code provides syntax highlighting, auto indentation, auto close (for tags, parens, brackets), suggested/auto completions, and various other helpful assists for writing code.

One additional feature to be aware of (and use!) is auto format — access via the Command Palette and search for Format Document or Format Selection, or use the keyboard shortcuts: ctrl-shift-I (format document) or ctrl-K ctrl-F (format selection). If there's no active selection, Format Selection will format the current line.

Live Preview

Live Preview shows you how a web browser would render your document, updating as you type. Once the extension has been installed, you can open a preview pane through the Command Palette (View→Command Palette or ctrl-shift-P) — search for "live preview" and select "Live Preview: Show Preview (Internal Browser)" — or by right-clicking on the file in the Explorer and choosing "Show Preview".

Live Preview updates as you edit the file, so you may want to close that tab once you've viewed your file.

Web Console

JavaScript error messages are usually displayed to the web console. From the Live Preview tab, click on the hamburger menu (three horizontal lines) in the upper right corner and choose "Open Devtools Pane". Click on the "Console" tab at the top of the devtools pane to see the web console.

In Firefox, click on the hamburger menu (three horizontal lines) in the upper right corner and choose More Tools→Web Developer Tools. Click on the "Console" tab at the top of the developr tools pane to see the web console.

Exercises

Note: No projection, viewing, or modeling transforms have been set up yet, so remember that you are working in clip coordinates — keep the coordinates for the triangles within the range -1 to 1.

More Vertices

Multiple Primitives

Technical notes:

• You can find the WebGL primitives listed (with illustrations) in the graphics pipeline slides from Friday 9/5.
• The RGB components for colors in WebGL are values 0-1 rather than values 0-255.

Modifying Shaders

The vertex shader in the provided hello-webgl.html takes (x,y,z) coordinates and a color for each vertex, allowing for multicolored primitives with any orientation in 3D. In this exercise, you'll modify the shader to only deal with flat (in the xy plane) single-color primitives. The end result of this exercise should be a program which draws a single-color triangle with coordinates (-0.9,-0.8), (0.9,-0.8), (0,0.9) in the z=0 plane. The choice of color is up to you.

Technical notes:

• In addition to the vector types vec2 and vec3, GLSL has types float and int for single values.
• See section 6.1.4 in the textbook for information on working with uniforms.

Multiple Primitives, One Buffer

In this exercise you'll extend the previous program to draw three flat triangles in different colors, however, all of the coordinates will be sent to the GPU at once instead of sending the coordinates for each triangle separately.

Technical notes:

• The beginning of section section A.3.2 in the textbook shows the syntax for creating a JavaScript array from a list of values.
• You can probably guess the syntax for a loop in JavaScript, but you can also find some examples in section A.3.1 in the textbook.