日本情報地質学会シンポジウム 2015, 講演論文集, 1-24, 2015
地形・地質三次元モデリングの最前線

標高タイルと Web 技術を用いた三次元可視化
芳 晴*

西 岡

Electronic delivery of the geological survey inopen data strategy
Yoshiharu Nishioka **産業技術総合研究所 AIST, Tsukuba Central 7, 1-1, Higashi 1, Tusukuba Ibaraki, Japan
E-mail: y-nishioka@aist.go.jp

キーワード：標高，3D，WebGL，地図，シームレス地質図
Key words : elevation, 3D, WebGl, map, Seamless Geological Map

1日本情報地質学会2015年度シンポジウム 東京

本日の内容

1. PNG標高タイル
2. WebGLによる3D

日本情報地質学会2015年度シンポジウム 東京

PNG標高タイル2

日本情報地質学会2015年度シンポジウム 東京

全国を網羅した標高データの現状
1.国土地理院10mメッシュ

2.5万分の1地形図の等高線に基づく

2.地理院タイル(標高タイル）

前項をタイル化
ズームレベル0～14
CSV（カンマ区切りテスト）形式

日本情報地質学会2015年度シンポジウム 東京

20万分の1日本シームレス地質図

20万分の1，Webで無料で利用可能
高速で直感的なインターフェイス

3日本情報地質学会2015年度シンポジウム 東京

基本的な技術地図タイル(ピラミッドタイル）

日本情報地質学会2015年度シンポジウム 東京

PNG標高タイルの例

4

日本情報地質学会2015年度シンポジウム 東京

PNG標高タイルとは
1.PNG標高タイルとは？
Webブラウザで利用するためのPNGを利用した標高タイルフォーマット
1.開発

シームレス地質情報研究グループ

2.目的

標高データの利用の高度化

3.協力

国土地理院地理空間情報部※西岡・長津(2015,情報地質, vol.26, no.4印刷中）

日本情報地質学会2015年度シンポジウム 東京

標高値から画素への変換手順

5日本情報地質学会2015年度シンポジウム 東京

PNG標高タイルの例
1.富士山(北緯36.3606, 東経138.7274) Z=9
i=77

タイル座標

X=453

(X, Y) = ( 453, 202 )j=45

タイル内座標(i, j) = ( 77, 45 )Y=202

この地点のピクセルの色
RGB = ( 5, 183, 167 )

標高は
h = R×256×256 + G×256 + B= 5×256×256 + 183×256 + 167= 374,695(cm) → 3746.95(m)※上記の値は説明用で，実際の値とは異なります

日本情報地質学会2015年度シンポジウム 東京

扱える標高の範囲
扱える標高の範囲は標高分解能により異なる
標高分解能が0.01mの場合-83,886.07m～+83,886.07mまでの範囲が表現可
能
エベレストやマリアナ海溝チャレンジャー海淵も表現できる6

日本情報地質学会2015年度シンポジウム 東京

各セルの値が示す標高の位置
1.北西端の格子線の交点の標高値を表す（中央の値や平均値ではない）

日本情報地質学会2015年度シンポジウム 東京

PNG標高タイルの利用システム
PNG標高タイルサービス

Web地図アプリケーション

Webページ表示

PNG標高タイル取得ブラウザ7

日本情報地質学会2015年度シンポジウム 東京

PNG標高タイルの長所
1.ファイルサイズが小さい

CSV → '3746.95m,'(9byte)
PNG → RGB (3byte)

2.クライアントでの処理が用意...基本的に画像ファイルの処理
3.視認性が良い... タイルやアプリ作成者が扱いやすい

日本情報地質学会2015年度シンポジウム 東京

PNG標高タイルの応用
1.地理座標が決まれば1つの高度が決まる
サーフェスモデルのあらゆるデータに応用可能
基盤深度
帯水層上面深度...

2.地理座標が決まれば1つの値が決まる様々なデータに応用可能
地球化学図
ブーゲー異常図...

8日本情報地質学会2015年度シンポジウム 東京

シームレス標高サービス(仮称）http://gsj-seamless.jp/labs/elev/
測地系

世界測地系(WGS84)

投影法

半径6378137m 真球メルカトール図法

タイル分割法地理院タイルのタイル分割法に準ずる

ズームレベル0～13

標高分解能1m，0.01m

ファイルフォーマッ
トPNG 24ビットRGBまたは8ビットインデックスカラー

データソース地理院タイル（標高）※サービス内容を検討するためのもので，永続的な提供を予定しておりません．

日本情報地質学会2015年度シンポジウム 東京

シームレス標高サービスのタイルの例

9日本情報地質学会2015年度シンポジウム 東京

シームレス標高サービスのその他のタイル

陰影タイル

法線タイル

段彩タイル

日本情報地質学会2015年度シンポジウム 東京

陰影タイルの例
・クライアントからのリクエスト時に動的に作成

http://gsj-seamless.jp/labs/elev/shaded/9/202/453.png

北西方向，仰角60度の光源(デフォルト）

http://gsj-seamless.jp/labs/elev/shaded/9/202/453.png?
azimuth=45&elevation=45

北東方向，仰角45度の光源
クエリーパラメータで指定

10日本情報地質学会2015年度シンポジウム 東京

段彩タイルの例
・クライアントからのリクエスト時に動的に作成
http://gsj-seamless.jp/labs/elev/tints/9/202/453.png

デフォルトの配色

http://gsj-seamless.jp/labs/elev/tints/9/202/453.png?
colors=50,0000cd,0,00bfbf,100,75c25d,200,e68080,500,ca9e4b,100
0,d6bb62,2000,b99a64,3000,dcdcdc,3800,ffffff

クエリーパラメータで，標高値と色のリストを指定

日本情報地質学会2015年度シンポジウム 東京

WebGLによる3D

11

日本情報地質学会2015年度シンポジウム 東京

3Dと言ってもいろいろ？
ウィキペディアから，
1.3D映像

3次元映像、3D立体視とも言う。
... 3D映画，ニンテンドー3DS

2.3次元コンピュータグラフィックス（3DCG）

3次元モデルをコンピュータのディスプレイ等に疑似的に実現した物。

http://www.oyonale.com/modeles.php?lang=en&amp;page=40

日本情報地質学会2015年度シンポジウム 東京

シームレス地質図3D
1.なるべく多くの方に使ってもらえるように

https://gbank.gsj.jp/seamless/cesium/

12日本情報地質学会2015年度シンポジウム 東京

新シームレス地質図3Dデモ
シームレス地質図ラボサイトで試験公開中
http://gsj-seamless.jp/labs/smap/2d3d/2d3d.html

日本情報地質学会2015年度シンポジウム 東京

新シームレス地質図3D
1.2015年12月公開予定（URLは変更なし）

https://gbank.gsj.jp/seamless/cesium/13日本情報地質学会2015年度シンポジウム 東京“深成岩”のみを表示

1.深成岩のみを表示

日本情報地質学会2015年度シンポジウム 東京

絞込み機能

14

日本情報地質学会2015年度シンポジウム 東京

新生代の堆積岩のみを表示

日本情報地質学会2015年度シンポジウム 東京

入力デバイス
1.ゲームパッド

1.Leap Motion

https://www.leapmotion.com/product/desktop
http://gaming.logicool.co.jp/ja-jp/product/f310-gamepad

15

日本情報地質学会2015年度シンポジウム 東京

ゲームパッドでの操作
左旋回
下段：高速

右旋回
下段：高速下降
水平移動
上昇

水平高速移動

機首上下

日本情報地質学会2015年度シンポジウム 東京

Leap Motionでの操作
指先の上下→機首の上下上へ
前進
左旋回
右旋回
後退

下へ

15cm
グー：停止
チョキ：リセット
https://developer.leapmotion.com/

16日本情報地質学会2015年度シンポジウム 東京

WebGLとは「インターネットブラウザをプレイステーションにしてしまう魔法の技術」(「少女と少年のための投稿型プログラミング情報ブログ」
http://wise9.jp/archives/6060より)
Webブラウザ上で3Dグラフィックを表示するための技術
HTML5と併用される
グラフィックハードウェアを直接操作するので高速に動作する

日本情報地質学会2015年度シンポジウム 東京

3D対応コンピュータの構造

Wise9,「WebGLとはなんなのか、ゲーム好きの大学生に説明してみる」より
http://wise9.jp/archives/6060

17

日本情報地質学会2015年度シンポジウム 東京

WebGLを使ったアプリケーション

WebGL による 3D 開発: 第 1 回 WebGL の紹介
IBM developerWorks
http://www.ibm.com/developerworks/jp/web/library/wa-webgl1/

日本情報地質学会2015年度シンポジウム 東京WebGLの利用
1.プラグインなしで利用可能
2.最新のWebブラウザはおおむね対応している
3.WebGLそのままでは使いにくいので，それを使いやすくするためのライブラリもいくつか公開されている
three.js
Cesium...

18

日本情報地質学会2015年度シンポジウム 東京

WebGL対応ブラウザ

Can I Use WebGL? http://caniuse.com/#feat=webgl

日本情報地質学会2015年度シンポジウム 東京

WebGLのサンプル
http://gsj-seamless.jp/webgl/cesium/1_HelloWorld.html

19日本情報地質学会2015年度シンポジウム 東京

WebGLの利用はかなり簡単<!DOCTYPE html><!-- Cesium-1.4 同梱のHelloWordl.htmlより --><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"><meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no"><title>Hello World!</title><script src="Cesium-1.10/Cesium.js"></script><style>@import url(Cesium-1.10/Widgets/widgets.css);
html, body, #cesiumContainer {width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;}</style></head><body><div id="cesiumContainer"></div><script>
var viewer = new Cesium.Viewer( 'cesiumContainer' );</script></body></html日本情報地質学会2015年度シンポジウム 東京

Cesiumとは1.WebGLを使ってデジタル地球儀を表示するライブラリ
2.http://cesiumjs.org/
3.AGIによって開発され，Apache 2.0ライセンスで公開されている

20

日本情報地質学会2015年度シンポジウム 東京

ソフトウェアの階層構造

日本情報地質学会2015年度シンポジウム 東京“S-map”とは？
1.シームレス地質図メインビューアのために開発した地図描画ライブラリ
2.実際の地図描画はLeafletやCesiumが行っていて，それらのラッパー．
3.S-mapのSはSeamless
SimpleSmart
Sophisticated
試験公開中！

21

日本情報地質学会2015年度シンポジウム 東京

S-map公開サイト(試験公開)
1.http://gsj-seamless.jp/labs/smap/doc/

日本情報地質学会2015年度シンポジウム 東京

傾斜量図テスター
http://gsj-seamless.jp/labs/elev/slope/slopetester.html

22日本情報地質学会2015年度シンポジウム 東京

エナジーコーンモデル(高速版)
G-EVER火山災害予測支援システム
http://g-ever1.org/quick/

日本情報地質学会2015年度シンポジウム 東京エナジーコーンの3D表示

WebGLライブラリ three.jsを使用

23

日本情報地質学会2015年度シンポジウム 東京

まとめ

日本情報地質学会2015年度シンポジウム 東京

まとめ

1.PNG標高タイルでサーフェスモデルが表現できます
2.WebGLを使えば3D Webアプリが簡単に作れます24