Description
Description
Your task will be to create a 3D scene, visualized using the WebGL drawing API, very similar to what was
requested of you for Programming Assignment #7. As before it will be your own responsibility to write
your own vertex/fragment shader pair(s), compile/link them into a “program”, define vertex attributes, send
them (via buffer objects) to the GPU, and establish the necessary transforms (lookAt, projection, etc) as
“uniforms”that are dispatched to the GPU.
The difference between this assignment and the previous one (#7) is that this week you will be required to
use texture mapping somewhere in your scene. Specifically, you should satisfy the following requirements
(some of which overlap with those of assignment #7):
Your scene should include at least one “polyhedral” object with multiple shaded (as opposed to be
drawn as “wireframe”, only by their edges) polygonal facets. Those will be typically be comprised of
triangles.
Your entire object cannot be all flat! (unless if you include several objects in your world, in
which case it’s ok for at least one of them to not be flat). We would like to be able to visually appreciate
that the Z-buffer visibility algorithm is actually working … “front facing” triangles/polygons, should hide
parts of the objects that are located behind them.
You should use at least one texture somewhere in your scene. It is perfectly fine to re-use some of the
textures that are included in the in-class examples (see the JSBin demos or the ones in the GitHub
repository from Week11).
In our in-class lecture, we discussed (verbally, for those that were present)
the process for serving an image texture through Flickr (these
(https://live.staticflickr.com/5564/30725680942_0c6e60a13f_o.jpg) are
(https://live.staticflickr.com/65535/50641871583_78566f4fbb_o.jpg) some
(https://live.staticflickr.com/5323/30998511026_c90053af9c_o.jpg) of
(https://live.staticflickr.com/5726/30206830053_87e9530b48_b.jpg)the
(https://live.staticflickr.com/65535/50642695166_9c28ba57e8_o.jpg) examples
(https://live.staticflickr.com/65535/50641908943_f6ebfef28d_o.jpg) from your instructor’s Flickr collection,
which area ready-to-use for you if you wish – those links are already of the right”type and size”- or you
can upload and use your own).
Expect to see a piazza posting soon with a verbal review of the process.
You should have a texture coordinate vertex attribute for your model (or whichever model in your
scene actually uses a texture), and correspondingly Sampler2D variables in your shaders.
Texture look-ups should occur in the fragment shader (as in our in-class examples), not in the vertex
shader.
CS 559 Programming assignment 8
At least one such texture should “wrap around” multiple triangles/polygons in your object. For example,
having the cube model from our in-class examples where each square face of the cube has a complete
copy of the texture image would not be appropriate; instead consider if the texture image was
stretched/wrapped around 4 square faces surrounding the cube.
You should have a textured model (or at least one of your models) that’s substantially different from the
cube model shown in class. A “minimally acceptable” possibility could be for example a “house” model,
with a cube as its main part, and a square-based pyramid as its roof (it would be nice in such case to
have a texture wrapping around the 4 triangles that make up the roof!).
You are not required to use MipMapping, but it is recommended.
The simplest way that you can use this texture to create a visual appearance is to use the color resulting
from the texture look-up as the “diffuse color” of the object, as in our early examples [JSBin]
(https://jsbin.com/zivofiw) . Note that, if you already used textures in your programming assignment #7, it
could very well be the case that your previous submission already satisfies the requirements of assignment
#8 as well! In this case (if you used textures that satisfy the above requirements) you can simply resubmit
the same, and obtain a “3”for this assignment as well!
But if you want to be more competitive and aim for a
higher grade, consider being more ambitious along the following lines:
Use multiple textures, and multiple objects with interesting shapes.
Use more “advanced”texture mapping effects. Decal textures and normal mapping would probably be
the easiest ones to attempt.
More advanced effects that use render-to-texture would also be very
welcome, but please consider that those can be significantly more difficult (but success will be
rewarded).
CS 559 Programming assignment 8
