Chapter 29

5-01: 遠くの丘 (Distant Hills)

ちょまど (千代田まどか)
ちょまど (千代田まどか)
2022.05.01に更新

このページの原文: https://doc.babylonjs.com/start/chap5/hills

⛰ 5-01: 遠くの丘 (Distant Hills)

村を谷に設置したいですね。

地面のメッシュ対し垂直方向の高さを加えることについて、
メッシュから丘を作成することも可能ですが、別の方法もあります👀

ハイトマップ (height map (高さマップ))

灰色の陰影を使用して地面の高さを決定するハイトマップ (height map (高さマップ)) を使用して実現できます。

白色のところがいちばん高いところで、黒色のところがいちばん低いところです。

height map

https://playground.babylonjs.com/#LQ4LI1

村の場合

今回、私たちの村にはこのハイトマップを使用します。

height map

この真ん中の大きな黒色のエリア (谷) が村を置くところになり、
その周りの白色の部分が丘になり、
灰色の部分は谷の外へと伸びていく道路になります。

この画像では、カメラを遠方に配置し、垂直方向の高さも調整しています (遠くから見てわかりやすくしています)。

const largeGround = BABYLON.MeshBuilder
    .CreateGroundFromHeightMap(
        "largeGround", 
        "ハイトマップのURL", 
        {
            width:150, 
            height:150, 
            subdivisions: 20, // 数値を大きくするほど描画が細かくなる
            minHeight:0, 
            maxHeight: 10
        }
    );

✂ オプション subdivisions プロパティについて

MeshBuilder.CreateGroundFromHeightMap のオプション subdivisions (分割) プロパティは、地面を 20×20= 400 に分割しています。
数が多いほど、高さの計算のためのグラデーションが細かくなります。

👀 subdivisions: 20 の場合

👀 subdivisions: 100 の場合

https://playground.babylonjs.com/#KBS9I5#39

✂ オプション minHeightmaxHeight プロパティについて

MeshBuilder.CreateGroundFromHeightMap のオプション minHeightmaxHeight の 2 つのプロパティは、

それぞれ黒い部分と白い部分の垂直方向の高さを決め、

灰色の部分はそれに応じてスケーリングされます

👀 maxHeight: 10 の場合

👀 maxHeight: 20 の場合

テクスチャ

通常の方法でテクスチャを追加できます。

const largeGroundMat = new BABYLON.StandardMaterial("largeGroundMat");
largeGroundMat.diffuseTexture = new BABYLON.Texture("https://assets.babylonjs.com/environments/valleygrass.png");

const largeGround = BABYLON.MeshBuilder
    .CreateGroundFromHeightMap(
        "largeGround", 
        "https://assets.babylonjs.com/environments/villageheightmap.png", 
        {width:150, height:150, subdivisions: 20, minHeight:0, maxHeight: 10}
    );
largeGround.material = largeGroundMat;

https://playground.babylonjs.com/#KBS9I5#40

🖼 地面のテクスチャ仕上げ

最後に、村の部分の地面に、より明瞭なテクスチャをはります。

(村以外のところ (遠くの丘とか) は引き延ばされたテクスチャで適当でもいいですが、村の部分の地面はきれいにしたい (ズームに耐えうる明瞭さにしたい) ので、村の部分だけ別テクスチャにして上から重ねます。)

// 村の地面をつくる
const groundMat = new BABYLON.StandardMaterial("groundMat");
groundMat.diffuseTexture = new BABYLON.Texture("url to ground texture");
groundMat.diffuseTexture.hasAlpha = true;

const ground = BABYLON.MeshBuilder.CreateGround("ground", {width:24, height:24});
ground.material = groundMat;

// 大きな地面 (全体の地面)
const largeGroundMat = new BABYLON.StandardMaterial("largeGroundMat");
largeGroundMat.diffuseTexture = new BABYLON.Texture("url to large ground texture");

const largeGround = BABYLON.MeshBuilder.CreateGroundFromHeightMap("largeGround", "url to heightmap", 
    {width:150, height:150, subdivisions: 20, minHeight:0, maxHeight: 4});
largeGround.material = largeGroundMat;
largeGround.position.y = -0.01;

ちなみに、この行

largeGround.position.y = -0.01;

は、ふたつの地面 (largeGroundground) が衝突して ちらつきを引き起こさないようにしているものです。

largeGround を隠して ground のみ表示したもの (Playground のインスペクタで確認)

↑ マウスでグリグリできます

https://playground.babylonjs.com/#KBS9I5#85

🏠 家を追加

https://playground.babylonjs.com/#KBS9I5#86

🚙 車を追加

車を追加し直しましたが、今回はただ村を通過するだけにします。

https://playground.babylonjs.com/#KBS9I5#87

☞ 次へ

もっと環境を良くするために、空を追加してみましょう

👀 参考

Creating Ground From a Height Map (ハイトマップから地面を生成する)

https://doc.babylonjs.com/divingDeeper/mesh/creation/set/ground_hmap