2.1 Everything the Terrain MP does

This MP is an extension of the Terrain MP; it should have all the inputs, algorithms, and operations of that MP.

2.2 Material entry

Add one more <input type="text" ...> in your HTML. Support three types of entry:

• Blank (value == '')

  Use the color $(1,1,1,0.3)$ and the non-texture shader program. This should also be the initial state of the program before the text has ever changed.

• # followed by 8 hexadecimal digits (/^#[0-9a-f]{8}$/i.test(value))

  Parse this as a hex color string: the first two hex digits are the red channel on a 0–255 scale, the next two green, then blue, then alpha. Use this with the non-texture shader program.

  The .substr(i,n) method extracts n characters from a string starting at index i. The built-in Number function can convert hex numbers to numeric values if the hex is preceded by 0x. Combining these, you might do something like blue = Number('0x' + value.substr(5,2)).

• Any string ending either .jpg or .png (/[.](jpg|png)$/.test(value))

  Treat this as the URL of an image. If the loading the image fails (which you can detect with img.addEventListener('error', callback)), use the color $(1,0,1,0)$ and the non-texture shader program. If it succeeds (which you can detect with img.addEventListener('load', callback)), send it as a texture to the GPU and use the with-texture shader program.

  We have a guide to using textures with example code.

Respond to changes in the text entry field as soon as they occur (i.e., without waiting for a button event). Do this by parsing the material test in a change event listener on the text entry input; leave the terrain generation on the click event listener you already have on the button input.

2.3 Two shader programs

Compile and link two different shader programs during setup, picking between them each frame based on the results of the last material entry change listener.

The non-texture shader program should use a uniform vec4 RGBA color and have both diffuse and specular light. The alpha channel in the color should be treated as a an amount of specular shine to add, not as opacity, and should not be copied into the output image. Instead, have the specular intensity (computed via either the Phong or Blinn-Phong model) by multiplied by $3\alpha$. In the real world light that is used to create a shine is not available to create diffuse light; simulate this by multiplying the diffuse intensity by $(1-\alpha)$.

The with-texture shader program should use a uniform sampler2D texture and in vec2 texture coordinate. It should have diffuse light only with the diffuse color coming from the texture, no specular light at all. You should modify your terrain generation to place a texture coordinate with every vertex, with (0,0) in one corner and (1,1) in the other. Because the non-texture shader will ignore attributes it doesn’t have an in variable for, you can use this same modified geometry for both shaders.