In this lab we will see how to create an animation loop in WebGL and use transformation functions to move our objects. For this lab, continue working with your random partner from Lab 6. Homework 6 will build on these two labs.
Finish Lab 6
If you have not done so already, finish Lab 6 to a point where you can see the pyramid. Use this code as a starting point for Lab 7. You are welcome to use the solution for Lab 6 from the course calendar.
Create the rendering loop
First, instead of our usual rendering function, we will use a rendering loop like the one shown below:
function render() {
// update scene: make changes here
// TO FILL IN
renderer.render(scene, camera);
requestAnimationFrame( render );
}
This will create a animation loop that will render the scene over and over again, with changes along the way.
Make the pyramid a global variable
Now, so that we can change the position of the pyramid in the rendering loop, make the declaration of the pyramid variable global at the top of your code (with the camera, scene, etc). The initialization of the pyramid should still be where it was before. This will allow us to change attributes of the pyramid inside the rendering loop.
Rotate the pyramid
Make sure that all three rotation angles are 0 to start. Inside the rendering loop, change the rotation of the pyramid along the x-axis, as shown below:
pyramid.rotation.x += 0.1;
Test this out to see the animation! Now change the "x" to "y", and try it again. Are the results what you expected? Now try "z". Which of these 3 axes have we been rotating around in 2D? You can also try combinations of two or three axes; experiment with adding .01 to x and .02 to y, for example.
Rotate the camera
Instead of rotating the pyramid, we could also rotate the camera (eye) to show a different perspective of the scene. Repeat Step 3 with the camera instead of the pyramid. Make sure the results make sense. Can you explain what you are seeing?
Experiments
If you finish the above exercises early, try translating the pyramid or the camera by changing the position.x (or .y or .z) of each object. This can give the effect of the observer (camera) moving closer or further from the scene in different directions. If you continually add a small constant amount to any one of these coordinates, the pyramid will eventually move out of the camera frame and become invisible. See if you can use a counter and an oscillating function like Math.sin() or Math.cos() to make the pyramid move back and forth within the frame. Can you make the oyramid move in a circle? (Hint: base the position of one axis on the sine of the counter value, and another on cosine of the counter value.)
Try also using the counter to change or alternate motions. For example, make a full circle in one direction, then reverse and go in the other.
Finally, you can experiment with the lookAt() method. Use it to point the pyramid in a desired direction.
Finish Up
Make sure that everyone you have been working with has a copy by the end of the lab. Homework 6 will continue the concepts we explored in this lab.