Rendering shapes as triangle strips
We spent several lectures gradually developing the ability to model and transform and render multiple objects, with proper normals and U,V coordinates, with proper perspective, with every object shape passed to the GPU by a triangle strip. And now, at last, all of the pieces are in place. Whew! So far all of our objects are spheres (ellipsoids actually, when you use matrices to transform them), but other shapes will be coming soon. Also, we have not yet added all the plumbing needed for mapping texture images, so you can't yet make full use of U,V, but that will also be changing soon. Meanwhile, from the code base we have developed, which is included HERE, you can properly render multiple animated spheres or ellipsoids into the same WebGL canvas, giving each a position, scale and orientation, as well as a color. We are going to get more ambitious with this system in the second half of the semester. Meanwhile, I have a very easy homework assignment for you, which will be due Tuesday March 20. Starting with the code base I've given you, make your own scene consisting of various spheres or ellipsoids, preferably animated. It can be a snowman in winter, a poodle, a tree or forest, or anything else you can think of that you can make entirely out of spheres and/or ellipsoids. To draw the different spheres in the scene, you are going to need to use matrices to transform your triangleStrip, just as I do in the example code I've provided. Of course you can also set each sphere to its own color, as I do in my example code. For example, a snowman might have near-black eyes and a long carrot-red nose. For extra credit, feel free to go crazy with the shaders. Make fun procedural textures, create your own lighting, use noise function -- have fun with it.
|