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

A14
2015/3/5

でこぼこスケッチ:空間の凹凸情報をキャンバスに見立てた
立体スケッチシステム
友広 歩李1,a)

角 康之1,b)

松村 耕平2,c)

概要：スケッチはデザイナの情報記録，共有，そしてアイディアの発想のためのツールとして使用されている．本研究ではタブレット PC とデプス (depth) カメラを用い，空間構造の理解やデザインを促すスケッチインタフェースを開発した．手描きのスケッチに三次元構造を組み合わせ，奥行きのついたスケッチの世界を歩き回ることや．空間内に付箋を貼るようにメモやアイディアを描き加えることが可能となる．対象
ユーザは建築デザインやサービスデザインを手がけるデザイナの人々である．複数人で同じ空間にスケッチを行うことや，スケッチ後の空間が共有でき，情報の記録から活用までを支援するシステムを目指す．

Sketching on 3D Structured Surfaces
Ayuri Tomohiro1,a)Yasuyuki Sumi1,b)Kohei Matsumura2,c)Abstract: Sketching is an intuitive and powerful method to capture and externalize designers’ idea. This
paper presents a novel sketching tool to facilitate the designers to understand and design 3D structure oftarget objects and space by using tablet PC and camera with depth sensor. Users of the proposed system
can take a picture of the target objects and sketch with reference of the taken picture. They can not only
sketch on the pictures but also change their viewpoint of the sketched space since the system captures 3D
structure by depth sensor as well as RGB data. Resultly, the users can easily understand and manipulate
the target objects by sketching, and then extend their ideas by drawing the textures in their mind on the3D surface. This paper also discusses a feasibility of extension of the simple idea from personal usage into
collaborative spatial designing by multiple designers by enabling their merged 3D sketch space.

1. はじめにを素早く記録し見返すことを通して，新たな体験を創造していくことが必要となる．スケッチは，そのための重要な人工物をデザインするということは，人から独立した手段の一つである．デザイナが，他のデザイナやユーザとモノを形作ることではなく，そのモノとインタラクショ

自らの視点や着眼点を伝え合う手段としてもスケッチは強ンすることで得られる人の体験をデザインすることであ力である．

る [1], [2]．したがって，デザイナには，物体としてのモノ

スケッチとは，自分の見たものや風景，状況など，あるのデザインだけでなく，そのモノが置かれるべき現場の観いはまだ実在しない形を表現し，素早く紙の上などに書き察や，モノと人との間のインタラクションの場面を観察す留めることをいう．スケッチは，創造的な解を得るためのることが欠かせない．自らが観察のために現場へ赴き体験優れた思考環境であるとも言われている [3]．描く事によっするということもある．デザイナはそこで起きていることてそこに何がありどんなことが起きているのかを見たり考12a)b)c)

公立はこだて未来大学
Future University Hakodate
立命館大学
Ritsumeikan University
a-tomohior@sumilab.org
sumi@acm.org
matsumur@acm.org© 2015 Information Processing Society of Japan

えたりするような，能動的な行為なのである．そのためスケッチにおいては，ただ見ている風景やものを絵として描くだけではなく，自身の気付きや変化する状況を表現する工夫が必要となる．文字情報を入れたり，一部分を拡大して描いたり，余白に寄せ書きのように描き込んだり，視点195

を宙に浮かばせた俯瞰図にするなどといった様々な表現がOverCoat はあらかじめ用意された 3D のモデルをキャン試みられており，このように描かれたスケッチは，描き手バスとして色を塗る事を可能にした．の見たものや考えを直感的に人に伝えるツールとなる．

本研究ではスケッチの質は描き手によって状況から切り本研究では，手描きのスケッチに三次元構造を組み合取られ，記録しようとされていた情報によって決まると考わせることで空間構造の理解や新しいデザインを促すス

えており，描かれたスケッチ空間の構造の理解を促す事をケッチインタフェースを提案する．2D のスケッチを描く目的としている．本研究が目指すシステムはスケッチを記ことと同じように 3D の情報を持つスケッチが描けるよう録として活用するためのシステムであるといえる．にし，スケッチとして残せる情報を増やすだけでなく，奥スケッチをより簡単に描く方法として下書きや画像を用行きのついたスケッチの世界を歩き回ることや，空間内にいる研究には，写真を参考資料として段階的にガイドを生メモやアイディアを描き加えることを可能にする．複数人

