Babylon.jsのチュートリアルをやってみるその21

これは

昨日に引き続きBabylon.jsのチュートリアルをやっていく記事です。
自分であとで思い返す用のメモでもあります。

今日の参照

doc.babylonjs.com

Height_Map

今日はHeight Map です。 なんだかイメージし切ってなかったのでunityのマニュアルを参照しました。

docs.unity3d.com

よさげな画像データが必要なようなので今回はサンプルを見ていきます。

www.babylonjs-playground.com

サンプルでは色々やってますが、Height Mapとして大事なのはこの部分。

// Ground
var groundMaterial = new BABYLON.StandardMaterial("ground", scene);
groundMaterial.diffuseTexture = new BABYLON.Texture("textures/earth.jpg", scene);

var ground = BABYLON.Mesh.CreateGroundFromHeightMap("ground", "textures/worldHeightMap.jpg", 200, 200, 250, 0, 10, scene, false);
ground.material = groundMaterial;

まずは地面用のマテリアルを作って、地球っぽいjpgをテクスチャとして設定。
次にHeight Mapを作成します。
事前にHeight Map用の画像を用意してあげる必要があります。
Height Map generator　で検索したらいい感じのが出てきそうでしたので、そちらを使うとよいと思います。
画像系のツールに慣れていればそれを使うのもあり。 ( 同一の画像でもそれっぽく作ってくれるっぽい。

                       //名前,マップ画像のURL,メッシュ幅,メッシュの高さ,細分割数,最小メッシュ,最大メッシュ,シーン,更新可能,successCallback
var ground = BABYLON.Mesh.CreateGroundFromHeightMap("ground", "worldHeightMap.jpg", 200, 200, 250, 0, 10, scene, false, successCallback);

たくさんパラメータがありますが、よりよい表現のために必要なパラメータとなります。
とくに細分割数は大きければ大きいほど負荷が高くなるものの、滑らかな表現が可能になります。

今回作ったのはこんな感じに。

今日はここまで
次はShadowsをやります。