gui (graphical user interface) ヒューマンメディア...

12
加藤 加藤 俊一 俊一 Toshi KATO Toshi KATO ヒューマンメディア工学 ヒューマンメディア工学 Human Media Engineering Human Media Engineering 情報環境 情報環境 ヒューマンインタフェースと ヒューマンインタフェースと 体感メディア技術 体感メディア技術 GUI GUI (Graphical User Interface) (Graphical User Interface) 計算機のユーザインタフェース 40年代: 電気配線+ランプ 50年代: 紙テープ + プリンタ 60年代: キーボード + キャラクタディスプレイ 入出力装置の「電子」化 70年代: キーボード + グラフィックディスプレイ 航空管制データのグラフ化・マップ化 GUI GUI (Graphical User Interface) (Graphical User Interface) 計算機のユーザインタフェース 80年代: キーボード + マウス + ビットマップ デスクトップメタファ 「実世界」のモデル化と投影 900010年代?: ビジュアルエージェント 執事メタファ 0010年代?: 実世界インタフェース 実世界メタファ Scientific Visualization Scientific Visualization コンピュータシミュレーションと可視化技術 70年代: データの2次元グラフ化 計測・記録されたデータの把握 80年代: コンピュータグラフィックス 物理法則に基づくシミュレーション 忠実に可視化(2次元) 90年代: ステレオ表示 可視化(2次元→3次元) 人為的ルール 00年代: どこに向かう? 現実世界の中で? Scientific Visualization Scientific Visualization 可視化技術 物理現象: 物理化学法則のシミュレーション(分子運動CG物理化学的な計測値AMEDAS論理・ルール: アルゴリズム(フローチャート、アニメ) 法律上の制約(建築基準法) 感性: 感性モデル(相関関係、モデルの対比) [課題1] [課題1] Scientific Visualization Scientific Visualization (ビデオ資料を見ながら) 可視化とはどういうことか? 不可視情報を可視化することによって、 大幅に理解が容易になり、 便利になると考えられるものを、 列挙してみよう。 その理由は?

Upload: others

Post on 19-Jun-2020

1 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: GUI (Graphical User Interface) ヒューマンメディア …kato/HM10/HM-8-handout.pdfユビキタス空間内での動作の検出 OpenCVを使った顔認識 OpenCV: インテルが開発・公開している

加藤加藤 俊一俊一

Toshi KATOToshi KATO

ヒューマンメディア工学ヒューマンメディア工学Human Media EngineeringHuman Media Engineering

情報環境情報環境ヒューマンインタフェースとヒューマンインタフェースと体感メディア技術体感メディア技術

GUI GUI (Graphical User Interface)(Graphical User Interface)

計算機のユーザインタフェース

40年代: 電気配線+ランプ

50年代: 紙テープ + プリンタ

60年代: キーボード + キャラクタディスプレイ入出力装置の「電子」化

70年代: キーボード + グラフィックディスプレイ航空管制データのグラフ化・マップ化

GUI GUI (Graphical User Interface)(Graphical User Interface)

計算機のユーザインタフェース

80年代: キーボード + マウス + ビットマップデスクトップメタファ「実世界」のモデル化と投影

90? 00? 10年代?: ビジュアルエージェント執事メタファ

00? 10年代?: 実世界インタフェース実世界メタファ

Scientific VisualizationScientific Visualizationコンピュータシミュレーションと可視化技術

70年代: データの2次元グラフ化計測・記録されたデータの把握

80年代: コンピュータグラフィックス物理法則に基づくシミュレーション忠実に可視化(2次元)

90年代: ステレオ表示可視化(2次元→3次元)人為的ルール

00年代: どこに向かう? 現実世界の中で?

Scientific VisualizationScientific Visualization可視化技術

物理現象:物理化学法則のシミュレーション(分子運動CG)物理化学的な計測値(AMEDAS)

論理・ルール:アルゴリズム(フローチャート、アニメ)

法律上の制約(建築基準法)

感性:感性モデル(相関関係、モデルの対比)

[課題1][課題1] Scientific VisualizationScientific Visualization

(ビデオ資料を見ながら)

可視化とはどういうことか?

不可視情報を可視化することによって、大幅に理解が容易になり、便利になると考えられるものを、列挙してみよう。

その理由は?

Page 2: GUI (Graphical User Interface) ヒューマンメディア …kato/HM10/HM-8-handout.pdfユビキタス空間内での動作の検出 OpenCVを使った顔認識 OpenCV: インテルが開発・公開している

(参考)不可視情報 そのほんの一例

(狭義) 目には見えない情報(広義) 人間が直接感じ取ることが難しい情報

赤外線・紫外線・電波小さすぎるもの(原子・分子)、大きすぎるもの(天体・宇宙)表面に現れてないもの(皮下、内臓、骨格;地下;水中)振動、超音波(高周波)・低周波流れ(水、空気;交通;情報)温度・湿度の分布早すぎるもの(化学反応)、遅すぎるもの(成長)危険、安全健康状態、体力、疲労エネルギー学習、知識感情、感性

VR: Virtual Reality VR: Virtual Reality (仮想現実)(仮想現実)

virtual (adj)〔限定〕(名目上はそうではないが)実質上の、事実上の、実際上のvirtual memory(仮想記憶)

〔光学〕虚の、仮の

注意: vain (adj) 〔「カラの、実質のない」が原義〕 むなしい、中身のない;つまらない、価値のない; 虚栄心の強い、うぬぼれの強い Vanity Fair(虚栄の市)

VR: Virtual Reality VR: Virtual Reality (仮想現実)(仮想現実)

Virtual Reality人間の五感(視覚、聴覚、触覚+味覚、嗅覚)である感覚器官に知覚させるための技術

物理法則やルールに基づいた「世界」の構築× Animated cartoon physics計算機内に現実世界を「模擬」 「投影」

参考: CG: Computer Graphics主として視覚情報

次世代のCGをVRだと言う人もいる。

Virtual RealityVirtual Realityの基本的な要件(1)の基本的な要件(1)

没入感 immersion, immersive:全感覚(現状は視聴覚)で感じる外界が、すべて計算機制御された空間

Cf. 計算機制御された空間を、全感覚(現状は視聴覚)を通して知覚

質感e.g. 高精細・高品位

Virtual RealityVirtual Realityの基本的な要件(2)の基本的な要件(2)

インタラクティブ性 interactivity:人間が対象・状況に働きかけられる

Cf. 特定の対象を選び出して

Cf. 対象群のおかれている状況に対して

対象・状況が人間に働きかけられるCf. 常時モニタ可能

Virtual RealityVirtual Realityの基本的な要件(3)の基本的な要件(3)

リアルタイム性 real-time:(相互)作用した結果を直ちに反映

Cf. (相互)作用の高速な計算

Cf. 計算結果の高速な可視化(可感化)

現実の世界と同じ時間スケールで再現Cf. 現実の世界と同じ空間スケールで再現

Cf. 現実の世界と同じ刺激スケールで再現

Page 3: GUI (Graphical User Interface) ヒューマンメディア …kato/HM10/HM-8-handout.pdfユビキタス空間内での動作の検出 OpenCVを使った顔認識 OpenCV: インテルが開発・公開している

初期の初期のVRVRシステムシステム (VPL)(VPL)

データグローブ

ヘッドマウントディスプレイ

立体視立体視

奥行きの知覚

筋肉: 水晶体(レンズ厚)、両眼の輻輳角

画像: 両眼視差、運動視差

画像: 陰影、テクスチャなど

ランダムドットステレオグラム

遠近法

ネッカーのキューブ

立体視立体視

両眼視差(人間)

左目・右目の距離×輻輳角→距離(と大きさ)

立体視立体視

視差をつけた撮影(機械)

左目・右目の距離×輻輳角→距離(と大きさ) を再現する感じさせる

[実験1][実験1]立体視立体視

視差をつけた画像の計算・生成(CG)

左目画像 右目画像

[実験2][実験2]立体視立体視

運動視差による奥行きの知覚

Page 4: GUI (Graphical User Interface) ヒューマンメディア …kato/HM10/HM-8-handout.pdfユビキタス空間内での動作の検出 OpenCVを使った顔認識 OpenCV: インテルが開発・公開している

[実験3][実験3]奥行きと遠近感奥行きと遠近感

ポンゾの錯視

奥行き知覚は「視差」だけではない

立体視立体視

コンピュータビジョン

カメラの輻輳角

対応点マッチング

テクスチャ解析

立体視立体視

バーチャルリアリティ

両眼交互刺激

刺激の限界提示時間(上限)と解像度(密)

両眼同時刺激

解像度(粗)

バーチャルリアリティバーチャルリアリティ

両眼交互刺激

限界提示時間(上限)解像度(密)

液晶シャッター

偏光メガネ

赤青メガネ(モノクロ)

Head Mounted DisplayHead Mounted Display 時分割表示+液晶シャッターメガネ時分割表示+液晶シャッターメガネ

Page 5: GUI (Graphical User Interface) ヒューマンメディア …kato/HM10/HM-8-handout.pdfユビキタス空間内での動作の検出 OpenCVを使った顔認識 OpenCV: インテルが開発・公開している

(参考)3Dテレビの方式(アクティブシャッター)

http://av.watch.impress.co.jp/docs/news/20100209_347880.html

(参考)パナソニックの工夫

(参考)3D映画

たくさんの方式があります。詳しくは、画像処理システム論(後期)で!

上映方式

RealDXpanDDolby 3DIMAX Digial 3D

3D方式

•アナグリフ方式

•干渉フィルター方式

•直線偏光フィルター方式

•円偏光フィルター方式

•液晶シャッター方式(アクティブシャッター)

偏光スクリーン+偏光メガネ偏光スクリーン+偏光メガネ

CAVECAVE(多面ディスプレイ)(多面ディスプレイ) WALLWALL(大画面)(大画面)

++Head TrackingHead Tracking

Page 6: GUI (Graphical User Interface) ヒューマンメディア …kato/HM10/HM-8-handout.pdfユビキタス空間内での動作の検出 OpenCVを使った顔認識 OpenCV: インテルが開発・公開している

広視野角ディスプレイ

全天周・広視野角ディスプレイ

コンテンツ(大画面・遠景)を工夫すれば「奥行き」を感じる

視差を与えれば「立体感」を感じる

+ ビデオ資料

裸眼立体視の仕組み裸眼立体視の仕組み

レンティキュラーレンズによる両眼同時刺激

空間解像度(粗)

裸眼立体ディスプレイ裸眼立体ディスプレイ((WoWWoW))

裸眼立体ディスプレイ裸眼立体ディスプレイ((SynthagramSynthagram)) 球状裸眼立体視ディスプレイ球状裸眼立体視ディスプレイ((prospectaprospecta))

Page 7: GUI (Graphical User Interface) ヒューマンメディア …kato/HM10/HM-8-handout.pdfユビキタス空間内での動作の検出 OpenCVを使った顔認識 OpenCV: インテルが開発・公開している

SeeSee--through type Head Mounted Displaythrough type Head Mounted Display(透過型(透過型HMDHMD))

SeeSee--through type Head Mounted Displaythrough type Head Mounted Display(透過型(透過型HMDHMD))

力覚ディスプレイ(力覚ディスプレイ(PhantomPhantom)) 力覚(加速度)+視覚

Virtual Reality Ride (Simulation Ride)

力覚(加速度)+視覚

加速度感(スピード感)と視覚のマルチモーダル性

嗅覚ディスプレイ嗅覚ディスプレイ

Page 8: GUI (Graphical User Interface) ヒューマンメディア …kato/HM10/HM-8-handout.pdfユビキタス空間内での動作の検出 OpenCVを使った顔認識 OpenCV: インテルが開発・公開している

VR: Virtual Reality VR: Virtual Reality (仮想現実)(仮想現実)

Virtual Realityを利用した入力・操作

利用者→システム

計算機内部に構成された仮想世界に「働きかけ」

視覚: アイカメラ(視線)聴覚: 音声触覚: 力の向き・強さ、

位置(Data Glove, Data Suit, 磁気センサ)、速度(加速度)

データグローブ&データスーツデータグローブ&データスーツ

Motion CaptureMotion Capture(1)(1) Motion CaptureMotion Capture(2)(2)

Motion CaptureMotion Capture(3)(3)ユビキタス空間内での動作の検出ユビキタス空間内での動作の検出 OpenCVを使った顔認識

OpenCV: インテルが開発・公開しているオープンソースのコンピュータビジョン(画像処理・画像認識)のライブラリ

景色の中から人間の顔(らしい部分)を検出する機能も提供されている。

Page 9: GUI (Graphical User Interface) ヒューマンメディア …kato/HM10/HM-8-handout.pdfユビキタス空間内での動作の検出 OpenCVを使った顔認識 OpenCV: インテルが開発・公開している

OpenCVを使った顔認識

http://yamashita.dyndns.org/blog/face-detection-with-opencv/

視線入力装置

顔を抽出できれば、視線も検出できる!

QuickGlance3 アイトラッキングシステム

例: キーボード・音声に代わる文字入力手段(マルチモーダルインタフェース)

視線追尾システム

VIEW-TRACKER

(例)飛行機操縦の視線解析水平メーターと着陸する位置を何度も確認している様子が分かる。http://www.ditect.co.jp/appli/case_025_00121.html

(参考)ちょっと未来の視線検出

Interactive Data Eyeglasses、フラウンホファー研究機構(ドイツ)現状のヘッドマウントディスプレイの問題は「高い・重い・でかい・人間工学的じゃない」。彼らはアイトラッキング機能を備えたCMOSチップを19.3 x 17mmというサイズで設計。このチップをメガネのヒンジに取り付ければ、どこかを見つめたり視線を動かしたりするとコンテンツの選択やスクロールが行えるメガネが出来るという目論見です。

「私達はメガネを、新しいアプリケーション分野が登場するような、双方向で対話的ものとしたいのです」と、同機構のMichael Scholles博士。メガネはPDAなどと接続することで表示コンテンツを取得、コンテンツはメガネに埋め込まれたマイクロディスプレイに投影されます。マイクロディスプレイは環境光に負けないコントラストにするため、OLEDを利用。着用者からすると、1メートル先に像があるように見えるとのことです。

http://www.fraunhofer.de/EN/bigimg/2009/rn06fo3g.jsphttp://japanese.engadget.com/2009/06/05/bidirectional-data-eyeglass/

(参考)ちょっと未来の視線検出「自動車技術展 人とくるまのテクノロジー展2009」運転者状態認識システム(東芝、参考出展)

http://robot.watch.impress.co.jp/docs/news/20090528_170341.html

画像処理で、ドライバーの顔の向きから視線を検出し、注視している装置やエリアなどをシステムが認識していることを教えてくれる。

ドライバーの頭部全体のワイヤーフレームモデルを作成作成したワイヤーフレームモデルと、その時々の頭部の映像を照合ドライバーの顔の向きを推定顔の向きをもとに視線の方向を推定最終的に注視方向を推定する(将来) 個人認証(将来) 開眼状態検出(=居眠りの検出)(将来) 表情認識

ドライバーの状態を認識し、安全で快適な運転環境を提供するシステム将来:ドライバーの状態や嗜好に応じた情報提供を行なう

Page 10: GUI (Graphical User Interface) ヒューマンメディア …kato/HM10/HM-8-handout.pdfユビキタス空間内での動作の検出 OpenCVを使った顔認識 OpenCV: インテルが開発・公開している

「自動車技術展 人とくるまのテクノロジー展2009」運転者状態認識システム(東芝、参考出展)

「自動車技術展 人とくるまのテクノロジー展2009」運転者状態認識システム(東芝、参考出展)

頭のワイヤーフレームモデル顔の輪郭顔の向き

目の抽出

虹彩の抽出これらを総合して「視線」

http://robot.watch.impress.co.jp/docs/news/20090528_170341.html

(参考)次世代メディアデザイン アイコンタクト(ATR)

単眼視線推定技術

広視野・高解像度カメラで捉えた画像から3次元眼球 および虹彩モデルを生成し、カメラ画像と照合して眼球中心と虹彩を結ぶ視線方向を推定する。

1台のカメラ画像で視線推定が行え、かつ生成したモデルから視線方向を直接推定するためキャリブレーション作業が不要。

(将来の応用)来場者の視線を検出することにより、見ている場所や商品に関する情報提供が行える。新製品のプロモーション用途やミュージアムメディアとしての応用を目指している。

(参考)次世代メディアデザイン アイコンタクト(ATR)

VR: Virtual Reality VR: Virtual Reality (仮想現実)(仮想現実)

インタフェースの多様化:人間の五感(視覚、聴覚、触覚+味覚、嗅覚)を通してインタラクションするための技術

物理法則やルールに基づいた「世界」の構築計算機内に現実世界を「模擬」 「投影」

システム→利用者計算機内部に構成された仮想世界を「体験」

利用者→システム計算機内部に構成された仮想世界に「働きかけ」

VR: Virtual Reality VR: Virtual Reality (仮想現実)(仮想現実)

Virtual Realityを利用した出力・提示

システム→利用者

計算機内部に構成された仮想世界を「体験」

視覚: Head Mount Display、液晶シャッター、広視野角

聴覚: ステレオ音源、触覚: 力覚ディスプレイ、

位置、速度(加速度)

Page 11: GUI (Graphical User Interface) ヒューマンメディア …kato/HM10/HM-8-handout.pdfユビキタス空間内での動作の検出 OpenCVを使った顔認識 OpenCV: インテルが開発・公開している

VR: Virtual Reality VR: Virtual Reality (仮想現実)(仮想現実)

Virtual Realityを利用した入力・操作

利用者→システム

計算機内部に構成された仮想世界に「働きかけ」

視覚: アイカメラ(視線)聴覚: 音声触覚: 力の向き・強さ、

位置(Data Glove, Data Suit, 磁気センサ)、速度(加速度)

バーチャルリアリティバーチャルリアリティ

「視差」

自分の体(位置・大きさ)を基準とした量→ 立体に見える& 対象の「絶対的な大きさ」も知覚

→ コンテンツ制作上の課題

[宿題[宿題11]] Virtual RealityVirtual Realityの基本要件の基本要件

世間的に「VR」と思われているシステムをいくつか取り上げて、VRの基本要件から批評してみよう。

没入感

インタラクティブ性

リアルタイム性

(例)アーケードゲーム、運転シミュレータ、ミクロアドベンチャー、など

Star Tours (Tokyo Disney Land)Storm Rider (Tokyo Disney Sea)

感覚

没入感・立体感

インタラクティブ性

なぜ、多人数で乗り込むのか?

http://www.tokyodisneyresort.co.jp/tdr/japanese/fun/movie/#/movie/tdl_021http://www.tokyodisneyresort.co.jp/tdr/japanese/fun/movie/#/movie/tds_014

Micro Adventure (Tokyo Disney Land)

感覚

没入感・立体感

インタラクティブ性

なぜ、観客が小さくならないといけないのか?

http://www.tokyodisneyresort.co.jp/tdr/japanese/fun/movie/#/movie/tdl_042

Magic Lamp Theater (Tokyo Disney Sea)

感覚

没入感・立体感

インタラクティブ性

なぜ、主たるコンテンツ(登場人物)がジーニーなのか?http://www.tokyodisneyresort.co.jp/tdr/japanese/fun/movie/#/movie/tds_028http://www.fujifilm.co.jp/disneysea/flash_top.html

Page 12: GUI (Graphical User Interface) ヒューマンメディア …kato/HM10/HM-8-handout.pdfユビキタス空間内での動作の検出 OpenCVを使った顔認識 OpenCV: インテルが開発・公開している

バズ・ライトイヤーのアストロブラスター(Tokyo Disney Land)

感覚

没入感・立体感

インタラクティブ性リアルタイム性

http://www.tokyodisneyresort.co.jp/tdr/japanese/fun/movie/#/movie/tdl_032

予告(1) 特別講演会

矢吹瑛明さん(パイオニア)

日程は調整中

高度情報化社会の技術やビジネスのあり方についての研究家・ビジョナリスト&セレンディピティ

予告(2) 特別講演会

小阪裕司さん

7月5日

感性を大事にしたビジネスのデザインの仕方・実践の仕方を説く超売れっ子コンサルタント&エバンジェリスト

予告(3) VR施設の見学会

訪問先:加藤研究室

牧野研究室@情報

樫山研究室@都市

日程は調整中

VR機器、Scientific VisualizationMobile, wearable and ubiquitous情報環境

感性工学、他

参考図書参考図書

情報処理学会編「エンサイクロペディア情報処理2000-2001」第4章マルチメディアとバーチャルリアリティ

野村、澤田「バーチャルリアリティ」朝倉書店、1997年。