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

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

我对改变地形生成的方式感兴趣。不是将单纯形噪波的10个倍频程分层（位于simplex3d.shader中）：

编辑2:

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

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

---

I hightmap网格是通过一个非常简单的算法从图像生成的，最简单的方法是生成一个具有相同数量的顶点的平面，然后使用图像的强度分量在边界的最小和最大y值之间插值，我不太确定你认为着色语言与此有什么关系

---

你的意思是想从hightmap中获得法线贴图吗？

似乎你只需要在高度贴图中加载纹理，然后将上面的代码更改为

uniform float u_heightRange;
uniform sampler2D u_heightMap;

attribute vec2 a_texCoords;

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

---

还是我误解了你的问题？

谢谢你的回答。我接受了你的回答，环顾了一下四周，我相信这就是我想要的。然而，当我输入你上面描述的基本内容时，我只得到一个平面。我相信我是从我的高度图上正确采样的，但它没有正确显示。我现在使用的代码已经被编辑到我在底部的原始帖子中（很抱歉搞砸了，我只是想解决这个问题）：我会尝试只渲染你的高度图，以确保你得到的高度图是正确的。在顶点着色器过程中，执行以下操作（改变vec4 testColor；…testColor=vec4（h，0，0，1）；然后在片段着色器中，您还需要一个不同的vec4 testColor；…和…gl_FragColor=testColor；问题是，请确保您的纹理和uv坐标得到了考虑再次感谢您的回复。我试图只渲染高度高程，因为纹理在其他地方处理，这是我被追赶的原因。我在主要帖子中再次更新了我的代码，但我仍然只得到了一个平面。我相信现在我正确地处理了高度图和uv坐标，但我仍然没有得到结果，我很难在网上找到其他相关资源。我不确定我是否有意义。你需要验证你是否正确在着色器中实际获取heightmap纹理。最简单的方法是让着色器绘制heightmap纹理，而不是heightmap本身。（即，将其设为绘制四边形，但使用您的高度贴图纹理作为绘制时使用的颜色。如果您没有看到高度贴图纹理，则问题在于如何设置UV坐标或如何设置纹理。如果确实看到高度贴图纹理，则问题在于高度贴图计算。例如，我明白您的意思否哇！哈哈，这更有道理，我会试试看，看看我能得到什么。

uniform float u_heightRange;
uniform sampler2D u_heightMap;

attribute vec2 a_texCoords;

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