3D Transformation Matrices
Slides from class

Reading: gfx.js
Reading: Matrix Tutorial
Reading: LearnOpenGL: Hello Triangle
Reading: LearnOpenGL: Transformations
Reading: LearnOpenGL: Coordinate Systems

Coding Assignment: One, Two, Three, Mesh!

Use the 200c course code gfx.js (you may also use a different framework if you prefer), create a 3D object composed of 3D vector coordinates and 2D uv coordinates.

Here is what you will be filling out:

      <html>
      <script src = "http://rawgit.com/wolftype/200c/gh-pages/js/gfx.js"></script>
      
      var app = new GFX.App();

      app.onInit() = function(){
      //initialize GL objects and buffers
      }

      app.onRender() = function(){
      //drawing routines
      }

      <script id="gfxvert" type="text/glsl">
      //vertex shader code
      </script>

      <script id="gfxfrag" type="text/glsl">
      //fragment shader code
      </script>
      
      <body onload="app.start()">
      <canvas id="gfxcanvas" width="640" height="480"></canvas>
      </body>
      </html>

You can use this example as a starting point.

Your vertex shader will look something like this:

		attribute vec3 position;
		attribute vec2 uv;

		uniform mat4 model;
		uniform mat4 view;
		uniform mat4 projection;

		varying vec2 vuv;

		void main(){
			vuv = uv;
			gl_Position = projection * view * model * vec4(position,1.);
		}

And your fragment shader will use the varying vec2 vuv instead of gl_FragCoord.