View source for Project6SP15

=Project 6: Global Warming=

In this project you will need to render a terrain with GLSL shader programs.

This project is due on '''Friday, May 15th, 2015 at 1:00pm'''. You need to present your results in the CSE basement labs as usual, grading starts at 12:15pm. 
Please upload your source code including your shaders to the Ted system by 1pm. You do not need to upload any binaries, including textures, 3D models, etc.

The discussion for this project will be on '''Monday, May 11th''' in CSB 002 (note the room change due to construction).

The total score for this project is 100 points, plus 10 for extra credit.

It is widely believed that as a consequence of [http://en.wikipedia.org/wiki/Global_warming Global Warming] the sea level is going to rise. San Diego has many low lying areas, which would get severely affected even with a moderate increase of the sea level. There are web apps such as [http://www.floodmap.net this one], which can give you an idea of which areas will be affected, but they are not as interactive as they could be.

The goal of this project is to create a highly interactive 3D visualization tool to show the effects of different water levels on San Diego. You will have to load and render a [http://en.wikipedia.org/wiki/Heightmap height map] and allow the user to change the water level in real-time.

==1. Terrain==

In the first step you need to generate and display a 3D mesh out of [[Media:sd-terrain.ppm | this 2D height map image of San Diego]]. The image has a resolution of 1024*1024 pixels and covers an area of about 37*37 miles (60*60 kilometers). The image is in PPM format so that you can read it with your PPM reader from Project 5. The information in the red, green and blue channels is identical for each pixel - you can interpret any one of them as elevation. A gray value of zero translates to an elevation of zero (sea level), a value of 255 translates to an elevation of about 3,500 feet (1,000 meters).

The steps to generate the height map are as follows:

* Load the height map image and store the elevation data in an unsigned char array of size 1024*1024.
* Create a 1024*1024 array of vertex coordinates (Vector3). Populate the array as follows: the x and y coordinates should equal the array indices (Vector3[x][y].x = x, Vector3[x][y].y = y). The z value should be the corresponding value from the height map array (Vector3[x][y].z = heightmap[x][y]). Feel free to scale each of the values to a range more convenient for you. In a professional application one would decide on a physical unit for the vertex coordinates, for instance feet or meters.
* To render the height map, create a triangle mesh with 1023*1023*2 triangles, using the vertex array created above. Make yourself familiar with [http://en.wikipedia.org/wiki/Triangle_strip triangle strips] and use them to create the triangle mesh - this way it will render much faster than separate triangles.
* For the vertex colors, use the same gray values as in the PPM file with the height map. We will add color later.

'''Notes:'''
* [http://www.chadvernon.com/blog/resources/directx9/terrain-generation-with-a-heightmap/ The tutorial at this link] may be helpful for this part of the project.

<!--
- create tessellated rectangle, with triangle strips
- load height map into GPU as texture
- set up GLSL shaders
- pass uniform variable between 0 and 1 for elevation scale
- render triangles with shaders
- vertex shader: offset vertices based on elevation scale
- fragment shader: pick draw color based on elevation
- render sun with parabolic path: east to west over south end of terrain
- scalable elevation multiplier
- colors need to shift with sea level

==1. Add Per-Pixel Lighting (20 Points)==

The starter code in the Git repository has been updated with code templates for the integration of GLSL shaders.

Up until now, the spot light's outline on the surface of the 3D models has been rather fuzzy. Add per pixel lighting for the spot light to your application. To accomplish this, you need to add a vertex and a fragment shader to your application and enable them. In this project, you are free to copy-paste the shader code into your application from a source of your choice, for instance [http://www.lighthouse3d.com/tutorials/glsl-tutorial/spot-light-per-pixel/ Lighthouse3D]. You do not need to understand the shader code, just make it work.

Toggle this per-pixel lighting mode on and off with the 'p' key. When it is enabled, you do not need to render the effect of the point light, because this would require modifying the shader.

For Windows and Linux users, in order to use the OpenGL extensions for shaders, you should [https://www.opengl.org/sdk/libs/GLee/ download GLee] and add the glee.h and glee.c files to your project files, or tell the linker to link with the GLee library (glee.lib or glee.dll for Windows, or libglee.a/libglee.so for Linux). OSX users will not need GLee, as the OpenGL extensions are available by default. In case the GLee server is down, you can find the files [[Media:GLee5_4.zip | in this ZIP file.]]

'''Notes'''
* While most CSE lab computers do, some older computers or simpler graphics cards do not support GLSL. Be aware that this might be a problem with your personal computer.
* We provide a [[Media:shader-class.zip|sample shader class]] and [[Media:shaders.zip|three sample combinations of vertex and fragment shaders]] for you to familiarize yourself with GLSL shader programming more, if you find additional examples to the code on Lighthouse3D to be useful.
* The Lighthouse3D example assumes that your spot light is your first light (light #0), so if your spot light is actually light #1 you need to change that in the shader.

==3. Optional Project: Height Map (10 points)==

http://www.chadvernon.com/blog/resources/directx9/terrain-generation-with-a-heightmap/

Generate and display a 3D mesh out of a 2D height map image. Wikipedia has a great [http://en.wikipedia.org/wiki/Heightmap description of this topic]. Allow the user to interactively fly over the height map, similar to a simple flight simulator. You can use the height map image from the Wikipedia page, which you will also find below, or create your own with a paint program or another method of your choice. 

<center>
[[Image:Heightmap.png]]<br>
''Height map image from Wikipedia''
</center>

To get full credit you need to implement the following features:

* Load the height map image and create a 3D mesh out of it. You can either read the Wikipedia PNG image file with your own reader, or read [[Media:Heightmap.pgm|this PGM image file]] with [[pgm-loader.cpp|this piece of C code]]. Note that this code returns a one dimensional array, which you have to interpret as a two-dimensional array based on the width of the image. Add the mesh to your 3D viewer and allow switching to it with the 'F8' key ('F7' is for the soccer ball if you have it). ('''5 points''')

* Color the terrain polygons in blue (water), yellow (sand), green (grass), grey (rock) or white (snow), depending on their height. Feel free to add more colors as you see fit. ('''2 points''').

* Add support for an airplane flight mode, in which the user can use the cursor keys to rotate the camera left or right and tilt it up or down, and change the velocity of the flight ('-' for slower, '=' for faster) ('''3 points'''). 

If you use the Wikipedia height map, the resulting terrain should look similar to this, except that it needs to be colored as described above:

<center>
[[Image:Heightmap_rendered.png]]<br>
''3D terrain generated from height map''
</center>

-->