成し対象の描き方を示す The Drawing Assistant[10] や，スで同じ空間にスケッチを行うことや，スケッチ後の空間がケッチでトレースするための下書きをユーザーの描画に合共有でき，デザインにおける情報の記録から活用までを支わせて動的に生成し，提案する ShadowDraw[11] などがあ援するシステムを目指す．今回は，タブレット PC とデプる．本システムもこれに倣い，写真へのなぞり書きによっス (depth) カメラを用いてプロトタイプのスケッチインタてスケッチを始める事で描き手がより手軽に正確なスケッフェースを開発した．

チを描くことができ，3D 構造との対応を行っている．

2. 関連・先行研究

3. でこぼこキャンバスを用いた立体スケッチ
システム

2.1 スケッチによる創造的な活動支援
手描きのスケッチを入力としたコンピュータ上での創造

3.1 でこぼこキャンバス的な活動の支援の試みには，近藤らによる紙のスケッチ

でこぼこキャンバスとは，描こうとしている空間そのもブックの絵を 3DCG で拡張し絵の変化を楽しむツール [4]のに線を引いたり塗ったりするようなことができる，でこや鈴木らの 2D の複数のスケッチを 3D 空間に配置できるぼこな面を持つキャンバスのことである．本研究では，シツール [5] などがある．

ステムは実空間の 3D 構造をポイントクラウドとして持っ立体的な構造の表現支援においては閉じたスケッチのスており，画面上に線を引く際にその座標を参照することでトロークから 3D モデルを作成する五十嵐らの Teddy[6]，実空間とおなじでこぼこを持つキャンバスを生成してい仮想の 3D 空間にスケッチを行える Web サービスとしてる．描き手から実際に見えているものの表面がキャンバス

は Rompola*1 やはてなろくろ *2 などが公開されてきた．になることで，表面の線や塗りは面に張り付くように描か

HMD を利用し目の前の拡張現実空間をキャンバスとれる．これにより，一視点からは一枚のスケッチとして描して空中にペンで描き，3D モデルの作図を可能にした

いた通りに見えるが，視点を移動すると面の見え方が変わGravity*3 や BlueGrotto[7] もある．

り，同時に表面の線や塗りも一緒に見え方が変わって 2D

これらのシステムの多くは，あらかじめ頭の中にある 2Dのスケッチを 3D のように見る事が可能になる．

や 3D のイメージを形にすることを目的としており，モノや空間の構造を 3D モデルとして描く事ができる．しかし，

3.2 提案方法

3D モデルの作成では何本も線を引ていく中で意味のある本研究ではタブレット PC とデプスカメラを組み合わせ線を見つける，といった描く事の利点が活かせなくなったシステムを用い，スケッチに描いた空間構造の理解や立てしまう．そこで，本研究では，複数のスケッチストロー体的なラフデザインを促すスケッチインタフェースを開発

クを 3D 空間に配置することで，スケッチのあいまいさをする (図 1)． 手描きのスケッチに描画対象の世界の三次元保ったまま表現することを可能にした．

構造を組み合わせることで，奥行きのついたスケッチの世界を歩き回ることや，回り込み，他の視点からの描き込み

2.2 センサを用いたスケッチの拡張が可能になる．

深度センサや 3D モデルを用いてスケッチを拡張する

描き手ははじめに深度の取れるデプスカメラを用いてこ研究では，名取らの DepthSketch[8] や，OverCoat[9] があれから描く対象の写真を撮影する．ユーザは，スケッチのる．DepthSketch ではデプスカメラを用いて深度情報を取画面のどこに何を描くのかを写真で大まかに確認し，素早得し，ストロークの太さに強弱を付ける事により遠近感をくスケッチを描く．

再現し，一枚のスケッチとしての質を高めるものである．

描いた線は 2D に見えるが，システム内では撮影時に取得した深度情報をもとにしたでこぼこなキャンバスへ張り

*1
*2
*3

http://rompola.com/
http://rokuro.hatelabo.jp
http://gravitysketch.com/© 2015 Information Processing Society of Japan

