X3DのGeoElevationGridで山が浮き出る地球儀を描いてみる

先日、球面に地球画像のテクスチャをマッピングしてX3Dで地球儀を作ってみましたが、その際、本当は地球って球面じゃないのにな〜〜とは思っていたのですが

memomemokun.hateblo.jp

前回、富士山付近の立体地形図を国土地理院の標高データから描いてみた際、X3DにはGeoElevationGridなる、地球回転楕円体WGS84や地球の平均海面高（ジオイド）からの標高を指定して、本当は丸くない地球の形を再現するための表現方法が用意されているのを発見しましたので

memomemokun.hateblo.jp

以前使用しました、地球の山や海の標高・水深データETOPO1グローバル地形データセットのデータも加味し

memomemokun.hateblo.jp

早速、本当は丸くない地球儀をX3Dで描いてみました！

以下は、山や海底の凹凸は少々誇張しております。

なお、ETOPO1は地球全体で東西・南北に21601x10801（233,312,401個）の大きなメッシュデーターですので、

<type 'netCDF4._netCDF4.Dataset'>
root group (NETCDF3_CLASSIC data model, file format NETCDF3):
    Conventions: COARDS/CF-1.0
    title: ETOPO1_Bed_g_gmt4.grd
    GMT_version: 4.4.0
    node_offset: 0
    dimensions(sizes): x(21601), y(10801)
    variables(dimensions): float64 x(x), float64 y(y), int32 z(y,x)
    groups:

標高メッシュを縦横1/50の93,961個にデータをpythonで間引いてから今回は使用（フルスペックでも描けなくもないのですが標高メッシュを縦横1/10に間引いても12MBぐらいのデータになるもので）

from netCDF4 import Dataset
import numpy as np
etopo1 = Dataset('ETOPO1_Bed_g_gmt4.grd','r')

Z=etopo1.variables['z'][:]
Z=Z[::50,::50]
A = Z.flatten()
print ' '.join(['%d'% row for row in A])

上の地球儀を表示しているX3D込みのHTMLはこんな感じで

<html>
 <head>
 <title>GeoElevationEarth</title>
 <meta encoding="utf-8">
 <script src="http://x3dom.org/release/x3dom-full.js"></script>
 <link rel='stylesheet' type='text/css' href='http://www.x3dom.org/download/x3dom.css'>
 <style>
   #the_element { width: 100%; height: 100%; }
 </style>
 </head>
 <body>
   <x3d id='the_element'>
   <scene>
     <Group>
       <navigationInfo speed='1.0' type='ANY'></navigationInfo>
       <GeoViewpoint orientation='1.0 0.0 0.0 -1.57' position='38.0 138.0 18000000' ></GeoViewpoint>
      <Background skyColor='1.0 1.0 1.0'/> </Background>
      <transform DEF='Earth_Globe' >
        <Shape>
          <Appearance>
            <!-- <Material diffuseColor='0.75 0.75 0.75'> -->
            <ImageTexture url='1_Earth2.jpg'></ImageTexture>
         </Appearance>
         <GeoElevationGrid geoSystem='GD' ccw='true' creaseAngle='0.000001' geoGridOrigin='-90,-180,0' solid='false' xDimension='433' zDimension='217' xSpacing='0.8337' zSpacing='0.8333' yScale='30' height='-56 -56 -56 ... とここに93,961個の地球の標高・水深データを記述'/>
        <GeoElevationGrid>
       </Shape>
      </transform>
    </Group>

    <!-- 回転イベントの発生間隔　-->
    <timeSensor DEF='interval' cycleInterval='50' loop='true'>
    </timeSensor>

    <!-- 回転動作の定義　keyは、0～1の数字を分割し、動作の回数。　keyValueは、[x y z rad]でオブジェクトのx軸、y軸、z軸、回転角度　-->
    <orientationInterpolator DEF='interval_rotation' key='0 0.25 0.5 0.75 1' keyValue='0 0 1 0 0 0 1 1.571 0 0 1 3.142 0 0 1 4.712 0 0 1 6.283'></orientationInterpolator>

   <!-- オブジェクトのアニメーション化 -->
   <!-- 回転イベントの発生間隔　を　回転動作　にバインド　-->
   <ROUTE fromNode='interval' fromField='fraction_changed' toNode='interval_rotation' toField='set_fraction'></ROUTE>
   <!-- 回転動作　を　地球にバインド　-->
   <ROUTE fromNode='interval_rotation' fromField='value_changed' toNode='Earth_Globe' toField='set_rotation'></ROUTE>

   </scene>
 </x3d>
 </body>
 </html>