ActiveInk: A Painting Interface using an Ink Metaphor
with Palette Manipulations
飛田ヒロアキ

暦本 純一

ソニーコンピュータサイエンス研究所
インタラクションラボラトリー{tobita, rekimoto}@csl.sony.co.jp

要旨
ActiveInkは、実世界での絵の具を使う操作をコンピュータグラフィックの製作に適用したペイントシステムである。既存のペイントシステムの多くが、単純な色をオブジェクトに塗る対象としている。また、複雑な効果を付けることを可能にするシステムも存在するが、複雑なパラメータやGUIの操作が必要となり、意図した効果を使えるようになるために身に付けなければならないことが多い。これに対しActiveInkシステムでは、多くの効果をあらかじめインク属性(水インクや雲インクなど)として扱っているため、ユーザはインクを選び塗るだけで属性を反映させることができる。また、システムは実世界のパレットと同じ機能を有するパレット領域を提供しているので、ユーザはその領域で異なる属性インクを混ぜて新しい属性を作ることや、属性を薄めることや濃くすることでインクの振る舞いを調整することが可能である。操作は複雑な変数の設定やGUIの操作を介すことなく、インクを選び塗ることで行なえる。

AbstractThe ActiveInk system integrates the advantages of real world painting techniques with computergraphics (CG) effects such as natural phenomena animations (e.g., water, fire, snow, and clouds),
attributes (e.g., rubber, cloth, and land), surface materials (e.g., texture effects, metal, and glass), andso on. Most conventional paint systems mainly allow users to set a simple and static color. Also, theyrequire users to control many parameters if the user applies complex effects. However, the ActiveInk
system treats many behaviors as separate behavior inks (e.g., water, cloud, and cloth ink), so a user canadd effects by selecting a behavior ink and painting it onto objects to realize CG effects. Moreover, thesystem has a palette area that is similar in function to an actual painter’s palette, so the user can create
new ink by mixing different types of behavior ink and can control the behavior in the palette area
directly. All creative manipulations are based on painting to avoid the difficulties of traditional
systems such as the need to deal with complex parameters and GUIs, so these simple manipulations
can be applied to a wide variety of areas.

1. はじめにコンピュータグラフィックス（CG）を使った映画やゲームなどを見る機会が増えるに従って、実際に自分でそうした映画やゲームを作りたいと思う人が増えてきている。また、こうした要求に答えるために、CG製作を支援するための多くのソフトウェアや研究が存在する。しかし、こうしたシステムを使って手軽に思いついた3次元モデルや効果を使えるようになるためには、多くの時間を費やさなければならない。

既存システムを使ってCG製作をする場合、ユーザは実際にモデルやシーンを作る前に、システ
ムの操作(様々なGUIの操作や、パラメータの設定等)を身に付けなければならない。こうしたシステ
ムは、CG技術の進化に対してGUI操作やパラメータの数を増やすことで対応しているため、操作は今後さらに増えることが予想される。従って、ユーザはデザイン作業の前に操作の習得に多くの時間を費やさなければならない。こうした面倒を回避し、デザイン作業を支援するような簡単な対話手法は必要な要素であるといえる。

2. 関連研究

図１：システム概要：ActiveInk
システムは３つ
図１：の領域（インク、パレットと作業領域）に大別される。また、消しゴムなどの GUI も含まれる。
一方で、簡単な操作でCG製作を支援することを考えたスケッチとペイントシステムが存在する。こうしたシステムは実世界の手法(紙にペンで絵を描くような手軽な手法)をCG製作に用いている点に特徴がある。ユーザのスクリーンへの描画はずれなく3次元空間に投影されるため、特別な学習なしに２次元での操作だけで簡単に使うことができる。同様にペイントのユーザは、２次元のペイントの感覚で3次元モデルに色を塗ることができる。しかし、これらのシステムは製作結果もシンプルなのでCG製作を十分に支援しているとは言い難い。
そこで、簡単操作でCG製作を効果的に支援するシステムを実現するために、実世界の絵の具を使う操作をCG製作と結び付けることを考えた。
今回提案するActiveInkシステムは、インク属性とパレット操作により構成されるペイントシステム
であり、直感的で簡単な操作により様々な効果を実現するものである。システムは多くの属性をインクとして扱っているので、インク選んで塗ることで、塗られた領域に対し属性を直接的に反映させることができる。似たような属性もインク領域には存在するので、例えばユーザが雲インクを使う場合には、雲インクの中からイメージする雲インクを選択することができる。
また、パレットでの塗る操作により、異なる属性のインクを混ぜ合わせて新しい属性を作ることや、属性の状態を調整する機能を提供している。
ユーザは複雑な操作を介すことなく、パレット領域を実世界のパレットの様に塗る操作だけで使える。
本論文では、3次元ペイントシステムActiveInkとその実装について述べる。

リアルな動きを表現するCGの研究が数多くなされてきた。Dobashi [1]はセルラーオートマトンを使った雲の動きの計算にメータボールの手法を使うことで、リアルな雲のアニメーションの表現方法を提供している。ランダムノイズとセルラーオートマトンを用いた炎の表現方法や、バネモデルを用いることで水面や服のシミュレーションを行なう手法も存在する[17]。また、パーティクルシステムを用いた自然現象のシミュレーション方法も一般的になり[4,5]、ゲームや映像などでリアルな効果を実現するために使われ、水流、煙や毛などが表現可能である[2,8,9]。また、テクスチャの効果と組み合わせることで、よりリアルな表現が可能になり、セルラーオートマトンとパーティクルシステムを結び付けたMuraoka [3]は、この組み合わせを積雪の表現に利用している。こうしたCG表現は、リアルな表現に焦点が当てられているが、インタラクション手法はあまり考えられていない。
簡単な操作を支援する、スケッチやペイントシステムも数多く存在する。2次元の手法を3次元CG製作に適用したスケッチベースのインタフェースは、スクリーンに対するユーザの描画が3次元空間に自動的に投影される点に特徴があり、全ての操作は紙にペンで絵を描くような感覚で行なえる[14, 15, 16]。これらのシステムは簡単な操作でCG製作を行なえるため、CGの初心者でも簡単に3次元CGを製作できる。しかし、ユーザは全てのシーンやモデルを自分自身でデザインしなければならならず、製作結果はユーザのデザインスキルに依存する。
また、3次元ペイントシステムも数多く研究されている。Chameleon [7] はUVパラメータをペイント操作に対して変えることで、解像度を一定に保つことを可能にしている。リアルタイムで毛のシミュレーションを行なうLengyel[13]は、Lappedtexture[12]と組み合わせることで、少ないテクスチャメモリーで効果的なシミュレーションを実現した。加えて、３DCGシーンにアクセントをつけるために用いられるPaint Effects[6]は、ブラシメタファーを用い、簡単なペイント操作によりCG製作を支援することを可能にする。しかし、詳細の設定にはパラメータの設定をする必要がある。
Maya [6]はモデルやシーンを作るための多くの効果を含んでいるが、似たような効果を使う場合でさえも、ユーザは異なるGUIやパラメータを操作しなければならない。こうした操作を身に付けるために多くの時間を必要とする。

図 ４：インクの使用例：ユーザはインク（雲４：（上）と水インク（下））を選び塗るだけで属性を反映させることができる。
図 ２：属性インクの例：１）金属、２）土、
２：
３）ガラス、４）木目、５）火、６）煙、７）空、
８）空領域、８、９）水、１０、１１）雲インク。

図３：インクの要素：それぞれのインクは色、
図３：
動き、大きさと全て（色、動きと大きさ）の要素に分類される。

3. システム概要
ActiveInkシステムはインク、パレットと作業領域の３つに大別される（図１）。また、消しゴムなどの簡単なGUIや、色もシステムに含まれている。我々の目的は簡単な操作で多くの表現方法が可能な手法を実現することであり、属性インクを実現するための効果的なアルゴリズムを考えることではない。

3.1. インク領域
インク領域には属性インクが存在し、アニメーションや質感といった属性をつけるために使わる。インク領域には属性を現すアイコンが表示されていて、アニメーションを扱う属性インクはアイコン位置で実際に動いている。
インク領域で見られる属性インクの例を図２に示す。 この領域には、名前が同じで異なる属性のインクも含まれている（水や雲）。加えて、それぞれのインクはデフォルトの属性を持っていて、塗ったと同時に属性が繁栄される。

図５：パレット領域：パレット領域ではインク
図５：を混ぜることや調整する機能を提供している。
それぞれの属性インクは動き、色、大きさとそれら全て(動き、色と大きさ全部を意味する)の４つの領域に分類されるので(図３)、ユーザはインクの要素をクリック位置により選択できる。カーソルがそれぞれの領域上に移動するとサポート情報が表示される。
図４（上）は雲インクを塗った例である。ユー
ザが雲インクをインク領域から選択し作業領域に塗ると、雲インクを塗った部分に対し雲のアニメーションが実現される。アニメーションはペイント領域として扱われるので、消しゴムによりアニメーションを消すことも可能である。また、インク領域のブランク部分(図２(８))には、パレット領域で作った新しいインク属性を塗る操作により追加することができる。

3.2. パレット領域
パレット領域では異なるインクを混ぜることで新しい属性を作ることや、インクの状態を調整する機能を提供している。さらに、パレット領域はライトの影響を受ける３次元モデルで構築されている (図５)。

図６：
図６：パレット領域での混合：塗る操作によりインクを混ぜている。

図 ９：レイヤーを持つモデル：： 異なる実装の９：インクを共存させるために３つのレイヤー（色、メッシュとベクター）を使っている。
図７：混合により作ったインクの例：火と雲を
図７：混ぜたインク（１）や土とバネを混ぜた怪しいインク（２，３）。

パレット領域では、３つのマウスボタン(左、中と右)が塗る操作に使われる。左ボタンは濃くする操作に使われ、右ボタンは薄くする操作に使われる。従って、濃くする操作はマウス左ボタンを押しながら塗ることで実現される。真中ボタンはパレット領域でインクを吸い取る用途に使われる。

3.3. 作業領域
図８：属性の調整の例：塗る操作によりインク８：の質感を調整している。
3.2.1. 混合
混合もペイント操作だけで行われる。最初にベースになるインクを塗り、その塗られた部分に混ぜたいインクを重ねて塗ることで実現される。図６は簡単な混合の例であり、ユーザは属性インクと色インクを混ぜることでデフォルトの色を変えている。また、ユーザは火雲インクや、引っ張ると伸びるゴム雲インクといった怪しいインクを作ることも可能である(図７)。
3.2.2. 調整
同じインクを重ねて塗ることにより、属性インクの状態を調整する機能も提供されている。それぞれの属性インクはデフォルトの値を持っているが、デフォルトの振る舞いはユーザの要求に合っているとは限らず、これらの振る舞いを調整する機能は必要である。調整の例を図８に示す。この例では、ユーザはペイント領域と同じインクを重ねて塗ることで、サイズを濃く(大きく)または薄く（小さく）している。

作業領域は、インク領域からインクを直接選んで塗ることや、パレット領域に塗られているインクを吸い取り塗ることで属性を反映させる機能を有している。本システムはペイントシステムであり、属性を付ける操作は提供しているが、モデリングはサポートしていない。従って、属性インクを塗る対象のシーンやモデルは外部から読み込む。

4. 実装
この章では、属性インクの振る舞いとパレット領域での操作(混合や調整)に焦点を当てたActiveInkシステムの実装について述べる。

4.1. 属性インクの振る舞い
属性インクはテクスチャ、メッシュ、パーティクルとシェーダーの４つ手法により実装されている。こうした異なる種類の属性を同じオブジェクトに対して共存させるために、パレットと作業領域は、色、メッシュとベクターの３つのレイヤーを使っている（図９）。これらのレイヤーはモデルやシーンを読み込んだ際に、システムにより自動的に設定される。

図１０：異なる実装の混合例：：異なるレイアー
図１０：（ピクセルで表現されている雲にメッシュで表現される水）を混ぜることは容易に行なえる。
色レイヤーはモデルにマッピングされているテクスチャを意味し、セルラーオートマトンやテクスチャの効果を扱うインクの実装に使われる。火や雲インクはこのレイヤーを用いて計算されていている。
３次元モデルを形成するパッチデータで構成されるメッシュレイアーは、メッシュにより動きを実現する水やバネインクや、シェーダーを介するインクを実現するために使われる。ユーザがシェーダーインクを塗った場合、システムはクリックしたパッチの情報を保持し、同じパッチをクリック位置にセットする。次に、シェーダーインクが塗られた部分のみを見えるようにするために、パッチ上の塗られていない部分は透明にすることで実現している。
パーティクルインクは、ベクターと色レイヤーの２つのレイヤーを使うことで実現されている。
パーティクルは、塗られた位置情報を元にエミッターを設定し、パーティクルの方向はベクターレイアーによりデフォルトの値が設定される。この値はユーザが矢印GUIを用いて変更可能な変数として存在する。

4.2. 混合と調整
4.2.1. 混合
本システムでは、それぞれのインクの計算結果を混合に使うことで、以前のインクと現在のインクでの両方の特徴を反映させることを可能にしている。異なるレイヤーを使ったインクの混合(例えば、色レイヤーとメッシュレイヤーの混合)では、異なるレイヤーを使うことで新しいインクを簡単に作ることができる（図１０）。一方で、同じ特徴をもつインク (色レイヤー同士やメッシュレイヤー同士) を混ぜる場合、混合領域は、90%の割合で以前のインクの特徴と10%の割合で現在のインクの特徴を持つように計算される（図１１）。
こうして計算された最終的なインクの特徴は、最初のインクの特徴をベースに、２番目のインクの特徴が加わった状態となる。

図１１：混合の計算：同じレイアーでの混合を
図１１：行なう場合には、最初に塗ったインクの９０％と次に塗ったインクの１０％の属性を合わせて新しい属性としている。

図１２：
図１２：濃度カウンター：濃度を保持するために各 pixel に１６進数で情報を保持している。色、動きと大きさに関する濃度を保持する。
4.2.2. 調整
同じインクを塗ることでインクの特徴(大きさ、色や動き)を調整する操作も、混合と同じ方法でペイント領域で行われる。
調整を行なうために、システムはモデルにマップされたテクスチャの各pixelに対して濃度データを保持するカウンターを設定している。このカウンターは16進数で表現され、色、動きと大きさの３つに分類され、濃度を保持するために使われる（図１２）。このカウンターは、同じインクが塗られた場合に増減を行ない、濃くする操作に対しては増やされ、薄くする操作に対しては減らされる。これらの情報は、属性を計算する際に自動的に使われるので、ユーザは直接的に属性インクのパラメータを調整することが可能になる。属性インクのアイコンをクリックする位置により、インクの要素(大きさ、色、動きなど)を選択した場合には、要素部分のみが増減を行なう。
濃度カウンターの４つ目の要素は、今後実装を通じて増やしたい要素があった場合に追加することを考えているため、現状では使われていない。

図１３：３次元モデルに対するシステム適用例：これらの例は単に属性インクを塗った例である。特
図１３：に Vertex Shader で実装されたインクを使うことで様々な質感を手軽に表現できる。

図 １４：３次元シーンに対するシステム適用例：空と地面により構成される簡単な３次元シーン
１４：（１）に対して空インク（２，３）、雲インク（４）と土インク（５，６）などを塗ることでシーンをデザインしていく。雲インクは動きの属性を持っているので、ペイント領域でアニメーションを行なっている。

5. ペイント例
この章では、ActiveInkシステムの属性インクを使ったペイント操作による２つの適用例(３次元モデルとシーンへのペイント)について述べる。

り、ユーザは地面にアクセントをつけることができる。雲インクはアニメーションの属性を持っているので、雲インクが塗られた部分はアニメーションを行なっている。

図１３は３次元モデルに対して属性インクを塗った例である。これらの例は、バーテックスシェーダーにより実現されたトゥーン、メタル、透過や毛インクを塗った例であり、こうしたインクは質感を出すのに有効である。
次に、本システムを３次元シーンに対して適用した例を図１４に示す。空と地面オブジェクトにより構成された簡単な３次元シーン（図１４（１））に属性インクを塗っている例である。ユーザは最初に空オブジェクトに空インクと雲インクを塗る（図１４（２，３、４））。次に、地面オブジェクトに土インクを塗る（図１４（５，６））。地面インクと色インクを混ぜることによ

図１５：同じシーンの異なる表現
図１５：
雲インクとピンク色を混ぜ合わせて、夕方っぽいシーンを作ることや（図１５（左）、雪を降らせることでシーンにより動きをもたせることも可能である（図１５（右））。

6. 議論
これまで学会等でシステムのデモンストレーションを行なってきた。本システムを使ったユーザテストは行っていないが、デモンストレーションを通じて得られた知見やコメントを元に、システムの可能性や制約について述べる。

6.1. 属性インクとパレット
実世界の絵の具の操作とCG製作を結つけた本
システムのコンセプトは、多くのユーザに理解された。パラメータの設定なしに、属性インクを選び塗るだけで動きや質感を表現する機能は、多くのユーザに好意的に受け入れられた。さらに、本システムではそれぞれの属性インクがデフォルトの属性を持っているので、ほとんどのユーザが特別な学習をすることなく、モデルやシーンに対して色を塗る操作を行なえた。
加えて、星、虹や滝などの特別なインクを加えて欲しいとのリクエストが多かった。本システムは様々な振る舞いを表現するために、４つのタイプのインク(テクスチャ、メッシュ、パーティクルとシェーダーで実装できるインク)をサポートしていて、様々なタイプのインクを実現できるので、将来的な実装として新しいインクを加えることは難しくない。また、広い意味での属性インク、例えば、森、町や季節インクなどを加えることで、さらにデザイン作業を支援することが可能であると考える。そうしたインクを使う場合でも、ユーザの操作はインクを選んで塗るだけで行なえるので、システムの操作の簡易さは保たれる。
混合手法に関しても有用なコメントが多かった。また、こうした混合操作を使って、怪しいインクを作ることを面白がっていたユーザも観察された。初期の試作システムでは、混合をする場合に、それぞれのインクの計算結果を平均したものを使っていたが、ユーザから水の動きや炎の色だけ使いたいといった指摘や、ちょっとだけ火の感じを加えたいといった指摘があり、現在のような実装を行なうことで対処した。また、明示的に薄める、濃くする、細かくするや大まかにするといったテクニカルインクを作ることも有効だと考えている。そうした場合、白色絵の具や水により薄めるような感覚でインクの調整を行なえる。

6.2. アプリケーション
本システムは３次元共有空間に対しても適用可能である。近年、ネットワーク環境が飛躍的に向上したことで３次元共有空間システムはより一般的になってきている[18, 19, 20]。しかし、共有空間での対話手法は、あらかじめデザインされた空間の移動や、文字によるチャットなど制約が多いままである。そうしたシステムに本手法を適用することで、ユーザはペイント操作により、あらかじめ用意されたシーンに属性を付けることでシーンに変化を加えることが可能となる。
さらに、動画の編集作業においても、簡単に効果をつける手法として本システムは有効であると考える。動画に対して属性インクを塗ることで、動画に直接的に効果を付けることが可能となる。

6.3. 問題点
インタラクション手法に焦点を当てた混合の手法は、計算効率を考えた際には負荷が多いため、より効果的な混合手法を考える必要がある。また、既存のペイントシステムと異なり、本システ
ムでは、ペイント領域を３つのレイヤーにより計算しオリジナルのデータとして扱っているため、ユーザは他のシステムで作業結果を使うことができない。従って、データを統一的に扱える手法が必要である。また、アニメーションを持つ属性ではアニメーションの時間を細かく制御することができないので、アニメーションを効果的に調整する手法も必要である。今後こうした問題点を踏まえて、システムを拡張していくつもりでいる。

7. まとめ
本論分では、ActiveInkシステムとその実装について述べた。ActiveInkシステムは、実世界のペイント手法をCGクリエーションと結つけたCG製作を支援するシステムであり、その特徴である属性インクとパレット操作について概要を述べ、次に実装について述べた。また、システムを３次元モデルとシーンに対して適用した例を示した。
今後、さらに色々な属性を表現できるように属性インクを増やすことを考えている。単に視覚的な効果にとらわれず、衝突などの物理シミュレーションやサウンドシミュレーション[21, 22]をインク属性として扱うことで、ActiveInkシステムを拡張させていくつもりでいる。また、ActiveInkシステムと他の入力デバイスと組み合わせることで[23]、より簡単で直感的なインタラクションを支援する予定でいる。

