Lab3
In this lab, the goal is to become dexterous with shader programming,
be comfortable with handling multiple textures concurrently, and perform
multi-pass rendering. All functionality should be implemented in WebGL.
For this lab, please continue to use the same set up as lab2, only that the urls should now be [your-hash]/lab3/Step[1-6].
This lab should proceed in the following steps. Note: students in the graduate section must complete extra credit tasks as a regular
requirement.
- STEP1: put a 2D texture onto a cube (the same texture image for all faces of
the cube). Please use imagefiles/UT.png or imagefiles/Power-T.jpg. Feel free
to use either the textures provided or your own images as GL_RGB color textures.
Manually specify texture coordinates for each cube face. See the standard
WebGL wiki for the workflow to load textures. Please note the parameters are bit
outdated on the wiki. Get the current spec reference here.
- STEP2: render a sphere and use imagefiles/Power-T-transparent.png as GL_RGBA
texture. In your frag shader, discard all fragments with an opacity less than 0.1.
Implement basic Gouraud shading.
- STEP3: based on STEP2, treat the textures as providing the color for the diffuse
material component. Add in Phong illumination as the specular component, the specular
component should be in white color.
- STEP4: implement environment map (specifically cube map) in fragment shader.
A set of cube map textures is providded: imagefiles/neyland_cubemap.tar. You
should convert the image files as needed. You can find/use your own cube map
textures too. In the provided tar file, plate[1-4].bmp are the four sides.
plate[5-6].bmp are the "ceiling" and "floor" shots.
- STEP5 (extra credit): assemble more complex scenes and start to think of ways to apply
the graphical effects that you have implemented on a relatively complex scene.
Generous extra credits will be offered.
- STEP6 (extra credit): repeat Step 4 using 6 images rendered on the fly, as opposed to
using pre-generated textures. 25% bonus points.