Unityを使った新しい表現へのアプローチ　明確なゴール設定、制作プロセス読み解き、個別手法アレンジ

新しい表現を作る時のアプローチ

大下岳志氏：ここまでは、URPでShader Graphを使ってオリジナルの表現を作るための機能と導入方法を紹介しました。以前からこうした表現に挑戦されている方は、さっそく試せることもいろいろあるのではないかと思います。

ただ、このような表現にこれから初めて挑戦される方や、軽く触ったことはあるけれど思いどおりにいかなかったという方もいると思います。そうした方にとっては、小さな単位での具体的な要素の作り方はわかっても、望んだ表現に辿り着くためにそれをどう積み上げていけばいいのか想像がつかないこともあるかと思います。

もちろん、表現というのは常に自由なので、各自が思い思いの方法で作っていけばよいのですが、1つの参考として、私がこういう表現を作る時のアプローチを紹介したいと思います。

今回サンプルとして用意したのは、最初にお見せしたこの石膏デッサン風の表現です。これを作るにあたって、構想からどういう流れで進めたかをお話しします。Unityの使い方からは少し離れた話も多くなると思うので、気楽に聞いてもらえればと思います。

絵描き表現に使ったUnityのツール「ArtEngine」

ではさっそく、と言いたいところですが、その前にいきなりの脱線で申し訳ありません。1つ別のツールについて紹介させてください。

今回のデッサンシェーダーでは、絵描き表現のため、このような6枚のテクスチャを使っています。これらはすべてUnityがリリースしている「ArtEngine」という別のツールを使って、タイリング可能なテクスチャにしてあります。この作業を簡単に紹介します。

まず、鉛筆のタッチは、画用紙に自分で描きました。明暗を分けるため、「ハイユニ」のFから3Bと、「ステッドラー」の8Bを使っています。それをスキャンしたものがこちらです。この各色を矩形に切り取り、6枚のテクスチャに分けます。多少色が乗っていないところが含まれていても気にしません。

この時点でタイリングすると、もちろんこのようにテクスチャの境界線が目立ちます。そこでさっそく、このテクスチャをArtEngineに読み込みます。

これがArtEngineのUIです。ArtEngineもノードベースのツールで、画面下には、すでに構築したノードのネットワークが見えます。初期の状態は、一番左のこの部分です。

このテクスチャに、AIでテクスチャの境界線を処理するシームレス（Seam Removal）ノードを接続します。

これだけで、テクスチャの境界がスムーズにつながり、タイリングに違和感のないテクスチャとなりました。しかし、境界はわからなくなったものの、タッチの特徴的な箇所によって、まだ少し繰り返し感が残っています。

こういう場合は、Mask Paintノードを使って、気になる箇所を雑に塗りつぶし、元のテクスチャとマスクをContent-Aware Fillというノードにつなぎます。そうすると、特徴的なディテールが取り除かれ、より繰り返しの目立たないテクスチャになります。

これをOutputノードにつなぎ、画像ファイルとして出力すれば完了です。

このテクスチャが加工後には、こうなります。

今回、すべてのテクスチャをシームレス化するのにかかった時間は、約10分でした。ArtEngineは、Unityとは別の契約が必要となる独立したツールですが、無料体験もできるので、ぜひお試しいただければと思います。非常にわかりやすく便利なツールです。

ゴールは頭の中だけではなく目に見えるものとして用意する

それでは、シェーダーを使った表現の話に戻ります。私が独自のグラフィック表現を作る場合、明確なゴールの設定、制作プロセスの読み解き、個別手法のCG的なアレンジという順番で大きく括って考え方を進めていきます。それぞれ、このシェーダーでの例を挙げながら解説していきます。

まずは、明確なゴールの設定について。これは当たり前かもしれませんが、できるだけハッキリとした目標を決めることをお勧めします。再現したい絵をなにか見つけてくるのでもいいですし、自分でそれを描いたり、CGツールで作ったりと、方法はなんでもよいと思います。

ゴールは頭の中だけではなく、画像や実物など、とにかく目に見えるものとして用意することがポイントです。そうすることで、シェーダーを作っている最中に、常に目指す絵との差分を確認しながら作業を進められます。

