お知らせ欄

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

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

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

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

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

しかしながらトゥーンシェーダーさえ使えばアニメっぽい表現になるというわけではありません。CG特有の嘘っぽいシェーディングのせいでいかにもCGくさいチープな見た目になりがちです。ですのでトゥーンシェーダーを使わなくても、テクスチャの表現だけで、テクスチャに対するアニメ塗りだけでそれなりの見た目を確保しておかなければならないことが前提です。

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

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

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

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

・・・のことです。この言葉はユニティちゃんトゥーンシェーダーを開発されたUnityの社員さんのものだったと記憶しています。

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号影」を描き込むという感じです。

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

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

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


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

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

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

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

MEMO
上の画像はクリックすると大きく表示されます。

インナーラインをつくる

ここからはシェーダーの話ではなくインナーラインの説明を行います。必要がないと思われる方はここのくだりは飛ばしてもらっても結構です。ただ上記までのテクスチャのテクニックと関わっているテクニックなので、ついでにインナーラインの説明もさせてもらいます。

インナーラインをつくる

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

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

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

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

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

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

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

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

四角形に配置されたUV

UVマッピング作業

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

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

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

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

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

複雑なリアルタイム用のキャラクターになると下記のような四角だらけの一見しただけでは何がなんだか分からない変なテクスチャになります。ボクの作り方が下手くそなだけかもしれません。しかし、このテクスチャでキャラクターの管理をするのが正直嫌ですね。作った本人でもよく分からない。

でも小さいテクスチャサイズでありながら綺麗なインナーラインが出せるのでリアルタイム用のモデルには向いていますよ。もちろん映像用や静止画などでも。

リアルタイム用の複雑なモデル

複雑なUVマッピング

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

ちなみに動画でも説明しているのでよければご覧ください。

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

最後に

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

コメントを残す

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