Week Four
Frames, Transformations and Rotation Sequences
Slides from class
Reading: Matrix Tutorial
Reading: Quaternion Tidbit
Reading: GFX Reference
Reading: GFX Source
Coding Assignment: Compose transformations by pushing and popping your matrix stack, or multiplying your frames together.
Many examples are below. For instance, you could create single mesh and then in your render function, you could iterate 100 times, changing the matrix stack each time:
var app = new GFX.App();
var mesh = new GFX.Mesh();
app.onInit = function(){
var vertices = [ /*...coordinates...*/ ];
var indices = [ /*...indices...*/ ];
mesh.load(vertices, indices);
}
app.onRender = function(){
var scene = this.scene;
scene.begin();
for (var i =0; i<100; ++i){
var t = i/100;
scene.matrix.push();
scene.translate(t,0,0)
scene.rotate(Math.PI*2*t,0,0,1);
scene.scale(t, t, t);
scene.draw(mesh);
scene.matrix.pop();
}
scene.end();
}
You could also experiment with relative transformations of frames. This is accomplished by multiplying frames together with the mult
method.
var app = new GFX.App();
var mesh = new GFX.Mesh();
app.onInit = function(){
var vertices = [ /*...coordinates...*/ ];
var indices = [ /*...indices...*/ ];
mesh.load(vertices, indices);
}
app.onRender = function(){
var scene = this.scene;
scene.begin();
var relFrame = new GFX.Frame();
var curFrame = new GFX.Frame();
relFrame.position.set(.1,0,0);
relFrame.orientation.setRotation(2*Math.PI/100,0,0,1);
relFrame.size.set(.99,.99,.99);
for (var i =0; i<100; ++i){
var t = i/100;
curFrame = curFrame.mult(relFrame);
mesh.frame = curFrame;
scene.draw(mesh);
}
scene.end();
}
Please review the following examples:
Matrix Stack-based Pushing and Popping (just using Scene’s Matrix Stack)
Graphics: https://rawgit.com/wolftype/200c/gh-pages/scratch/webgl_gfx_frame_stack.html
Code: https://github.com/wolftype/200c/blob/gh-pages/scratch/webgl_gfx_frame_stack.html
Target (LookAt) (just using Mesh’s local Frames)
Graphics:https://rawgit.com/wolftype/200c/gh-pages/scratch/webgl_gfx_frame_target.html
Code: https://github.com/wolftype/200c/blob/gh-pages/scratch/webgl_gfx_frame_target.html
Relative Frame Transformations (just using Mesh’s local Frames)
Graphics:https://rawgit.com/wolftype/200c/gh-pages/scratch/webgl_gfx_frame.html
Code: https://github.com/wolftype/200c/blob/gh-pages/scratch/webgl_gfx_frame.html
Interpolation Between Frames (just using Mesh’s local Frames)
Graphics: https://rawgit.com/wolftype/200c/gh-pages/scratch/webgl_gfx_frame_interp.html
Code: https://github.com/wolftype/200c/blob/gh-pages/scratch/webgl_gfx_frame_interp.html
Euler Angles (just using Mesh’s local Frames)
Graphics: https://rawgit.com/wolftype/200c/gh-pages/scratch/webgl_gfx_frame_rotation.html
Code: https://github.com/wolftype/200c/blob/gh-pages/scratch/webgl_gfx_frame_rotation.html