top of page
Shader
独学で作成したシェーダーをまとめているページです。
基礎的なレンダリングパイプラインやシェーダーの知識があり、実装に対し具体的な理解や提案ができます。
主な言語はUnityのShaderLab(HLSL)と、ShaderGraphです。
自主制作・アートの再現
学生時代のアートを元に、背景モデルとルックの作成を行いました。
シェーダー開発と実装をワンセットで考え、総合的なスキルの向上を図りました。
南国の海
使用ツール：Maya、Photoshop、Substance 3D、Unity 2021.3.9.1 URP
製作期間：3ヵ月
作成時期：2022/9
学生時代に作成したアートを元に、Forwardレンダリングで、背景とルックを作成する試みです。
任天堂の家庭用ゲームによく見られる、程よくデフォルメしつつも、リアル感を感じてもらえるようなルックを目指しました。
レンダリングのパイプラインを学ぶ一環で作成しましたが、半透明問題を解消しきれていないことが課題です。
製作期間：3ヵ月
作成時期：2022/9
学生時代に作成したアートを元に、Forwardレンダリングで、背景とルックを作成する試みです。
任天堂の家庭用ゲームによく見られる、程よくデフォルメしつつも、リアル感を感じてもらえるようなルックを目指しました。
レンダリングのパイプラインを学ぶ一環で作成しましたが、半透明問題を解消しきれていないことが課題です。
オリジナルアート/水面少女
使用ツール：Photoshop
作成時間：3時間
今回の自主製作の元になったアートです。
作成時間：3時間
今回の自主製作の元になったアートです。
モデル作成
モデルはMayaで、アートでメインとなる台座を始め、アートに忠実になるようにしつつ、アートで描き切れていないディテールを補うようにモデリングを行いました。
落ち影がきれいに落ちるようにサンゴの重なりを意識しました。
落ち影がきれいに落ちるようにサンゴの重なりを意識しました。
地形ブレンドシェーダー
海底の砂に、朽ちたサンゴや岩などが埋もれている様子を再現するために作成しました。
ブレンドに必要な地形の深度と法線のテクスチャを、直上からカメラで平行投影で撮影したものを変換して使用しています。
UnityではもともとReplacement Shader という、カメラから見た描画を独自に用意したシェーダーで上書きするマクロがありましたが、
Unity URPでは廃止され、法線や、深度用にレンダラーを追加してカメラのマテリアルを上書きする方法で実現しています。
Changing replacement shaders
https://developer.arm.com/documentation/102487/0100/Migrating-custom-shaders-to-the-Universal-Render-Pipeline
Terrain and Mesh Blending in Unity
https://inresin.wordpress.com/2020/04/03/terrain-and-mesh-blending-in-unity/
ブレンドに必要な地形の深度と法線のテクスチャを、直上からカメラで平行投影で撮影したものを変換して使用しています。
UnityではもともとReplacement Shader という、カメラから見た描画を独自に用意したシェーダーで上書きするマクロがありましたが、
Unity URPでは廃止され、法線や、深度用にレンダラーを追加してカメラのマテリアルを上書きする方法で実現しています。
Changing replacement shaders
https://developer.arm.com/documentation/102487/0100/Migrating-custom-shaders-to-the-Universal-Render-Pipeline
Terrain and Mesh Blending in Unity
https://inresin.wordpress.com/2020/04/03/terrain-and-mesh-blending-in-unity/
地形ブレンドシェーダー 深度ver
地形ブレンドシェーダーの補足です。
カメラから見た動画のような深度情報を使って、地形に埋もれた表現にする（地形をオフセットする）領域を変更します。
カメラから見た動画のような深度情報を使って、地形に埋もれた表現にする（地形をオフセットする）領域を変更します。
水面シェーダー
浜辺に近い海の、穏やかな波の様子を再現しました。
法線マップは、blender でシミュレーションしたモデルを直上からキャプチャしたテクスチャを使用しています。
水面下の見え方は、屈折による水面下のオブジェクトの「浮き上がり」表現を取り入れています。
法線マップは、blender でシミュレーションしたモデルを直上からキャプチャしたテクスチャを使用しています。
水面下の見え方は、屈折による水面下のオブジェクトの「浮き上がり」表現を取り入れています。
Parallax サンゴシェーダー
サンゴの凹凸感を、モデリングするのではなく、シェーダーで再現をする試みをしました。
Parallax と呼ばれる視差マップ（Heightマップ）を使用して、マテリアル内に凹凸のある奥行きがあるように見せています。
次に紹介する毛玉シェーダーの派生で作成しました。
Parallax と呼ばれる視差マップ（Heightマップ）を使用して、マテリアル内に凹凸のある奥行きがあるように見せています。
次に紹介する毛玉シェーダーの派生で作成しました。
Parallax 毛玉シェーダー
遊びで作成したものですが、スプラトゥーン3 のヒーローモードに登場する「ケバケバ」状態のオクタリアンを参考に、奥行きのあるマテリアルを作成しました。
シルエットの形状はカメラとオブジェクトの法線の内積を使用して、輪郭部分のみ表示しています。
マスクテクスチャによって逆光による光の透過も取り入れています。
シルエットの形状はカメラとオブジェクトの法線の内積を使用して、輪郭部分のみ表示しています。
マスクテクスチャによって逆光による光の透過も取り入れています。
参考資料 沖縄でのシュノーケリング１※音が出ます
海の持つ特性への理解を深めるために、沖縄でシュノーケルをして観察を行いました。
参考資料 沖縄でのシュノーケリング２
コースティクス表現は、コースティクステクスチャ生成の勉強を兼ね、箱崎様のWaterCausticsEffect for URP v2 (Unity Asset)を使用し、リファレンス画像に似せて調整を行っています。
https://booth.pm/ja/items/3203739
https://booth.pm/ja/items/3203739
Shader Study
その時気になったことをベースに、都度自分に課題を課して表現の検証を行っています。
検証用のカブトムシは自作のモデルです。
ジェルシェーダー
生っぽい質感のジェルシェーダーを作成する試みです。
カブトムシの内側（骨的な部分）と、外側（ジェル部分）でマテリアルを分け、ゼリーの透明感や、質感を追求しました。
※カブトムシにはこのような骨はありません。
カブトムシの内側（骨的な部分）と、外側（ジェル部分）でマテリアルを分け、ゼリーの透明感や、質感を追求しました。
※カブトムシにはこのような骨はありません。
ジェルの透明度
内側の骨格部分は、埋もれ具合の深度情報を使用して透明度を調整できるようにしてあります。
ジェルの動き
モデルが移動した方向に、頂点シェーダーでサイン波を発生させており、移動量のベクトルの大きさを使用してサイン波の高さや減衰率を指定することで、ジェルの固さを調整することができます。
サイン波揺らぎシェーダー
ジェルシェーダーに流用することになった、大元の揺らぎシェーダーです。
モデルの移動方向のベクトルを取得し、3D空間上のサイン波の方向として使用することで、モデルが止まった時に慣性に沿って波が動いているように見せています。
モデルの移動方向のベクトルを取得し、3D空間上のサイン波の方向として使用することで、モデルが止まった時に慣性に沿って波が動いているように見せています。
不透明感パスだけで作成するスタイライズドな海シェーダー
半透明を一切使わず、不透明パスだけで、スタイライズドな海を実装する試みです。
波の動きの制御をすべてテクスチャ情報とシェーダーで完結させ、Maya等でアニメの作成は行っていません。
寄せ波の速さの緩急は、グラデーションテクスチャのX軸を抽出して変動させています。（ゆっくりになると変動幅が少なく、ぎこちなくなります…）
海の色は深度によるグラデーションテクスチャを自作ツールで作成し、適用させています。
かなり尖った実装ですが、透明パスを使用しなくても、海らしさを表現できたのではないかと思います。
波の動きの制御をすべてテクスチャ情報とシェーダーで完結させ、Maya等でアニメの作成は行っていません。
寄せ波の速さの緩急は、グラデーションテクスチャのX軸を抽出して変動させています。（ゆっくりになると変動幅が少なく、ぎこちなくなります…）
海の色は深度によるグラデーションテクスチャを自作ツールで作成し、適用させています。
かなり尖った実装ですが、透明パスを使用しなくても、海らしさを表現できたのではないかと思います。
スペキュラ
昼や夜などの時間変化には対応していませんが、太陽の位置の変更が可能です。
寄せ波の仕組み
寄せ波は同じポリゴンを2重に重ね、シェーダーのチェックボックスで時間をズラすことで、互い違いに波がアニメーションするようにしています。
後から発生する波の頂点を高くすることで、波同士が被らないようにしています。
後から発生する波の頂点を高くすることで、波同士が被らないようにしています。
パーツ分け
沖、寄せ波１，寄せ波２ というポリゴン構成で、ベースとなる波はワールド空間に描画することで、繋がりや見た目が破綻しないようにしています。
海に浸っているモデル（カプセル、立方体）の白波は、直上カメラの深度描画から Signed Distance Field（SDF）テクスチャを生成してベイクしています。
可能な限り負荷を軽くするため、リアルタイムには対応していません。
海に浸っているモデル（カプセル、立方体）の白波は、直上カメラの深度描画から Signed Distance Field（SDF）テクスチャを生成してベイクしています。
可能な限り負荷を軽くするため、リアルタイムには対応していません。
屈折描画の勉強
grabpass の屈折表現の勉強で実装した水です。
https://catlikecoding.com/unity/tutorials/flow/looking-through-water/
https://catlikecoding.com/unity/tutorials/flow/looking-through-water/
近づくと現れる足場シェーダー
スーパーマリオ 3Dワールド ＋ フューリーワールドに実装されている、近づくと現れる足場を実装する試みです。
動的モデルの中心座標と、足場モデルの距離情報を使用して描画範囲を決めています。
動的モデルの中心座標と、足場モデルの距離情報を使用して描画範囲を決めています。
Hexagon パターンの実装
六角形（Hexagon）パターンの実装方法を勉強しました。
ひとつ前の「近づくと現れる足場シェーダー」に使用する予定でしたが、中心から6方向に伸びるエッジがきつく出てしまい、結局キャプチャしてぼかし加工を入れたテクスチャで実装しました。
ひとつ前の「近づくと現れる足場シェーダー」に使用する予定でしたが、中心から6方向に伸びるエッジがきつく出てしまい、結局キャプチャしてぼかし加工を入れたテクスチャで実装しました。
Triangle パターンの実装
Hexagon パターンの勉強の過程で実装した三角形のパターンです。
Clipシェーダー（生成）
アストロニーア（ASTRONEER）という宇宙探索ゲームに実装されている、モデルが機械的に生成される、消失する時のシェーダーを再現する試みです。
モデル表面の法線と、平面と仮定したポリゴンの法線の内積を使って、値が0以下のピクセルをクリップして実装しています。
モデル表面の法線と、平面と仮定したポリゴンの法線の内積を使って、値が0以下のピクセルをクリップして実装しています。
Clipシェーダー（上下方向）
Clipシェーダー応用 焼失
Clipシェーダーを応用して、燃えて無くなるような表現を実装する試みです。
ノイズテクスチャを使用して、クリップと、ディストーション、頂点アニメーションを行うことで紙などの可燃物が徐々に燃えて無くなる表現ができます。
燃える速度などを、手付けアニメーションで任意に調整できるのが強みです。
ノイズテクスチャを使用して、クリップと、ディストーション、頂点アニメーションを行うことで紙などの可燃物が徐々に燃えて無くなる表現ができます。
燃える速度などを、手付けアニメーションで任意に調整できるのが強みです。
Clipシェーダー応用 不思議な力
Clipシェーダーを応用して、不思議な力でオブジェクトが消えたり現れるときに使えそうな表現を実装する試みです。
マーブル模様のノイズテクスチャで実装しています。
マーブル模様のノイズテクスチャで実装しています。
ハーフトーン影シェーダー
3Dオブジェクトをポップに、UI的に表示することを想定した、ハーフトーン影シェーダーを実装する試みです。
ポイントライトの距離による SSS Translucent
ポイントライト（白）がサーフェイスに近づくほど、内部散乱光（SSS）で赤い血潮が見えるようにする試みです。
ディレクショナルライトの逆光によるトランスルーセント（Translucent）は有名ですが、ポイントライトによるトランスルーセントを入れることによって、より生っぽい感じが出ると思いました。
演出で周辺の環境光が弱く、暗い時に有効な表現だと感じました。
ディレクショナルライトの逆光によるトランスルーセント（Translucent）は有名ですが、ポイントライトによるトランスルーセントを入れることによって、より生っぽい感じが出ると思いました。
演出で周辺の環境光が弱く、暗い時に有効な表現だと感じました。
ポイントライトの距離によるSSS Translucent 静止画
ポントライトをサーフェイスにぴったりくっつけた時の静止画です。
厚みマップによる SSS Translucent
逆光時に、厚みマップを使用して透過する表現をする試みです。
背景の草木やキャラクターの髪の毛など、昨今のゲームでのトレンドです。
背景の草木やキャラクターの髪の毛など、昨今のゲームでのトレンドです。
厚みマップとポイントライトによる SSS Translucent
ポイントライトで厚みマップを使用した例です。
FrontFaceとBackFace の2パス描画
BackFace を不透明で、FrontFace を半透明で、2パスで描画する試みです。
手っ取り早く透明感は出せましたが、空洞感が目立ってしまうので、不透明パス（BackFace）のディテールを弱くする必要があると感じました。
手っ取り早く透明感は出せましたが、空洞感が目立ってしまうので、不透明パス（BackFace）のディテールを弱くする必要があると感じました。
Mesh Smearing シェーダー
アニメーションで勢いよく移動する時に尾ひれをギザギザに描く表現を実装する試みです。
Mesh smearing と呼ばれます。
オブジェクトのｎフレーム前の位置の方向に、ｎフレーム前の方向ベクトルとモデル法線の内積にノイズを乗算した頂点を伸ばすことで、尾ひれがギザギザになっているように実装しました。
Mesh smearing と呼ばれます。
オブジェクトのｎフレーム前の位置の方向に、ｎフレーム前の方向ベクトルとモデル法線の内積にノイズを乗算した頂点を伸ばすことで、尾ひれがギザギザになっているように実装しました。
Mesh Smearing シェーダー 機敏な移動
移動速度が機敏であるほどより効果が出ます。
Interior Mapping 実際には無い奥行き表現
Interior Mappingと呼ばれる、ビルの内部を実装する際に使われる手法を学ぶ試みです。
「視線ベクトルが壁にぶつかるまでの距離」を仮定することで、立方体の内部に、立方体の大きさ以上の空間が実装されています。
（まだなんとなくの理解です…。）
https://coposuke.hateblo.jp/entry/2020/12/24/003734
「視線ベクトルが壁にぶつかるまでの距離」を仮定することで、立方体の内部に、立方体の大きさ以上の空間が実装されています。
（まだなんとなくの理解です…。）
https://coposuke.hateblo.jp/entry/2020/12/24/003734
Effect Shader
シェーダーをフル活用したエフェクトを作成しました。
表現力向上のための検証も行っています。
斬撃エフェクト
Particle Systemで斬撃エフェクトとシェーダーを作成しました。
どういったシェーダーパラメーターをpublicにしたら良いのか？斬撃の減衰表現はどんな調整をしたくなるのか？など、アーティスト目線でシェーダーを作成しました。
どういったシェーダーパラメーターをpublicにしたら良いのか？斬撃の減衰表現はどんな調整をしたくなるのか？など、アーティスト目線でシェーダーを作成しました。
斬撃メッシュ
斬撃エフェクトの基本となる、共通メッシュの部分です。
メッシュ生成には、勉強用にアセットを購入しています。
メッシュ生成には、勉強用にアセットを購入しています。
ヒットエフェクト
ヒットエフェクトとシェーダーを作成しました。
ノイズテクスチャを使用し、ランダムに頂点を押し出しています。
ノイズテクスチャを使用し、ランダムに頂点を押し出しています。
ゼルダの伝説ブレスオブザワイルド 爆発エフェクト再現
「ひも状」に消える煙表現の勉強に、ゼルダの伝説 ブレスオブザワイルド の古代兵器の攻撃による爆発エフェクトを再現しました。
2Dエフェクトの厚み表現
2D（スプライト）エフェクトで、簡易に3D的なライティング表現をしたくてシェーダーを作成しました。
光源をXZ平面上で動かしたときに、マルチテクスチャ（R）に描きこんだ厚み情報を使用して、ライトの位置によってライトの色と透過光の色をブレンド率を変え、煙に厚みを持たせています。
光源をXZ平面上で動かしたときに、マルチテクスチャ（R）に描きこんだ厚み情報を使用して、ライトの位置によってライトの色と透過光の色をブレンド率を変え、煙に厚みを持たせています。
2Dエフェクトの立体表現
こちらも、2D（スプライト）エフェクトの3D的なライティング表現を模索したものです。
光源をXY平面上で動かしたときに、法線を球体状に変換することで、モデルは平面ですが、3D的に光が当たっているように見せています。
光源をXY平面上で動かしたときに、法線を球体状に変換することで、モデルは平面ですが、3D的に光が当たっているように見せています。
2Dエフェクトの立体表現 補足１
立体表現の補足１です。
スプライトのモデルの頂点座からオブジェクトの原点を引いたベクトルを法線とすることで、球体ライティングを可能にしています。
スプライトのモデルの頂点座からオブジェクトの原点を引いたベクトルを法線とすることで、球体ライティングを可能にしています。
2Dエフェクトの立体表現 補足１
立体表現の補足２です。
トゥーン調のエフェクトに反映させた例です。
トゥーン調のエフェクトに反映させた例です。
ボリュームソフトパーティクル
ソフトパーティクルの実相を行いました。
マルチテクスチャ（B）にボリューム情報を描きこむことで、一般的なソフトパーティクルと違い、地面にめり込んだ時に煙のボリューム感を感じさせるソフトパーティクルにしています。
マルチテクスチャ（B）にボリューム情報を描きこむことで、一般的なソフトパーティクルと違い、地面にめり込んだ時に煙のボリューム感を感じさせるソフトパーティクルにしています。
bottom of page