Giter Club home page Giter Club logo

blueprint-map's Introduction

blueprint-map's People

Contributors

densyakun avatar

Watchers

 avatar  avatar

blueprint-map's Issues

地形にICO球を使用する

チャンクについて

blueprint-mapでは地形や地物をチャンクと呼ぶ単位で分割しています。

チャンクは球体を経緯度で分割したもので、
先に緯度で分割した後に、
その球帯 (spherical zone) を経度で分割しています。
赤道付近と極地付近のチャンクの面積の差が少なくなるよう、
経度方向の分割数は、緯度により異なり、
極地のチャンクである球冠の面積を1として、球冠と球帯の面積比で掛けて、丸めた値になっています。
つまり、ここで言う経緯度の範囲とは、チャンクの範囲を東西南北で表したものです。

地形と課題

データを分割する方法であるチャンクとは異なり、
赤道付近と極地付近の地形の頂点の密度の差が小さくなり、
かつ、UV球のように極地付近のメッシュが細長くならないよう、
地形にはICO球を使用し、

細分化回数が約52万のICO球を生成したあとに、経緯度の範囲でその頂点を絞り込む場合、
地形の生成処理に膨大な時間がかかってしまうため、

Three.jsのICO球であるIcosahedronGeometry.jsファイルのコードを書き換えて、
分割されたICO球を生成する際に、経緯度の範囲内のみ頂点を生成するよう、

2ヶ月ほど掛けて書いたコードが、正しく動作しなかったため、
地形にICO球を使用するのは後回しして、
地形にはUV球を使用するか、地形の実装を後回しにすることにしました。

後でUV球からICO球に移行するか、ICO球の地形を実装するために、
正しく動作しないコードを、231106ブランチにコミットしてあります。

そのブランチを修正して、正しく動作するようにして下さい。

231106ブランチと、そのコードの説明

Three.jsのIcosahedronGeometry.jsファイルを書き換えたものが、
lib/ClippedIcosahedronGeometry.ts、
Three.jsのPolyhedronGeometry.jsファイルを書き換えたものが、
lib/ClippedPolyhedronGeometry.tsになります。

経緯度の範囲で頂点を絞り込まない、
元のThree.jsのコードでは予め、IcosahedronGeometryで正十二面体の頂点と面を作成したあとに、
PolyhedronGeometryで分割して、頂点を中心からの距離が等しくなるように移動しています。

なお、PolyhedronGeometryでは指定した半径に合わせて頂点を移動する関係で、
IcosahedronGeometryでは正十二面体の大きさが異なることに注意してください。

Three.jsのIcosahedronGeometryでは、
極地に位置する頂点がなく、そのような面を分割するにはコードが複雑になるため、
blueprint-mapでは極地に頂点が来るように回転しています。

Three.jsのPolyhedronGeometryでは、
頂点を作成するfor文と、面を作成するfor文とで、繰り返し処理が二つに分かれていますが、
blueprint-mapでは一つにまとめています。

その繰り返し回数はICO球の細分化回数に比例するため、
経緯度の範囲に合わせて、
i(以下、col)とj(以下、row)の開始、終了値を求め、
繰り返し回数を少なくして、
必要な頂点を正しく生成することが課題です。

colの開始、終了値を、
経度の範囲から求めるには、
まずXZ平面上で、
原点を通る角度が経度の線と、
三角形のそれぞれ辺との交点を求め、
三角形の点から交点への距離と、
三角形の辺の長さの比から求めます。

緯度の範囲から求めるには、
まずXY平面上で、
緯度を通る線と大円の交点を求め、
その交点と原点を結ぶ線と、
三角形のそれぞれ辺との交点を求め、
三角形の点から交点への距離と、
三角形の辺の長さの比から求めます。

経度は西経と東経、緯度は南緯と北緯、
三角形の3つの辺からそれぞれ求めた交点と、
三角形の点の経緯度から、
colの範囲を絞り込んでいくことで、
colの開始、終了値を求めることができます。

ここでは、
colの開始、終了値を、
経度の範囲から求めていますが、

三角形の境界線付近などで、
三角形が消えてしまったり、
必要な頂点が生成されないことがあります。

以上のような問題がなく、課題を達成できるまでは、
正しく動作するかデバッグする必要があるため、
この行(ClippedPolyhedronGeometry.ts:294行目)では、
元のThree.jsのPolyhedronGeometryのコードで、
分割されたICO球を生成した後に、
頂点を経緯度の範囲で絞り込み、
その頂点の数と、新しいコードで生成した頂点を絞り込んだ、その頂点の数を比較して、
数が一致していれば正しく動作していることになります。

rowの開始、終了値を求めたり、
緯度の範囲からcolの開始、終了値を求めるのは後回しにしています。

課題を解決した後の予定

チャンクの範囲内に絞り込んだ頂点は、
それぞれのチャンクに格納する予定で、
面を共有する、隣接するチャンクの地形の頂点を参照する必要があり、
具体的な実装については未定です。

以上の課題があるため、
現在はUV球を使用して、後でICO球に移行することにしています。

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.