SF映画で学ぶインタフェースデザインを読んだ。面白いのでオススメしたい。

滅茶苦茶オススメなので布教エントリ書きます。

SF映画で学ぶインタフェースデザイン アイデアと想像力を鍛え上げるための141のレッスン

SF映画で学ぶインタフェースデザイン アイデアと想像力を鍛え上げるための141のレッスン

どんな本か

インタフェースはこの100年程の間に色々進化してて、その歴史を知る本みたいなのは、いっぱいあります。
そこから演繹的に未来のインタフェースを考えたりするのは凄く楽しいものです。

この本は、それぞれのインタフェースが「SF映画で」どの様に表現されて「現実に」実現したか、みたいな差分も一緒にインプット出来ます。 そうすると、上記のように現実の歴史から演繹するより、ズルが出来ます。つまり「未来を描いたSFのインタフェースを実現する方が、歴史から未来を想像するより簡単」です。

また、SF映画のインタフェースをそのまま実現すると問題になりそうな点や、実現する時にこうした方が良いのではないか、といった議論も注意深く書かれており、単なる紹介とtips集ではなく、読み物としても素晴らしいです。
以下、読んだ後の僕のtweetを埋め込んでおきます。

それぞれの人へ

原著を買った人へ

翻訳は品質が高いと思います。日本語の方が布教には便利ですので、是非コレクションに加えてください。

Kinect,LeapMotion,音声認識等に興味を持っている人へ

以下に軽く紹介していますが、全方位的に各種インタフェースを網羅しており、小手先の技術ではなく、「一般の人がどういう期待をしているか」「参考になる映画は何が有るか」「どういう点に注意を払うべきか」みたいな索引として非常に有益です。

インタフェース系の研究をしている人へ

SF映画を例に取ったサーベイ集として、類似の包括的な書籍は無いと思います。
デモを作る際に、どうすると一般の人にウケるか等も記載があり、おそらく確実に「元が取れます」。
インタフェースの論文を書くときの参考文献に、SF映画を引けたらカッコイイみたいな人にもオススメです（？）

その他の人へ

インタフェースに着目して映画を見るきっかけになるかもしれません。
また、それぞれの項における議論は、非常に注意深く進められています。
したがってこういった未来的なインタフェースについて、見たことの有る映画を元に話されているので、取っ付き易い本だと思います。

以下、もう少し詳しい本の紹介

セクション1

これは、個別のインタフェースごとの分類を行い、それぞれの定義と、代表的な映画での扱われ方、現実への参照と各種tipsや議論が行われています。

  • 機械式コントローラ
  • ビジュアルインタフェース
  • 立体投影
  • ジェスチャー(1951.地球の静止する日から遡ってます。素晴らしい！)
  • 音のインタフェース
  • 脳インタフェース
  • 拡張現実
  • 擬人化

セクション2

これは、特定のタスクごとの(SF映画での)実例です。セクション1での扱いがボトムアップであるなら、ここからはトップダウン的なアプローチです。

  • 通信
  • 学び
  • 医療
  • 性的行為

まとめ

  • SFの先へ

以下良い記述(後で僕が見返す用)

未来の技術について議論するためには、未来の技術を演繹的に定義しようとするより映画を参照するほうがより簡単です。 「Kinectは単なるゲーム向けインタフェースではなく、そう、ある種の『マイノリティ・リポート』のインタフェースなのです。」 というように。(P8)

機械式コントローラ

物理ボタンのつまみは、回すものだと自明に分かって素晴らしい。タッチパネル上に描画されたつまみは、意図せず触れて値が変わるかもしれない。

立体投影

立体投影システムを作って、対話コミュニケーションを行う時、縮小表示する時は目線位置を合わせて縮小すべき、目線の一致が行われないと問題が起きますね。
「半透明のペッパーズ・ゴースト方式は長い間見ていると（現実とディスプレイを常に区別するため）目が疲れる」と言うのは、例えば光学シースルーHMDのMoverioのコンテンツを作る上では留意すべきでしょう。

ジェスチャ

「物理的な操作はジェスチャーで、抽象的な操作は音声で」
飛行機の操縦をジェスチャで行う。可能そうに見える。ではイメルマン・ターンはどうやってジェスチャで表現する？

