日本情報地質学会シンポジウム 2016 講演論文集, 23-45, 2016
i-Const./CIM 時代の地形・地質三次元モデリング

Web-GL による地形・地質情報の三次元可視化プログラムの開発
北 尾馨*Development of a program for three-dimensional visualizationof geological or geographical data with Web-GL
Kaoru Kitao**

合資会社キューブワークス CubeWorks Inc., 4-1, Mizukino-2chome, Moriya, Ibaraki 302-0121,
Japan. E-mail: kitao@cubeworks.co.jp

キーワード： 三次元可視化，Web-GL，Three.js，JavaScript
Key words : Three-dimensional visualization，Web-GL，Three.js，JavaScript

23

本日の話題
1. WebGL以前の三次元表示
2. WebGLの概要
3. JavaScriptライブラリ 「Three.js」
4. 開発したアプリケーションの紹介
5. その他事例紹介
6. デモンストレーション

講演者の仕様• ウェブシステム開発
JavaScript、PHP、MySQL、PostgreSQL他• 家族構成年老いた妻1、金のかかる子2、かわいい猫3。
• 経歴
地質で卒業、地質の会社でお世話になる。
その後職を転々として、ウェブ屋になる。
• 三次元に関する理解レベル
ひよこ

24三次元表示の歴史（1980年代後半頃から）

WebGL以前の三次元表示

三次元表示専用のリソース• 高価なハードウェア– 高速なプロセッサ（CPU：演算処理装置）– 高速なコプロセッサ（FPU、GPU等）– （いつの世も同じ）なるべく多くのメモリ–例Apple Ⅱfx、SGI社ワークステーション• 高価なソフトウェア–例Vision（現STRATA 3D）、Shade25

Macintosh Ⅱfx
Price
CPU
FPU
RAM

$9,000（¥1,377,000）〜
68030
68882
4MB（Max.128MB）

ビデオカード、モニタ別売り
ハード一式で¥2,000,000〜
愛称
wickedly fast（手に負えない速さ）

出典：Wikipedia

やがて• ハードウェアの高性能化・低価格化高性能化と低価格化により、誰でも三次元表示を体験できるハードウェアを比較的安価に購入可能となった（数十万円程度）。
• やや安価になったソフトウェア
数十万円程度の三次元表示のための専用ソフトウェアを別途購入。
• 各種規格化
OpenGLやDirectXなどの規格が登場し、三次元表示の敷居が低くなった。

26

WebGLの登場• OSに標準で付属するウェブブラウザが、ビデオカードの演算、描画を直接操作するための機能を実装。それが「WebGL」。
• 今、秋葉原でパソコンを買えば誰でも無償で三次元表示を始めることが出来る（数万円程度でOK）。
• もちろん専用の高価なソフトウェアも健在。

安価に三次元表示を可能にする技術

WebGLの概要

27

WebGL（Web Graphic Library）とは• ウェブブラウザで三次元コンピュータグラフィックスを表示させるための標準仕様。
• ビデオカードを直接操作する二次元・三次元表示用命令群（OpenGL）を、ウェブブラウザ上で動作するプログラム言語JavaScriptから操作して高速な描画を実現。
• 近年のパソコンの高性能化により、専用のハードウェアやソフトウェアを使わなくても三次元表示を可能にする究極（?）の技術。

WebGLで何が出来るか• 専用のソフトウェアやウェブブラウザのプラグインがなくても、インターネットを通じて、三次元のコンテンツを配信することが可能。
• 業務で三次元のコンテンツを納品する際、発注者の環境を考慮する必要がない（比較的新しいバージョンのウェブブラウザがあれば動作するため）。

28

WebGLの歴史• すべての原点はSGI（シリコングラフィックス）1980年前半
ワークステーション用ライブラリ「IRIS GL」• 「IRIS GL」から移植性の高い「Open GL」を開発
1992年以降
Apple、DELL、HP、Intel、NVIDIA等• ウェブブラウザ組み込みへの実験開始
2006年以降
Mozillaのプロトタイプ開発（後のWebGL）

WebGL対応の主要ブラウザ
PC• Edge、Internet Explorer 11以降
• Google Chrome 9以降• Mozilla Firefox 4以降• Safari 8以降
モバイル• Google Chrome for Android 30以降
• Mobile Safari 8以降

29

WindowsはDirectXじゃないの？
• WindowsのグラフィックAPIはDirectX。
• 心配無用、Windows版ウェブブラウザは、WebGLをDirectXに自動翻訳してくれる。
• とにかくWebGLを使えば、WindowsでもMacでもLinuxでも、ほとんどのOSのほとんどのウェブブラウザ上で動作する。

WebGLを簡単に扱うライブラリ

Three.js30

実際にWebGLを使う• WebGLはプログラム言語JavaScriptで操作直接WebGLのコマンドを書き進めることが出来る（但し若干難しい）。
• WebGLを簡単に扱うライブラリを使用
難しい部分を隠蔽（ライブラリが吸収）し、比較的、平易にプログラムを書くことが出来る。
ライブラリ「Three.js」を使う。

表示例

