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より暗くしたいので、乗算してやや明るさを落としています。これを加算で、先ほどのシェーディングに上乗せします。