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

163C43
2016/3/4

実物影シミュレーションと 2 台のプロジェクタによるインタラクティブシャドウ
水野 慎士1

岩崎 妃呂子1

近藤 桃子1伊藤 玲1

杉浦 沙弥1

大葉 有香1

概要：本研究ではプロジェクタの前に人が立ったり物を置いたりすることでスクリーンに映し出される実物影と，CG で生成されてプロジェクタでスクリーンに投影された仮想影とのインタラクションを実現するシステムを提案する．このシステムでは，虫かごを揺らすと虫かごの実物影から蝶の仮想影が飛び出してユーザの実物影に止まったり，じょうろの実物影から水の仮想影が溢れ出したりする．システムは Kinectを用いてプロジェクタとスクリーン間にある物体形状を三次元的に取得しており，スクリーンに写る全ての実物影をシミュレーションする．そしてシミュレーション結果に基づいて仮想影を制御することで，実物影と仮想影との様々なインタラクションを実現している．さらにシミュレーション結果に基づいてもう1 台のプロジェクタで実物影の内部に仮想光源を投影することで，実物影に穴を開けたり変形させたりな
ど，さらに多様な実物影とのインタラクションを実現する．

Interaction Shadows using Real Shadow Simulations
and Two Projectors
Shinji Mizuno1

Hiroko Iwasaki1

Momoko Kondo1

Rei Ito1

Saya Sugiura1

Yuka Oba1

Abstract: We propose a system which enables users to enjoy interaction with virtual shadows generated by
CG and projected to a screen through real shadows of a user and objects in front of a projector. When auser rocks a birdcage, virtual shadows of butterflies fly away from a real shadow of the birdcage and alighton the user’s real shadow. When a user uses a watering can, virtual shadows of water come out from a realshadow of the watering can. The system scans 3D shapes of objects in front of the projector with a Kinect,
and simulates real shadows on the screen generated by the projector. Interaction with virtual shadows byreal shadows is realized by controlling virtual shadows based on the simulated results of real shadows. When
projecting virtual light sources inside real shadows with another projector, other various interactions are
realized such as deforming real shadows.

1. はじめに

一方，映像表現の一つとして影を用いたコンテンツがしばしば見られる．影は物体に光を当てることで簡単に作り

近年のコンピュータ技術の発達に伴い，CG 等を用いた出すことができ，日常のあらゆる場面で目にするものでもデジタルコンテンツの制作が盛んになってきている．特に，ある．そして，影を効果的に使ったり普段とは異なる見えセンサ技術や画像処理技術，音声処理技術などを組み合わ方をさせることで，逆に大きな印象を与えることが可能とせることで，ユーザの動作に対してリアルタイムに反応すなる．例えば，古くから現代に至るまで影絵を使った芝居

るインタラクティブデジタルコンテンツが可能となり，広が公演されており，舞台の演出としても影を使った例がい

告媒体やコミュニケーションツール，エンタテインメント

くつも見られる．近年は CG 等で仮想的な影を生成するデの分野で大きな注目を浴びてきている [1][2][3]．

ジタルコンテンツもいくつか提案されている [4][5]．
そのような背景の中，本研究では物に光を当てて生成さ1

愛知工業大学 情報科学部
Graduate School of Business Administration and Computer
Science, Aichi Institute of Technology© 2016 Information Processing Society of Japanれた実物影と CG で生成された仮想影とのインタラクショ

937

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

163C43
2016/3/4

図 3

図 1

虫かごの識別結果（黄色の点）生成される．また，PC で CG による仮想影を生成してプ

提案システムの実行例ロジェクタ 1 で投影する．そのため，スクリーン上には実virtualshadow

物影と仮想影が合わせて映し出される．さらに必要に応じ

realshadow
virtuallightてプロジェクタ 2 で実物影内に仮想光源を投影する．

physicalobject

そして，ユーザが物体を動かしたり自身が動いたりすることで実物影を動かすと，仮想影が生成されたり仮想影とreal
shadowのインタラクションを楽しんだりすることができる．例え

virtualshadow

ば，虫かごを揺らすと虫かごの実物影から実空間には存在

physicalobject

projector 1
projector 2

図 2

提案システムの概要

しない蝶の仮想影が飛び出して，ユーザの実物影に到達す
るとその場所で止まる．また，穴の開いていないカボチャの実物影に仮想光源が投影されて，まるで中身をくり抜いン手法を提案する．実物影と仮想影は同じスクリーン上にて生成されたような目や口が現れる．

生成されており，見かけ上はほとんど区別が付かない．そシステムでは実物影と仮想影とのインタラクションを実して，虫かごの実物影から蝶の仮想影が飛び出したり，蝶現するため，Kinect を用いて影を生成するための物体の三の仮想影が人の実物影に止まったりするなど，実空間には次元情報を取得して，スクリーンに生成される実物影のシ存在しない物と影を通じたでインタラクションを実現すミュレーションを行っている．

る．また，仮想光源を用いて穴の空いていない物体の実物影に穴を開けるなど，実物影の変形も可能である．図 1 に提案システムの実行例を示す．

3. 実現手法
3.1 実物体の識別と三次元情報取得

影とのインタラクション手法は他にもいくつか提案され提案システムではプロジェクタ 1 付近に Kinect を設置ているが，手先だけを想定したり [6][7]．影をすべて仮想的する．プロジェクタ 1 は実物影を生成する光源として使に生成したものが大部分である [8][9][10]．それに対して，用しており，Kinect をプロジェクタ 1 付近に設置するこ

本研究の手法では人の全身像や様々な物体に光を当てて生とで，実物影を生成するために配置したすべての物体を三成された実際の影によって仮想の影とのインタラクション次元的にスキャンすることができる．スキャンデータとしを実現している．そして，実際の影に穴を開けるなどの変て，毎秒 30 フレームで深度画像，色画像，人の関節点三形も可能である．そのため，いつもと同じ影がいつもと少次元座標を取得する．そして，各フレームの情報を用いてし異なる振る舞いをすることになり，人に対してより大き実物影を生成するために配置した物体の三次元形状と位置な印象を与えることが期待できる．の取得と物体の識別を行っている．現行の提案システムで

2. システムの概要
提案システムは，2 台のプロジェクタ (プロジェクタ 1 おは，影を生成する実物体として，虫かご，じょうろ，植木鉢，かぼちゃ，および人を用いている．

3.1.1 虫かご

よびプロジェクタ 2)，スクリーン，Kinect，PC，そして影

虫かごは固定された杖の先端に取り付けられており，ユーを生成するための物体で構成される．プロジェクタ 1 は離ザが触れることでその場所で揺れる．そのため，虫かごのれた場所から投影する一般的なタイプのもので，物体の実位置は大きく変化することはない．そこで，システムには物影を生成するための光源，および仮想影の投影のためにあらかじめ虫かごの三次元位置を与えておき，深度画像か用いる．プロジェクタ 2 は超短焦点タイプのもので，スクら虫かご三次元位置に近い座標を持つ画素値を虫かご領域リーン直下から実物影に仮想光源を投影して影を変形させとして抽出して，中心の三次元座標を求める（図 3）．

るために用いる．図 2 にシステムの概要を示す．

3.1.2 じょうろ・植木鉢・かぼちゃ

ユーザや物体がプロジェクタ 1 とスクリーンの間に入ると，その実物影がプロジェクタ 1 によってスクリーン上に© 2016 Information Processing Society of Japan

じょうろ・植木鉢・かぼちゃの識別は深度画像に加えて色画像も用いる．

938

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

図 4 じょうろの識別結果（緑色の点）

図 5

植木鉢の識別結果（青色の点・四角形）

163C43
2016/3/4

図 6

虫かごの三次元座標から蝶の CG 物体が生成される様子

図 7

植木鉢の三次元座標から植物の CG 物体が生成される様子

じょうろ先端の蓮口部と胴体部には，それぞれサイズの虫かごが揺れている場合には，虫かご中心に相当する三異なる色マーカが貼り付けられている．まず，色画像を用

