In this MP you will make a copy of your Terrain MP that uses two different materials, picking between them by slope.
This MP is elective, with no core components. It assumes you have already completed the Terrain MP.
You will submit a webpage that has
Submit an HTML file and any number of js and glsl files. No image files, JSON files, or CSS files are permitted for this assignment. Do not include spaces in file names as the submission server does not process them well.
You are welcome to use a JavaScript math library, such as the one used in in-class examples or others you might know.
All specs from the Terrain MP apply to this MP too except as noted below.
Inside your fragment shader, use two different materials, one for shallow slopes and one for steep slopes. The boundary between these should be crisp, not gradual or fuzzy.
The steepness of the slope is proportional to the upward coordinate of the normalized surface normal. That will be 1 on flat areas, 0 on infinitely steep cliffs.
The shallow slope material should be
The steep slope material should be
As always, our WebGL2 dialect
applies. You’ll probably find the warp parallelism part
of the dialect a little frustrating as it means that your fragment
shader cannot include an if with the slope as part of the
condition. You’ll need to use expression-based conditions instead.
On both your development machine and when submitted to the submission server and then viewed by clicking the HTML link, the resulting page should initially be blank. Once the button is pressed a terrain should appear with a rotating camera, shiny green where flat and duller red where steep. One example might be the following: