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

3-410-66
2017/3/2

複数色 CG 物体生成を可能にする「不思議なスケッチブック」の拡張
水野 慎士1,a)

概要：著者らは普通のスケッチブックに普通のカラーペンでお絵描きをするだけで対話的に三次元 CGシーンを生成してインタラクションを行うことができるメディアシステム「不思議なスケッチブック」を開発してきた．従来システムは単色で塗りつぶされた領域ごとに CG 物体を生成しており，複数の色が組み合わされた CG 物体として生成することはできなかった．本稿では，スケッチブック内で黒線で囲まれた領域については，複数の色で描かれていても一つの CG 物体を生成してインタラクションを行うことができる拡張を行う．この拡張により，従来手法で生成した CG 物体と組み合わせてより多彩な三次元 CGシーンの生成とインタラクションが可能となる．

Extension of “Amazing Sketchbook”
for Creating Multi-Colored 3DCG Objects
Shinji Mizuno1,a)Abstract: We have developed “Amazing Sketchbook”: an interactive system in which a user can create a3DCG scene interactively by drawing a picture with ordinary physical color pens on a ordinary sketchbook.
The former system generated 3DCG objects for each region painted in a single color, and could not generate
3DCG objects with multi-colors. In this study, I extend the system to generate multi-colored 3DCG objects
and interact with them for regions enclosed with black lines. The extension could create more variable 3DCG
scenes and interact with them by combining with 3DCG objects created by the former method.

1. はじめに普通のカラーペンで絵を描くだけで三次元 CG シーンを生成してインタラクションを行うことができるメディアシス

お絵描きや塗り絵は紙とペンがあればいつでもどこでもテム「不思議なスケッチブック」を開発してきた [5][6]．こ始められ，多くの人にとって最も身近な芸術制作の一つでのシステムでは，スケッチブックにカラーペンで自由に描ある．そのため，CG 制作にお絵描き感覚のインタフェー

かれる物体をビデオカメラで撮影しながら分析することで，スを取り入れることは， CG 制作をより多くの人々にとっ描いた各物体から様々な形状の三次元 CG 物体をリアルタて扱い易いものにすると考えられ，デジタル技術を用いてイムで生成して三次元 CG シーンを作り上げる．そして，お絵描きを発展させたような CG 制作手法がいくつも開発

スケッチブックに描いた物体に触れたりスケッチブックをされている [1][2]．そして，エンタテインメント分野や子揺らしたりすることで，三次元 CG 物体を変形したり動か供向けワークショップなどでもお絵描きや塗り絵を用いたしたりするなど，三次元 CG シーンとのインタラクション

CG 制作アプリケーションが活用されている [3][4]．

も可能である．

そのような背景の中，著者らは普通のスケッチブックに従来の「不思議なスケッチブック」では単色で塗りつぶされた領域ごとに CG 物体を生成しており，複数の色が組

1a)

愛知工業大学情報科学部
Faculty of Information Science, Aichi Institute of Technology, Toyota, Aichi 470–0392, Japans mizuno@aitech.ac.jp© 2017 Information Processing Society of Japan

み合わされた CG 物体を生成することはできなかった．そのため，ワークショップなどで「不思議なスケッチブック」

889

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

3-410-66
2017/3/2(a) 輪郭距離に基づく CG 物体(b) 底辺距離に基づく CG 物体

図 1 「不思議なスケッチブック」を使用している様子

Fig. 1 A user using “Amazing Sketchbook”を体験した子供たちからは，複数の色を用いた三次元 CG物体も制作してみたいという要望が多く挙っていた．
(c) 生成された三次元 CG シーンの例

そこで，本研究では「不思議なスケッチブック」で複数の色で構成された三次元 CG 物体の生成を可能にする拡張

図 2 「不思議なスケッチブック」での三次元 CG 物体の生成を行う．そのため，スケッチブック内で黒線で囲まれた領

Fig. 2 Creating 3DCG objects on “Amazing Sketchbook”

域の検出を行い，その領域については複数の色で描かれていても一つの CG 物体を生成してインタラクションを行うことができるように改良する．そして，黒線で囲まれない領域については従来通りの CG 物体生成を行う．これにより，新手法と従来手法で生成した CG 物体と組み合わせて，より多彩な三次元 CG シーンの生成とインタラクションを行うことが可能となる．
図 3

