夜風のMixedReality

xRと出会って変わった人生と出会った技術を書き残すためのGeekなHoloRangerの居場所

ゼロから始めるUnityシェーダー

Unityを触っていればShaderはだれしも一度は興味を持つと思います。

筆者はもともとグラフィックに興味がありxR業界へ入りUnityを触り始めたため特にShaderを学びたい、理解したいという思いは強くありました。

最初にUnityを触ってから6年ほどが経ち5年ほどをかけて独学で学んできたShaderですが、ここではそうした筆者自身が5年前の自身がこれを読んだときに理解できるように躓いた点を抑えながら紹介していきます。

〇本チュートリアルの対象・目的

チュートリアルの対象は『Unityを触ったことがあるがShaderに関して理解をしたい、Shaderに関する知識はない』といった方を対象にShaderで行われていることの理解、基礎的なShaderが記述できるというところを目的に進めています。

・第一章 Shaderとは?

まずはShaderとは何なのかを理解する必要があります。

Shaderが何を目的としているのかを理解することはコードとの理解とは別に必要なことと感じています。

redhologerbera.hatenablog.com

・第二章 ShaderとGPU グラフィックスパイプライン

ShaderはGPU(GraphicsProcessingUnit)上で実行されています。

グラフィックスパイプラインとはGPU上でどのような処理を行っているのかという処理のフローを刺した言葉になります。

グラフィックスパイプライン上でのプログラマブルな箇所をプログラミングすることを一般的にShaderを書くと呼びます。

redhologerbera.hatenablog.com

グラフィックスパイプラインの中には頂点シェーダーステージ、フラグメントシェーダーステージといった実際にシェーダーを記述する上で押さえておかなければならないブロックがあります。

・第三章 UnityにおけるShaderのタイプ

 UnityではCG/HLSL言語を用いたコードベースのシェーダーとGUIベースでプログラミングに関する知識が不足していてもシェーダーを構築できるノードベースのシェーダーの2種類の方法でシェーダーを記述できます。

redhologerbera.hatenablog.com

どちらの手法を使用しても最終的なアプリケーションでの見た目に差が出るわけではありませんが、本チュートリアルではまずコードベースのシェーダから紹介していきます。

・第四章 ShaderLab:Shaderの記述

筆者がシェーダーを勉強し始めたときに混乱したことがUnityのシェーダーはShaderLabという構文の中でCG.HLSL文という別のプログラミング言語を使用して記述しているという点でした。

第四章ではShaderLabに関する記述を紹介していきます。

redhologerbera.hatenablog.com

redhologerbera.hatenablog.com

〇ShaderLODの使い方

ShaderではShaderLODというUnity側で提供されている機能があり、実行環境によって同じシェーダーでも処理を変えることができます。

redhologerbera.hatenablog.com

redhologerbera.hatenablog.com

〇透明度を持つシェーダーの実装

redhologerbera.hatenablog.com

・第五章 Shaderを書こう

 第五章では実際にShaderを記述していきます。

・5-1 Unityのテンプレートシェーダーを改造して色を変更できるシェーダーを記述する

 まずはテンプレートシェーダーを利用して任意の色を出力できるシェーダーを記述します。

redhologerbera.hatenablog.com

・5-2 URP用のシェーダーを記述する。

 URP(UniversalRenderPipeline)はUnityの次世代スタンダードなレンダリングパイプラインを指します。

 これは今まではUnity側で組み込まれており、開発者がカスタマイズすることができなかったレンダリングに関するより深い処理のレイヤーをカスタマイズできるテンプレートを指しています。

 URPでは従来の一部のシェーダーが機能せずにエラーを吐くことがあります。

 ここではURP用のシェーダーを記述していきます。

redhologerbera.hatenablog.com

・5-3 発光表現の実装

redhologerbera.hatenablog.com

redhologerbera.hatenablog.com

.・5-4 ライティングの実装

 ここまででは非常に簡単な色を返すというシェーダーを作っていましたが、ここからはUnityのシーン上に配置されているライトの影響を受けるシェーダーを記述します。

 つまり立体的な影を出すシェーダーを記述していきます。

redhologerbera.hatenablog.com

redhologerbera.hatenablog.com

〇ライティングの応用

redhologerbera.hatenablog.com

・5-5 アニメーションを行うシェーダーを記述する。

redhologerbera.hatenablog.com

・5-6 マテリアルパラメータから機能を切り替えることができるシェーダーを描く

redhologerbera.hatenablog.com

・5-7 頂点カラーを扱うシェーダーを書く

redhologerbera.hatenablog.com

・Untiyシーン上の情報を使用する

redhologerbera.hatenablog.com

redhologerbera.hatenablog.com

〇第六章 特殊なシェーダーのパラメータ

この章ではシェーダーで使用される特殊なパラメータについてまとめていきます。

〇ステンシル
〇シェーダーコンパイルレベルターゲット

Shaderで使用されている

#pragma Target 3.0

などのパラメータについて説明します。

redhologerbera.hatenablog.com

〇第七章 プロジェクトで使えるサンプルシェーダー

第七章では個々でShaderの機能を見ながら記述していきました。

この章では応用して実際にプロジェクトで使用できるシェーダーを紹介していきます。

---準備中---

〇第八章 カスタムシェーダーGUIで表示をカスタマイズする

ShaderのプロパティはUnityインスペクタウィンドウ上のマテリアルのプロパティとして表示されますが、UnityではCustomShaderGUIを使用することでこの表示をカスタマイズすることができます。

・CustomShaderGUIの使い方とテクスチャのカスタムレイアウト

redhologerbera.hatenablog.com

〇第九章 Shaderにおけるより低レイヤーの処理

・回転行列

redhologerbera.hatenablog.com

〇ShaderGraphを用いたシェーダー開発

・ShaderGraphでのアニメーション表現

redhologerbera.hatenablog.com

・クリスタルな表現

redhologerbera.hatenablog.com

redhologerbera.hatenablog.com