使用GLSL着色器从图像生成高度图

Question

最近我一直在尝试使用WebGL，偶然发现了一个很酷的小演示这里（源代码这里），我想稍微改动一下以得到一些很棒的效果。

我想要改变地形生成的方式。不是使用10个Simplex噪声层（位于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);
}

我希望能够加载自定义的黑白高度图像到场景中，并从中生成地形。我对GLSL还比较陌生，在网上找到合适的资源并开始工作时遇到了麻烦。

非常感谢任何帮助！

编辑：

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;
    }

编辑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);
    }

- Glynbeard

Answer 1

似乎你只需要加载一个纹理和高度图，并将上面的代码改为：

uniform float u_heightRange;
uniform sampler2D u_heightMap;

attribute vec2 a_texCoords;

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

或者我误解了你的问题？

- gman

Answer 2

我生成了一个高度图MESH，使用非常简单的算法从一张图片中生成，朴素的方法是生成一个平面，该平面在横向和纵向上具有相同数量的顶点，然后使用图像的强度分量在边界的最小和最大y值之间进行插值，不过我不太确定你认为着色语言与此有何关系。

你是不是想要从高度图生成法线贴图？

- awiebe