2

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

我对改变地形的生成方式很感兴趣。而不是分层 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);
    }
4

2 回答 2

3

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

uniform float u_heightRange;
uniform sampler2D u_heightMap;

attribute vec2 a_texCoords;

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

还是我误解了你的问题？

于 2012-05-29T05:04:22.053 回答
0

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

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

于 2012-05-28T22:07:21.277 回答