ブログトップ 記事一覧 ログイン 無料ブログ開設

ゲームの花園 このページをアンテナに追加 RSSフィード

2012-06-22

再現:スタジオジブリさんの水彩コンポジット

7,8年前、スタジオジブリさんがWEB上で解説していた水彩コンポジットを再現してみました。当時、その解説を見ながら再現を試みたのですが、コンポジットの熟練度が低かったので完全再現出来ず放置していました。

そのシーンを久しぶりに発掘してみたら、 何となく再現が出来たので解説してみます。(当時はギブリーズ episode2公開前後で、FxTreeの前身である、Avid Media Illusionという独立したソフトを使って解説されていましたので、Avid時代のユーザー事例とかだったかな?と思います。)

この手法を使うと、普通のSphereオブジェクトが下記の様なタッチになります。

f:id:Aqu:20120619234222p:image:w640

用意する素材

今回は効果がわかりやすいように、Sphereをベースにコンポジットしていきます。まず、SphereをDiffuse・Specular・Shadow・Depth・Normal・Outlineの計6種類の要素でレンダリングします。

f:id:Aqu:20120619233712p:image:w640

水彩コンポジットの基本となる処理

次に上記の画像にエフェクトをかけては合成を繰り返し、水彩の特徴である滲みや、アウトラインから色がはみ出る表現を2D的に再現していきます。今回は、Sphere本体と影部分に色をつけたいので、下記の様なFxTreeを組みました。

f:id:Aqu:20120621233453p:image:w640

上記のレンダリング素材を使用し、基本となるコンポジットを行っていきます。今回はSphereの下地部分のコンポジットを例に手順を追っていきます。

f:id:Aqu:20120620180056p:image:w180

1, ColorCorrect(Diffuseをコントラストアップ)

f:id:Aqu:20120620145052j:image:w320

2, MathComposite(1の結果 x Specular。必要なスペキュラ要素だけ取り出す)

f:id:Aqu:20120620145054j:image:w320

3, ColorCorrect(コントラストアップ)

f:id:Aqu:20120620145055j:image:w320

4, Invert

f:id:Aqu:20120620145056j:image:w360

5, ColorCorrect(ノーマル素材のコントラストアップ)

f:id:Aqu:20120620150255p:image:w360

6, MathComposite(4の結果 x 5の結果)

f:id:Aqu:20120620145057j:image:w360

7, TurbDistor(歪める)

f:id:Aqu:20120620145058j:image:w360

8, MedianFilter(ノイズ除去目的ですが、Sphereみたいに面積が広いとあまり効果はわからないですね)

f:id:Aqu:20120620145100j:image:w360

9, Resize(スケールとポジションオフセットを行い、枠からハミ出す処理) 【素材A】

f:id:Aqu:20120620145101j:image:w360

10, FastBlur(今回は720pで30pixel位)

f:id:Aqu:20120620145102j:image:w360

11, Noise

f:id:Aqu:20120620145103j:image:w360

12, FastBlur

f:id:Aqu:20120620145105j:image:w360

13, ColorCorrect(彩度を0に)

f:id:Aqu:20120620145106j:image:w360

14, Resize(17で行う合成の目的である、光源方向の滲み表現のためのリサイズ)

f:id:Aqu:20120620145107j:image:w360

15, MathComposite(素材Aと、差で合成)

f:id:Aqu:20120620145108j:image:w360

16, Invert【素材B】

f:id:Aqu:20120620145109j:image:w360

17, MathComposite(colorと素材Aを乗算)【素材C】

f:id:Aqu:20120620145110j:image:w360

18, Composite(背景素材に対して、素材Cを、素材Dのマスクで合成)

f:id:Aqu:20120620145111j:image:w360

これで、Sphereの下地部分の完成となります。


できあがり

これらのコンポジットの流れを、Sphereの下地部分以外にも処理します。(各部位でのパラメータのバラツキは、見ながら調整)

Sphere・下地

f:id:Aqu:20120621091946p:image:w360

Sphere・液溜まり

f:id:Aqu:20120621091947p:image:w360

Sphereの影・下地

f:id:Aqu:20120621091948p:image:w360

Sphereの影・液溜まり

f:id:Aqu:20120621091949p:image:w360

そして、背景に上記素材をコンポジットしていくと完成となります。