2. 「不思議なスケッチブック」の概要

手による三次元 CG の対話的変形の例

Fig. 3 Interactive deformation of a 3DCG object by a hand

「不思議なスケッチブック」は，普通のスケッチブックにカラーペンで絵を描くだけで三次元 CG を対話的に生成することができ，さらに絵に触れたりスケッチブックを揺システムはあらかじめ与えられたペンの色にのみ反応すらすことで三次元 CG を変形させるインタラクションが可る．そのため，スケッチブック上に手をかざしても手が色能なメディアシステムである．このシステムは通常のお絵領域として認識されることはなく，絵に手で触れるとス描きで使用するスケッチブックとカラーペンに加えて，処ケッチブックに描かれた色領域の一部が手で隠されて形状

理用 PC，Web カメラで構成される（図 1）．使用するカが変化するため，その結果として生成される三次元 CG 物

ラーペンは，赤，緑，青，ピンク，シアン，黄で，各色の体も変形する（図 3）．また，Web カメラ映像のオプティ情報は事前にシステムに与えている．

カルフローに基づいてスケッチブックの動きを検出しておシステムはお絵描き中のスケッチブックを Web カメラで撮影している．まず，Web カメラ映像を三角形パッチで構成された三次元 CG メッシュ面にマッピングする．また，Web カメラ映像をカラーペンの色情報に基づいて色別の領域に分割する．そして，それぞれの色別領域に対して，り，スケッチブックを揺らすことで三次元 CG シーンの各物体も移動や変形が行われる．

3. システムの拡張
3.1 描き方に関する条件

輪郭距離変換や底辺距離変換など色によって決められた処

前章で述べたように，従来の「不思議なスケッチブック」

理を適用して，各領域内の各点での距離値を求める．そしは Web カメラ映像を色別の領域に分割している．そのたて，各領域に対応する位置にある CG メッシュ面の頂点をめ，各領域は単色で塗りつぶされており，シーン中に生成距離値に応じて上方向に移動させる．これにより，スケッされる各三次元 CG 物体も単色であった．

チブック上の各色の領域が領域形状や適用処理に応じてそ

本研究では複数の色で構成された三次元 CG 物体の生成れぞれ様々な形で膨らんだり立ち上がったりして，各色領を可能にする拡張を行う．そのための前提として，スケッ域に対応した三次元 CG 物体が生成されて（図 2(a)(b)），

チブックで絵を描くとき，複数の色で構成される三次元全体としてスケッチブックの絵に基づく三次元 CG シーン

CG 物体を生成した場合には領域を黒線で囲むこととするが生成される（図 2(c)）．

（図 4）．

© 2017 Information Processing Society of Japan890

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

図 4 黒線で囲まれた領域を含む絵の例

3-410-66
2017/3/2(a) V(明度) に基づいて抽出された領域

Fig. 4 An example of a picture with regions enclosed by blacklines

3.2 黒線で囲まれた領域の抽出
スケッチブックには，様々な色をそれぞれ単独で用いて描かれた物体と，黒線で囲んだ領域内に複数の色で描かれた物体が混在する．また黒線は領域輪郭を示すために用いるため，細く描かれる場合が多い．システムの改良には，(b) S(明度) に基づいて抽出された領域

このような絵を Web カメラで撮影しながら，黒線で囲まれた領域を安定的に抽出する必要がある．
そこで，Web カメラ映像を HSV 形式に変換して，各画素の S（彩度）と V（明度）の値に基づいて黒色画素を抽出する．まず，V の値がしきい値以下の領域を抽出する（図5(a)）．これにより，主に黒色画素による領域が抽出されるが，絵を描いている照明環境によっては緑や青などの濃色画素の領域も抽出される．次に，S の値がしきい値以下の(c) 領域 (a)(b) のいずれにも含まれる領域領域を抽出してから領域拡張処理を行う（図 5(b)）．これにより，黒色画素および白や黄色などの淡色画素が大きめに抽出される．そして，V に基づく領域と S に基づく領域のいずれにも含まれる領域を黒色画素として抽出する（図5(c)）．
抽出された黒色画素領域に対して，外側輪郭検出処理を行う．外側輪郭に囲まれた領域内には様々な色が含むことができる．そして，それぞれがスケッチブック上の絵において黒線で囲まれた領域となる（図 5(d)）．

