読者です 読者をやめる 読者になる 読者になる

S.F. Page

Programming,Music,etc...

Overpass APIとthree.jsで地図を3D表示

コード整理とrollupによるビルド環境をnpm(package.json)で作る

ここ2-3日WebGL2.0のコード整理を行い、コメント付けをしていた。さらにモジュール化を行った。 https://bl.ocks.org/sfpgmr/47c33ee5ac5199e126fa6a6b2f974f80 ブラウザ限定で考えるならば、もうimport/exportって大丈夫かな?と思ったけど動くのはSafariだ…

three.jsを使うのをやめWebGLで書き直すことにする。

ここまではthree.jsを使って実装してきた。 実際のところthree.jsを使うと、WebGLや行列、ベクトルは意識しなくても実装できるようになっている。ただシェーダーを直にいじるとか、低レベルな実装をする場合はthree.jsの内部構造も意識して実装しなくてはな…

THREE.ShaderMaterialによる改良版が一応完成に至る。- Overpass APIとthree.jsで地図を3D表示(7)

バグの発生 下の動画を見ていただくとわかると思うが、上面のテクスチャマップがうまくいかない問題が発生した。 この問題はテクスチャ番号として「3」を指定した時に発生する。テクスチャ番号0-2ではなぜか発生しない。 今一度、今回の取り組みを解説してお…

ShaderLib、ShaderChunk、UniformsLibを使ってTHREE.ShaderMaterialの実装を端折る - Overpass APIとthree.jsで地図を3D表示(6)

THREE.ShaderMaterialを試すための環境を作り、試す。 アイデアを実現するための検証環境を作って試行錯誤した。結果、所望の動作をさせることができた。テクスチャが伸縮することなく、ExtrudeBufferGeometryのamountに応じてテクスチャが貼り付けることが…

THREE.ShaderMaterialを使って諸問題の解決を試みようと思う - Overpass APIとthree.jsで地図を3D表示(5)

Open Street Mapの3D表示にチャレンジしている中で、表現的に一番気になるのはビルの高さに応じてうまくテクスチャが貼り付けられないことである。 これはthree.jsがuv座標に応じてテクスチャを伸縮してくれているからであるが、そのおかげで高いビルだと…

テクスチャ・マップを工夫して表示品質の向上と高速化を両立する - Overpass APIとthree.jsで地図を3D表示(4)

前回はジオメトリをまとめることによって表示の高速化を達成したが、そうするとマテリアルが1種類しか選べず、表示品質が劣化してしまった。 これを何とかして、高速化した状態を維持したまま、前々回の表示品質並みの表現ができるように工夫してみた結果が…

表示領域の拡大と高速化に取り組む - Overpass APIとthree.jsで地図を3D表示(3)

表示領域の拡大と高速化に取り組んでみた。 なんとか大阪環状線の周囲まで表示してみたかったので、コードをいろいろ改良してみた。 Overpass APIから受け取ったデータをthree.jsのメッシュに変換するところは処理は重いが、変換が終わればサクサク動くと思…

Overpass APIとthree.jsで地図を3D表示(2)

スカイボックスを追加し、ビルにテクスチャを貼り付けてみた。リアルとは言えないが、雰囲気は出てきた。 大きい範囲を描画しようとすると相当に処理が重い。最適化しないといかんかな。。まあでも縦スクロールシューティングではかなり狭い範囲を描画するの…

Overpass APIとthree.jsで地図を3D表示

下の記事のコードをベースに、OverPass APIとthree.jsを使って、建物を3D化して表示してみた。 qiita.com 表示してみた結果は以下の通り。 参考にしたコードは、建物の高さデータを利用していなかったので、利用するようにしたのと、高さデータがないものは…