付くように配置されており，2D のスケッチが三次元のスケッチとして表現されている．このスケッチ空間を作る事

196

で，描いたスケッチを別の視点から見返したり，描画中やcessing は Java ベースで設計された開発言語及び統合開発

描画後に空間内へ入って行ったり，新たに仮想的なメモや環境である．Processing 上でデプスカメラを用いてデータ他のスケッチにより情報を貼付けたりする事が可能になる．

を取得するために，OpenNI，NITE，Simple OpenNI といったライブラリを利用している (図 2)．OpenNI は Kinect やXtion といったデプスカメラからデータを取得するためのライブラリであり，それらのデータを Processing から使用することができるようにするのが Simple OpenNI とNITE である．プロトタイプシステムでは，Xtion からデプスデータと RGB データを取得するためにこれらのライブラリを使用した．

5. プロトタイプシステム
5.1 スケッチインタフェース
描き手はタッチペンベースで操作を行えるタブレットPC(Microsoft 社 Surface Pro) と RGB センサーと深度センサーのついたデプスカメラ (ASUS 社 Xtion PRO LIVE)を組み合わせてスケッチを行う (図 3)．スケッチの描き手はこれから描く対象をカメラで撮影し，撮影した写真へのなぞり描きによってスケッチの描画をはじめる (図 4)．写図 1 スケッチシステムの概要

真をなぞったり，表面を塗ることにより，短時間でも対象物の位置や形，その場の状況などを描くことが可能になる．

4. スケッチ空間生成システムの実現環境

スケッチにはタブレット PC に対応するタッチペンやマウスを使う事ができる．プロトタイプシステムではスケッチ4.1 ハードウェアを描く機能の他に，描き終わったスケッチの立体構造を見4.1.1 タブレット PCる機能，書き終わったスケッチを使って新しいスケッチをプロトタイプシステムではタブレット PC として Mi-作る機能を実装した．

crosoft 社の Surface Pro(以下 Surface) を使用した．画面サイズは 10.6 インチ，重さは 903 グラムである．描き手がデプスカメラと組み合わせた PC を両手で持ちながら自由に歩き回ることや対象の撮影を行うことができる．Surfaceの画面はタッチスクリーンになっており，デジタルペンが付属している．マウスやタッチによる操作も可能だが，ペンを使うと，紙に書くように手描きのスケッチが行えるた
め効率的にシステムを利用することが出来るようになる．

4.1.2 センサと取得できる深度データ
デプスカメラとして ASUS 社の Xtion PRO LIVE(以下Xtion) を使用した．このカメラには RGB センサと深度センサが搭載されている．深度センサは赤外線によって対象までの位置を計測できるものであるため，日光の影響を受けない屋内での使用が推奨されている．センサの有効範囲は水平 58°，垂直 45°，対角 70°とされている．センサの有効範囲内にあり，かつ計測できたデータを 3D 空間で

図 2

processing から Xtion を使う際の環境の座標を持つ点群として保存し，本研究では深度データとして使用している．

5.2 スケッチ画面とツールパレット
4.2 ソフトウェア
ソフトウェアの開発には Processing を使用した．Pro-© 2015 Information Processing Society of Japan

スケッチインタフェースはスケッチ画面 (a) とツールパレット (b) から成る (図 5). ツールパレット内は上から順

197

の線の位置を決定するペンツールである．線を描こうとしている位置の深度とそれまで描いていた深度との差の絶対値をとり，一定値を超えた場合に書き込み時の深度を直前の深度に一致させることで，他の深度にまたがって線が描かれる事を避けた．また，線の太さを変化させることで，細い輪郭線から面の塗りまでを行えるようにした．

• スプレー– スプレーは広い面や塗りを表現するツールである (図6)．スケッチではたくさんの線を重ねることで陰影の濃さや面の表現を行うことがあるが，このツール
ではスプレーのように点群を用いて深度データを覆図 3 プロトタイプのスケッチシステムの使用例

うように塗ることで面を表現出来るようにした．不透明な面を作る際にも使用することができる．

図 4

写真からスケッチへの遷移図 6 スプレーによるスケッチ