(d) 領域 (c) の外側輪郭内部
図 5

黒線で囲まれた領域の抽出

Fig. 5 Extracting regions enclosed by black lines

3.3 複数の色で構成された CG 物体の生成
本稿では，複数の色で構成された CG 物体と従来手法に配置した各 CG 矩形には，Web カメラ映像から対応するよる単色で構成された CG 物体との差を明確にするため，黒線領域内の画像を切り取ってテクスチャとして貼り付け

複数の色で構成された CG 物体については，黒線で囲まれる．このとき，黒線領域をマスクとして使用することで，た領域を切り出したような表現を用いる．

領域外に相当する CG 矩形の領域は切り取られる．以上のそこで，まず各黒線領域を包含しながら黒線領域の高さと幅を辺の長さとして持つ矩形を求める（図 6(a)）．次に，処理より，黒線で囲まれた領域に沿って絵が切り取られたような三次元 CG 物体が生成される（図 6(c)）．

各黒線領域矩形と同じ縦横比を持つ矩形を CG 空間に配置

スケッチブック上に描かれたすべての黒線領域から三次する（図 6(b)）．CG 矩形の配置位置は黒線領域の位置に元 CG 物体を生成して，描かれた位置に応じて CG 空間のよって自動的に決定する．現状は，Web カメラ映像中で中床に接して配置したり床の上部に浮べて配置することで，央線より下方にある黒線領域に対応する CG 矩形は CG 空複数の色で構成された CG 物体によるシーンが生成される．

間の床に接して立ち上がるように配置して，上方の黒線領域に対応する CG 矩形は中央線からの距離に応じて CG 空間の床の上方に浮かび上がらせる．

© 2017 Information Processing Society of Japan

3.4 単色で構成された CG 物体の生成
黒線で囲まれた領域の抽出が終わったら，Web カメラ映891

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

3-410-66
2017/3/2

なお，スケッチブック上の黒線で囲まれた領域に手で触れると，黒線が切れて領域の抽出が行われなくなるため，生成されていた三次元 CG 物体も消滅する．
単色で構成された三次元 CG 物体とのインタラクション
は，従来通り手で触れるインタラクションと，スケッチブッ
クを揺らすことによるインタラクションが可能である．
(a) 黒線で囲まれた領域を包含する矩形の取得

4. 実験
提案手法を従来システムに追加実装して実験を行った．
使用した PC は MacBookPro(2.8GHz core i7) で，Web カメラからは 480 × 300 の解像度で映像を入力している．実装は C++で行い，CG 映像生成に OpenGL，Web カメラ映像の解析に OpenCV を用いている．
スケッチブックに単色で塗りつぶした領域を生成すると，従来システムと同じように領域が膨らんだり立ち上がったりしたような三次元 CG 物体が生成された．そし(b) CG 矩形の生成て，複数の色で構成される黒線で囲まれた領域を含む絵をスケッチブックに描くと，それぞれの黒線領域内全体が切り取られてハリボテのような三次元 CG 物体が生成され，他の CG 物体と共にシーン内に配置されることを確認した（図 7(a)）．スケッチブックへの絵の描画と CG 物体の生成は種類に関わらずリアルタイムで行われており，拡張した「不思議なスケッチブック」は従来システムと同様にお絵描きから対話的に三次元 CG シーンを生成できることを確(c) マスク処理を伴う CG 矩形への黒線領域貼認した．

り付け

スケッチブックを揺らすと，単色で塗りつぶした領域に

図 6

基づく CG 物体は揺れたり波打ったりするなど色によって複数の色で構成された CG 物体の生成

Fig. 6 Creating CG objects of multiple colors

異なる動作が行われて，黒線で囲まれた領域に基づく CG物体は CG 空間で振り子運動の動作が行われることを確認

像の黒線領域内をスケッチブックの紙の色である白色で塗した（図 7(b)）．単色で構成された CG 物体については，りつぶす．これにより，Web カメラ映像は黒線で囲まれた従来システムと同様に手による変形やオプティカルフロー領域がなくなったような状態になる．そして，この映像にによる運動を行うことができることを確認した．

