【Unity】AmplifyShaderEditorはいいゾ

16.6K Views

April 14, 23

スライド概要

2021年11月に銀座Unityもくもく会でLTした資料です。

profile-image

フリーランスのTAです。 主にもくもく会でのLT資料などをアップロードしたいと思います。

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

(ダウンロード不可)

関連スライド

各ページのテキスト
1.

AmplifyShaderEditorはいいゾ おかひろ

2.

自己紹介  おかひろ  Twitter:@okahiro_p  フリーランスのゲームプログラマー   ソシャゲ4年半、ハイパーカジュアル半年  最近はHoudiniを勉強している 東方放置譚、東方地風陰、東方弾闘戯、咲夜ナイフというゲームをリリース

3.

AmplifyShaderEditorとは  Unity向けのノードベースShaderEditor   https://assetstore.unity.com/packages/tools/visual-scripting/amplify-shadereditor-68570 ノードベースShaderEditor?  ShaderLabを書かずに、ノードを配置してつなげるだけでShaderを組むことができる ShaderLab(C#ではない) ノードベース ※イメージです。左のコードと右のノードは同じものではありません。

4.

メリット   ShaderLabを書かなくても良い  デザイナーでも使える  気軽に早くShaderを作れる AmplifyShaderEditor  BuildInRP/HDRP/URPで使える  ただし、作成したShaderの互換性はない。  ShaderGraphはBuildInRPでは使えない  2021.2以降では使える

5.

デメリット  AmplifyShaderEditor  ちょっと高い   情報がありそうで、結構限られている   $88 ShaderGraphほど情報がない印象 ノードベース  コードなら一行で書けるものが、ノードだと複数になる ↑ShaderLab ノード→

6.

参考資料  本家   AmplifyCreations(Youtube)   http://wiki.amplify.pt/index.php?title=Unity_Products%3AAmplify_Shader_Editor https://www.youtube.com/c/AmplifyCreations/videos Unity道場  https://www.slideshare.net/nyaakobayashi/unity-dojoamplifyshadereditor101jpnjp

7.

ここからは、おかひろがAmplifyShaderEditorを使っ て作成したShaderの例とノード構成を紹介します

8.

おかひろの作例 ViewDot カメラの方向を向いている面が明るく、向いていない面を暗くする 球体の場合 キャラの場合。左は単色。右はViewDot あり

9.

おかひろの作例 ViewDot ViewDirノードと WorldNormalノードの内 積で色分けする。 この例では、暗くしたい 部分のテクスチャを別途 用意している。

10.

おかひろの作例 LightDot ライトの方向を向いている面が明るく、向いていない面を暗くする 球体の場合。左上が光 源 キャラの場合。左は単色。右はLightDot あり。(光源は右上)

11.

おかひろの作例 LightDot WorldSpaceLightDirノード とWorldNormalノードの 内積で色分けする。 それ以外はViewDotと同じ。

12.

おかひろの作例 Outline Outlineノードに色と幅を指定するだけで表示できる

13.

おかひろの作例 Outline Outlineは黒一色 Outline色を場所ごとに設定

14.

おかひろの作例 Outline アウトライン色用のテクス チャをColorに、 アウトラインマスク用のテク スチャをWidthに適用させる 例

15.

おかひろの作例 VerticalFog StandardShaderのアセット を置いただけ。 遠近感などがわかりづらい オブジェクトの下の方を水色、上の方 を濃い青に設定。 遠くに置いたものは濃い方の色を少し 薄めに。

16.

おかひろの作例 VerticalFog VertexPositionノードで、オ ブジェクトごとの頂点の座標 を取得可能

17.

おかひろの作例 UVスクロール、頂点アルファ 風が渦巻くエフェクト 渦の開始と終了の場所が徐々に透明になっている。 これはメッシュに頂点アルファが設定されており、 Shaderでこの値を取得している。 メッシュ

18.

おかひろの作例 UVスクロール、頂点アルファ UVスクロールはTime系ノードを使うことで、Shaderだけで動かせる。 頂点カラー(アルファ含む)はVertexColorノードで取得

19.

おかひろの作例 SkyBox シンプルなSkyBox。 カメラがどこを向いても、色の境目の位置が 変わらないようにする

20.

おかひろの作例 SkyBox ScreenPosition ノードで画面上の 位置を取得

21.

おかひろの作例 前髪の上から見える眉毛 眉毛が前髪に隠れて いる 眉毛が見える

22.

おかひろの作例 前髪の上から見える眉毛  眉毛専用のMaterialが設定されている   前髪専用のMaterialが設定されている   顔とMaterialが別 横/後ろ髪とMaterialが別 StencilBufferを使う  UTS2と同じやり方 眉毛に設定するShader のStencilBuffer 前髪に設定するShader のStencilBuffer

23.

ご清聴ありがとうございました