拡張現実

焦点距離の差をなくすことに言及していて素晴らしい。

擬人化

人間の代わりに動物を用いることで、対等な存在ではなく、ペットや案内役としてみなすといった、ユーザーの期待値を低くする効果もあります。 →メイドロボはドジでも良い！！！！

不気味の谷→システムが人間ではないことを明確に示す

ルクソー Jr.のランプは「人間的」とは何かの良い教材になる

アイアンマンのダミーはゴツイけど可愛い。みたいなのはファイアボールのゲデヒトニスもですね。

余談

この本が信頼できる根拠として「立体投影をホログラムとは呼ばない」と明言している事も付記しておきます：）

openFrameworksの複数モニタ対応、或いは楽しいofxFenster

概要

openFrameworksを用いたマルチディスプレイ上で動くアプリケーションを作るときに、定番のAdd-onとしてofxFensterがあります。
これは広く使われていますが、一度でもofxFensterを使った物を作った人は、大抵「ofxFensterにはお世話になったし苦しめられた」みたいな感想を持っていることが多いです。
中身としてはBlenderのGhost( http://www.letworyinteractive.com/blendercode/d5/d2e/GHOSTPage.html　)とGLUTに依存しています。
openFrameworksから使えるマルチウィンドウシステム用のadd-onみたいな物です。

僕はそれほど詳しくないですが、歴史的な経緯を含めて調べたのでまとめておきます。

結論

ofAppGLFWWindow win;
win.setMultiDisplayFullscreen(true);
ofSetupOpenGL(&win, 1920+1920,1080+1080, OF_FULLSCREEN);

こんな感じで良い。無理にofxFensterとか使わなくても良いと思います。

ofxFensterの歴史

つらい…

-openframeworks0.74

openFrameworksが一気に普及して、add-onがワシャワシャ出てきた ofxFensterもバリバリと開発されてドンドンissue出て、ちゃんと(?)ワークアラウンドも整備された

0.8-

changed default window manager from GLUT to GLFW とeventシステム周りがちょっと変わったので、ofxFensterもissueいっぱい出て枯れてきた

最近

作者が「ﾖｯｼｬなんか破壊的変更してGhost非依存でGLFWベースに書き換えるわ！！！」 みたいな事言って書き換えている最中。usage examplesとかもほとんど空っぽになってるので今使うのはちょっと怖い。
作者が「まあ開発中に安定板使いたければghostブランチ作っておく。それ使って」みたいな事言っています。

windows上でopenFrameworks0.8以上でofxFensterを使う

安定板扱いなので、ghostブランチのheadから持ってくる https://github.com/underdoeg/ofxFenster/tree/ghost/

ここに含まれる依存ライブラリ(ghost.lib)のビルドしたコンパイラが古いままなのでghost.libをビルドし直す。 ghostは https://github.com/underdoeg/ghost からチェックアウトしてVS2012でビルドし直す。
後は無限にwindowが生成されたらこんな感じで書き換える。 https://github.com/underdoeg/ofxFenster/commit/42a080e1457c6fab9d8046f31305d93022d6c50f

この使おうとしているghostブランチの古いofxfensterはGLUT依存で、最近のopenFrameworksはGLFW依存なので、openFrameworksの本体のsetup()の早い段階でおまじないとして glewInit(); を呼んでおくと良い（例えばフレームバッファ確保しようとしてaccess violation例外が出たら、これをしないとダメ）

そしてissueを眺めて地雷踏まない事を祈ります。 https://github.com/underdoeg/ofxFenster/issues?state=open

結論

Windowsつらい
openFrameworks周りのエコシステム、ProjectGeneratorやadd-on等で非常に素晴らしいけど、バージョンアップに追従していけないadd-onとかで酷いことになる。RubyのBundler相当のものが欲しい。

Unityで街をでっちあげた後、それっぽく使えるようにセットアップする解説動画作った

概要

前回エントリを予想以上の方に見て頂けて、あれだけだと色々まだ設定した方が良い作法みたいなのが抜けているので、補足を兼ねてもう一個動画を撮ってみました。

  • Occlusion Culling
  • NavMesh
  • Map

を設定している16分程度の動画です。

誤字や脱字、文意が取れない場所や操作ミス等もありますがご容赦ください。
Unityは、スクリプティングについてはググれば日本語でも多くの情報があって、とても有り難いのですが、GUIでアレコレする方法については相対的に情報が少ないようです。
僕自身もUnityの勉強を初めた時、今回や前回の動画のような事が知りたかったので、操作手順が明らかである動画形式で作成しました。


Unity make large city locomotion tutorial (appendix ...

動画形式でのアップロード知見

  • 録画ソフトウェア…Bandicamが楽
  • キャプションソフトウェア…Windowsムービーメーカーが一番楽（ただ、白抜き文字が使えないので不便）
  • 撮り直し…面倒になってしまうことが多いので、一発撮りに頼ってしまう
  • 操作ミス…仕方がない

動画解説の悩んでいること

  • 訂正が容易でない(ニコニコ動画等だと投稿者コメントで訂正出来るが、容量制限が厳しい）
  • 意外と作るのに手間がかかる

こんな動画があったら良いなあと言う希望

こんなかんじの動画があったら、とても嬉しいです。もしご存知であれば twitterで教えてもらえると喜びます。

izm (izm) on Twitter

  • Unityのmecanimを使いこなしてる感じの動画(モーションを作る所とか、体の部位ごとのブレンディングとか)
  • ライトマップを使った豪華な見た目の作り方の動画(Unity5待ちでも良いかもしれません)
  • 街丸ごとをバラ売りの建物とかを組み合わせてセットアップする動画

Unityで街をでっち上げてUnityちゃんが走り回るまでを動画で作ってみた

Unityで広い街を走り回りたい

Unityを触り始めたころは、そんな風に思って、ドットインストールさんや、Youtubeに上がってるscreencastを見て勉強して記憶があります。

また、日本語の解説記事だと じくよろブログさんのMMD for Unityでミクさんとケロリン町を周るお話 http://eral.blog.eonet.jp/default/2013/10/mmd-for-unity-1-a42b.html にとてもお世話になりました。

ところで先週の土日にUnityちゃんゲームジャムと言うのがあって、そこで初心者の人に伺ったところ、日本語の本は多く出ていて、動画もドットインストールがあるけど、動画の方が凡ミスに気づけるので、良いとのことでした。

の解説動画があったら良いのかな。と思い、試しに録画してみました。

Unityちゃん&フリー素材の街で走り回るまでです。


Unity make large city locomotion tutorial

何分スクリーンキャスト自体をよく分かっていないので、フィードバックを頂けると嬉しいです。

OculusRiftを使った電脳フィギュアを作った

概要

OculusRiftとOvrvisionとLeapMotionとARマーカーを使って、現実世界のマーカーの上にミクさんが出てきて、指で触ったりマーカーを傾けるとミクさんが反応してくれると言うデモを作り、6/1Ocufes豊橋で展示してきました。

f:id:izm_11:20140603011351p:plain

これは、はるか昔に東京芸者エンターテイメントさんが作った電脳フィギュアARis( http://www.geishatokyo.com/jp/ar-figure/ )をもし現代の技術で作るなら、と言うのがコンセプトだったので勝手ながらお名前を拝借しました。

webカメラでマーカーARと言うのは若干手垢がついている感じもありますが、高視野角のHMDで、指のトラッキングによるインタラクションを行えるというのが、意外と面白いのではないかと感じました。

システム構成

  • OculusRift DK1
  • Ovrvision
  • LeapMotion

OculusRiftで視野を覆い、そこにOvrvisionから取り込んだ本来の現実世界の視界を映します。その過程でARマーカーを見つけて、LeapMotionで指の位置を取得し、それぞれに応じたCGを重畳表示することで成立しています。

f:id:izm_11:20140603013223p:plain

出来る事

ミクさんの頭を撫でる
ミクさんのお腹を突っつく
曲に合わせたMMDの踊りを再生する
マーカーを傾けた時にミクさんが転ぶ

→ミクさんかわいい！！！楽しい！！！！！

余談ですが今回の開発終盤に、以下のツイートを見て、なんとしてでも指の認識を組み込むぞ、と決意し、今回のデモをより良くするモチベーションが湧きました。

技術上のトピック

マーカーAR

今回の展示ではマーカーの上にいるミクさんに手を伸ばす必要がある（し、そもそも普通の人は立体視しているCGに対して手を伸ばすものです）ので、そうするとOvrvisionからマーカーが隠れてしまってミクさんが消える。井戸の底に映る月みたいになってしまう。
これは良くないので、マーカーを6個並べて板自体もA3サイズの大きなものにしました。

f:id:izm_11:20140603013511j:plain

これによって手を伸ばしていない時は複数の見えているマーカーの多数決的に精度が上がって、手を伸ばして何個かのマーカーが消えても生き残ったマーカーの情報を頼りに位置姿勢を推定できます。

このマーカー検出、マーカー位置姿勢推定部分はOvrvisionSDKの物を使っています（つまり、Arucoのライブラリを使っている）

カメラが動くかマーカーが動くか

以前に書いたように、(http://izm-11.hatenablog.com/entry/2014/05/04/225502) 追跡対象のマーカー（というか今回は板です）が一個ならば、後のことを考えると&&物理エンジンの関係上マーカーは固定でカメラを動かした方が都合が良いです。

LeapMotionの配置

カメラを動かしてマーカーの板の中心を世界座標の原点に固定する、と言う前述の処理によって、ここが楽になります。LeapMotionをマーカー板の中央に両面テープで固定しました。
すると特に何も大したコードを書かなくても

  • マーカー上のミクさん
  • 現実世界の手
  • LeapMotionで検知した手

がうまいことちゃんと合います。そうした後はミクさんにColliderを設定して、LeapMotionで検知した指にもColliderを当てて、判定が簡単にできます。

補足

嘘です。LeapMotionで取得できる指の座標は、かなり当て込んでいる値のようで、体験する人によって判定（というかLeapMotionのCGの指）が下に表示されたり、上に表示されたり、左右がズレたりします。これは現時点のバージョンの問題かもしれない（し、調べる時間が無かった）ので今後の課題です。

机に対するマーカーの傾きを取得する

  • マーカーのOvrvision(Webカメラ）に対する傾き
  • Ovrvisionを取り付けたOculusRiftのジャイロセンサから取得した傾き

の2種の傾きからオイラー角で引き算をすると、地面に対するマーカーの傾きが求まります。

f:id:izm_11:20140603014423p:plain

これは普通のWebカメラでは出来ないことで、Ovrvisionを取り付けたOculusRiftに良いジャイロセンサが付いているからこそ出来ることです。

今回のデモではミクさんの立っている地面が傾き、バランスを崩してコケる部分の判定にこれを使いました。その結果出現したコンテンツについては下記ツイートを参照ください|дﾟ)

https://twitter.com/UnaNancyOwen/status/473006989530759170 https://twitter.com/hoozuki37/status/473011969725702144

雑感

今回のようなカメラが付いたヘッドマウントディスプレイは昔からビデオシースルーHMDと呼ばれていて、高視野角のビデオシースルーHMDのソリューションと言うと、大体ちょっと良いポルシェが買えるくらいの値段でした。ところがOculusRift,Ovrvision,LeapMotion,Unity等のコンシューマに降りてきたプロダクトを組み合わせると月のお給料よりも安い値段で前述のハイエンドな環境の8割くらいの完成度が出せてしまう。

今回は僕の趣味でミクさんで試した訳ですが、Ovrvisionの中の人に聞いたところ、企業での使用例もだんだん増えているようで、VR,AR含めた価格破壊の波みたいなのを感じました。

また、今回のデモは真っ当に作るととても時間がかかりそうに思っていたら、アセットストア、サンプルコード、先人の知恵やtwiterで助けてくれた人などのおかげで予想以上に早く、予想以上に良い物が出来たように思います。

科学の進歩ってすごい！！！

最後に

今回作った電脳フィギュアを 6/1　Ocufes in 豊橋 (http://www.ocufes.jp/2014/05/666/)で展示してきました。現地では色々な方からフィードバックを頂けてとても励みになるとともに、もっとブラッシュアップして別の機会にも展示したいなと考えています。

ちょっとこの電脳フィギュアの現物を見てみたいという方、これを展示しても良いイベント等がありましたらお気軽に twitter id: @izm までご相談、連絡を頂けると嬉しいです。

感謝

ありがとうございました！