Check out my artworks! (●△●)(●ω●)

トゥーンシェーダーをつくる

トゥーンシェーダーをつくる

ボクが普段使用しているBlenderによるトゥーンシェーダー(Toon Shader)を作る方法をご紹介します。あくまでも自分の方法なので効率が悪かったりすることもあるかもしれません。

トゥーンシェーダーをつくる

この方法はBlender2.7系までに搭載されているInternal Renderを前提にしたやり方です。Ver.2.8以降、NPR系の表現はEEVEEで行います。シンプルなトゥーンシェーダーはInternal Renderのようなレガシーなシステムでも一応作れます。

しかしながらトゥーンシェーダーさえ使えばアニメっぽい表現になるというわけではないと思います。トゥーンシェーダーを使わず、テクスチャの表現だけで、テクスチャに対するアニメ塗りだけでそれなりの見た目を確保しておかなければならないことが前提です。

トゥーンシェーダーは別に無くてもいいかも
自分は以前はトゥーンシェーダー否定派でトゥーンシェーダーなんて無くてもアニメらしい表現は出来るという考えでした。嘘くさいシェーディングが嫌いだし、使ったとしても綺麗なシェーディングにする法線編集が難しいからです。神風動画さんは一般的なトゥーンシェーダーはあまり使っていないらしい。

1.トゥーンシェーダーの定義

まずトゥーンシェーダーの定義とは

あるオブジェクトへの光の当たり具合に基いて、そのオブジェクトを指定のカラーで塗り分けるシェーダー

2.トゥーンシェーダーの基本的なノード

これがBlenderでの超基本的なノードの組み方です。一番左にある▼Materialは特に何も設定をいじっていないデフォルトのマテリアルです。

基本のノード

ここからノードをいくつか付け足していきます。つまり通常色と影色をテクスチャを利用して指定の色で表示していきます。

注意
▼Mixの部分は、上が影色で下が通常色になるので注意してください。

3.アニメ塗り

トゥーンシェーダーを作るにあたってはアニメ塗りのことも知っておかなければなりません。アニメ塗りとは主に以下の4つの色によって構成されています。

色設定

  • ハイライト → 光沢
  • 通常色 → 基本の色
  • 1号影 → 薄い影色、1影とも呼ぶ
  • 2号影 →濃い影色、2影とも呼ぶ、影の中の影、CG的な言い方をするとAO(アンビエントオクルージョン)に近い

作風や作画効率により2号影やハイライトが無かったりする場合もありますが、とりあえずはこの4つの種類が使用されています。

コラム
アニメを見ているとシンプルに1号影だけ使用されてるシーンがあれば、4つの種類を塗り分けてゴリゴリに描き込んでいるシーンもあったりして面白いですよね。例えば動きの激しい戦闘シーンは基本色だけが使われているとか、一枚絵でカッコよく決めたいシーンは特殊効果も使って4種類全て使って描き込みまくるとか。
参考 シンプルだけど奥深い!アニメ塗りの秘密いちあっぷ

4.テクスチャに対してアニメ塗りをする

アニメ塗りはテクスチャを塗る時に使うテクニックですので上記のアニメのカラースキームのことは頭に入れておいてください。そしてこのアニメ塗りをテクスチャに反映させます。テクスチャは2種類用意します。

ノードの構成

ベーステクスチャとシャドーテクスチャ

「通常色」などで塗ったベーステクスチャ、そして「1号影」などで塗ったシャドーテクスチャと、ここでは呼びます。

トゥーンシェーダーの定義に基づいて
ライトが当たっている範囲はベーステクスチャが表示され、ライトが当たっていない範囲はシャドーテクスチャが表示されるという具合です。つまり定義通り、光の当たり具合に基いて、そのオブジェクトを指定のカラーで塗り分けるということです。

テクスチャを利用したノード

一応これだけで昔ながらの基本的なアニメ塗りは表現出来ていると思います。はじめのうちは通常色と1号影だけを使用すれば良いと思います。このキャラクター達の場合は、主に通常色と1号影を使用しています。

もっと描き込みを増やす
慣れてくるとそこにハイライトや2号影を追加して、よりリッチにすることが出来ます。つまりベーステクスチャに「通常色と1号影とハイライト」、そしてシャドーテクスチャには「1号影と2号影」を描き込むという感じです。

基本的なノードを応用する

ライトの影響を受けた場合のノード

ライトの影響を受けた場合のノード

シーンによってはライトの影響を受けてキャラクター全体の色味を変えたい時があります。例えば夕方のシーンの時にライトの色を赤っぽくして、キャラクターの色味も赤っぽくしたい場合であるとか。そのためのノード構成が上記の画像です。ライトの色を白色にすると元の状態に戻ります。


光沢を増やす場合のノード

リムライトなし、リムライトあり

ベーステクスチャで髪の毛の光沢や金属表現をハイライトで表しているとは思いますが、ハイライトテクスチャを用意してそれをフレネルノードに繋ぐことでフレネルが影響する範囲をハイライトの色で表示することが出来ます。擬似的にリムライトを表現してハイライトの範囲を広げているわけです。これで髪の毛の光沢、ハイライトを増やすことが出来ます。

