Assignment 2 - Modeling - (100 points)



Due Date: 9/22/2017 at 11:59pm

Objectives:



  • Use WebGL Shaders to render texture based Height Maps
  • Use Vertex Shaders to adjust height by a Texture
  • Add Mouse Control Handlers for scene interaction.

Height Maps



For this assignment, you will use WebGL to create a simple interactive view of a texture based height map.

  • You will create a terrain from a height field. Your program will read an image file to use as a texture to generate terrain.
  • You will use a modified Vertex Shader to adjust the Y values of a simple grid.
  • You will generate a basic rectangular grid from the loaded texture image.

The landscape should be lit by one WebGL distant light (simulating the sun or moon), and one ambient light (simulating bounce light and atmospheric scattering).

You should use WebGL's lighting functions to shade your scene. In order for the lighting to work correctly, you will need to compute normals as well as positions for each vertex you generate.

Grid Geometry - 25 points

Create a simple 100x100 point grid of simple triangles and quads. 100 points in the X direction, 100 points in the Z direction. Range should be from -1.0 to 1.0. Generate the Y coordinate for each point as a random value from -1.0 to 1.0. Generate a normal for each vertex for lighting using the Y coordinate as a simple vector [0,Y,0].

Add simple WebGL lights - direction and ambient. - 25 points.

Add two lights into the scene - a simple direction light shining white light from the top of the scene down towards terrain. Direction = [0.0,-1.0,0.0]; Add an ambient light in the scene at [0.0,2.0,0.0] with an intensity of 0.5 to generate diffuse lighting throughout the scene. Lighting should like nice as you have added quality calculated normals in the scene.

Use a texture as a height map - 25 points.

Using an image loaded as a texture apply the texture onto the geometry in the same way that you did in assignment one. Modify the vertex shader to adjust the Y value of the geometry by the loaded texture image. Also the grid should be the height and width of the loaded texture.

User Interaction - 25 points



You should add handlers for mouse clicks that let you interact with the geometry or terrain. Any simple interaction will be fine. For example left click zoom in, right click zoom out. The more advanced the implementation the more points. Full points will be awarded for rotation and zooming.

Strategy

Start with the web page for the first assignment textured cube. Modify the html one problem at a time and add in each of the required features. You can if you want submit an html file for each part of the assignment as you add in the key feature.

Extra Credit (15 points)



For extra credit, make your terrains as interesting looking as you can. Some things to try include color coding the terrain based on its elevation such white at high altitudes, brown or green at lower altitudes, or adding random perturbations to your triangles to give the terrain a rougher, more natural look. Points will be awarded based on creativity, effort, and appearance.

Submitting the Assignment



Required files



Please include the following files for submission.

  • HTML source code files
  • Javascript source files
  • A few screenshots of your output
  • Texture Files
  • README - This should be a text file (.txt) and should include your name, a list of the files being submitted, any awesome WebGL functions you discovered and used, which extra credit you implemented (if any) and anything you want to tell me about this assignment. Please mention the names of students you worked with or websites you used for this assignment.

Put all the required files for the assignment in a single directory, change to that directory and submit using the following command:

submit stevencutchin cs464 A2