>   >  Unityでつくるインタラクティブコンテンツ:第15回:タッチテーブルをつくる
第15回:タッチテーブルをつくる

第15回:タッチテーブルをつくる

今回は、赤外線とプロジェクタを利用したタッチテーブルの実装方法を紹介します。

TEXT_高田稔則 / Toshinori Takata(Codelight
EDIT_小村仁美 / Hitomi Komura(CGWORLD)

今回のサンプルデータはこちら
https://github.com/toshinoritakata/FingerTrackerSample

赤外線とプロジェクタによるタッチテーブル

こんにちは、高田です。今回は赤外線とプロジェクタを利用したタッチテーブルのしくみを考えていこうと思います。

様々なコンテンツや実装が出ていますが、中でも「reactable」と呼ばれるタッチテーブル式の電子楽器は歌手のビョークがライブツアーで利用したことで一躍有名になりました。

Reactable Live! Demo Performance

結構歴史が古く面白いしかけなのですが、最近はあまり積極的に利用されていない印象です。インターネットから得られる情報は大体10年ほど前のものばかりで、リンク切れも少なくありません。

大きめのタッチパネルを使えばコンテンツを作るのも楽ですし、タッチだけのモジュールも多く出ています。プロジェクタ、赤外線ライト、カメラを使うのでハードの調整が面倒なことやそれらを納める装置を作る必要があるのが難しいところだと思っています。

しかし、タッチパネルではreactableのように多様なマーカーの種類や角度を検出したりはできませんし、タッチテーブルは点以外の形状を認識できる強みがあります。

以下はそれを上手く使ったコンテンツ例です。
●Maker Faire Tokyo 2015 にレゴ x ハードウェア x プロジェクションなシューティングゲーム LITTAI を出展してきた
http://tips.hecomi.com/entry/2015/08/06/003049

しくみがシンプルなため、自分で実験することが可能です。下記の写真は筆者が自宅で作ったタッチテーブルです。これを見ていきましょう。

枠組みは、ごみ袋をかけるタイプのごみ箱で作っています。

ハードウェアの準備

●赤外線カメラとライト

まずハードウェアを準備していきます。先ほどの写真の右下に映っているのはOptiTrackのSlim 3Uというモーションキャプチャ用の小型カメラです。小型で安定性が高いので納品物としても問題ない品ですが、価格は10万円程度と、個人で用意するにはちょっとハードルが高いかもしれません。

赤外線カメラであればKinectでもRealSenseでも問題ありませんので、もう少し安価なものを探してみます。Amazonで調べるとELPというメーカーのものがいくつか出ていましたので、試しに基板むき出しのこちらのカメラを買ってみました。PCはWebカメラとして認識します。


このカメラを見ると、赤外線を使ったコンテンツにとって大切な事柄をいくつか学ぶことができます。ライト部分を見てみると赤外線のLEDに混ざって照度センサがついています。このおかげで環境が一定以上明るいとLEDライトが発光しないようになっています。市販されている赤外線ライトにはほぼこの照度センサが付いています。利用した赤外線ライトも中央に照度センサが見えます。

この手の製品は取扱説明書が付いてこないことが多いため、このセンサのことを知らないとライトが点灯せず悩むことになります。照度センサをパテで埋めてみると、うっすら紫の光が見えるようになりました。



赤外線ライトを点灯してみた様子。照度センサをパテで埋める前(左)、埋めた後(右)

●IRフィルタ

カメラ画像を確認すると、モノクロカメラと変わらない画像が見えます。赤外線カメラと書いてあっても暗視カメラとして売っている場合は、ある程度可視光も見えるようになっていることが多いですが、赤外線だけ見えるようにしたいのでちょっと加工します。ネジでマウント部分を外すことができるので、レンズとイメージセンサの間にIR(赤外線)フィルタを挟み込みます。

IRフィルタとして入手しやすいのはFUJIFILMのもので、IR-84やIR-90などの型番があります。「IR-XX」とはXX0nm以下の波長の光をカットすることができるという意味です。IR84は840nm以下の波長をカットできます。

赤外線カメラは850nmと940nmの赤外線を使っている製品が多いため、IR-84とIR-90が用意してあると便利です。このカメラのように基板に直接レンズが付いているカメラを「ボードカメラ」と呼び、ほとんどが「M12レンズ」と呼ばれるレンズを使用しています。M12レンズには多種多様な種類があるので、状況に応じてレンズを選ぶことができます。これはRealSenseなどの、レンズが組み込まれたカメラを選択した場合には得られない利点です。


IR-84のフィルタを取り付けて画面を撮影した状態をモニタに表示させ(下図右上)、iPhoneのカメラでスクリーン全体を撮影しました。


赤外線フィルタを通すと、このように画面に表示されている画像が見えなくなります。この特性を利用することでスクリーンに投影した映像を無視して、タッチした指のみを認識することができるようになります。

●プロジェクタ

映像はカメラと同様真下から投影します。今回はSONYの小型プロジェクタを利用しました。こちらも投影サイズがたまたまぴったりでした。

●アクリル板

天板には180mm✕320mmの透明アクリルパネルを置き、40g/㎡のトレーシングペーパーを貼って簡易的な投影面にしています。ここまでの部品を組み合わせてカメラで見た映像は、下画像のように投影面に接地している指先だけ白く見えるようになります。この白い部分を画像処理で取り出すのがタッチテーブルの基本的なしくみです。


次ページ:
タッチテーブルのしくみ

その他の連載