参考文献
1. Y. Dobashi, K. Kaneda, H. Yamashita, T. Okita,
T. Nishita. “A Simple, Efficient Method forRealistic Animation of Clouds”, In SIGGRAPH‘2000 Proceedings, pp.19-28, 2000.
2. P. Fearing. “Computer Modeling of Fallen Snow”,
In SIGGRAPH ‘2000 Proceedings, pp.37-46, 2000.
3. K. Muraoka and N. Chiba. “A Visual Simulation
Of Melting Snow”, Journal of the Institute of
Image Electronics Engineers of Japan, 27(4): 327338, 1998.
4. K. Sims. “Particle Animation and Rendering
Using Data Parallel Computation” ComputerGraphics, Vol.24, No.4, SIGGRAPH’94, pp.405513 (1990).
5. K. Sims. Particle Animation and Rendering Using
Data Parallel Computation Computer Graphics,
Vol.24, No.4, SIGGRAPH’94, pp.405-513, 1990.
6.Maya and Paint Effect
http://www.alias-wavefront.com
7. T. Igarashi and D. Cosgrove. "AdaptiveUnwrapping for Interactive Texture Painting",
Symposium on Interactive 3D Graphics 2001,
pp.209-216, 2001.
8. R. Fedkiw, J. Stam, and H. W. Jensen. “VisualSimulation of Smoke”, In SIGGRAPH ‘2001
Proceedings, pp.15-22, 2001.
9. B. J. Meier. “Painterly Rendering for Animation”,
In SIGGRAPH ’96 Proceedings, pp.477-484, 1996.
10. J. Rekimoto, "Pick-and-Drop: A Direct
Manipulation Technique for Multiple Computer
Environments", Proceedings of UIST'97, pp. 3139, 1997.
11. J. Rekimoto, "Time-Machine Computing: A
Time-centric Approach for the Information
Environment", Proceedings of UIST'99, 1999.
12. E. Praun, A. Finkelstein, and H. Hoppe. “LappedTextures”, In SIGGRAPH ‘2000 Proceedings, pp.
465-470, 2000.
13. J. Lengyel, E. Praun, A. Finkelstein, and H.
Hoppe. “Real-Time Fur over Arbitrary Surfaces”,
Symposium on Interactive 3D Graphics 2001,
pages 227-232.
14. R. C. Zeleznik, K. P. Herndon, and J. F. Hughes.
“An Interface for Sketching 3D Curves”, In
SIGGRAPH ‘96 Proceedings, pp.163-170, 1996.
15. J. M. Cohen, J. F. Hughes, and R. C. Zelezni,“Harold: A World Made of Drawings”, In
NPAR2000, pp.149-157, 1999.

16. T. Igarashi, S. Matsuoka, and H. Tanaka.
“Teddy: A sketching interface for 3D freeformdesign”, In SIGGRAPH ‘99 Proceedings, pp.409416, 1999.
17. D. Baraff and A. Witkin “Large Steps in Cloth
Simulation”, In SIGGRAPH ‘98 Proceedings,pp.43-54, 1998.
18. K. Matsuda, Y. Honda, and R. Lea. VirtualSociety: Multi-user Interactive Shared Space on
WWW, Proceedings of the 6th International
Conference on Artificial Reality and TeleExistence (ICAT ’96), Tokyo Japan, pp.83-95,1996.
19. A. Druin, J. Stewart, D. Proft, B. B. Bederson,and J. D. Hollan. KidPad: A Design Collaboration
between Children, Technologists, and Educators,
In Proceedings of ACM Conference on Human
Factors in Computing Systems (CHI 1997), pp.
463-470.
20. C. Cruz-Neira, D. J. Sandin, T. A. DeFanti, R. V.
Kenyon, and J. C. Hart. "The CAVE: Audio Visual
Experience Automatic Virtual Environment,"
Communications of the ACM, Vol. 35, No. 6, June
1992, pp. 65-72.
21. J. F. O’Brien, P. R. Cook, and G. Essl,“Synthesizing Sounds from Physically BasedMotion”, In Siggraph 2001 Proceedings, pp. 529536, 2001.
22. K. Doel, P. G. Kry, and D. K. Pai,
“FoleyAutomatic: Physically-based Sound Effects
for Interactive Simulation and Animation, InSiggraph 2001 Proceedings, pp. 537-544, 2001.
23. I. Poupyrev, S. Maruyama, and J. Rekimoto.
"Ambient touch: designing tactile interfaces forhandheld devices”, Proceedings of UIST2002, pp.
51-60, 2002.