Web上における ボリュームデータの表示機構

Web上における
ボリュームデータの表示機構
ブレインアトラスアイディアソン
NIMG-PF ・産業技術総合研究所
松田圭司
Web上における
ボリュームデータ公開システム
• MRI画像を手軽、快適に見たい
• 3次元で位置を把握したい
• 多くの人と画像を共有したい
– 研究、教育に使用したい
Web上三次元データの表現 (日本)
• 日本大学医学部第一生理学教室
– サルの定位的MRI脳地図
Web上三次元データの表現(世界)
• The Whole Brain Atlas (Harvard MEDICAL SCHOOL)
• The Human Brain Atlas (MICHIGAN STATE UNIVERSITY)
• Brainmaps.org
要求仕様
•
•
•
•
•
標準座標を設定
任意の方向、スライスを閲覧できる
長さを測ることができる
情報の共有ができる
インストールが容易
– クライアント・サーバー共
現在Web上で公開しているもの
• NIMG-PF
• 霊長研CT画像データベース
• ショウジョウバエ能画像データベース
NeuroImaging-platform
京大霊長研CT画像データベース
• 霊長研
• CTデータベース画像
ショウジョウバエ脳画像データベース
• 共焦点レーザー顕微鏡画像
• Staff
– 東京大学 分子細胞生物学研究所
• 伊藤啓,四宮和範
– 京都大学 霊長類研究所
• 大石高生
– 産総研
• 松田圭司
• http://flybrain-ndb.iam.u-tokyo.ac.jp/
Web上で公開していたもの
• 脳画像データベース
インターフェース
•
•
•
•
•
•
•
•
基準点
カーソル移動(ボタン・マウス・テキスト)
画像回転反転
2d/3d切り替え
拡大・縮小
画像移動
方眼表示
比較
情報の共有
• URLによる位置指定
注釈
• 部位情報の提示
• 部位情報へのリンクの付与
• flydbによる例
異なる解像度の画像統合
• 解剖画像とfMRI画像
• 計測座標系による統合
MRI計測座標系
•
•
•
PS3.3-2001翻訳 医療におけるデジタル画像と通信(DICOM)巻3:情報オブジェクト定義PDF
x軸は患者の左手側へ増加する。y軸は患者の背面側に増加する。z軸は患者の頭に向って増加する(169p)
画像位置(0020,0032),画像方向(0020,0037)
Superior
Posterior
A n terio r
Z
Su p erio r
Rig h t
X
Y
Po sterio r
Right
Left
Lef t
In f erio r
Anterior
Inferior
機能拡張
• 異なる画像生成(jpg,bitmap)
• MIP(最大値投影法)
構成図
•im_ex.js
•ui_ex.js
ファイル名
•標準回転角
•原点
位置情報
画像
位置情報
色
HTML/Javascript
クライアント
インターネット
hdrinfo.php
g3d2info
g3d2img.php
g3d2jpg
i3d2xycolor.php
i3d2xycolor
Apache
機種依存プログラム
サーバ
ディレクトリ構成
/
index.php
css/
data/
ボリュームデータを格納
html/
img/
ボタン等に使用する画像データを格納
js/
ユーザインターフェースに使用するスクリプト
php/
サーバ側スクリプト
prog/bin
機種依存プログラム
注釈表示機構
各部位に着色
同一座標で3次元化
画像ボリュームデータ
カラータグボリュームデータ
色ー情報変換
座標
色情報読み出し
プログラム
httpd
色情報
Webブラウザ
Javascriptにより、色ー情報変換を行う
<!-- Color Map-->
UseShowComment=1;
c2cdata={date:"20090219",ex_no:"07",name:"C155nSybC6RDlsmoothr"};
c2c['dc1717']={text:'medulla',link:''};
c2c['3c29cc']={text:'accessory medulla',link:'http://www.aist.go.jp'};
c2c['29cc99']={text:'lobula',link:'http://www.aist.go.jp'};
c2c['7e7eff']={text:'lobula plate',link:'http://www.aist.go.jp'};
c2c['5e5ecc']={text:'calyx',link:'http://www.aist.go.jp'};
c2c['497716']={text:'accessory calyx',link:'http://www.aist.go.jp'};
画像表示にかかる時間短縮
リクエスト
Webブラウザ
httpd
画像生成
プログラム
データ読み込み
画像作成
1.データの読み込み
2.画像生成
3.画像転送
専用のデータフォーマットを作成
データの公開法(Windows)
• XAMPP install(EXEをダウンロード)
• Apache起動
• 公開用フォルダをC:¥xampp¥htdocsにドロッ
プ
データ追加法
• 連続bitmapファイルを用意
• Bitmapinfoファイルを記述
• bmp2g3d.exeによりボリュームデータ作成
– データを配置
• データアクセス用phpファイルを作成
– phpファイルを配置
• phpファイルへのリンクをcontents.htmlに作
成
Bitmapinfoファイル
• ピクセルの幅、高さ、画像厚み等を記述
%bitmapinformation
%filepath
2
%filename
Volume000
%threshold
20
%subjectname
foo
%date
20150716
%memo
LPS
%coordinate
original
%unit
-3
%grid
10
%width
1.0
%height
1.0
%depth
1.0
%ax
0.000000
%ay
0.000000
%az
0.000000
%ox_real
0
%oy_real
0
%oz_real
0
%filter
0
%bitmapfile
slice000.bmp
slice001.bmp
....
slice200.bmp
%bitmapfileend
DICOMの公開まで
• dca2bmp
– 同一パラメータでbitmapファイルへ、infoファイル
も同時に生成
• bmp2g3d
– ボリュームデータへ変換
座標の揃っている
連続画像データであれば
Webで任意に操作可能!