【Unity】グラフィックス周りを業務で扱うまでにやったこと

こんにちは。株式会社アプリボットでクライアントエンジニアをしている@siguma_sigです。

こちらは Applibot Advent Calendar 2023 24 日目の記事になります。

前回の記事は@_kz_devさんの、自作パッケージの依存関係ちゃんと管理してる?静的解析とGraphvizで実現した自作パッケージ依存関係可視化ツール"prelviz"です。

はじめに

ちょうど今年の初めから 5 月頃までにかけて、Unity を用いたモック開発ではありますが、初めてグラフィックス周りを業務で扱う機会がありました。
それまで私は、グラフィックスパイプラインやシェーダー周りを知識としてなんとなくは知っているが実装したことがないという状態でした。
グラフィックス周りを業務で扱うに当たって、モック向けではありますが、最終的には URP 上でキャラや背景のシェーダーを書いたり、アウトラインなどのポストプロセスが実装できる状態になりました。

本記事では、そのような状態になるまでにどのようにグラフィックス周りを学習したかをまとめます。
前提として、学習の仕方は人それぞれであり、あくまでも 1 つの事例として参考にしてください。

前提知識

改めて、当時の自身の知識の状態と最終の状態を書いておきます。

当時

• 学生時代に OpenGL を用いて、基礎的なシェーディングの実装は学習のため行ったことがある
• Unity 上でのシェーダーは UI 周りのシェーダーのみカスタマイズする形で実装したことがある
• バーテックスシェーダー、フラグメントシェーダーなど基礎的な単語はある程度理解している
• 法線マップやリムライトなどは単語と表現は知っているが、実装の仕方や仕組みは全く知らない
• Unity の URP は全く知らない、使用したことがない

最終の状態

• URP を用いて、トゥーンよりな表現（リムライト、陰影、アウトライン）が実装できる
• URP を用いて、アウトラインなどポストプロセス表現を実装できる
• シャドウマップ、ライトマップや各種 URP の設定項目をある程度理解した上で扱える
• FrameDebugger、Rendering Debugger を用いたグラフィックス周りのデバッグと修正ができる

基礎知識を蓄える

グラフィックスを業務で扱うために、はじめにやったことは知識を蓄えることでした。
幸いにして、社内にはグラフィックスに精通したプログラマーや TA が身近にいたので、やりたい表現に対してこうすればできるであろうというアテさえ思い付けば、あとは頼りつつ実装ができる状態でした。

そのため、知識を蓄えることでそういった人たちと会話が正しくできるようになることをまずは目指しました。

そのためにやったこととして、ゲーム制作者になるための3Dグラフィックス技術をまずは読みました。
こちらの本では、数式やコードをほとんど使用せずに基礎的なグラフィックスの単語とその解説をしてくれています。

例えば、各種グラフィックスパイプラインの流れと役割の説明から、トゥーンシェーディングという単語とその表現のための陰影、アウトライン、リムライトなど各種表現の具体的な仕組みの事例を紹介しています。

また、1 つの表現に対しても複数の手法を紹介してくれているので、それぞれどのような部分で優れているかや使い分けをある程度理解できます。
もし時間が無い方は、1-4 章、7 章、9-11 章を読むだけでもモバイル向けによく使用する知識はある程度つけられます。

Unity周りのグラフィックス技術を学ぶ

一般的なグラフィックスの知識を蓄えたあとに、それを Unity 上でどう実現するかについて学びました。
具体的には、よく聞いていた URP という単語がどういったもので、それまでのグラフィックスパイプラインと何が違うのかという点や、Unity 上でシェーダーを実際に書いて動かす方法を学びました。

その際に重宝したのは、Unity Learning Material のURPの項目で紹介されている動画でした。

こちらでは、基礎的な URP の説明をしてくれているものから、実際の事例を紹介しているものまで広く動画があります。
ここにある動画を片っ端から視聴することで、URP というものが何かということと、どういったことができるのかが理解できるようになります。

その中でも特におすすめするのが、下記の２つの動画になります。

https://www.youtube.com/watch?v=H3msD0eiQ_4

https://www.youtube.com/watch?v=3qySoORWSfU

1 つ目の動画は、アーティストの方も理解できるような優しい内容になっているので、URP の入門にはとても良かったです。

2 つ目の動画は、実際に使い始めるとなった際の実践的な知識について解説してくれています。

ShaderGraphを使って遊ぶ

一般的なグラフィックス周りの知識や URP の知識を学んだあとには、ShaderGraph を使って実際にシェーディングやアウトラインなどを実装しました。

すぐにコーディングすることも良いですが、シェーダーという単語に抵抗があり、今まで触れていなかった方は入門として ShaderGraph を使ってみることをおすすめします。

ShaderGraph に関しても、Unity 公式チャンネルで公開されている下記の動画がとてもおすすめです。

https://www.youtube.com/watch?v=AQGgwgo51lo

実際にシェーダーを書いてみる

ここまで学習を進めたら、あとは実際にシェーダーを書いてみました。

その際には、URP に組み込みで用意されているシェーダーを参考に書き始めました。

例えば、Lit.shader、LitForwardPass.hlsl、LitInput.hlslなどです。

これらを見るとシェーダーの構成として、まず *.shader に各パスを定義し、実際にそのパスの入力や実装については *Input.hlsl や *Pass.hlsl に記述していることがわかります。

こうすることで、パス間の処理の使い回しのしやすさや読みやすさが向上します。

また、ある程度知識をつけた状態で読めばそれぞれの処理が何をしているかがわかるので、例えばこれらをシェーディングの仕方を変えてみたりしました。

URP は基本的に中身の実装まですべて読めるので、既存の実装を参考に書いていくのがおすすめです。
ポストプロセス周りの処理も同様に全て読めるため、そちらを読みつつ実装できます。

おわりに

今回は、グラフィックス周りを業務で扱うことになった方のために、1 つの事例としてどのように学習を進めるとよいかを紹介しました。

グラフィックスの世界は奥が深いので、専門でやっている方々は本当にすごいです。
反面、シェーダーという単語へ必要以上の抵抗感を覚えている方も多いような印象があります。
入門として簡単なシェーダーを作成するところまでであれば、プログラミングの学習と同様にそこまで難易度も高くなく、年々情報も増えているためハードルは下がっています。
もし今回の記事で興味が湧いた方はぜひ年末年始にでも学んでみてください。

以上、Applibot Advent Calendar 2023 24 日目の記事でした。