🎨

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

2023/12/24に公開

こんにちは！株式会社アプリボットでクライアントエンジニアをしている@siguma_sigです。
こちらは Applibot Advent Calendar 2023 24日目の記事になります。
前回の記事は@_kz_devさんの、自作パッケージの依存関係ちゃんと管理してる?静的解析とGraphvizで実現した自作パッケージ依存関係可視化ツール"prelviz"です。

はじめに

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

前提知識

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

当時
- 学生時代にOpenGLを用いて、基礎的なシェーディングの実装は学習のため行ったことがある
- Unity上でのシェーダーはUI周りのシェーダーのみカスタマイズする形で実装したことがある
- バーテックスシェーダー、フラグメントシェーダーなど基礎的な単語はある程度理解している
- 法線マップやリムライトなどは単語と表現は知っているが、実装の仕方や仕組みは全く知らない
- UnityのURPは全く知らない、使用したことがない
最終の状態
- URPを用いて、トゥーンよりな表現（リムライト、陰影、アウトライン）が実装できる
- URPを用いて、アウトラインなどポストプロセス表現を実装できる
- シャドウマップ、ライトマップや各種URPの設定項目をある程度理解した上で扱える
- FrameDebugger、Rendering Debuggerを用いたグラフィックス周りのデバッグと修正ができる

基礎知識を蓄える

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

そのためにやったこととして、ゲーム制作者になるための3Dグラフィックス技術をまずは読みました。
こちらの本では、数式やコードをほとんど使用せずに基礎的なグラフィックスの単語とその解説をしてくれています。
例えば、各種グラフィックスパイプラインの流れと役割の説明から、トゥーンシェーディングという単語とその表現のための陰影、アウトライン、リムライトなど各種表現の具体的な仕組みについての事例などを紹介してくれています。
また、一つの表現に対しても複数の手法を紹介してくれているので、それぞれどのような部分で優れているかや使い分けをある程度理解することができます。
もし、時間が無い方は1-4章,7章,9-11章を読むだけでもモバイル向けによく使用する知識はある程度つけられると思います。

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

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

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

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

1つ目の動画は、アーティストの方も理解できるような優しい内容になっているので、URPの入門にはとても良かったです。
2つ目の動画は、実際に使い始めるとなった際の実践的な知識について解説してくれています。

ShaderGraphを使って遊ぶ

一般的なグラフィックス周りの知識やURPの知識を学んだあとには、ShaderGraphを使って実際にシェーディングやアウトラインなどを実装しました。
すぐにコーディングすることも良いとは思いますが、シェーダーという単語に抵抗があり、今まで触れていなかったというような方は入門としてShaderGraphを使ってみるのはとても良いと思います。

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

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

ここまで学習を進めたら、あとは実際にシェーダーを書いてみました。
また、その際には初めにURPに組み込みで用意されているようなシェーダーを参考に書き始めました。
例えば、Lit.shader、LitForwardPass.hlsl、LitInput.hlslなどです。

これらを見るとシェーダーの構成として、まず *.shaderに各パスの定義を行い、実際にそのパスの入力や実装に関しては、それぞれ　*Input.hlslや*Pass.hlslに実装していることがわかります。
こうすることで、パス間の処理の使い回しのしやすさや読みやすさが変わるからだと思います。

また、ある程度知識をつけた状態で読めばそれぞれの処理が何をしているかがわかるので、例えばこれらをシェーディングの仕方を変えてみたりしました。
URPは基本的には中身の実装まですべて読むことができるので、既存である実装を参考に書いていくのが良いと思います。
ポストプロセス周りの処理も同様に、全てコードもシェーダーも読むことができるので、そちらを読みつつ実装することをおすすめします。

おわりに

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

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