完成した動画がこちら。

D

水彩コンポジットの応用

せっかくなのでSphereだけでなく、キャラクターにも応用してみました。

f:id:Aqu:20120622091600p:image:w640

ジブリといえば、トトロ

D

ジブリさんのコンセプトアートによる水彩画は、影部分にタッチが入っている事が多いので、よりそれっぽくするなら、タッチ表現を詰めても良いかもですね。


まとめ

今回の水彩コンポジットでポイントとなるのは、2Dベースのコンポジットで絵作りを行うということです。ゲームのキャラクターを絵的な表現を行う場合、どうしても個々のオブジェクトに割り当てるシェーダーに頼りがちですが、そうすると水彩のタッチが出せたとしても結局フィギュアの表面に、水彩絵の具で色づけしただけの表現になってしまい、画面全体で見るとどうしても絵的な見た目にはならない問題がありました。

このコンポジットの考え方を利用すると、水彩以外の絵の要素でも特性を分解し、それぞれをコンポジットで積み重ねていくと言った表現が出来るようになるかもしれません。

今年のE3を見ていると、次世代のゲームグラフィックはフォトリアルな方向に爆進中ですが、これらのNPR(スタイライズド)表現に力を入れるタイトルが出てきても面白いと思うので、その辺り期待したいですねぇ〜。

あと、上記のメイキング動画を作ろうと思ったのですが、慣れて無いこともあり挫折してしまいました…。また再挑戦してうまく出来れば公開したいと思います。それでは〜。

カタアマカタアマ 2012/06/23 03:16 管理者様

基になった記事を書いた片塰ともうします。
取り上げて下さってありがとうございます。

記事作成当時は、こんな複雑な処理に興味を持ってくれる人なんているのか!?と自問していました。
今回は思い出していただいただけでなく、動画に応用してくださるなんて。とても感動しました。
ありがとうございます。

AquAqu 2012/06/23 09:17 カタアマ様

コメントありがとうございます!
元の記事を書かれた方にご覧いただけているとは、大変嬉しく思っております。当時、水彩コンポジットの記事を見た時は、非常に衝撃を受けました。まるで魔法を見ているようなビジュアルの制作過程は、今でも心に刻まれています。

また今回の記事について、記述が間違っている点、またはアドバイスなどございましたら、ご意見いただけると幸いです。

OCOC 2012/06/26 13:57 感動しました〜
AEとかでも再現できそうなわかりやすい画像つきでありがたいです。
アニメーションも可愛いしw

AquAqu 2012/06/26 23:33 OC様

初めまして!
確かにAEでも再現出来るかもしれませんね。SoftimageのFxTreeでの再現より需要がありそうな気もします… ^^;

magorokumagoroku 2012/12/08 19:41 はじめまして。
特にトトロはものすごくかわいいです。
当時、この技法はギブリーズとか生茶のCMで使われてた記憶があります。あのころすごいと思ってましたが、再現されててとても参考になりました。
 ブログをみて、自分も再現してみたくなり、ブログを参考にして、Aftereffectsで再現してみました。よかったら見てみてください。

http://www.youtube.com/watch?v=WoLr6ytISR0&feature=youtu.be

AquAqu 2012/12/09 11:08 magoroku様

おぉ、AfterEffectsでも再現出来るんですね!
自分はAEに明るくないので、是非コンポジット手順、見てみたいです^^

>>ギブリーズとか生茶のCMで使われてた

そうですね、当時は印象的なタッチでしたね。

magorokumagoroku 2012/12/25 02:57 Aqu様

 ありがとうございます。再現できたのもこのブログのおかげです。Blenderで再現してみようかと思ったのですが、ちょうどAftereffectsを勉強していたのでOCさんのAEで再現できそうと書いてあるのを見て、AEで再現してみようと思いました。

 自分もそんなにAEが得意なわけじゃないので悪戦苦闘しながら素材を合成していきました。得意な人ならもっと簡潔にできるんじゃないかと思います。ノイズはAEでもそのままエフェクトしてあるのですが、歪みがなかなか見つからず、歪みにはタービュランスのエフェクトを使いました。

 コンポ順はどこかでアップできたらなぁと思います。

投稿したコメントは管理者が承認するまで公開されません。

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

トラックバック - http://d.hatena.ne.jp/Aqu/20120622/1340324416