13

WebGL を使用して 3D 地形を作成しようとしています。地形のテクスチャを含む jpg と、高さの値 (-1 から 1) を含む別の jpg があります。

さまざまなラッパー ライブラリ (SpiderGL や Three.js など) を調べましたが、適切な例が見つかりません。(Three.js のように) コードが文書化されておらず、わかりません。どうやってするの。

誰かが私に良いチュートリアルや例を教えてくれますか?

Three.js http://mrdoob.github.com/three.js/examples/webgl_geometry_terrain.htmlに例があり、これはほとんど私が欲しいものです。問題は、山の色と高さの値がランダムに作成されることです。これらの値を 2 つの異なる画像ファイルから読み取りたいと考えています。

どんな助けでも感謝します。ありがとう

4

5 に答える 5

13

GitHub でこの投稿をチェックしてください。

https://github.com/mrdoob/three.js/issues/1003

florianf によってリンクされた例は、これを行うのに役立ちました。

function getHeightData(img) {
    var canvas = document.createElement( 'canvas' );
    canvas.width = 128;
    canvas.height = 128;
    var context = canvas.getContext( '2d' );

    var size = 128 * 128, data = new Float32Array( size );

    context.drawImage(img,0,0);

    for ( var i = 0; i < size; i ++ ) {
        data[i] = 0
    }

    var imgd = context.getImageData(0, 0, 128, 128);
    var pix = imgd.data;

    var j=0;
    for (var i = 0, n = pix.length; i < n; i += (4)) {
        var all = pix[i]+pix[i+1]+pix[i+2];
        data[j++] = all/30;
    }

    return data;
}

デモ: http://oos.moxiecode.com/js_webgl/terrain/index.html

于 2012-05-09T11:13:18.990 に答える
5

私が考えることができる2つの方法：

  1. ランドスケープ頂点をフラットグリッドとして作成します。Vertex Texture Lookupsを使用して、ハイトマップをクエリし、各ポイントの高さ（おそらくYコンポーネント）を調整します。これはおそらく最も簡単な方法ですが、現時点ではブラウザによるサポートはあまり良くないと思います。（実際、例は見つかりません）
  2. 画像をロードしてキャンバスにレンダリングし、それを使用して高さの値を読み戻します。これに基づいて静的メッシュを作成します。シェーダーの作業が少ないため、これはおそらくレンダリングが高速になります。ただし、メッシュを構築するには、より多くのコードが必要です。

画像データの読み取りの例については、このSOの質問を確認してください。

于 2011-10-03T23:21:13.667 に答える
2

このトピックに関する私のブログ投稿に興味があるかもしれません: http://www.pheelicks.com/2014/03/rendering-large-terrains/

近くのフィールドだけでなく遠くのフィールドでも適切なレベルの詳細を取得できるように、地形ジオメトリを効率的に作成する方法に焦点を当てています。

ここで結果のデモを見ることができます: http://felixpalmer.github.io/lod-terrain/そしてすべてのコードは github にあります: https://github.com/felixpalmer/lod-terrain

地形にテクスチャを適用するには、フラグメント シェーダでテクスチャ ルックアップを実行し、空間内の位置をテクスチャ内の位置にマッピングする必要があります。例えば

vec2 st = vPosition.xy / 1024.0;
vec3 color = texture2D(uColorTexture, st)
于 2014-05-28T16:27:40.510 に答える
1

GLSL のスキルに応じて、GLSL 頂点シェーダーを作成し、テクスチャ チャネルの 1 つにテクスチャを割り当て、頂点シェーダーで値を読み取ることができます (頂点シェーダーでテクスチャを読み取るには最新のカードが必要だと思いますが、私の年齢を示すだけです：P）

頂点シェーダーで、テクスチャから読み取った値に基づいて頂点の z 値を変換します。

于 2014-07-22T17:58:34.837 に答える