bablon.jsで地形データを表示したい２

# はじめに
[bablon.jsで地形データを表示したい１](https://qiita.com/nobuyuki-ishii/items/67789127b8253cf24935)で地形の点群データをbabylon.jsで点群データとして表示しました。その続きで、点群データを面として表示します。

# リボン
面の作成は@dmystkさんがリボンを使っていたので、私もこれでやってみたい。複数個の点をつないで形状を作成します。

リボンで作る地形はこんなイメージ
![yama.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/45425/035a914a-b113-ba82-bfd3-5952f3e8c476.png)
babylon.jsリボンのドキュメント
https://doc.babylonjs.com/how_to/ribbon_tutorial

プログラムはこんな感じ。座標を２次元配列で生成して、`MeshBuilder.CreateRibbon`です。

```js
  // ribbon生成
  var path1 = [
    new BABYLON.Vector3(-1, 2, 0),
    new BABYLON.Vector3(0, 2, 0),
    new BABYLON.Vector3(1, 2, 0)
  ];
  var path2 = [
    new BABYLON.Vector3(-2, 1, 1),
    new BABYLON.Vector3(-1, 1, 1),
    new BABYLON.Vector3(0, 1, 1),
    new BABYLON.Vector3(1, 1, 1)
  ];
  var path3 = [
    new BABYLON.Vector3(-1, 0, 0),
    new BABYLON.Vector3(0, 0, 0),
    new BABYLON.Vector3(1, 0, 0),
    new BABYLON.Vector3(2, 0, 0)
  ];
  
  var ribbon = BABYLON.MeshBuilder.CreateRibbon("ribbon", {pathArray: [path1, path2, path3]}, scene);
```

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="js,result" data-user="nobuyuki-ishii" data-slug-hash="XWKbpQd" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="babylon.js CreateRibbon">
  <span>See the Pen <a href="https://codepen.io/nobuyuki-ishii/pen/XWKbpQd">
  babylon.js CreateRibbon</a> by nobuyuki ishii (<a href="https://codepen.io/nobuyuki-ishii">@nobuyuki-ishii</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

で、前回作成した点群データでリボンを作ると、、！？
![ribbon.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/45425/760a19c3-e7d7-e0bd-efc7-1a9c1801d9c2.png)
もとはこれなのですが、、
![pcs.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/45425/d970f6f7-8ca4-9650-674b-cf4184e8a00c.png)

# 点データの並び替え
リボンの作成は２次元配列の座標値をパラメータとするのですが、設定した順に線を結びます。近い点が結ばれる並びになっていなかったようです。国土地理院とか見ていますと、1mメッシュなどといって、決められた大きさの格子ごとにデータを扱うやり方があります。格子の中の複数個の点は、座標値の平均をとって、１コに変換します。

格子内の平均値を出すイメージ
![mesh3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/45425/f581a6ad-8a5c-0a4a-9852-16a1d2a8e538.png)

いい感じになりました。
![mesh.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/45425/6f3ca8fc-280f-04c1-c2d1-86d6b9695d2d.png)
http://141-lab.com/babylon/qiita/ribbon/1_100.html

点群と比べてみて
http://141-lab.com/babylon/qiita/pcs/1_100.html

# 気になったこと
## メッシュの大きさ
メッシュの大きさ（格子の大きさ）をどうするかで、形状が変わります。大きいと起伏が小さくなり、小さいとギザギザになり、いい感じになるポイントを調整しました。

メッシュサイズ大の場合
![big.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/45425/ba18310a-8288-0c85-06b0-2167810c4394.png)
http://141-lab.com/babylon/qiita/ribbon/big.html

メッシュサイズ小の場合
![small.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/45425/2070d00e-f87b-9e1b-abeb-e3318587af23.png)
http://141-lab.com/babylon/qiita/ribbon/small.html

## 列の方向
リボンの作成は２次元配列の座標値をパラメータとするのですが、設定した順に線を結びます。なので、縦（y)方向で配列を作るのと横（x）方向でデータを作るのとではできるものが異なる。この場合だと横（x）方向のデータにしたほうが綺麗でした。

縦（y）方向に配列を作った場合
![rev.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/45425/abb9cecb-0e19-ba02-d5c2-7fda2b750235.png)
http://141-lab.com/babylon/qiita/ribbon/rev.html

## 列の数
リボンの作成は２次元配列ですが、列の数が近いほうが綺麗になるようでした。この場合だと列数が20以下のものは削っています。これらも含めると、遠くをつながないといけないところがいびつになる。

列をすべて残した場合
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/45425/8d611240-ea22-f306-6649-7ac99ec7b3cc.png)
http://141-lab.com/babylon/qiita/ribbon/2.html

# 今後
dynamic terrainという地形描画の仕組みもあり、これについても理解したい。
https://doc.babylonjs.com/extensions/dynamic_terrain