Generating Heightmap from Image with GLSL Shader

Question

Lately I've been playing around with webGl and I stumbled across a cool little demo here (source here) that I'd like to alter slightly to get some cool results.

I'm interested in changing the way the terrain is generated. Instead of layering 10 octaves of simplex noise (located in simplex3d.shader):

float h = 0.0;
for(int i=0; i<10; i++){
        float factor = pow(2.0, float(i));
        h += snoise(vec3(uv*factor, delta*float(i+1)))/(pow(factor, 0.88)*10.0);
}

I'd like to be able to load a custom black&white height map image into the scene and generate the terrain from that. I'm fairly new to GLSL and I'm having trouble finding proper resources online and getting started here.

Any help would be greatly appreciated!

Edit:

vertex:
    attribute vec2 position;
    void main(){
        gl_Position = vec4(position, 0.0, 1.0);
    }

fragment:
    uniform vec2 viewport;
    uniform sampler2D u_heightmap;

    void main(){
    float scale = 0.5;
    float bias = 0.25;
    vec2 texCoord;

    // Get the height value and calculate the new texture coord.
    float h = scale * texture2D(u_heightmap, texCoord).r - bias;
    vec2 newTexCoord = h * viewport + texCoord;

    vec4 texColor = texture2D(u_heightmap, newTexCoord);

    gl_FragColor = texColor;
    }

EDIT 2:

vertex:
    attribute vec2 position;
    void main(){
        gl_Position = vec4(position, 0.0, 1.0);
    }

fragment:
    uniform sampler2D heightmap;
    uniform vec2 viewport;

    void main(){
    float scale = 1.0;
    float bias = 0.25;
    vec2 uv = gl_FragCoord.xy/viewport;

    float h = 0.0;

    h = scale * ((texture2D(heightmap, uv).r) - bias);
    clamp(h, 0.0, 1.0);
    gl_FragColor = vec4(0.0, h, 0.0, 1.0);
    }

Answer 1

Seems like you'd just load a texture with your height map and change the code above to

uniform float u_heightRange;
uniform sampler2D u_heightMap;

attribute vec2 a_texCoords;

...
float h = texture2D(u_heightMap, a_texCoords).r * u_heightRange;
...

or am I mis-understanding your question?

Answer 2

I hightmap MESH is genearated from an image with a very simple algortihm, the naive way is generate a flat plane that has the same number of vertecies accross and down, then interpolating between the min and max y values of a boundary using the intensity component of the image, I'm not quite sure what you think the shading language has to do with that though.

did you mean you wanted a normal map from a hightmap?