次元 CG 空間座標から仮想影のための蝶の黒色 CG 物体をいて色マーカの領域を抽出する．次に，領域のサイズに発生させる．蝶の CG 物体は平面に蝶のアニメーション映

よってじょうろの蓮口部と胴体部を識別する．そして，対像をテクスチャマッピングとして施して生成しており，三応する位置の深度画像を用いて蓮口部と胴体部の中心の三次元 CG 空間内を直線的に移動する．図 6 に虫かごの三次次元座標を求める（図 4）．

元座標から蝶の CG 物体が生成される様子を示す．

植木鉢はじょうろの色マーカとは異なる単色で形状は長3.2.2 じょうろからの水滴の発生方形に近いものを用いている．まず，色画像を用いて植木じょうろに対しては傾きの判定を行う．じょうろの蓮口鉢の領域を抽出する．そして，対応する位置の深度画像を部と胴体部の三次元座標を用いて，蓮口部が胴体部よりも用いて植木鉢中心の三次元座標を求める．また，植木鉢領低い位置にある場合はじょうろが傾いていると判定する．

域を包含する長方形領域を算出することで．植木鉢の傾きじょうろが傾いている場合には，じょうろの蓮口部に相を求めている（図 5）．
かぼちゃの識別手法は植木鉢の場合とほぼ同様である

当する三次元 CG 空間座標から仮想影のための水滴の黒色CG 物体を発生させる．そして，水滴の CG 物体が床面にが，傾きは求めていない．

到達した場合には，三次元 CG 空間に仮想影のための水面

3.1.3 人の黒色 CG 物体を生成する．

人がプロジェクタ 1 の前に立つと，システムは Kinect を

3.2.3 植木鉢からの植物の発生

用いて人の 15 カ所の関節点の三次元位置情報を取得する．

植木鉢中心に相当する三次元 CG 空間座標から仮想影のまた，各関節位置からの距離を用いて，深度画像の中からための植物の黒色 CG 物体を生成させる．このとき，植木人領域を抽出する．そして，抽出された深度画像の人領域

鉢の傾きに応じて植物の CG 物体も傾ける．図 7 に植木鉢の各画素の三次元座標を計算して，人の三次元形状データの三次元座標から植物の CG 物体が生成される様子を示す．

を生成する．データは三次元空間中の点の集合となる．

3.2.4 かぼちゃからのこうもりの発生
かぼちゃに対しては人の手で触れられているかの判定を

3.2 実物体の状態判定に基づく CG 物体生成
提案システムでは仮想影および仮想光源を実現するた
め，三次元 CG 空間に CG 物体を生成する．仮想影の CG
物体は白色背景に黒色で表示して，仮想光源の CG 物体は行う．人の左右の手先の三次元座標とかぼちゃ中心の三次元座標との距離を計算して，距離がしきい値より小さい場合には人が手でかぼちゃを触れていると判定する．
かぼちゃが人の手で触れられている場合には，かぼちゃ黒色背景に白色で描画する．

中心の相当する三次元 CG 空間座標から仮想影のためのこ3.2.1 虫かごからの蝶の発生

うもりの黒色 CG 物体を発生させる．発生方法は蝶の場合

虫かごに対しては揺れの判定を行う．虫かご中心の三次元座標のフレーム間の移動量がしきい値を越えた場合，虫かごが揺れていると判定する．

© 2016 Information Processing Society of Japanと同じである．

3.2.5 仮想光源の生成
人の実物影およびかぼちゃの実物影には，穴を開けたよ939

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

うな目と口を生成する．そのため，人の頭部およびかぼ163C43
2016/3/4

screenreal shadow

ちゃ中心に相当する三次元 CG 空間座標に仮想光源のための白色 CG 物体を生成する．

3.3 仮想影および仮想光源の投影
3.3.1 CG 空間と投影環境の構築
提案システムでは実物影を生成するための物体を三次元

projector1
physical objects

