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

Question

最近我一直在玩 webGl，我偶然发现了一个很酷的小演示 ​​ here (来源 here )我想稍微改变一下以获得一些很酷的结果。

我对改变地形的生成方式很感兴趣。而不是分层 10 个 Octave 音阶的单纯形噪声(位于 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);
    }

Answer 1

似乎您只需加载带有高度图的纹理并将上面的代码更改为

uniform float u_heightRange;
uniform sampler2D u_heightMap;

attribute vec2 a_texCoords;

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

还是我误解了你的问题？