番に，スケッチストロークの全消し・取り消し (c)，ペン色(d)，2 つ以上のスケッチを扱う際のツール (e)，スケッチを描くためのツール (f)(g)(h)(i)，複数のスケッチを扱うツー• 消しゴムル (k)(j)，撮影とスケッチの切り替えボタン (m) である．

– スケッチの間違いや深度データに影響を受けた意図しない余分な線を消すためのツールである．三次元
空間上に線が存在するため，線をこすって消すのではなく，カッターのように線を切る操作で消えるように実装した．

• 深度スポイト– 隠れてしまったオブジェクトや，風景の深度に依存しないメモ書きでは，実際の深度を無視して任意の深度へ書き込む必要がある．そこで，任意のオブジェ
クトと同じ深度の値を定数としてスケッチを行う深度スポイトを実装した．同じ深度で描きつづけるオブジェクトに対して引出し線を描きいれ，空中にメモを書くといった使い方が出来る．
図 5 スケッチシステムの画面とツールパレット

5.4 スケッチ空間の探索
スケッチ空間内で視点を変えることで，描いたスケッチ

5.3 新規スケッチ操作を異なった視点から見返すことができる (図 7)．視点移動

新規スケッチ操作は写真を撮影し，写真の上になぞり書(j) のツールを選択し，スケッチをドラッグすることで描かきのように手描きでスケッチを描く事で実現される．写真れているものの実空間上の位置やそのもの自体の立体的なの表示・非表示を切り替えることでスケッチとしての整合構造を直感的に示す事ができるようになる．また，空間の性を確認しながら描いていくことが可能である．スケッチ

デザインにおいてラフなプロトタイプをスケッチで描き，を描く時にはペン (f)，スプレー (g)，消しゴム (h)，深度検証する事が可能である．

スポイト (i) といったツールを使う事ができる．

• ペン– 線を引いた位置の深度情報に基づいて三次元空間で© 2015 Information Processing Society of Japan

5.5 スケッチ空間及び深度データの合成
2 枚のスケッチデータを合成することで 1 枚のスケッチ

198

図 7

スケッチ空間での視点移動

では表せられなかった情報を補い，さらに広い空間の表現の (a) 左右方向の回転では，前方に居る人物と後方にいるや把握をすることができる (図 8)．スケッチできる範囲は人物が同じ線にまたがって描かれている．意図した線を描写真に映り込む範囲に限定されしまうため，この機能を使くためには，何度も描き直し，その都度スケッチを回転さうことでより広く沢山の情報を 1 枚のスケッチに盛り込むせて確認する必要があった．この問題は補正ペンを使用すことができるようになる．

ることにより線のゆれやスケッチの崩れを抑えることで避スケッチの合成では，2 枚のスケッチ空間を任意の位置ける事ができた．に動かして繋ぎ合わせるために片方のスケッチ空間を移動，回転させる方法を取った．移動や回転の位置決めは描き手自身が手動で行う必要がある．

6.2 スプレーによるスケッチ
線で描かれたスケッチには，面が存在しないため，ある方向から描いたスケッチを回転した時に，手前と奥のオブジェクトの線が重なって表示されたり，輪郭線が歪み，整合性のとれていないスケッチとなってしまう．プトロタイ
プシステムでは面を塗る表現ができれば，回転後もある程度まで整合性を持ったスケッチが再現できることを確認している，例えば，図 7 の (b) 縦方向の回転では立方体の内側として斜線や，緑の上面が，回転に伴って青の側面で隠れて見えている．プロトタイプシステムで大きなものや，人間などの柔らかく複雑な対象になるにつれ，スプレーによる再現は困難になるため，表現方法に改良を加える必要がある．

6.3 スケッチの合成
スケッチの合成では，スケッチ同士の位置関係を描き手
図 8 複数視点からのスケッチの合成例

自身が調節しているが，同じ空間に対して描かれているスケッチならば，深度データの類似点を利用することで自動化出来ると考えている．また，スケッチの合成では，別の6. プロトタイプシステムでの問題点と考察

時間の同じ場所のスケッチや，時間も場所も全く違う空間