スキャンして，三次元形状データを取得したり三次元座標(a) 実空間を取得したりする．次に，得られた三次元情報に基づいて仮想影のための CG 物体を生成する．そして，CG 物体は

projecting screen virtual shadows
CG objects
for CG
scanned data of physical objects
virtual lights

プロジェクタ 1 によってスクリーンに投影されて仮想影となる．このとき，仮想影は実物影の位置に合わせて適切に投影される必要がある．
これを実現するため，提案システムでは実空間と同じCG 空間と投影環境を構築して CG 物体の表示を行う．まviewpoint for CGず，3.1 節で述べた手法により，実空間をスキャンして実CG objects

物体の三次元情報を取得して，実空間と同等の CG 空間に配置する．仮想影のための CG 物体も実空間と同等の CG空間に配置する．そして CG の投影環境についても実空間(b) CG 空間
図 8

提案システムでの実空間と CG 空間の関係と同等に構築する．つまり，実空間のプロジェクタ 1 の位置に CG 映像生成のための視点を配置して，実空間のスクリーンの位置に CG 映像生成のための CG 投影面を配置

3.3.3 仮想光源の投影による実物影の変形
提案システムのプロジェクタ 2 は超短焦点タイプを用いする．ており，スクリーンの直下に設置されている．そのため，

3.3.2 実物影シミュレーションと仮想影投影

実物体に影響されることなくスクリーンに様々な映像を投

実空間と同等の CG 空間を構築すると，実物体をスキャ影することが可能である．

ンして得られた三次元情報から CG を生成してプロジェ

そこで，プロジェクタ 2 を用いて実物影の内部に仮想光

クタ 1 で投影した場合に投影映像は実物影と一致する．そ源を投影することで，実物影を変形することが可能となる．のため，システムでは投影結果を実物影のシミュレーショ

まず，プロジェクタ 1 用と同等の CG 空間を構築して，プンとして用いる．なお，実物影の分離・移動表現の場合をロジェクタ 2 の投影面をプロジェクタ 1 による投影面と一除き，投影結果はシステム内のみで用いて実際には投影し致するように設置する．2 台のプロジェクタの映像は重なない．

るが，プロジェクタ 2 で黒色背景映像を投影した場合，スそして，実物体の三次元情報に基づいて生成した CG 物

クリーン上の映像はプロジェクタ 2 を用いない場合と比べ体をプロジェクタ 1 で投影した場合も，実物影に対応したてもほとんど変化はない．そして実物体の位置に応じて白場所に投影されることになる．白色背景に黒色 CG 物体を色 CG 物体を CG 空間に配置してプロジェクタ 2 で投影す配置することで，投影結果は実物影とよく似た見かけとなることにより，実物影内部に仮想光源を生成することがでり，これが仮想影となる．図 8 に実空間，実物体，CG 空きる．これにより，実物影に穴が開いたような変形を行う

間，CG 物体の関係を示す．

ことが可能となる．

これにより，例えば虫かごを揺らした場合に虫かごの三次元座標から蝶の CG 物体が生成されるが，プロジェクタ

3.4 インタラクション

1 で投影した場合には虫かごの実物影から蝶の仮想影が生システムでは発生した仮想影と実物影とのインタラク成されるように観察される．また，植木鉢の三次元座標にションや仮想影同士のインタラクションも行う．実物影と植物の CG 物体が生成されるが，プロジェクタ 1 で投影し仮想影とのインタラクションを考えた場合には，実物体のた場合には植木鉢の実物影から植物の仮想影が生えている

三次元情報と仮想影のための CG 物体を CG 投影面に投影ように観察される．そして，植木鉢をプロジェクタ 1 に近したあと，CG 投影面上での座標に基づいて仮想影を制御付けると生成される実物影は大きくなるが，このとき植物する必要もある．の仮想影も特別な処理を必要とすることなく，自動的に適3.4.1 実物影と仮想影とのインタラクション

切なサイズに変更されて投影される．

人の実物影によるインタラクションは，人の三次元形状データと関節点座標を CG 投影面に投影して行う．

© 2016 Information Processing Society of Japan940

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

163C43
2016/3/4

蝶の CG 物体は CG 投影面に仮想影として投影されたあと，人の三次元形状データの投影像との接触判定を行う．
接触していると判定された場合には，CG 物体をその場所で停止させる．これにより，蝶の仮想影が人の実物影に止まっているように観察される．
植物および水面の CG 物体は CG 投影面に仮想影として投影されたあと，人の関節点座標の投影結果との接触判定を行う．それぞれ接触していると判定された場合には，植物の CG 物体を揺らしたり，水面の CG 物体を波立たせた

図 9

虫かごの実物影から蝶の仮想影が飛び出す様子りする．これにより，植物や水面の仮想影が人の実物影に揺らされたり波立たされたりするように観察される．
植木鉢の実物影とじょうろから流れ出た水滴 CG 物体の仮想影についても接触判定を行い，接触していると判定された場合には水滴が植木鉢に注がれていると判断する．このとき，植木鉢の実物影から生えている植物 CG 物体が成長する．

3.4.2 仮想影どうしのインタラクション
虫かごから飛び出した蝶の CG 物体の投影像は，植木鉢から生えた植物の CG 物体の投影像と接触判定を行ってい

図 10

じょうろの実物影から水滴の仮想影が流れ出す様子

る．そして，植物の CG 物体が揺れていない状態で接触していると判定された場合には，蝶の CG 物体をその場所で停止させる．これにより，蝶の仮想影が植物の仮想影に止まっているように観察される．なお，蝶の仮想影が止まっている状態で植物の仮想影を揺らすことで，蝶の仮想影が逃げていくような状態が観察できる．

3.4.3 実物影からの仮想影の分離・移動システムはプロジェクタ 1 の前に存在して実物影を生成する実物体を三次元的にスキャンしてデータを保持更新している．このデータは実物影シミュレーション用のため通図 11

植物の仮想影が植木鉢の実物影に追随する様子

常は表示しないが，黒色で表示してプロジェクタで投影すれば実物影とほぼ同等の仮想影が得られる．そこで，実物影が流れ出た（図 10）．水滴の仮想影が植木鉢の実物影に体スキャンデータを移動させながらプロジェクタで投影す入ると，植木鉢の実物影から植物の仮想影が成長していっることで，まるで実物影が分離して移動していくような表た．そして，植木鉢を持ち上げると，植物の仮想影が植木現を行うことが可能となる．

鉢の実物影に追随していき，まるで実際に植木鉢から植物4. 実験が生えているような影映像が生成された（図 11）．植木鉢の実物影のサイズは植木鉢とプロジェクタ 1 との距離に提案システムを実装して実験を行った．使用した PC はよって変化するが，植物の仮想影も同じように変化した．

MacBookPro(Core i7 2.8GHz) で，C++を用いて開発して仮想影と人の実物影のインタラクションについても確認おり，OpenGL，OpenCV，OpenNI を使用している．

した．虫かごの実物影から飛び出した蝶の仮想影が人の実実空間と同等の CG 空間を構築するため，プロジェクタ物影に到達すると，蝶の仮想影はその場で止まり，まるでとスクリーンとの位置関係が必要となる．そこで，システ

人の手に蝶が止まっている様子が影になっているように感ムの起動時に画面に表示されたプロジェクタ投影面をマじられた（図 12）．また，植物の仮想影に人の実物影が触ウスクリックで手動で指定すると，システムを構成するれると，その影に押されたように植物の仮想影は揺れだし

Kinect を用いてスクリーン 4 隅の三次元座標を取得して，た（図 13）．じょうろからの仮想影によって溜まった床のプロジェクタとスクリーンとの位置関係を計算している．

水面の仮想影に足や手の実物影で触れると，水面の仮想影

虫かごを揺らすと，虫かごの実物影からまるで蝶の影が波立ち始めた（図 1）．

が飛び出しているような様子が確認できた（図 9）．また，実物体のスキャンデータを移動させながら黒色で表示しじょうろを持って傾けると，じょうろの実物影から水滴のてプロジェクタで投影することで，実物影が分離して移動© 2016 Information Processing Society of Japan941

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

図 12163C43
2016/3/4

図 15

蝶の仮想影が人の実物影に止まる様子

仮想光源による実物影の変形いう新しい体験を実現しており，エンターテインメントやデジタルサイネージなど人の興味を引きつける場面での活用を検討している．
今後の課題としては，より多くの種類の物体の実物影を用いたインタラクションの実現や手などで作る影絵の拡張などが挙げられる．
謝辞

プロトタイプ用のアニメーション映像や実物影用物体を提供して頂いた (株)SUGOI の秋葉陽児氏，佐々図 13

植物の仮想影が人の実物影によって揺れる様子

木章介氏に感謝する．本研究の一部は科学研究費補助金(26330420) による.
参考文献
[1]

[2]

[3]
図 14

人の実物影から分離・移動する仮想影するような表現ができることも確認した．人が自身の身体の横で両手を重ねたとき，手の部分のスキャンデータを黒[4]色で表示して仮想影を生成するとともに移動させると，まるで人が作った鳩の影絵が飛び立つような表現が可能であることを確認した（図 14）．

[5]

プロジェクタ 2 を用いて実物影内に仮想光源を投影することで，実物影を変形させるような表現が可能であることも確認した．システムが人とかぼちゃの三次元座標を追跡[6]しながら，目と口の形を持つ仮想光源のための白色 CG 物体を配置してプロジェクタ 2 で投影することで，人の実物[7]

影に目と口が付いたり，穴の開いていないかぼちゃの実物影がハロウィン用のかぼちゃのものになったりしたような表現を実現した（図 15）．

[8]
[9]

5. まとめ本研究では影を用いたインタラクティブデジタルコンテ[10]

松原孝志, ボンダンスティアワン, 松本和己, 徳永竜也, 中島一州: 3 次元ジェスチャ操作による テーブル型インタ
ラクティブデジタルサイネージの開発, 情報処理学会研究報告, Vol. 2014-DCC-6, No. 6, 8pages (2014).
S. Mizuno, R. Hirano, Y. Tsutsumi: GAYAIT: An Interactive Video and Sound Art System handling a Large
Number of Video Clips and its Applications, 芸術科学会
論文誌, Vol. 11, No. 4, pp. 149–156 (2012).
大島直樹, 岡澤航平, 本田裕昭, 岡田美智男: TableTalkPlus: 参与者の共同性や社会的なつながりを引きだすアー
ティファクトとその効果, ヒューマンインタフェース学会
論文誌, Vol. 11, No. 1, pp. 105–114 (2009).
千田真弓, 小原悠太朗, 菅野駿哉, 本村健太, 千葉則茂, ダン
スパフォーマンスを拡張表現する高さを活かした映像イン
スタレーション, NICOGRAPH2013 論文集, pp. 121–124(2013).
西出篤史, 鈴木一穂, 林成紘, 板井志郎, 三輪敬之: 共創表
現の遠隔支援 − 背景に着目した影メディア表現空間のデザイン −, ヒューマンインタフェースシンポジウム 2013,
pp.17–20 (2013).
H. Xu, I. Kanaya, S. Hiura., K. Sato: User interface byReal and Artificial shadow, SIGGRAPH 2006 research
posters (2006).
坪倉 輝明: “Shadow Touch!!”,入手先 ⟨http://teruaki-tsubokura.com/
works.php?ar id=1⟩ (2010).
Interactive Wall “BIG SHADOW”,
入手先 ⟨http://bigshadow.jp/⟩ (2006).
J. Y. Moon, S. H. Nam: “Augumented Sadow”,
入 手 先 ⟨http://joonmoon.net/Augmented-Shadow⟩(2009).
“Parade - Dancing shadow sculptures”,
入手先 ⟨http://dpt.co/en/parade-2/⟩ (2014).

ンツを提案して，プロトタイプを開発した．提案システム
では様々な物体の実物影と仮想影とのインタラクションと© 2016 Information Processing Society of Japan942