X3Dで立体地図を描いてみる。（Googleマップ3Dを自作するのも夢じゃない！？？）
前回、X3Dで球面に地球画像のテクスチャを重ねて超簡単に３D地球儀を作ってみましたが
調べてみるとX3Dで定義できる形状は多種多彩でElevationGridなるメッシュの高低（地図の場合だと標高や水深）を定義できる形状ノードを使用すると
X3DOM Scene Author API Documentation: Node: ElevationGrid
先日、Matplotlibで上高地、奥穂高付近の航空写真を立体写真地図にしてみましたが、
それより、はるかに簡単にWeb上で、しかも動く立体地図を作成出来ることが判明。
ElevationGrid ノード定義は以下の通り
<ElevationGrid attrib='x3dom.nodeTypes.X3DVertexAttributeNode' ccw='true' color='x3dom.nodeTypes.X3DColorNode' colorPerVertex='true' creaseAngle='0' height='[]' lit='true' metadata='X3DMetadataObject' normal='x3dom.nodeTypes.Normal' normalPerVertex='true' solid='true' texCoord='x3dom.nodeTypes.X3DTextureCoordinateNode' useGeoCache='true' xSpacing='1.0' zDimension='0' zSpacing='1.0' ></ElevationGrid>
ElevationGrid ノード
<ElevationGrid
creaseAngle スムーズシェーディングするときの限界角
ccw 頂点の順序が反時計回りか否か
solid 閉じた形状か否か
colorPerVertex 頂点ごとに色を与えるか否か
normalPerVertex 頂点ごとに法線を与えるか否か
color 各面／頂点の色
normal 各面／頂点の法線ベクトル
texCoord テクスチャの座標
xDimension x方向の格子点数
zDimension z方向の格子点数
xSpacing x方向の格子点間隔
zSpacing z方向の格子点間隔
height 格子点0の高さ, 格子点1の高さ, ..
></ElevationGrid>
先日、matplotlibで国土地理院標高タイルから等高線を描いてみた時の要領で
ズームレベル12の富士山周辺の国土地理院の標高タイルの標高データーを
http://cyberjapandata.gsi.go.jp/xyz/dem/12/3626/1617.txt
ElevationGridの標高値としてheightに指定してやると
<ElevationGrid creaseAngle='0.785' solid='false' xDimension='256' xSpacing='25' zDimension='256' zSpacing='25' height='1938.04 1948.95 1958.51.....
以下のような地形に応じた陰影を描いた地形図が表示されます。
なお上の画像はElevationGridノードのサーフェスマテリアルプロパティを
<Material diffuseColor='0.5 0.6 0.1'>として描いたものですが、前回地球儀を描いた時の要領で、形状の表面に上記の標高グリッドに対応した区画の国土地理院の航空・衛星写真の画像をImageTextureとして貼り付けてあげると
https://cyberjapandata.gsi.go.jp/xyz/ort/12/3626/1617.jpg
わずか12行ほどのX3Dコードを含むHTMLで超簡単に以下のような感じでWeb上でグリグリ動く地形図が描けてしまいます。
富士山真横から
富士山上空から
そして、なにより
Googleマップ3Dでは表示出来ない富士山真下からだってから富士山の全景を描くことも当然可能です。
X3Dコードを含むHTMLのコードは以下のような感じ
<html>
<head>
<title>tmFuji</title>
<script src="http://x3dom.org/release/x3dom-full.js"></script>
<link rel='stylesheet' type='text/css' href='http://www.x3dom.org/download/x3dom.css'>
</head>
<body'>
<x3d width='800px' height='600px'>
<scene>
<viewpoint orientation='128 3 0 -0.5' position='128 128 500'/> </viewpoint>
<Transform translation='256.0 256.0 0'>
<shape>
<appearance>
<ImageTexture url='https://cyberjapandata.gsi.go.jp/xyz/ort/12/3626/1617.jpg'>
</appearance>
<ElevationGrid creaseAngle='1.5' xDimension='256' xSpacing='25' zDimension='256' zSpacing='25' solid='FALSE' height='1938.04 1948.95 1958.51 1969.86 1975.26 1981.12 1990.39 2001.16 2010.65 2019.53 2024.47 2029.51 2041.63 2054.37 2065.76 2076.36 ... ここに256個x256個の標高値を記述
</ElevationGrid>
</shape>
</Transform>
</scene>
</x3d>
</body>
</html>
上のコードで描いてみたのがこちら。
まだ、ビューポイントの設定の仕方やロケーションの指定の仕方がわかってないので表示はイマイチですが（笑）
ということで、X3Dの技術をうまく取り入れながらWeb地図サイトを構築するとGoogleマップ3Dと同程度の表示能力を持った地図サイトを自作するのは、さほど難しいって感じじゃないって気がしました！！！