人間の記憶や印象は曖昧なもので、比較の対象がないと、なんとなくこれでもいい気がすると都合よく解釈してしまいがちです。常に目標となるビジュアルを手元に置き、それと比べながら作業を進めることによって、目指すハードルの高さをキープできます。

また、慣れないうちは、イメージがブレるのを防ぐため、目標にする資料の数は極力少なめに、できれば1枚に絞ったほうがよいと思います。

制作の工程を理解する

次の、制作プロセスの読み解きとは、先ほどゴールに設定した絵が実際にどのような工程で作られているかを知るという意味です。目標とする絵の制作工程の資料があれば、それを参考にするのが一番ですが、それが難しい場合は、同じ作者による制作資料や作者が使っている技法の解説書も頼りになります。

特に、制作の過程で作者がどういうことに気をつけているかというコメントや、途中段階の絵が見られる資料があると、非常に心強いです。目標が自分で描いたものである場合は、できるだけ途中段階の画像やコメントを残しておくとよいと思います。

今回、あらためて技法書をいろいろと読み、デッサンに共通する制作プロセスを確認しました。そこから、デッサンの制作工程を、「モチーフの観察」「アタリ、輪郭線の描画」「大きな陰影の描き入れ」「詳細な陰影と形状の追い込み」「仕上げ」と区分けしました。

なぜこうした割り出しを行うかというと、シェーダーでも多くの場合、最終的な絵を作るためにいろいろな要素を別々に作り、徐々にそれを組み合わせていくというかたちを取るからです。

目標とするものの制作過程がわかれば、シェーダーでもその過程の区切りを1つのプロセスとしてまとめることで、混乱することなくネットワーク全体の構成を考えられます。

このシェーダーでは、割り出した工程をもとに、このようなネットワークを構成しました。プロセスごとにグループを作り、工程が目視できるようになっています。順番や内容は、モデルと完全に同じにはなっていませんが、目標に対し、どこが揃っていて、どこをアレンジしているかも自覚できるようになります。

また、Shader Graphのようなグラフエディタは、途中段階でのプレビューが見やすいというメリットがあります。シェーダーと目標の途中段階の出力がそこそこ近ければ、最終的な出力も似てくる可能性が高く、また、問題があった場合には、どこがおかしいかを切り分けやすくなります。

目標の制作過程の再現に集中しながらプロセスごとに具体的な実装を作る

大きな制作のプロセスを考えられたら、次はそのプロセスごとに具体的な実装を作っていきます。ここからが、先ほど紹介したような具体的な作業となります。

この工程では、Shader Graphのノードや数学などの知識があればあるほど、できることの幅は広がると思います。一方で、実装方法を考えるにあたっては、いわゆるCGの常識からではなく、目標の制作過程の再現に集中できたほうがよいとも思っています。

技法書に書かれているとおりにシェーディングをしてみる

ここでは、先ほどのプロセスの、モチーフの観察と、陰影と形状の追い込みの箇所の2つから、その例を紹介したいと思います。

モチーフの観察とは、言い換えると、絵の作者がどのように対象を見ているかということです。単に、目に光を取り入れているという意味では、物理ベースシェーディングなどが使えそうにも感じますが、それではあまり絵画的な印象にはなりませんでした。

一方、参考にした複数のデッサンの技法書では、最初にモチーフの何に着目して観察するべきかが書かれています。

そこで今回は、物理的な正しさは一切無視して、技法書に書かれているとおりにシェーディングを作ってみようと思いました。

まず、全体を大きく支配している光の向きを把握します。これはシンプルに、ライトとNormalのdot積を使いました。多くの書籍では、陰影は明暗の境界線が一番暗く、それ以降は逆光によって徐々に明るくなることを意識するようにと書かれています。

グローバルイルミネーションになじんだ今では、環境光などによる効果だと理解できますが、それがわかっていても、人間の目では光がどのように複数回反射して暗い面を照らしているかを追跡できません。

なので、ここも書籍の言葉どおり、Main Lightと真逆の向きから逆光を当てることにしました。ライトのベクトルに-1を掛けて逆向きにし、Main Lightと同じ計算を行います。逆光は、Main Lightより暗くしたいので、乗算してやや明るさを落としています。これを加算で、先ほどのシェーディングに上乗せします。

