Short Course 1: Day 1 (March 19, 2019)

Objectives

Introduction to graphics pipeline & Abubu.js;
Introduction to drawing using vertex and fragment shaders and the GLSL language;
Introduction to textures and rendering to textures;
Using textures to plot computed data in Abubu.js;

Requirements

Personal computer/laptop

To get the most out of this course, it is strongly recommended that you follow this hands-on course on your personal computer.

Text editor

A simple text editor is essential to edit the codes in this class.

Some suggested free code editors for windows users

WinEdit
Notepad++
Atom
Sublime Text
Vim (my personal favorite with a steep learning curve :-D)

You can even use Notepad or Wordpad to edit the codes.

Some suggested code editors for macOS

Atom
Sublime Text
TextWrangler
Komodo Edit
Vim (my personal favorite with a steep learning curve :-D)
Mozilla Firefox web browser;
Minimal familiarity with computer programming;

A modern Web Browser

We need a modern web browser for this course. Mozilla Firefox is our browser of choice. We will NOT use Internet Explorer or Safari.

Familiarity with programming

Familiarity with JavaScript or C programming is desirable but is not necessary.

If you are interested in learning more about JavaScript programming, then w3schools is the perfect place to start.

Directory structure of the programs

Our sample programs all have the following directory structure.

The source codes that we will be editing are mostly main.js, vertShader.vert and compShader.frag.

Source codes to edit

Download the source codes from here!

After extracting, you will see a few sub-directories which are all numbered. We will start from directory 01, and as we go to the next directory we copy the content of the previous directory into the next one.

At any point, if you fall behind, you can pick up from the latest changes from the cheat sheet directory.