6.1 ペンによるスケッチを何枚もおなじスケッチ空間に存在するかのように配置すペンのみを用いたスケッチの場合，線の位置決定は撮影るといった使用も可能である．複数枚のスケッチを同じ空時の深度情報の値をそのまま利用しているため，データ間に並べる事で状況の時間変化等の情報を一つのスケッチの抜けやブレによって線がゆれてしまう現象が見られた．

空間として生成することが可能になると考えている．

また，オブジェクトの輪郭線などを描く際に，手前のオブ

7. おわりにジェクトと奥のオブジェクトにまたがり線が描かれてしまい，スケッチが崩れてしまう場合があった．例えば，図 7© 2015 Information Processing Society of Japan

本研究ではタブレット PC とデプスカメラを用いること199

で，素早く立体的なスケッチを描くことができるスケッチ[9]

インタフェースを開発した．複数人で同じ空間にスケッチを行うことや，スケッチ後の空間が共有でき，情報の記録から活用までを支援するシステムを目指す．製作したプロ[10]

トタイプシステムでは立体的なスケッチを描き，スケッチ空間内へ入ってスケッチを見ることができることを確認した．
今後の発展としては以下のように考えている.

[11]

Johannes Schmid, Martin Sebastian Senn, Markus Grossand Robert W. Sumner, OverCoat: an implicit canvasfor 3D painting, ACM SIGGRAPH 2011, papers Article
No. 28, (2014).
I.E.Bousseau and A.Tsandilas, The drawing assistant :Automated drawing guidance and feedback from photographs, Proc. ACM UIST’13, (2013).
L.Y.J.Zitnick and C.M.F.Cohen, Shadow-draw: Realtime user guidance for freehand drawing, ACM Trans.
Graph., Vol.30, No.4, (2011).

7.1 複数製作者によるスケッチの生成開発したプロトタイプシステムでは，一人の描き手がスケッチを行うことを想定しており，複数の描き手が同時に同じ空間でスケッチを行うことや，同じオブジェクトをスケッチすることは想定していない．スケッチ後の空間の共有を可能にするシステムを開発する．

7.2 複数スケッチの位置合わせの自動化
現在のシステムでは，複数のスケッチ空間をひとつの空間として再構成する場合は同じ空間として矛盾がないように人の手で調整を行っている．しかし，この位置合わせにかかる手間はスケッチ一枚を描く手間よりも多く，複数のスケッチを短時間で描き合成する行為を阻害していると考える．今後は位置合わせの行い方を再度模索し，より素早くスケッチ空間の生成を行うことを可能にする．
謝辞

本研究は「独立行政法人情報処理推進機構 2014年度未踏 IT 人材発掘・育成事業」に関わる委託業務として補助を受けている．
参考文献
[1]
[2]
[3]
[4]

[5]

[6]

[7]

[8]

Donald Norman: The Design of Everyday Things, BasicBooks. (2002)
Bill Moggridge: Designing Interactions, MIT Press.
(2007)
岡本誠: 共有するデザインシンキング，デザイン学研究.
特集号 20(1)，12-15. (2012).
近藤菜々子，水野慎士, スケッチブックでのお絵描きを三次元 CG で拡張する映像ツールの提案とその実現方法，
情報処理学会論文誌 デジタルコンテンツ Vol.1 No.1 1–9.
(2013).
鈴木昭弘，和嶋雅幸, 二次元ペイントと Wii リモコンによる直感的 3D お絵かきシステムの開発と研究，情報シス
テム学会第 4 回全国大会・研究発表大会，D1– (2008).
Takeo Igarashi, Satoshi Matsuoka, Hidehiko Tanaka,”Teddy: A Sketching Interface for 3D Freeform Design”
ACM SIGGRAPH’99, Los Angels pp.409-416. (1999)
井上智之，西住直樹，鈴木伸明，安福尚文，佐賀, 仮想空間
中での手書き認識に基づいた 3 次元モデリングインターフェース BlueGrotto の提案，電子情報通信学会論文
誌 D，pp.1309–1318， Vol.87，No.6. (2004).
名取則行，福地健太郎, DepthSketch:深度情報を利用してスケッチに遠近感を与える描画手法，情報処理学会研究報告. HCI, ヒューマンコンピュータインタラクション研究会報告 2014–HCI–157(23), 1–6. (2014).

© 2015 Information Processing Society of Japan

200