対して従来手法と同じように色別の領域への分解，色別領他の絵による実験結果も図 8，9 に示す．拡張した「不思域への距離変換，メッシュ変形による三次元 CG 物体生成

議なスケッチブック」においても，従来システムと同様にを行う．

スケッチブックに特別な描き方をする必要はなく，自由にこれにより，複数の色で構成された CG 物体と単色で構成された CG 物体が並存する三次元 CG シーンが生成される．

3.5 インタラクション

絵を描きながら従来よりもバラエティに富んだ三次元 CGシーンの生成が可能となった．

5. まとめ本研究では，お絵描きしながら三次元 CG シーンを対話

黒線領域に基づく複数の色で構成された三次元 CG 物体的に生成することができる「不思議なスケッチブック」にとのインタラクションは，従来システムと同様に Web カメ

おいて，従来システムでは困難であった複数色で構成されラ映像のオプティカルフローに基づいて行う．まず，各三る三次元 CG 物体の生成を行う拡張を行った．自由にお絵次元 CG 物体は初期座標にバネで繋がれていると仮定する．

描きしながら三次元 CG シーンの生成とインタラクション

そしてスケッチブックを揺らすなどによってとオプティカを行うというコンセプトをそのままに，領域を黒線で囲むルフローが検出されると，その値に応じた力を各 CG 物体だけで，よりバラエティに富んだ三次元 CG シーンの生成に与える．そのため，各 CG 物体は初期座標を中心としたが可能となった．

振り子運動を始める．

© 2017 Information Processing Society of Japan

今後の課題としては，黒線領域形状の分析に基づく，よ892

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

3-410-66
2017/3/2(a) スケッチブックに描かれた絵(a) 生成された三次元 CG シーン(b) 生成された三次元 CG シーン(b) スケッチブックを揺れによる CG 物体の移動，変形
図 7

複数色で構成された CG 物体を含むシーンの生成例 (1)Fig. 7 An example of a scene constructed with CG objects ofmultiple colors (1)り複雑な動きの生成などのシステムの完成度を上げる必要(c) スケッチブックを揺れによる CG 物体の移がある．そして，拡張した「不思議なスケッチブック」を用いた子供向けワークショップを実施して，システムの検証や改良を行うつもりである．

動，変形
図 8

複数色で構成された CG 物体を含むシーンの生成例 (2)Fig. 8 An example of a scene constructed with CG objects of

謝辞 本研究の一部は科研費基盤研究 (C)(26330420) に

multiple colors (2)

よる．
参考文献
[1]

[2]

[3]
[4]

[5]

[6]

T. Igarashi, S. Matsuoka, H. Tanaka, Teddy: A Sketching Interface for 3D Freeform Design, proc. of ACM SIGGRAPH’99, pp. 409–416, 1999.
Y. J. Lee, C. L. Zitnick, M. F. Cohen, ShadowDraw: RealTime User Guidance for Freehand Drawing, proc. of ACM
SIGGRAPH 2011, pp. 27:1–9, 2011.
チームラボ: お絵描き水族館, http://www.team-lab.net/
all/products/aquarium.html, 2014.
愛知工業大学水野慎士研究室: お絵描きダンスステー
ジ, http://wsc.or.jp/workshop/award?ws=ws11, 第 11回ワークショップコレクション, 2015.
近藤菜々子, 水野慎士: スケッチブックでのお絵描きを三次元 CG で拡張する映像ツールの提案とその実現方法, 情報処理学会論文誌 デジタルコンテンツ, Vol. 1, No. 1, pp.
1–9, 2013.
近藤菜々子, 水野慎士: 新たな形状生成手法とインタラク
ションによる “不思議なスケッチブック” の拡張, 情報処理学会論文誌デジタルコンテンツ, Vol. 3, No. 2, pp. 10–21,
2015.

(a) スケッチブックに描かれた絵(b) 生成された三次元 CG シーン
図 9

複数色で構成された CG 物体を含むシーンの生成例 (3)Fig. 9 An example of a scene constructed with CG objects ofmultiple colors (3)© 2017 Information Processing Society of Japan893