はじめに
- Google Map や Google Earthが登場したのは、2005年か2006年だったと思いますが、その時はすごい時代になったな、とびっくりしたのを覚えています。
- Google Map については、普段頻繁に使いますしAPIも使用したことはありますが、Google Earthの3D地球情報のほうは、見ているだけで自分で触ったことがありませんでした。
- WebGLも言葉を見かけたことがあるな程度で、いまいちわかっていませんでした。
WebGL(Web Graphics Library)：Webブラウザで3次元グラフィックス(3DCG)を高速に描画する技術仕様の一つ。
（参考）WebGL入門：https://ics.media/entry/2328/
3Dへの憧れから 3Dの地球の表示について色々調べてみました。
WebGLを簡単に扱えるようにしたJavaScriptのライブラリが、three.jsということですが、今回は、もっと簡単に地球を表示してみたいと思います。
WebGLを扱えるライブラリ：three.jsに関する参考情報は、以下のとおり
公式： https://threejs.org/
サンプル： https://threejs.org/examples/
おまけ：three.js を使用していて、UIがめちゃくちゃカッコイイと思うもの
https://mrdoob.com/lab/javascript/threejs/css3d/periodictable/
3Dの地球を表示してみる（WebGL Earth API）
WebGL Earth APIが、とても手軽にはじめられます。
http://examples.webglearth.com/
アニメーションやマーカーをいれる例もみることができるので、ここからスタートすることができます。Hello Worldからコピペして、そこからいろいろ変更などをしていくことが可能です。また、APIのリファレンスもみれます。毎回、思いますが、スタートするのにハードするが高くないというのは、とてもありがたいことです。
https://sites.google.com/site/webglearth/
<!DOCTYPE html>
<html lang="ja">
<head>
<title>WebGL Earth API: Hello World</title>
<meta charset="utf-8">
<style>
html, body {
padding: 0; margin: 0;
}
#earth_div {
top: 0; right: 0; bottom: 0; left: 0; position: absolute !important;
}
</style>
</head>
<body onload="initialize()">
<div id="earth_div"></div>
<script src="http://www.webglearth.com/v2/api.js"></script>
<script>
function initialize() {
var earth = new WE.map('earth_div');
WE.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
attribution: '© OpenStreetMap contributors'
}).addTo(earth);
}
</script>
</body>
</html>
おまけ：地図や地球を表示して便利な情報を提供するWEBサービスまとめ
調べていると、地図や地球を表示して便利な情報を提供するWEBサービス がいろいろ見つかりましたのでまとめておきます。
フライトレーダー
これはかなり有名です。スマホアプリをみたときは、すごいと思ったのと同時に、悪用されないの？と単純に思いました。
http://www.flightradar24.com/
Marine Traffic
飛行機の情報があれば、船舶情報もある。これをみてると、空も海も広いんだが、狭いんだがよくわからなくなります。
https://www.marinetraffic.com/ja/ais/home/centerx:139.7/centery:35.3/zoom:8
Travelscope
旅行に役立つ情報を地図上に表示して見ることができる。（ビザなしで旅行できる国、各国の人口など）
日本のパスポートだと、151カ国に、ビザなしorトラベルビザで旅行が可能。
https://www.markuslerner.com/travelscope/
Zoom Earth
ほぼリアルタイムの衛星画像を見ることができる。
https://zoom.earth
Blitzortung
カミナリが発生している場所を地図上で表示するサービス。アメリカの中西部とか竜巻・雷のイメージがあるけど、本当にそうなんだなぁと思える。
https://map.blitzortung.org
AstriaGraph
地球の周りに飛んでいる浮遊物（人工衛星・ロケットの破片などなど）がみれるサイト
http://astria.tacc.utexas.edu/AstriaGraph/
3D Solar System Simulator The sky live
太陽系にある惑星・小惑星の軌道や彗星を3Dシミュレーションできる。どの日付を見たいかを設定することも可能。
https://theskylive.com/3dsolarsystem
HE 3D Network Map
世界のインターネットBACKBONEをみることができる3Dマップ。アイコンをクリックすると情報を簡単にみることができる。
https://he.net/3d-map/
Keep Track (2024/10月追記)
地球の軌道上の人工衛星を確認することができる。どの国の衛星なのかがわかるのも面白いし、こんなのが一般人でもみれるのは本当にすごい。
参考URLによると、2024/9/6時点でアクティブな人工衛星は1万345基だそう。宇宙も狭い。
https://keeptrack.space/
