Week Three
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.