さらにデッサンでは、モチーフを見る際には輪郭付近の光の回り込みを意識して、立体感を捉えるようにとよく言われます。これも言葉どおりに再現するため、Fresnel Effectを使い、輪郭に明るい光の周り込みを作りました。

これが今回作ったモチーフ観察のプロセスです。あくまで観察なので、この結果は直接出力せず、あとの描画部分を作るための1要素として使います。場所によっては、境界の黒が目立ち過ぎている気もしますが、髪の毛のあたりは、すでに絵画的な表現にも見える陰影が生まれています。

標準のシェーダーと比べると、陰影の階調を幅広く捉えていたり、逆に細かな階調変化が大雑把だったりと、多くの違いがあります。もちろん、標準のLit Shaderのほうが物理的に正しい陰影ではあるのですが、比較すると、人間的に見えない印象も少しおわかりいただけるのではないかと思います。

デッサンらしさを再現する方法

もう1つの例、描画における詳細な陰影と形状の追い込みについてです。

目標とした絵を見ている中で、1つの特徴として、このような形状に沿ったタッチの流れがあることに気づきました。この特徴はいろいろな資料でも見られることから、デッサンらしさの要素の1つだと感じ、ぜひ再現したいと思いました。

通常、テクスチャを形状に合わせたい場合、テクスチャにオブジェクトのUVを使うのが一般的です。しかし今回は平面で描かれているものの再現が目標なので、テクスチャに3Dのパースはつけたくありません。そこで、このような方法を考えてみました。

まず、描画のテクスチャは、先ほどの明暗情報から作ったマスクを使って、このように画面に直接投影します。画面に投影したテクスチャは、UVのrotateを使うと、このように画面内で回転します。

そこで、オブジェクトの法線とカメラの向きからこのようなグレースケールを作り、これをテクスチャUVの回転値に使えないかを試してみました。

試してみると、変化が細かすぎてテクスチャが崩れることがわかったので、対策としてPosterizeを使い、回転値を段階化させてみました。これで、ある程度の長さを持った形状に沿うタッチが作れました。

また、デッサンでは、大きな陰影の描き入れは長いストロークでざっくりと。後半の描き込みの際には短いストロークで詳細にするという特徴もあります。

このシェーダーでは、Posterizeの段階を調整できるようにすることで、各段階でのストロークの長さも調整できるようになっています。

テクスチャは全部で6段階あり、すべて重ねることでこのようになります。このようなかたちで、各プロセスごとに再現するべき特徴を見つけて、実装方法を考えています。

これらのプロセスを組み上げたものが完成状態です。組み上げてみて、あまり上手くできていない場合は、各プロセスとそのつながりが最適かを順番に確認していきます。

以上が、私がシェーダーを作る際の考え方と進め方です。繰り返しになりますが、CGでの表現は、その方法も含めてすべて自由なので、こうしないといけないという話ではありません。あくまでシェーダーでの表現で、何から考えていけばいいかわからないという場合の参考程度にしてもらえればと思います。

URPは高い拡張性でHDRPに匹敵するクオリティの独自表現を可能にする

本セッションは、ほとんどの時間をURPの紹介に使ってきましたが、最後にあらためて、URPとHDRPを比べて、使い方の違いを考えてみたいと思います。

HDRPは、充実した機能と考え抜かれたシステムで、そのまま使うだけで、フォトリアルや、それに近い絵作りに対してすばらしいクオリティが望めます。しかし、みなさんがゲームやさまざまなコンテンツで作り出したい絵は、フォトリアルばかりではなく、むしろ全体の中では、そうでないものが大多数だと思います。

その点URPは、初期状態でこそ簡素なシステムですが、その高い拡張性を活かし、みなさんが求める表現全域をカバーし得るポテンシャルを持っています。

そして、冒頭でお伝えしたとおり、URPとHDRPはどちらも同じUnityのScriptable Render Pipeline、SRPによって構築されたものです。その点で、URPはSRPの拡張性の高さ、HDRPは到達できるクオリティの高さをそれぞれ象徴したレンダーパイプラインとも考えられます。

ぜひ、Universal Render Pipelineを使って、HDRPに匹敵するクオリティの独自表現を作り出してもらえればと思います。ご視聴ありがとうございました。