商業アニメ作品の「アニメ風キャラ＆リアル背景」をシェーダーで再現したい（１）
この記事は、最近の商業アニメやSNS上のイラストで見られる「アニメ風キャラ＆リアル背景」をゲームエンジンUnityを使って3Dで再現するため、シェーダーに出来ること、再現するためにどのような機能が使えるか考察した覚書です。
流行りの絵をシェーダーで作れないか？
最近VRChatやVRoidを調べたり使ったりして、Unityのシェーダーをいじるとモデルの見た目が良くなるらしい事が分かってきました。
シェーダーとは何か、どう使うのかについては記事の後半で記すとして、シェーダーの一番凄いんじゃないかと思った部分を以下の記事から引用します。
・テクスチャ情報に頼りすぎない
テクスチャの解像度は有限なので、パラメータとして使うには不都合が多い。ドアップに耐えられない。
テクスチャを使って「キャラクターのこの辺に影を多めに出そう」みたいな事をやっているスライドに書かれていたのが上の言葉です。テクスチャは3Dモデルの色や影の場所などを指定する画像なので、当然1024x1024のような有限のサイズです。キャラクターの3Dモデルに、ハイライトの位置や影の出やすさを画像で指定するのは普通の事ですが、ピクセル単位以上の情報を指定する事は難しいので高解像度化に耐えられない場合があります。
その一方で、シェーダーを使うとテクスチャ用にメモリを確保せずに、カメラが近づいても破綻しない3D表現が可能です。Unityに限らず、シェーダーに波動方程式を書いて水面と波を表現する、といった3D表現の手法は探せばいくつも見つかると思います。3Dモデルについても、法線方向を揃えるなどの下準備が必要になりますが、解像度やある程度のマシンスペックに関わらず描画をプログラムで制御する事が可能です（実際はシェーダー単体ではなくテクスチャと組み合わせて運用する方が多いと思いますが）
プログラムで描画状態を表現すればラスター画像を使った表現の限界を超えられる、というアイディアは、プログラミングをかじっている身として「なるほどね」と思わされる部分でした。凄いと思った所、以上です。
そして、そんなに凄いなら最近のアニメとかイラストのビジュアルをUnityで再現してみたいと思い今回の記事を書きました。同じような事はみんなやっていますが、最近公開された映画やトレーラー映像を交えて、こういう事ができたら凄いんじゃないかという話をします。
最初に「この辺を目指したら良い絵になるんじゃないの」とアタリを付けたいので、最近の「凄い絵だな！」と思った商業アニメや絵をどの辺が凄いのか含めて書いていきます。
商業作品のライティング（アニメ、ゲーム）
機動戦士ガンダム 閃光のハサウェイ
日本映画は割と大アニメ映画時代ですが、最近出たガンダムの映画「閃光のハサウェイ」はリアルな表現の絵を作りたい時に一つの指標になると思いました。予算潤沢かつ優秀なスタッフによるフラッグシップモデルなので再現は難しいですが、ノウハウは参考にできます。
映画のパンフレットによると、本作品の作画作業のために「カラーキー」と「撮影ボード」が監督の指示で用意されました。
「カラーキー」は、絵コンテのキーポイントになるシーンをカラーイラストとして用意し、作画や美術、撮影処理のスタッフに光源や影のイメージを共有するための絵です。
また、最終的なシーン内の雰囲気やボカし具合を監督が指示調整して作ったイラストである「撮影ボード」も用意され、カラーキーと合わせてアニメの仕上がりイメージが具体的に可視化されていました。
3Dグラフィックでは、光源からの光や物体同士の距離を計算する事で画面がリアルになるという手法を取っています。
閃光のハサウェイでも3Dが利用されているシーンは多いですが、「カラーキー」を使って作画や美術を設計し、「撮影ボード」を使って空気感を微調整する、という工程を手作業で行うことで画面をリアルに近づけています。
多くの作品がキャラや背景の描画を、計算と画面の微調整を積み上げながら作り上げる一方、この作品では最終的な光源や影などのイメージをイラストで用意し、人間が目で感じた時にリアルだ、心地よいと思う画面を最初に設計した上で、イメージを共有したスタッフ達が動くアニメをそこに近づけてゆくことにより
3Dよりも光の表現がリアルに感じられる
ような作品になっているのです。かなり職人技ですね。
極論ですが、この職人技をある程度プログラムで一般化できるなら、最終的な調節までの時間を一気に短縮できると思います。具体的には、空気遠近での雰囲気調節、光源とカメラ配置などを自動化出来れば、あとは出力の仕方を調節するだけで誰でもいい絵が作れるのではないでしょうか。夢みたいな話ですが。
海外CGアニメ
ハサウェイで職人達が2D絵を極限までリアルに仕上げた一方で、逆に3Dのライティング表現をゴリゴリにチューンアップしてアニメキャラと違和感なく融合させたのが「ライトイヤー」のトレーラーです。
環境マップやGIといった手法を使い、コックピットや照明の多い部屋から生まれる周囲の影響をキャラに落とし込む事はかなり難しいはずですが、ライトイヤーのトレーラーは間違いなく世界一上手くやっています。
Netflixの攻殻機動隊を見たとき、3Dアニメとして作り込まれているものの、光源の強いシーンでどうしてもキャラにミニチュア感が出てしまっていたのが気になりました。やはり、3Dキャラを画面に「なじませる」のは一筋縄ではいかないようです。
2Dアニメのハサウェイはカラーボードなどで、3Dアニメのライトイヤーは3Dレンダリング技術の超最適化（ピクサーは3D表現に関する論文をいくつも出しています）で違和感ないリアルな画作りを完成させています。
海外の3Dアニメでは「アーケイン」なども映画っぽさが凄いですね。下動画のサムネのように影とシルエットのような洋画っぽい画作りが特徴です。
ゲーム
同じ3D,2Dアニメでも大陸ゲー（中国、台湾、韓国系企業のソシャゲ）のトレーラーは、カメラや画面の配色がかなりアニメを意識した物だと思います。上記の照明の色や建物のシルエットでキャラの心情を表現するカメラワークや構図は少ないように感じます。自分がリアルだと思う構図や色調整の具合は「洋画感」なのかもしれません。
ウマ娘のメインストーリーやCM、カメラも演出もアニメっぽいです。APEXも毎シーズン、アクション映画のようなトレーラーを出していますが目玉になるキャラが立ってます。
SNS上のイラスト
商業絵にも実写背景＆キャラ物が多いので参考になります。「この絵描きに注目！2020」を見ると商業イラストの流行が大体掴めるのでオススメです。（2021年版はまだ出ていませんが、書籍も出している方が筆者なので多分そのうち出ます）
Vaporwaveっぽい（1980年代っぽい）絵もかなり流行っているのですが、それと肩を並べる勢力がSF背景＆キャラ物です。別に少女でなくても良いですが、巨大さを感じる風景にキャラちょこっと置いて、オープンワールドゲームのコンセプトアートっぽくするやつは凄く流行りましたね。その流行と相性が良いからこそ、背景やメカなどの無機物は現実に近いライティングを施すという表現が重宝されているようです。実写風背景＋キャラの流行はオープンワールドゲームの普及が一役買っているのかもしれません。
まとめると
アニメやゲームやイラストなどを通して、シェーダーで再現したいものが見えてきました。
１．背景を物理ベース＝実写風に描画
２．１の環境に合わせて自然にキャラを配置
３．撮影処理などでエフェクトも足しつつ全体を調節する
この三つを行えば、ある程度の新しさ保ちながら自分の作りたい絵も完成するのではないかと思います。まとめるために簡単に文章で表していますが、「これはまとまりが悪くて違和感がある…」「ここまで細かく仕上げられるのは素晴らしい」というケースが作品ごとにいくつもあるので、これが全てという訳でもないです。「キャラのどこに輪郭線や影を出すのか」のような細かい表現の分析も、色々作品を見ながらやりたいと思っているので別記事にしたい思います。
シェーダーって何ができるの？
今回はゲームエンジンUnity上のシェーダー機能であるURPを中心に、どのような使い方ができるか調べました。アンリアルエンジンと比較される事の多いUnityですが、最近は実写風のレンダリングにも力を入れているようです。
URPとはUnityの新しいシェーダー機能のSRP（スクリプタブルレンダーパイプライン）に含まれる、モバイルデバイスでも動作する比較的軽量なシェーダー機能です。PS5やゲーミングPCだけで動くような超高品質なCGは作れないものの、スマホでも動かせる軽量さやカスタマイズで個性を出せるのが特徴であり、旧来のレンダリング機能から置き換わったこともありYoutubeで公式・非公式の解説動画があります。
ShaderGraph
URPは、ノードを繋げてオリジナルのシェーダーを作れるShaderGraph機能に対応しています。
例えば、ShaderGraph内の「PBRノード」が物理ベースレンダリングに相当するため、必要な情報をノードに入力することでリアルな背景が出力できそうです。また、シェーダーをノード操作で作れるので、プログラミング経験の無いアーティストでも気軽にシェーダーを調整できるかもしれません。
ただし、ノードの繋ぎ方次第で専用のプログラミング言語を使う場合よりも高負荷なシェーダーとなってしまう場合があるようなので、多少シェーダーの知識がある方がパフォーマンス面で配慮ができます（以下の記事参照）
アニメ風キャラクターの描画は影やハイライト、輪郭線などの付け方が決められると可能なのでURPを使って対応できます。また、画面色味など画面全体の調整を行うポストエフェクトもURPで作れるそうです。
ただし、ポストエフェクトにもモバイル端末に向かない高負荷な物があるので、パフォーマンスに注意が必要です（以下のページに例が書いてあります）
色々書きましたが、URPが含まれるSRP（スクリプタブルレンダーパイプライン）自体が更新頻度の高い新しめの機能なので、公式の情報やそれを追っている人をフォローすると上手い使い方を掴めると思います。
UnityのURP対応ライブラリ
当然ですが、キャラクター用のURPシェーダーを一から作ろうとしなくても既に沢山あります。
VR環境にアニメ風3Dキャラを持ち込んだり、Vtuberのモデルを使って動画を作成したり、という用途で作られたキャラ表現用のURPシェーダーをいくつか紹介します。
NiloToonURP
サンプルを見る限り一番進んでるんじゃないか、というぐらい高性能なトゥーンシェーダーです。以下のYoutubeチャンネルのような動画が作れます。
ただし、配布しているのは機能制限があるサンプルのシェーダーのみなのでそのまま使える訳でもありません。
・髪の天使の輪状ハイライト（イラストでよく見る髪のアレ）
・GGX（PBRによるスペキュラー反射）
・2Dで口を表現するレンダラー
・アニメ風ポストプロセス
など、ほとんどの機能が使えないようです。
サンプルのシェーダーでもいい絵が作れますが、VRoidモデル一体に適応するとバッチ数3倍、三角面が4倍ぐらいになるのでゲームなどリアルタイムの描画には向かなそうな印象でした（そもそも1体8マテリアルぐらいで出力される、VRoid出力のモデルにも原因があるかもしれないですが）
何がサンプルシェーダーに搭載されていないか、という項目を配布ページに書いてくれているので、「良いトゥーンシェーダーに必要な機能」が分かって個人的には助かりました。
lilToon
ワールド間のライティングの差が激しいVRC内でもモデルをキレイに描画出来て凄い、と以下の記事で紹介されていました。
VRユーザー内でも信頼できるNPR(Non-Photorealistic Rendering)シェーダーとして、Boothで頒布されているグッズにも多く使われているようです。
Avatar Museum 5に出展されているアバターの調査をしました。
— 霧原きりは (@KirihaAdAstra) January 25, 2022
雑な集計ですがシェーダー上位はUTS2、lilToon、Sunao、Poiyomiとなりました。
ポリゴン数は3000・5000円/△70000以下に集中していますが価格と弱い相関があるようにも見えます。
種族は分類が非常に難しいので参考程度です。 pic.twitter.com/yi3RjaAUDB
Universal Toon Shader
Unity公式のトゥーンシェーダーなのですが、UTS2とかBRP非対応だとか名前関係もややこしくて調べるのを後にしていました。今調べた所、Universal Toon ShaderはUTS2(Unitychan Toon Shader 2.0)の後継としてURP環境で使えるそうなので、これからはUniversal Toon Shader（UTS?）を使おうという事でした。
UniToon
ゲーム用途の物理ベーストゥーンシェーダである「UniToon」をぼちぼち開発中です。長年の経験から独自手法の滑らかなアウトラインを実現したので、めっちゃ良い感じの絵がリアルタイムで出せます。しかも比較的軽いです。今の所URPのみ対応しています。https://t.co/PajJAAdx3K pic.twitter.com/n1ECg1ol8n
— yoship@テクニカルアーティスト (@yoship1639) March 31, 2022
最近Unity公式を見たらRTされていました。見た目もかなりいい感じで、アルファ版らしいので続報が楽しみです。
まとめ
最近流行ってて私が好きないい感じの絵は以下のように作られています。
１．背景を物理ベース＝実写風に描画
２．１の環境に合わせて自然にキャラを配置
３．撮影処理などでエフェクトも足しつつ全体を調節する
それをシェーダーで書くとこんな感じになるようです。
例えばURPを使って
１．背景を物理ベースで描画
２．キャラをトゥーンシェーダーで描画
３．パフォーマンスを見ながらポストエフェクトでまとめる
まとめると以上です。
背景を物理ベースで描く方はUnityが力を入れているようなので、公式のドキュメントを読むと良さそうです。キャラ描画についてはソシャゲ開発スタッフの技術記事や、VRでモデルを販売している有志のコミュニティが詳しいので適宜調べつつ、Unity側のアップデートした仕様とすり合わせて行けばよいでしょう。
先日シェーダーの使い方が分からないのでなんとなく使っているという個人ゲーム製作者を見かけました。3Dに限らず2Dゲームでも最終的な見た目を大きく左右できるのがシェーダーですが、使い方が分からないままの人は少なくないと思います。
また、自分のように「ブラウザで制作物を公開する時にWebGLで出力したいが、UTS2が非対応になってしまう」など実際に使う場面で困ったり迷ったりする事もあると思います。ゲーム製作者の例のように、実際にゲームエンジンを使って何か作っている人ほど、そういった手の届かない部分に詳しいはずです。実際に市販のゲームをリリースしている製作者がShaderGraphそんなに便利じゃないと言っていた事もあるので、あくまでもURPの機能を追う事を軸に調べました。
シェーダーに限らず3Dゲームのグラフィックに関してはAmazonで買える書籍やgithubで公開されているプロジェクトなど、先人達の知恵がかなり蓄積されているので学ぶことはいつでも始められます。自分は「勉強しようとして勉強する」のが苦手なので、最近の表現として何が求められているのか、そしてツールや技術を使って自分の何を表現したいのか考えた方がいいなと思い、今回の記事を描きました。
結果として、調べ物がほとんどであまり考える時間は取りませんでしたが、シェーダーに何が出来るか、何をやらせたいか多少は掴めたと思います。
タイトルに（１）とあるように方針が決まったらあとは実践なので
作品分析を元に絵を描いてみる（コンセプトアート、キャラデザイン）
分析を元にシェーダーを書いてVRoidモデルをいい感じにしてみる
というのを今後の方針として挙げたいと思います。
また進展があれば（２）に続きます。
この記事が気に入ったらサポートをしてみませんか？