Course notes for October 23

Below are two examples of combining geometry with shaders. You can see how these were made by doing View Source in your browser (in Google Chrome, View Source is in the Developer tab of the View menu). Note that we are also using script file gl.js, so you should also download that file.

If you are feeling ambitious, feel free to make changes and improvements to script file gl.js.


Example 1: A sphere created with createParametric() and a box created with createCube(). The two objects use the same fs_phong shader, but with different parameters.
 
  Example 2: This shows how to make a simple procedural texture using the 2D texture parameter variable vUV.
 

Homework:

What I'm really looking for this week is for you to have fun, be creative, use this new expanded tool set to create your own original shapes and scenes, combining the following:

  • Animation, using the matrix package you've implemented;

  • Interesting geometric shapes, perhaps combining createParametric() with the knowledge of splines you gained from Prof. Zorin's lecture;

  • Interesting shader effects. For example, you might want to try 3D procedural texture (using shader variable uXYZ) with layered fog.

For any of the above, feel free to add variables to the vertex shader that I defined at the top of gl.js.

Since this framework allows you to put multiple WebGL canvases into the same HTML5 document, you might want to show multiple versions of a scene in the same doc, either to compare different techniques or to show a progression of some sort.

Also, if you spot any bugs or deficiencies in the code I'm distributing, please tell me so that I can fix them right away and get those fixes out to the class.