Notes for Assignment 3

The following are suggestions for how to implement Assignment #3:

  • Having the following variables makes it easier to implement the assignment:
    • Speed a scalar of the current speed of your tank. controlled by the Y mouse pos.
    • TankPosition the current position of your tank - a vector in x,y,z.
    • ViewDirection the vector for the direction your tank is looking.
    • ViewMatrix A useful 4x4 matrix for the current View Matrix
    • Pixels the pixel values for the texture to use as the height map. An array in size of 4*image.width*image.height. Data is in R,G,B,A bytes.
    You should choose good initial default values for these variables.

  • Implement a function to extract pixels from a texture.
  • Modify drawScene() function to set the View matrix from a common View Matrix variable.
  • Initialize key variables in the startup function of your program.
  • Your mouseDown handler should adjust a speed variable based on the change in the Y position of the mouse.
  • Your mouseDown handler should rotate a view direction vector based on changes in X position of the mouse.
  • Implement a function getTexHeight(x,z) that returns the height of the Terrain at the specified x,z position.
  • Implement a getTriNormal(x,z) that returns a normal for the given x,z coordinates.
  • Implement a function getViewMatrix that generates the correct view matrix giving view position, orientation and up vector. Us the speed, view direction, and Terrain Height and triangle normal to generate this view matrix. You can use the mat4.lookAt function to generate the View Matrix.

What Size Should You Make Your Terrain?

WebGL by default shows material best when you have it in a cube from -1 to 1 on all axis.

A good size for your Terrain would be 10km by 10km. When you are generating your Terrain Geometry you need to scale your terrain from 10km to fit into a -1 to 1 axis. The equation for this assuming you were dividing your grid by 256 on each axis is: 

// assuming X varies from 0 to 255 what is its coordinate mapped to -1 to 1.
// first calculate X position in kilometers
Vxpos = x*10.0/256.0;  // position of x in kilometers.
Vxpos = x/10.0 * 2.0 + -1.0 // now scale to -1 to 1 and then move to -1.0.
// now Vxpos is in World Coordinate units for WebGL.

What Size Should You Make Your Height.


In your vertex shader you need to adjust the height of your Terrain based on the texture map. If you Terrrain is 10km by 10km in size then a good top mountain height would be 2.5 kilometers or roughly 1 mile. Assuming that you have scaled your 10km by 10km terrain to fit into a -1 to 1 rectangle as described above you need to scale your height by the same amount. Except your maximum Y value is now 2.5 kms. The basic equation is as follows: 

// Assuming the Color value has been extracted from the texture and stored in vector
// variable vColor;
vColor = normalize(vColor);  // normalize size of color to unit vector.
vh = sqrt(vColor[0]*vColor[0] + vColor[1]*vColor[1] + vColor[2]*vColor[2]); get height
// now we scale the height to our defined range of 0 to 2.5 kms (0.25 
vh = vh*2.5; // now we have the height in kilometers.
vh = vh * 2.0/10.0; // remember 2.0 World Coordinate equals 10 Kms.

What Are Some Example Terrains?

The table below contains six terrains you can use to test your program. The first and last terrain images are the easiest to make work smoothly. The others are more challenging.