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

ハイトマップMESHは、非常に単純なアルゴリズムを使用して画像から生成されます。単純な方法は、上下に同じ数の頂点を持つ平面を生成し、境界の最小値と最大値の間を補間します。画像ですが、シェーディング言語がそれと何の関係があるとあなたが考えているかはよくわかりません.

ハイトマップから法線マップが欲しかったということですか？

于 2012-05-28T22:07:21.277 に答える