見出し画像

【Unity】Shader Graphの学び方

Hiko

Unityの操作に少し慣れてくるともっと凝った演出がやりたくなってくることがあります。アセットやプラグインを導入することで解決できる場合もありますが、自分でシェーダーが作れるようになるとより柔軟でオリジナリティ溢れた表現が可能になります。

そうなると「よし！シェーダー勉強するぞ！」となるわけですが、そもそも「シェーダーって何？」とか「勉強の仕方が分からない」という方も多いかと思います。私自身もそうです。

ここでは私なりに始めたシェーダーの勉強方法を解説します。具体的なシェーダーの記述方法は各項で紹介するサイトを参照ください。

１．Shader Graphってなに？

Unityではシェーダーの記述は一般的にコードベースで行われてきましたが、Unityエディタ 2019.1で視覚的にシェーダーが記述可能なShader Graphが正式にパッケージングされるようになりました。

無題

Shader Graphでは特定の機能を持つノードを繋げて組み合わせることでコードを書かずに複雑な映像表現を可能にしています。

これからシェーダーを学習していく場合は、このShader Graphを使って進めていくと視覚的にわかりやすくおすすめです。

２．そもそも「シェーダー」って？人向け

Shader Graphを使っていきましょうと書いたばかりですが、そもそもシェーダーが何をするものなのかがわからない場合は、超有名どころのおもちゃラボの「7日間でマスターするUnityシェーダ入門」を一通りなぞってみることをおすすめします。

こちらのサイトではUnityによるコードベースでのシェーダーの記述方法を解説していますが、まずはシェーダーの解説から始まり実際にコードを書くことでシェーダーの効果を確認することができるようになります。

シェーダーを学習するうえでコードがわからず挫折した方もいるかと思います。しかしながら、コピペでも構いませんので文章を読んで実行してみるとシェーダーが何をしているのかがだんだんイメージできるようになっていきます。

このステップを踏んでおくと、この先Shader Graphの学習を進めていく上で理解を早めることができたり、つまづいたとしても自力で試行錯誤したり解決するための手助けとなります。

３．Shader Graph学習資料

ここからが実際のShaderGraph学習資料です。
1つ目はUnity Japanが提供している公式Youtube動画です。

解説に使われているサンプルプロジェクトが配布されているので、動画をみながら自分の手元で実行して確認することができます。

ただし、Unityの2D機能(スプライトのジオメトリ操作等)をがっつり使っているので、2Dに慣れていない場合やサンプルプロジェクトを流用せずにいちから進めていく場合はこちらの動画を先に見ておくことをおすすめします。

基礎編が終わったら実践編にトライしてみると良いでしょう。

2つ目は「最強のエフェクトデザイナーになるブログ」さんです。

こちらのブログではUnity TechnologiesがGitHubで提供しているShader Graphのサンプルプロジェクトで使われているノードを一つずつ丁寧に解説しています。

サンプルのシェーダーをざっと眺めていると、ノードの使い方やお作法が何となく見えてくるようになります。

3つ目はDitzelGamesさんの動画で、Shader Graphのノードを一つずつ解説しています。

使い方を学ぶというよりかは、どういうノードがあるかをざっと知ることができます。

４．実際にやってみたおまけ

５．Shader Graphが使えるようにする

理解の近道は実際に手を動かして触ってみることです。学習用にShader Graphが使えるようにプロジェクトを作ってみましょう。

テンプレートからUniversal Render Pipelineを選択して新規にプロジェクトを作成するとすでに必要な設定がされた状態で使えるようになります。

スクリーンショット 2020-09-20 181713

既存のプロジェクトに導入する場合や手動で導入する場合は、Package ManagerからUniversal RPを選択してInstallします。

画像3

Projectパネル内で右クリックし、[Create] > [Rendering] > [Universal Render Pipeline] > Pipeline Asset (Forward Renderer)を選択します。

名称未設定-2

UniversalRenderPipelineAssetとUniversalRenderPipelineAsset_Rendererが作成されます。

スクリーンショット 2020-09-20 184333

[Edit] > [Project settings] > [Graphics]のScriptable Render Pipeline Settingsに先ほど作成したUniversalRenderPipelineAssetを設定します。これで設定は完了です。

スクリーンショット 2020-09-20 184547

Shader Graph用のシェーダーはProjectの右クリックから[Create] > [Shader]から2D用であれば2D Renderer、3D用であればライティングを必要とするかしないかでUnlit GraphまたはPBR Grahpを選択してください。

スクリーンショット-2020-09-20-182022

作られたシェーダーファイルをダブルクリックするとShader Graphのエディタウィンドウが開きます。

６．おわりに

Shader Graphを学習する上で参考になるサイトや動画を紹介しました。Shader Graphは正式にリリースされてから日も浅く、参考になる情報がたくさんある状況にあるとはまだいえません。

またシェーダー自体の情報も日本語で体系的にまとまってはいませんので、多くの人がシェーダーに触れて情報が共有されるようになると、学習のハードルが下がって理解しやすい環境が整ってくるかもしれませんね。🌱

７．その他の参考

Thanks!


この記事が気に入ったらサポートをしてみませんか？