WebGLを使用して3D地形を作成しようとしています。私は地形のためのテクスチャとjpgを持って、高さの値（-1から1）を持つ別のjpgを持っています。WebGL - 高さマップを持つテクスチャ付き地形
さまざまなラッパーライブラリ（SpiderGLやThree.jsなど）を見てきましたが、わかりやすい例が見つからず、Three.jsのようなコードが書かれていません。どのようにそれを行うかを把握していない。
誰も私に良いチュートリアルや例を教えてもらえますか？
Three.js http://mrdoob.github.com/three.js/examples/webgl_geometry_terrain.htmlには、ほとんど私が望む一例があります。問題は山の色と高さの値をランダムに作成することです。私は2つの異なるイメージファイルからこれらの値を読みたい。
どのようなヘルプもうまくいくでしょう。私は考えることができる おかげ
二つの方法：
、あなたはthis SO question.
ほとんどの場合、オプション2はあなたにとってうまくいくでしょう。オプション1はレンダーしているものが地形のみの場合にのみ適しています。すべての標高データがシェーダだけで認識され、他のシーンオブジェクトを配置するための手段が必要になるからです。 – Chiguireitor
をチェックアウトすることができます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://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)
あなたのGLSLのスキルに応じて、あなたはあなたのテクスチャチャネルの1つにテクスチャを割り当て、GLSLの頂点シェーダを書くことができ、私はあなたがテクスチャを読み取るために、現代カードが必要と考えている（頂点シェーダで値を読み取りますP）
頂点シェーダでは、テクスチャから読み取った値に基づいて頂点のz値を変換します。
Babylon.jsはこれを非常に簡単に実装できます。あなたがで例を見ることができます： Heightmap Playground
あなたが衝突を扱うことができるように、彼らも、それをCannon.js物理エンジンを実装しました：Heightmap with collisions
注：こののようにそれを書くだけで大砲で動作します.js物理プラグイン、摩擦が働かない（0に設定する必要があります）。また、物理状態を設定する前に、メッシュ/詐称者の位置を設定してください。そうしないと、奇妙な動作が発生します。
JPEGは地形には最適なフォーマットではない可能性があります。そのため、JPEGアーティファクトは地形に微妙な隆起となり、見つからない可能性があります。 – izb