情報処理学会 インタラクション 2015
IPSJ Interaction 2015

B66
2015/3/6

LiveSurface:
センサ情報を利用したインタラクティブな質感表現手法

小渕 豊 †1	  	  渡邊恵太†1	  	 	  	 概要：本研究ではスマートフォンやタブレット端末において，加速度センサ，照度センサ，カメラなどのセンサ情報を利用したインタラクティブな質感表現手法 LiveSurface を提案する．LiveSurface は手に持ったスマートフォンのテクスチャがキラキラ，ピカピカ，ざらざらしているような表現を手の動きに応じて実現する．これにより，現実世界のプロダクトを手に持って得られるような表面反射をコンピュータ・グラフィック上でも実現することができる．そのため，手に持って利用するデバイスやウェアラブルデバイスのデザインや UI への広い応用が期待できる．本論文
ではその試作からシステムについて考察し今後の課題について議論する．

LiveSurface: A Technique of Interactive Texture Expression
Using Sensor of Smartphone.
YUTAKA OBUCHI†1	  KEITA WATANABE†1	  	 Abstract: In this research, we propose novel technique for interactive texture expression called “LiveSurface”. LiveSurface
enables users to express texture like a sparkle, scintillation and roughness on the texture using acceleration sensor, illuminancesensor and camera of smartphone. User can feel reflection effect of surface on the computer graphics like an actual texture of
product. Thus we believe this technique allows various devices to apply such a smartphone and wearable devices. In this paper,
we introduce prototype of LiveSurface and discuss about result of effect and future tasks.

1. は じ め に	  そこで本研究は，センサ情報を利用しその実環境のコン	  	 スマートフォンによって携帯電話の画面は大型化し，端末テクストにリアルタイム応じたインタラクティブなテクス
チャ LiveSurface を提案する．の表側ほとんどがディスプレイとなった．そのため，端末は平面化し，プロダクトデザイナが行う物理的な設計箇所

2. LiveSurfaceは従来の携帯電話に比べ縮小した．そして，従来プロダク

LiveSurface とは次のようなセンサを利用し，リアルタイムトデザイナが設計したようなプロダクトとしての質感や触なテクスチャ表現を行う．

り心地のような要素は，画面によってインタラクティブな

加速度センサ：

表現としてユーザインタフェースデザイナが設計担う．すユーザが手に持ったスマートフォンを動かしたり傾けるこ

なわち画面でのデザインとによって，そのテクスチャの反射やグラデーションが変	  しかし，画面ではプロダクトデザインのような質感を表化し，ユーザの手の動きに連動したキラキラした感じやピ現すると静的になりがちである．たとえば，素材にはマッカピカした質感の表現を実現する．

トな質感や光沢感，あるいはキラメキ的なものがあるが，照度センサ：

それらを静止画像で表現すると，一定の方向から光源を前照度センサは一般的にはディスプレイのバックライトの自提としたグラデーションやリフレクション表現の画像とな動制御のために使われるが，本研究では実世界の明るさにる．そのため，キラキラした表現は難しく，表現するにし応じた光源の強さを表現し，テクスチャの見えかた変化さてもアニメーションを施すことになる．しかしアニメーシせる．

ョンは一定のシーケンスで繰り返し表現になり，ときに冗

カメラ：長な表現になってしまう．また，アニメーションによるキカメラの入力映像を利用し，テクスチャへの映り込み表現

ラメキ表現はユーザの手の動きとは無関係なものである．

や色温度表現へ利用する．

†1 明治大学総合数理学部先端メディアサイエンス学科	 
Department of Frontier Media Science, Faculty of Interdisciplinary	 Mathematic Science at Meiji University© 2015 Information Processing Society of Japan682

2.1 仕 組 み

この反射はユーザに「ディスプレイガラス面があること」

LiveSurface は，画面内に配置したテクスチャに対して，加を意識させてしまう．そのため，アンチグレアシートやア速度センサ情報をもとに，常に現実世界の真上に存在するンチリフレクションシート，あるいはより高い低反射を実ような仮想光源を配置することで（図 1, 2），手の動きに連現しているモスアイ構造のフィルムなどを貼ることで実空動するテクスチャを表示する．

間からの反射を軽減し，LiveSurface の反射表現だけにユーザの意識を向ける必要がある．

図 1 常に真上に存在する仮想光源
Figure 1

Virtual light
図 3	  LiveSurface よる様々な材質の表現
Figure 3

Texture with LiveSurface	  また，別の課題として今回は仮想光源を設置したのみで，ユーザの視点は考慮していない点である．本来であれば，ユーザが顔を動かせば，反射の見え方も変化する．これについては顔の位置認識しをその位置情報を利用することで，ユーザの視点に基づく反射表現を実現できるだろう．	  AR の研究分野ではカメラ映像の中に CG を重畳表示し，その CG の光学的整合性を得ようとする研究が行われてい図 2 スマートフォン上で動作中の LiveSurface

る[1][2]．これらはほとんどの場合，本研究のように物理的Figure 2なプロダクトのサテクスチャの一部，あるいは延長としてLiveSurface on the smartphone in action.

捉えた設計ではなく，カメラを通じて得られる映像の中に，Web コ ン テ ン ツ 上 で の 利 用 を 簡 単 に す る た め に 今 回 はいかにしてそこにあるかのようなリアリティの高い CG をWebGL を用いて実装した．WebGL は HTML の canvas 要素提示するかがテーマであり，目的が異なる．しかしながら上に描画するため，ガラスやアクリルなどの半透明な素材これらの光学的整合性を得るための手法は本研究にも役立をドキュメントの上にオーバーレイさせて表示させることてられると考える．さらに本研究では，実際の素材感のリが可能である．テクスチャは，材質によって拡散光，環境アリティだけでなくこれまでにないような素材の質感を表光，反射光の強さを調整し質感を表現している．

現する可能性もある．

2.2 テ ク ス チ ャ 例
段ボールやコンクリートなどの光沢の小さい素材は反射率

4. お わ り にを低く，金属などの光沢の大きい素材は反射率を高く設定

本稿では，スマートフォンに内蔵される加速度センサ情報した．木の表現には木のテクスチャを用いた．その際，テによってテクスチャ面への光の当たり方をコントロールし，クスチャパターンを利用して法線の向きを変えることで，ユーザの手の動きに連動した材質表現を実現する手法を提

材質感を表現した．ガラスの表現は反射光の強い緑色の半案した．	 

透明の物体とすることで材質を表現した．

3. 考 察 と 議 論
従来のテクスチャ表現は，端末の向きを変えたり傾けても，変化しなかったが，LiveSurface では動かして質感を確認したり，楽しめるようになった．ただし，スマートフォンの画面で反射する実空間の反射光が邪魔になることがあった．

© 2015 Information Processing Society of Japan

参考文献
1) 神原誠之, 横矢直和: 光源環境マップの実時間推定による光学的整合性を考慮したビジョンベース拡張現実感. 情報技術レター
ズ 1, pp.127-128(2002).
2) 安室喜弘, 石川悠, 井村誠孝, 南広一, 眞鍋,佳嗣, 千原國宏: 立体マーカを用いた実空間における仮想物体の調和的表現. 映像情報メディア学会誌, Vol57, No10, pp1307-1313(2003).

683