リムライトを追加したノード

インナーラインをつくる

ここからはシェーダーの話ではなくUVマッピングのテクニックでインナーラインを出す話です。上記までのテクスチャのテクニックと関わっているテクニックなので、言葉だけでの説明が難しいのですが、ついでにインナーラインのことも書いておきます。

インナーラインをつくる

1.インナーラインとはなにか?

トゥーンシェーダーを使用する場合は大抵キャラクターにアウトラインも付けますよね。トゥーンシェーダーが必要ということは漫画やアニメみたいな表現をするということですから、ここにも線がほしいなぁとか、ここにインナーラインがあればなぁとか、反転ポリゴン法やFreestyleなどでアウトラインを出しただけでは出せない線があるわけです。

しかしくっきりとしたインナーラインをテクスチャに手描きするとしたら高めの解像度のテクスチャが必要です。映像制作であれば高い解像度のテクスチャを何枚も使用しても、レンダリングにさえ時間をかければ問題はありません。ところが容量をなるべく抑えなければならないゲームではそうはいきません。

UVアイランドを四角形に配置する

ゲーム会社はその問題を解決させました。それがちょっと特殊なUVマッピング方法なのです。それはUVを四角形にして配置する方法です。

2.少し特殊なUVマッピング方法が必要

このキャラクターのテクスチャのほとんどは四角形に配置されています。テクスチャの塗りもそれに合わせて四角形になっています。ベーステクスチャシャドーテクスチャも色を四角形に配置しています。そして外の部分は黒色です。

UV/Image Editorでインナーラインを出したい部分の頂点を黒色の外側にはみ出させてやりましょう。そうするとインナーラインが現れます。

四角形に配置されたUV

UVマッピング作業

こういった方法で任意の場所にインナーラインを出すことが可能です。ただ、このUVマッピングの方法はあまり直感的な作業ではないので、もっと複雑なキャラクターになると

「ここにインナーラインを出したいんだけど、ここのUVアイランドはどこだっけ?」

となって分からなくなることがあります。ですのでボクの場合は、普通にテクスチャに線を手描きする方法このインナーラインの方法、両方を組み合わせたりしています。

補足説明
記事のここまでに乗せているキャラは主に映像用・静止画用のモデルです。ボクは今はリアルタイム用のモデルを作っているわけではないので、こういった歪なUVマッピングになっています。

こちらは完全なリアルタイム用のモデルを意識して作ったモデルです。

テクスチャ1枚(2048×2048)だけでありながら綺麗なインナーラインが出せるのでリアルタイム用のモデルには向いていると思います。でも、まだまだ改善の余地はあると思います。

MEMO
こういった手法を知ったのはギルティギアシリーズを作っているアークシステムワークスの事例ですが、テクニック自体はPS2時代からいくつかのゲーム会社では知られていたらしいです。

アウトラインと組み合わせる
Freestyleや反転ポリゴン法(Inverted Hull Method)のようなアウトラインを出すテクニックと、このインナーラインのテクニックを組み合わせることで、より望ましい線画を作れるはず。
アウトラインをつくる(背面法)

最後に

本当はトゥーンシェーダーを適用した後に法線編集をしなければなりません。ところがBlenderでの法線編集の仕方、確固たるやり方を自分自身、確立できていないので記事はここで終わらせてもらいます。いい方法が見つかれば改めて別の機会に書こうと考えています。

3 COMMENTS

アバター あかはか

大変参考になりました。
質問なのですが、blender2.8のeeveeの場合、ライトの色味によってそのオブジェクト全体の色を変えたいときのノードはどのようになるか教えていただきたいです。
返信お待ちしております。

返信する
AtsushiTamaki AtsushiTamaki

結論から端的に言うと、申し訳ありませんが分かりません。

というのもEeveeエンジンを使用してご質問の内容のようなノードを作ってみようとボクも試みたのですが、BlenderRenderにはあったライト情報を扱うノードがEeveeでは見つからなかったので再現することが出来なったんですね。

現実的には3DCGソフト内で色味を変えるよりも、PhotoshopやAfterEffectsやHitfilmのような編集ソフトで、ポストプロダクションの段階で対応したほうが良いと考えたのでEeveeでの検証はそこで諦めたんです。

しかし何らかの方法でEeveeでもライト情報を取り込んで色味を変えることは出来るような気はしているので、時間がある時にちゃんと検証してみたいと考えています。

あと付け加えると、例えばライト情報を取り込んで色味を変えるのではなく、色相/彩度のノードを挟んで色の調整をすることで擬似的に再現することも可能ではないかと思います。

Eeveeによるトゥーンシェーダーの作り方はYoutubeに動画で上げているので、それを見てもらうと何かしらのヒントになるかもしれません。(※その動画内のトゥーンシェーダーで普通にライトの色味を変えると、シェーダーの色味も変えれたような気がする。間違ってたらスイマセン)

返信する
アバター あかはか

返信ありがとうございます!
当方ノードをいじったことがなかったので、大変参考になりました。
コンポジットソフトで色味の調整をするという方向で考えていきたいと思います!

返信する

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です