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

【问题标题】：Generating Heightmap from Image with GLSL Shader使用 GLSL 着色器从图像生成高度图
【发布时间】：2012-05-28 21:59:13
【问题描述】：

最近我一直在玩 webGl，偶然发现了一个很酷的小演示 here（来源 here），我想修改它稍微得到一些很酷的结果。

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

【问题讨论】：

标签： glsl shader webgl heightmap

【解决方案1】：

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

uniform float u_heightRange;
uniform sampler2D u_heightMap;

attribute vec2 a_texCoords;

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

还是我误解了你的问题？

【讨论】：

【解决方案2】：

我的hightmap MESH是用一个非常简单的算法从图像生成的，天真的方法是生成一个平面，它具有相同数量的上下顶点，然后在最小值和最大值之间进行插值y 使用图像的强度分量的边界值，但我不太确定您认为着色语言与此有什么关系。

你的意思是你想要一个来自 hightmap 的法线贴图？

【讨论】：