---
title: 【Unity】AmplifyShaderEditorはいいゾ
tags:  #unity  
author: [おかひろ](https://www.docswell.com/user/okahiro_p)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/YE6N96NGEV.jpg?width=480
description: 2021年11月に銀座Unityもくもく会でLTした資料です。
published: April 14, 23
canonical: https://www.docswell.com/s/okahiro_p/5ENX4D-2023-04-14-223651
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/YE6N96NGEV.jpg)

AmplifyShaderEditorはいいゾ
おかひろ


# Page. 2

![Page Image](https://bcdn.docswell.com/page/GE55N65XE4.jpg)

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


# Page. 3

![Page Image](https://bcdn.docswell.com/page/972N5MNQJR.jpg)

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


# Page. 4

![Page Image](https://bcdn.docswell.com/page/DJYPKXPYJM.jpg)

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


# Page. 5

![Page Image](https://bcdn.docswell.com/page/V7N5R15RE8.jpg)

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


# Page. 6

![Page Image](https://bcdn.docswell.com/page/YJ9YM5YZ73.jpg)

参考資料

本家


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


# Page. 7

![Page Image](https://bcdn.docswell.com/page/GJ86LYKYED.jpg)

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


# Page. 8

![Page Image](https://bcdn.docswell.com/page/LJL9L4Z97R.jpg)

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


# Page. 9

![Page Image](https://bcdn.docswell.com/page/47MZMKVVJW.jpg)

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


# Page. 10

![Page Image](https://bcdn.docswell.com/page/P7R6VX2WE9.jpg)

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


# Page. 11

![Page Image](https://bcdn.docswell.com/page/PJXMZ6DVEX.jpg)

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


# Page. 12

![Page Image](https://bcdn.docswell.com/page/3JKG81X57D.jpg)

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


# Page. 13

![Page Image](https://bcdn.docswell.com/page/LE3N2Q51E5.jpg)

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


# Page. 14

![Page Image](https://bcdn.docswell.com/page/8EDWZ9DK7G.jpg)

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


# Page. 15

![Page Image](https://bcdn.docswell.com/page/V7P9DZX3J8.jpg)

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


# Page. 16

![Page Image](https://bcdn.docswell.com/page/2JVM1WLNJQ.jpg)

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


# Page. 17

![Page Image](https://bcdn.docswell.com/page/5EGG2DX5EL.jpg)

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


# Page. 18

![Page Image](https://bcdn.docswell.com/page/4JQXP18LEP.jpg)

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


# Page. 19

![Page Image](https://bcdn.docswell.com/page/K746YR25E1.jpg)

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


# Page. 20

![Page Image](https://bcdn.docswell.com/page/LJ1V6QM2EG.jpg)

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


# Page. 21

![Page Image](https://bcdn.docswell.com/page/GJWLWM32E2.jpg)

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


# Page. 22

![Page Image](https://bcdn.docswell.com/page/4EZM5QV4J3.jpg)

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


# Page. 23

![Page Image](https://bcdn.docswell.com/page/Y76N965G7V.jpg)

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


