交通量オープンデータを3Dビジュアライズ&3Dプリント

Article

2016.3.5

本稿では、静岡市が提供するオープンデータのうち、
「主要交差点における交通量データ[ref]平成26年度静岡市主要交差点交通量調査結果[/ref]」を
Web上の3Dデータビジュアライズによるインタラクション、
および3Dプリントにより直感的に把握するWebアプリ、
「Shizuoka Traffic Landscape(STL)」を解説します。

本アプリは「シズオカアプリコンテスト[ref]静岡市オープンデータサイト登録データを活用したアプリコンテスト。2016年2月開催[/ref]」における
「オープンデータスマート活用賞[ref]静岡市オープンデータカタログサイト掲載のオープンデータを効果的に活用した作品が対象[/ref]」受賞作となります。

| 概要
時間帯・場所を選択すると、動的にその時間・場所の交通量データが
3Dビジュアライズされ、マウス操作で任意の視点に変更することができます。
主要交差点ごとの3Dデータは一般的な3Dプリント用のSTL形式で書き出し可能で、
任意の場所の(平均的な)交通量をリアルなジオラマとして楽しむことが可能です。

3Dデータ(ビジュアライズ・プリントデータどちらも)は、
本アプリ用に独自にモデリングしております
そのSTLデータは、オープンソースとして、誰でも自由に3Dプリントいただけます。

| 背景
静岡は古くから技術の国として栄え、多くの木造模型メーカーがありました。[ref]ダ・ヴィンチニュース『タミヤ、アオシマ…なぜ静岡はプラモ王国なのか？プラモデルのうんちくを語ろう』より。[/ref]
今や日本のプラモデルの出荷額90%と圧倒的なシェア[ref]静岡県公式ページ「プラモデルの出荷額日本一」より。[/ref]を占めています。
“静岡ホビーショー”の開催をはじめ関連イベントも多く、
“プラモデルの街”としての地位は確立できています。

その静岡のイメージおよび継承されている技術を拡張させ、
静岡を”世界一3Dプリントが盛んな街”としてリブランディングすべく、
静岡市のオープンデータを3Dプリント用のデータに変換することを考えました。

その3Dプリントデータに触れるためのきっかけとして、
Web上での3Dデータビジュアライズを作成しております。

| データ
アプリに使用している、交通量データは、「平成26年静岡市主要交差点交通量調査結果」となります。
このデータは、静岡市内の主要交差点における、1時間おきの、
2輪車、普通車、大型車が、どの方向からどの方向へ、どのくらいの数、交通したか、を集計したものとなります。

上記データを、各交差点の進行方向ごとにJSの配列形式に変換します。

また、各交差点において、今回のビジュアライズ用に任意に、
交差点の中心位置および交差点の幅、
交差点突入前のスタート位置・突入後のゴール位置の2段階に分けてデータを定義します。

| プログラミング・モデリング
アニメーションさせる際には、以下の手順を、各車両に適用します。
(1)まずは2輪車、普通車、大型車をその時間・交差点で発生する数だけ作成
(2)スタート位置の交差点方向に各車両を配置
(3)「各車両の現在地から交差点中心点」がある一定距離以内になるまでは、交差点中心点に近づけていく。
(4)もし、交差点中心点からある一定距離内になれば、「現在地と突入後のゴール位置」の差分を取り、
　ゴール位置にたどり着くまで移動。
(5)ゴール位置にたどり着いたらループ。(2)へ。

本アプリはThree.jsでプログラミングしております。
Three.jsは一般的な3Dデータ形式であるSTL形式をimportすることが可能です。
そこで、フリーの3DソフトであるBlenderを用いて
2輪車、普通車、大型車、各交差点をモデリングします。

ちなみに交差点はストリートビューで確認しながら、
各交差点においてランドマークとなるものをうまく用いながら、
できるだけシンプルにモデリングしていきます。

STLデータがモデリングできたら、下記のようにしてThree.jsに取り込みます。

var car_loader = new THREE.STLLoader();
car_loader.load( './car.stl', function ( geometry ) {
var car_material = new THREE.MeshBasicMaterial({
	color:"rgb(204, 153, 100)", 
	transparent:true,
	wireframe:true,
	opacity:0.4
});
		
car_mesh = new THREE.Mesh(geometry,car_material);
car_mesh.scale.set( 20, 20, 20 );

scene.add(car_mesh);