出典：Three.js同梱サンプル（geometry / terrain）

31

表示例

出典：Three.js同梱サンプル（material / envmaps）

表示例

出典：Three.js同梱サンプル（material / skin）

32

三次元描画に必要な要素• 仮想空間（入れ物）• 対象物の形状（座標）• 対象物表面の絵柄（質感）• 視点（位置と向き）• 光源（種類と位置と向き）

SceneGeometry
Material
CameraLight面を三角形で構成
頂点3つ（三角形）で1つの面を定義
複数の三角形で物体の表面を定義
頂点①、②、③、④①

三角形①②③、①③④、①④②、②④③④③②33

ライブラリに含まれるジオメトリ• Sphere• Box• Cylinder• Corn• Plane

球
箱（立方体、直方体）
角柱（円柱）
角錐（円錐）
平面

他にもたくさんtetrahedron、octaherdon、torus ・・・・・・

凹凸面（地面・地層面）を描く• PlaneBufferGeometryを使う。
• グリッド（格子）で座標を与えることで、凹凸のある面を表現、描画するためのジオメトリ。
任意の分割数と長さ
任意 の分割数と長さ34最も簡単な地形面描画の例• 描画エリアの定義
南北5km、東西5kmのエリア
南北1km毎、 東西1km毎 の標高6 x 6 = 36個の標高で地形面を三次元表示

サンプルデータ101105108

110

111

112

105

106

109

111

111

114

108

109

110

111

112

116

110

111

111

114

113

117

111

111

112

113

117

118

112

114

116

117

118

119

35

5m毎の等高線（フリーハンド）
101

105

108

110

111

112

105

106

109

111

111

114

108

109

110

111

112

116

110

111

111

114

113

117

111

111

112

113

117

118

112

114

116

117

118

119

サンプルデータの三次元表示例

左上隅

36

素朴な疑問• 表現できるのは平面上の起伏だけ？
• 切り立った崖は表現できるの？
• 横臥褶曲は表現できるの？

いろいろできます
各点において、Z座標（標高）だけでなく、平面座標（XY）を任意に設定することが可能。

[ 0, 5000, 101 ][ 0, 4000, 105 ]37

崖の三次元表示例

横臥褶曲の三次元表示例

38

地形・地質情報を汎用的に扱うための開発開発したアプリケーションの紹介地形・地質情報の三次元可視化• ライブラリを使っても敷居がやや高い
実際にはプログラムを書く必要あり。
• 3点セットで表示したい
– 柱状図
– 断面図
– 地表面および地層面• 柱状図、断面図、地表面および地層面を汎用的に描画するためのプログラムを開発。

39

プログラムの概要• プログラムはすべてJavaScriptで記述– ライブラリ「Three.js」を利用• 設定ファイルで描画対象・状態を変更– 地表面および地層面
– 柱状図
– 断面図
– 見る方向と位置（視点）• プログラムの知識最小限で利用可プログラム実行例（高架橋モデル）

出典：「CIM対応三次元地盤モデル構築」デモサイト

40

実装した機能• 自由に視点を変更（対象物の位置を操作）• 面の不透明度を変更• Z軸（鉛直）方向の倍率変更• 背景色の変更（黒と白）• Z軸（鉛直）リセット• 視点リセット

使用したジオメトリ• 平面、断面PlaneBufferGeometry• 柱状図
CylinderGeometry
CylinderGeometryは角柱を描くクラス。
柱状図は八角柱で表現。
表面に絵を貼り付ければ十分円柱に見える。

41

デモンストレーション

後ほど時間があれば。

その他事例紹介• 日本地球惑星科学連合2016年大会
浅部物理探査結果の3Dモデル化およびウェ
ブ3D表示
稲崎・北尾・青池・小河原– VRS-GNSS測位機能付きGPR– 非接触高周波表面波探査– 極浅層反射法探査– 高分解能電気探査42

正直最初は遠い世界の名前しか話だ
知らない
なんとか、うまいこと言って、やったことないこれで仕事断れないかなとれるの？
難しそう

表示例

土木研究所構内外周道路
路面、路床のコンター図、掘削孔写真、GPR探査断面
出典：物理探査（地面の下のイメージング技術）

43もう一つ事例紹介• 地表、地層面とボーリングを三次元で表現したい。
• 地表面は国土地理院の数値地図、ボーリングは業者から提供されたデータを使用。
• ボーリングの掘削孔が地表からかなり飛び出ている。
• 業者のデータ作成ミスが判明。

視覚的にデータの誤りを確認できた

課題と展望• Web-GLはまだ登場して間もない技術
Web-GLのためのライブラリもまだまだ機能不十分（頻繁に更新されている）。
• ウェブブラウザ上での操作は意外と難しい。
• 三次元表示が標準になる可能性が高い。
• PCへの追加インストール（ウェブブラウザプラグインやアプリケーション等）が不要なので、爆発的に普及する可能性あり。

44

デモンストレーション「CIM対応三次元地盤モデル構築」デモサイト
3次元浅部地盤構造モデルの構築と表示

ご静聴ありがとうございました

45