Question

最近我一直在玩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);
    }

Answer 1

好像你只是用高度贴图加载纹理并将上面的代码更改为

uniform float u_heightRange;
uniform sampler2D u_heightMap;

attribute vec2 a_texCoords;

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

或者我误解了你的问题？

Answer 2

我hightmap MESH 是从一个非常简单的algortihm图像生成的，天真的方式是生成一个平面，具有相同数量的椎体，然后在最小和最大之间插值使用图像的强度分量的边界值，我不太清楚你认为着色语言与它有什么关系。

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

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

2 个答案: