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

3A01
2021/3/10

手描き絵から生成した CG 空間内での移動とインタラクションを実現する「不思議なスケッチブック・ザ・ライド」の開発
朝倉 麻友1

水野 慎士1

概要：本研究では，手描きの絵から三次元 CG 空間を生成して，さらに生成した三次元 CG 空間内にまるで没入したような感覚で，実際のカートを使って自由に移動することができるインタラクティブコンテン
ツ「不思議なスケッチブック・ザ・ライド」の実装を行った．三次元 CG 空間には建物や木の絵に基づいて三次元 CG の街が構築されている．そして，ディスプレイ付きカートに乗って，構築された三次元 CGの街を実際に運転しながら移動することができる．カートの動きとディスプレイ映像の三次元 CG 内の移動は連動しており，ユーザは自分の絵から生成された三次元 CG の街の中に没入して，カートを使って三次元 CG の街を自由に移動することができる．そして，三次元 CG の街の建物をカートで壊すなど，三次元 CG 空間中のオブジェクトとのカートを介したインタラクションといった，これまでにない体験を実現している．

1. はじめに子供が多く参加するイベントやエンタテインメント施設加者の満足度が高くなることが期待できる．そして，コンテンツの一部の内容が毎回変わるため陳腐化しにくいといったメリットもある．

では，参加者自身が創作活動を行いながらコンテンツに積

このような背景の中，著者らはユーザが創作活動によっ極的に関わる体験型デジタルコンテンツの人気が高まっててコンテンツ内容に積極的に関わることができ，コンテンいる．例えば，チームラボによる「お絵かき水族館」[1] でツ体験時にはユーザ自身の創作作品に没入することができは，参加者が海洋生物の塗り絵を行い，塗り絵から生成さるデジタルコンテンツ「らくがきクルーズ」を開発した [5]．

れた CG モデルを CG 水族館で泳がせることで，参加者みこのコンテンツでは，お絵描きで三次元 CG の街を構築しんなで CG 水族館の生物を充実させていく．また，リトルてから，ディスプレイ付きカートに乗って自分で構築したプラネットによる「SKETCH RACING」[2] では，参加者街の中を移動することができる．しかし，移動ルートは予が塗り絵によって車の三次元 CG モデルを作成して，参加め決まったコースに限られており，ユーザとのインタラク者同士がそれぞれ作成した車でレースを競い合う．

ションは実現されていなかった．

そして，著者らも同様のコンセプトを持つデジタルコン

そこで，本研究では「らくがきクルーズ」を改良することテンツをいくつも開発してきた．例えば，「お絵描きダンで，ユーザのお絵描きから構築された三次元 CG の街を実スステージ」[3] は，参加者がお絵描きとダンスを行うこと際にカートに乗って仮想的に移動することができるインタでダンスする CG キャラクタを作成して，参加者みんなでラクティブコンテンツ「不思議なスケッチブック・ザ・ラ

CG ダンスステージで踊る CG キャラクタで充実させていイド」の開発を行った．このコンテンツでは，ユーザ自身くコンテンツであり，「Toyota City Creation」[4] は，参加がディスプレイ付きカートを自由に運転する．このとき，者が車の絵を描くことで街の中を走る車を増やしていくコセンサを用いてカートの位置と方向を取得して，カートのンテンツである．

ディスプレイに表示する三次元 CG の視点位置と視線方向

参加者自身が創作活動を行いながらコンテンツ自体を作にリアルタイムで反映させる．これにより，ユーザは実際り上げていくことは，全体的な体験時間が長くなったりコのカートを運転することでお絵描きから生成された三次元ンテンツの内容に直接関わることができたりするため，参CG の街に没入して自由に移動することが可能となる．そして，三次元 CG の街の建物や車と衝突してカートで壊し

1

愛知工業大学大学院経営情報科学研究科© 2021 Information Processing Society of Japan437

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

たり，それに対してカートが振動したりするなど，三次元

3A01
2021/3/10

三次元 CG 都市

CG 空間中のオブジェクトとのカートを介したインタラクションといった，これまでにないインタラクティブ体験を実現している．

2. 関連研究
転送

カートなどの乗り物に乗って CG 空間に没入するするこ街 CG モデル

転送

仮想的走行車 CG モデルとができるコンテンツとしては，「らくがきクルーズ」と同じディスプレイ付きカートを用いた「ムーンライトクルーズ」[6] や，HMD を装着して VR 空間や AR 空間でゴーカートを実際に運転する「VR GO KARTS」[7]，「HADOKART」[8] が開発されている．しかし，これらのコンテンツにおいてユーザが没入できるのは，コンテンツ開発者によってあらかじめ用意された三次元 CG 空間だけである．

お絵描きお絵描きカート

図 1 「不思議なスケッチブック・ザ・ライド」の概要「マリオカートライブサーキット」は，コースや敵キャラクタが三次元 CG で合成された AR 空間内でカメラ付きを自由に描く．そして，描いた絵をカメラに差し出すと，リモコンカーを操作してレースを楽しむことができる [9]．

車の三次元 CG モデルが自動的に生成されて，お絵描きにただし，三次元 CG はあらかじめ用意されたもので，ユーよって生成された CG 都市を走り始める．

ザが関与できるのは実空間への物体の配置やルートの設定となる．また，カートに実際に乗ることはできない．

ユーザはディスプレイ付きカートに乗って運転することで，構築された三次元 CG 都市に没入したような感覚で移「Quill」は HMD を装着した VR 空間内に没入しなが動することができる．カートは三次元 CG 都市内に仮想的ら，体験者自身が三次元 CG を制作することができる [10]．に置かれた状態になっている．カート前方にはディスプレ

ただし，制作には HMD とコントローラが必要な上，コンイが設置されており，三次元 CG 都市内に置かれた仮想トローラを使った三次元的描画の習得が必要なため，誰でカートの中から外を眺めたような CG 映像が表示される．

も気軽に体験できるという訳ではない．

そして，カートを運転して動かすと，三次元 CG 都市内の本研究の「不思議なスケッチブック・ザ・ライド」は，仮想カートも実空間のカートに同期して動き始めて，そのユーザが没入するための三次元 CG 空間を自分自身で完成

結果としてカートに設置したディスプレイに表示されたさせていくという点で，従来コンテンツと比べて参加者のCG 映像も動き始める．そのため，ユーザは実際にカートコンテンツ内容に対する関与が大きい．そして，単に自分を運転してその動きを体で感じながら，自分の絵から生成の絵から生成された三次元 CG を俯瞰的に観察するだけでされた三次元 CG の街をカートで移動するような体験をすなく，その中に入り込んで，自分でカートを運転して自由ることができる．に移動できるという，従来のコンテンツにはない特徴を持仮想カートは三次元 CG 都市内の建物や車との衝突判定

つ．そのため，体験者コンテンツに対する満足度も高くなを行い，実空間のカートに対するフィードバックを行う．

ることが期待される．

例えば，実空間のカートの移動によって仮想カートが三次

3. コンテンツについて
3.1 概要本研究の「不思議なスケッチブック・ザ・ライド」は，2種類のお絵描きとカートへの乗車という 2 つの体験によっ

元 CG 都市内の建物に衝突したと判定すると，建物は破壊されてその様子はカート設置のディスプレイで確認することができる．また，音や振動も発生する．このように実空間のカート移動を介して，三次元 CG 都市内の建物との直接的なインタラクションも行うことができる．て構成されている．図 1 にコンテンツ体験の概要を示す．
お絵描きに関する部分は従来の「らくがきクルーズ」と3.2 全体のシステム構成同じである．描くのは街と車の 2 種類で，どちらも紙にカ「不思議なスケッチブック・ザ・ライド」は，街 CG 生

ラーペンで描く．街のお絵描きでは，ユーザは家，ビル，成システム，車 CG 生成システム，カート用 CG 映像＆樹木，橋，看板，雲など，街の中で見かけそうなものを自フィードバックシステム，カート追跡システムから構築さ由に描く．そして，描いた絵をカメラに差し出すと，描いれる（図 2）．

た家や樹木などがそれぞれ三次元 CG モデル化されて，そ街 CG 生成システムと車 CG 生成システムは「らくがきれらが配置された CG 都市が自動的に生成される．車のおクルーズ」のものと同じである．それぞれ，「不思議なス絵描きでは，ユーザは車の側面と上面，または側面と前面ケッチブック」[11] と「お絵描き i-Can」/「Toyota City© 2021 Information Processing Society of Japan438

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

3A01
2021/3/10

カート
二次元 LiDAR

カート用CG 映像＆フィードバックシステム

カート位置・方向情報
CG データCG データ街 CG 生成システム

図 2

車 CG 生成システム

カート追跡システム

全体のシステム構成

図 3 使用した子供用乗用電動カート
カート用CG 映像システム

Creation」[4] がベースとなっており，PC と Web カメラで構成されている．そして，カメラに街の絵や車の絵を差し

二次元 LiDAR

カート走行エリア

カート出せば，それらの三次元 CG を自動的に生成する．どちらのシステムもカート用 CG 映像＆フィードバックシステムに無線ネットワークで接続されており，それぞれ生成した街や車の CG モデルデータをカート用 CG 映像＆フィード

PC

バックシステムに送信する．

図 4

カート用 CG 映像＆フィードバックシステムは「らくがカート追跡システムの構成

きクルーズ」の CG 都市構築システムとカート内部 CG 映

テンツと異なり，カートはユーザの運転によって自由に移像システムを合わせたものとほぼ同じである．CG 生成シ動する．お絵描きで生成した三次元 CG 都市をカートを運

ステムから送信された街や車の CG モデルデータから三次転して自由に移動するには，カートの位置と方向を逐次取

元 CG 都市を構築して，三次元 CG 映像を生成する．カー得して，三次元 CG 都市内にある仮想カートの位置と方向

ト用 CG 映像＆フィードバックシステムは後述するカートに反映させる必要がある．

追跡システムともネットワークで接続されており，カートそこで，本研究で新たに追加したカート追跡システムは，の位置と方向に関する情報を常時受信している．そして，自由に移動するカートの位置と方向をリアルタイムで取得

カートの位置と方向の情報に基づいて三次元 CG 都市内のする．図 4 にシステム構成を示す．

仮想カートの位置と方向を決定して，仮想カートを視点とカートの位置の取得は二次元 LiDAR に基づいて行う．

する三次元 CG 都市の CG 映像をリアルタイムで生成す

まず，二次元 LiDAR でカートが走行するエリアの床面をる．また，仮想カートと三次元 CG 都市内の各建物，車とスキャンする．このとき，カートのタイヤ設置部分がスの位置関係を逐次確認して，衝突の有無を判定する．そしキャンされることになる．て，衝突が発生したと判定した場合には，建物を破壊するなど映像によるフィードバックを発生させるだけでなく，音の発生や実空間のカートを振動など触覚的なフィードバックも行う．

4.2 追跡手法
まず，スキャンした結果を二値画像化する．走行エリア内にあるのはカートだけであり，ノイズ等の小領域の除去

カート追跡システムは，今回新たに追加されたシステムを行うことで二値画像ではカートのタイヤ部分だけが領域である．このシステムには二次元 LiDAR が接続されておとして抽出される．そして二値画像に適切な膨張処理を適り，カートの位置と方向を取得して，カート用 CG 映像＆用することで，2〜4 つのタイヤ領域が抽出される．抽出でフィードバックシステムに逐次送信している．

きるタイヤ領域の個数は LiDAR に対するカートの方向に使用するカートは，子供用の乗用電動カートである（図3）．全長 128cm，全幅 78cm，全高 76cm で，乗車定員は 1よって変化するが，予備実験ではタイヤ領域が 1 つしか抽出できない状況は確認されなかった．

名である．現状のシステムでは，カートのボンネット上にカートの位置と方向は抽出したタイヤ領域に基づいて決

カート用 CG 映像＆フィードバックシステムのノート PC

定する（図 5）
．そのためには，各タイヤ領域がカートの左を設置している．カートはカートに設置されているアクセ

右前後のどのタイヤなのかをラベリングする必要がある．

ルとハンドルで運転する他，リモートコントロールで運転

そこで，初期のラベリングは手動で行う．タイヤ領域が 2することもできる．

つ以上抽出されている状態で，各領域に対して FL（左前），4. カート追跡システムとカート位置の 3DCG
空間への反映4.1 カート追跡システムの構成「不思議なスケッチブック・ザ・ライド」では従来コン© 2021 Information Processing Society of Japan

FR（右前），RL（左後），RR（右後）のいずれかのラベリングを行う．
ラベリングを行ったら，各タイヤ領域の重心座標に基づいて，4 つのタイヤの二次元座標 pFL ，pFR ，pRL ，pRR を求める．ここで，前後のタイヤ間隔 w，および左右のタイ

439

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

FL

3A012021/3/10

FRpFR

pFLppRL
RL

図 5pRRRR(a) カート走行エリア(b) 2 台の二次元 LiDAR

カートの位置と方向の決定

ヤ間隔 d は事前に測定可能であるため，2 つのタイヤの座標が決まれば，残りのタイヤの座標は計算で求めることができる．例えば，前後の左側のタイヤ座標 pFL と pRL が取得できれば，pFL − pRL を 90 度回転して正規化したベ(c) お絵かきからの街 CG の生成 (d) 構築された三次元 CG 都市

クトル t を求める．そして，前後の右側のタイヤ座標 pFR

図 6 実験の様子と pRR は，以下の式で求めることができる．

pFR = pFL + wt
pRR = pRL + wt

(1)

CG 生成システムおよび車 CG 生成システムのデータを用(2)いて構築した三次元 CG 都市内に仮想カートを配置する．

前後右側，左右前側，左右後側のタイヤ座標が取得できた
場合も，同様の考え方で残りのタイヤ座標を計算で得ることができる．
そして，手動で初期のラベリングを行った後，以降のフレームにおける各タイヤ領域については，前フレームのタイヤ座標周辺を探索してタイヤ領域を関連付けることでラベリングを自動的に行う．カートの位置や方向によっては

1 つまたは 2 つのタイヤが他のタイヤによって隠れてしまい，タイヤ領域が抽出できない場合がある．このとき，該当するタイヤ座標の周辺を探索してもタイヤ領域が見つからないため，抽出されたタイヤ領域のラベリング結果に基づいて，前述の手法でタイヤ座標を計算で求める．探索領域をタイヤ座標周辺に限定することで，カート走行エリアに人が入った場合でも安定的なカートの追跡が可能である．

4 つのタイヤの二次元座標 pFL ，pFR ，pRL ，pRR が得られれば，カートの二次元座標 p はタイヤ座標の平均値としpFL + pFR + pRL + pRR(3)4
また，カートの方向ベクトル v は後方タイヤから前方タp=イヤへの方向ベクトルとして以下の式で求める．

pRL + pRR
pFL + pFR
−22v′v = ′|v |を仮想カートに適用することで，実空間のカート移動によって三次元 CG 都市内を仮想カートで自由に移動することができる．
カート用 CG 映像＆フィードバックシステムは，三次元CG 都市内の建物や車と，仮想カートとの位置関係を常に把握している．そのため，それぞれで衝突判定を行うことで，仮想カートの移動に対して三次元 CG 都市内の建物や車をインタラクティブに反応させることができる．また，カートに振動モータを装着して，仮想カートが三次元 CG
都市内で建物や車と衝突したときに振動モータを稼働させることで，三次元 CG 都市内の衝突を実空間の体験者に対して触感としてフィードバックさせることも可能となる．
なお，現時点では仮想空間での衝突に対する実空間へのフィードバックは建物や車の破壊を表示する映像的なフィードバックだけを実装している．

5. システム実装と実験て以下の式で求める．

v′ =そして，カート追跡システムから送られたカート位置情報

5.1 実装提案手法を検証するためにシステムを実装して実験を行った．図 6 に実験の様子を示す．
カートへの乗車は子供のみ可能であるため，今回はカー(4)(5)

そして，カートの二次元座標 p とカートの方向ベクトル

トの運転はリモートコントロールで行った．カートの最高速度は約 3(km/h) である．
カートをスキャンするための二次元 LiDAR は北陽電機の UST-20LX-H01（スキャンステップ角：0.125 度，スキャ

v を逐次計算して，これらの値をネットワーク経由でカーン範囲：20(m)，フレームレート：最大 40(fps)）を用いた．

ト用 CG 映像＆フィードバックシステムに送信する．

カートの走行するエリアは 500×500(cm) の正方形である．
このサイズであれば 1 台の LiDAR でもスキャン可能であ

4.3 カート位置の 3DCG 空間への反映とフィードバックるが，実験ではより広い範囲への拡張も考慮して，2 台のカート用 CG 映像＆フィードバックシステムでは，街LiDAR をエリア中央に設置して，それぞれエリアの半分ず© 2021 Information Processing Society of Japan440

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

3A01
2021/3/10

つをスキャンした．そして，2 台の LiDAR によるスキャン結果を統合して，500×500 画素，つまり 1 画素あたり1(cm) の解像度で二値画像化した．
カート追跡システムの PC はカート走行エリア外に設置しており，LiDAR からのデータを有線 LAN で取得する．
実装は MacBook に C++を用いて行い，二値画像処理のた(a) 移動前の状態

めに OpenCV を用いている．タイヤ領域のラベリングのための探索領域は，カートの最高速度を考慮して，各タイヤ座標から距離が 30(cm) 以内とした．
街 CG 生成システムは従来システムからの変更はない．
そして，500×500(cm) に相当するエリアだけのお絵描きを行い，そこから建物やオブジェクトの生成を行った．その(b) 移動状態 (1)ため，今回の実験は三次元 CG 都市としては非常に狭いエリアとなっている．なお，今回の実験では車 CG 生成シス
テムは使用しなかった．
カート用 CG 映像＆フィードバックシステムは前述のようにカートのボンネットに設置している．実装は Mac-

BookPro に C++を用いて行い，三次元 CG 映像生成のた(c) 移動状態 (2)めに OpenGL を用いている．システムは，街 CG 生成シ
ステムから取得した建物 CG に関する情報に基づいて三次

図 7

二次元 LiDAR によるカートの位置と方向の取得

元 CG 都市を構築する．このとき三次元 CG 都市内において，実空間のカート走行エリアの境界に相当する部分に高に反映されて，カートの移動に同期して生成される三次元さ 50(cm) の壁を設置することで，カート運転中に範囲外CG が適切に変化していることが確認できた．そのため，に出ることを視覚的に抑制している．

生成された CG をカートに乗って観察した場合には，実際また，カート追跡システムが取得したカートの二次元座標と方向の情報は無線 LAN の TCP 通信を経由して 30(fps)に CG 空間内を運転しているような感覚が得られることが期待される．

で受信して，三次元 CG 都市内の仮想カートに反映させて

ただし，カートの移動に対する追跡結果算出の遅延は最いる．仮想カートと各建物 CG との衝突判定は中心座標同大で約 0.4 秒発生する場合があった．原因としては，処理士の距離（50(cm) 以内）だけを用いており，衝突したと判速度の不足の他，タイヤ領域抽出のための膨張処理に伴う定場合には CG 建物を破壊して消去している．振動フィー平滑化の影響が考えられる．

ドバックは未実装である．

そこで，カートに被験者が乗り込んで，カート用 CG 映像＆フィードバックシステムの画面を見ながら運転できる5.2 実験かどうかを確認する実験を行った．被験者は 20 代の女性

図 7 に二次元 LiDAR に基づくカートの位置と方向の取1 名である．図 9 に実験の様子を示す．被験者に対する聞得の様子を示す．この例では，移動前の状態は 1 つのタイき取り調査では，システムの画面を見ながら十分に運転可

ヤが他のタイヤで隠されており，抽出できたタイヤ領域は能であるという回答を得た．また，遅延についてはほとん

3 つのため，タイヤ座標は 3 つしか取得できていないが，ど気にならないという回答であった．ただし，画面サイズ取得できたタイヤ座標から残りのタイヤ座標を計算で求め等の影響で遠近感を十分に把握できない場合があり，運転ている．そして，カートの位置と方向が正しく取得できてに没入しすぎると実空間の壁に衝突しそうになる場合がいることを確認した（図 7(a)）．また，前フレームのラベあった．

リング結果とタイヤ座標を用いることで，カートが移動した場合でも現フレームのタイヤ領域が正しくラベリングされて，移動するカートの位置と座標を連続的に取得できることを確認した（図 7(b)(c)）．

6. まとめ本研究では，実際のカートを自由に運転しながら，自分のお絵描きから生成した三次元 CG 都市内に没入して移動

図 8 にカート用 CG 映像＆フィードバックシステムで仮するような体験が可能な「不思議なスケッチブック・ザ・想カートの視点から見た三次元 CG 映像を生成した様子をライド」を開発した．ここでは，仮想カートと三次元 CG

示す．カートはリモコンで操縦している．実際のカートの都市内のオブジェクトとの関係を映像でフィードバックす

位置と方向が三次元 CG 都市内の仮想カートの位置と方向ることも実現した．本研究で実現したような体験が可能な© 2021 Information Processing Society of Japan441

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

3A01
2021/3/10(a) 移動前の状態(c) CG 建物の手前の状態(b) 移動し始めた状態(d) CG 建物に衝突した状態(e) エリア端に移動した状態

図 8 実空間のカートと 3DCG 空間の仮想カートの移動の同期の様子

参考文献
チームラボ, “お絵描き水族館”,
https://futurepark.teamlab.art/playinstallations/sketch aquarium/ (2013)．
[2] ワンダープラネット, “SKETCH RACING”,
https://litpla.com/attraction/sketch racing/ (2018)．
[3] 水野慎士, 内藤将司, 岡部紗千子, 磯田麻梨乃, 伊藤玲, 岡本芽唯, 近藤桃子, 杉浦沙弥, 中谷有希, 廣瀬元美, “「お絵描きダンスステージ」の提案”, 情報処理学会インタラクショ
ン 2015 論文集, C69, pp. 989–993 (2015).
[4] S. Mizuno, “Digital Contents for Creating and Watching 3DCG of Vehicles Based on Drawing”, Proc. of IEVC
2019, 5A, 7pages (2019).
[5] 水野慎士, “手描き 3DCG 空間内に没入して移動するコンテンツの提案と開発”, 情報処理学会研究報告, Vol. 2020DCC-25, No. 2, 8pages (2020).
[6] カヌチャリゾート, “ムーンライトクルーズ”,
https://www.kanucha.jp/feature/stafan/event/moonlightcruise/ (2019).
[7] Master of Shapes, “VR GO KARTS”,
https://masterofshapes.com/work/vr-go-karts/ (2018).
[8] meleap, “HADO KART”,
https://meleap.com/hadokart/coinrush/jp/ (2018).
[9] 任天堂, “マリオカートライブホームサーキット”,
https://youtu.be/LvPON803cOQ (2020).
[10] Inigo Quilez, “Quill: VR drawing in the production ofOculus Story Studio’s new movie”, SIGGRAPH 2016,
Real-Time Live! (2016).
[11] 水野慎士, “輪郭検出を用いた「不思議なスケッチブック」の CG 表現拡張とイベント展示のためのビューア開発”, 芸
術科学会論文誌, Vol. 17, No. 4, pp. 72–82 (2018).

[1]

図 9 カートに乗車して運転する実験の様子

インタラクティブデジタルコンテンツはこれまでになく，イベント等で実施すれば子供を中心とした多くの人に楽しんでもらえることが期待される．
今後は，今回実装しなかった振動等を用いたフィードバックも実現することでインタラクティブ性をより高める拡張も考えている．そして，床面や壁へのプロジェクションマッピングと組み合わせて，より高い没入感のあるエンタテインメントコンテンツに発展させるつもりである．

© 2021 Information Processing Society of Japan442