![見出し画像](https://assets.st-note.com/production/uploads/images/81655580/rectangle_large_type_2_155e7f1291ab84b922949d0c7928283f.png?width=1200)
【Unity】ShaderGraphからShaderLabに人力で書き出すワザ
UnityのShaderGraphがビルトインパイプラインに書き出し出来る時代になりましたね。
しかし、VRCなどでは使えない機能なので、備忘録としてShaderGraphで作ったシェーダーをスクリプトに描き起こす方法を記します。
Unityバージョン 2021.1.6f1
使用するシェーダーグラフ
![](https://assets.st-note.com/img/1656480736865-1vaXEHcEkT.png?width=1200)
![](https://assets.st-note.com/production/uploads/images/81654374/picture_pc_5a6f1b97933756b5673706b597637060.gif)
結構不思議なシェーダーである。
頂点シェーダーを書く
Create > Shader > UnlitShader を作ってダブルクリックで開く。
fogは使わないのでコメントと共に消しておく。
Shader "Unlit/Demo"
{
Properties
{
_MainTex ("Texture", 2D) = "white" {}
}
SubShader
{
Tags { "RenderType"="Opaque" }
LOD 100
Pass
{
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#include "UnityCG.cginc"
struct appdata
{
float4 vertex : POSITION;
float2 uv : TEXCOORD0;
};
struct v2f
{
float2 uv : TEXCOORD0;
float4 vertex : SV_POSITION;
};
sampler2D _MainTex;
float4 _MainTex_ST;
v2f vert (appdata v)
{
v2f o;
o.vertex = UnityObjectToClipPos(v.vertex);
o.uv = TRANSFORM_TEX(v.uv, _MainTex);
return o;
}
fixed4 frag (v2f i) : SV_Target
{
fixed4 col = tex2D(_MainTex, i.uv);
return col;
}
ENDCG
}
}
}
![](https://assets.st-note.com/img/1656482376903-0CYKJZGPUo.png?width=1200)
頂点シェーダー(バーテックスシェーダー)はこの部分。
v2f vert (appdata v)
{
v2f o;
o.vertex = UnityObjectToClipPos(v.vertex);
o.uv = TRANSFORM_TEX(v.uv, _MainTex);
return o;
}
これからここを書き換えていきます。
Positionノード
![](https://assets.st-note.com/img/1656481631642-M53VhUXHpd.png?width=1200)
最初のノードを見ていきます。
Positionノードはコード内にある
o.vertex = UnityObjectToClipPos(v.vertex);
これは同次座標において、オブジェクト空間からカメラのクリップ空間へ点を変換するUnityCG.cginc の頂点変換関数だそうです。(ごめん詳しくは分からない)
ここをいじると頂点が移動するみたいです。
Timeノード
TimeノードはUnityのマニュアルにコードが書いてあります。
![](https://assets.st-note.com/img/1656482572834-VfVvPysmQI.png?width=1200)
生成されるコードの例から、ノードで使っている「Sine Time」の項目を見ます。
今回使いたいコードはこちら。
float Time_SineTime = _SinTime.w;
Vector3ノードのY軸を動かしたいときは「o.vertex.y」と書いてあげます。
Addノードは足し算(+)です。
シェーダーコードに戻ってコード追加します。
v2f vert (appdata v)
{
v2f o;
o.vertex = UnityObjectToClipPos(v.vertex);
o.vertex.y += -_SinTime.w; // 追加
o.uv = TRANSFORM_TEX(v.uv, _MainTex);
return o;
}
![](https://assets.st-note.com/production/uploads/images/81654614/picture_pc_ba58aa2a00df60f3e579edda79692e89.gif)
数値が逆みたいですが同じように動くようになりました。
ShaderGraphと同じよう動かすためには_SinTime.wにマイナスをかけてあげれば移動距離がちょっと変わりますが大体同じになりました。
フラグメントシェーダーを書く
![](https://assets.st-note.com/img/1656484585108-HCx7SCDccI.png?width=1200)
フラグメントシェーダーはこの部分。
fixed4 frag (v2f i) : SV_Target
{
fixed4 col = tex2D(_MainTex, i.uv);
return col;
}
すでにテクスチャを貼るコードが書いてあるので利用しましょう。
Colorノード
ColorノードはBlackBoardに変数を定義しているので、シェーダーコードの上のProperties部分を書き換えてインスペクターから設定できるようにします。
Properties
{
_MainTex ("Texture", 2D) = "white" {}
_Color("MainColor", Color) = (1,1,1,1) // 追加
}
グローバル変数を宣言する
グローバル変数を宣言しないと使えないので、
sampler2D _MainTex;
float4 _MainTex_ST;
この部分に書き足します。
sampler2D _MainTex;
float4 _MainTex_ST;
float4 _Color; // 追加
そしてフラグメントシェーダーの関数colに_Colorを乗算(掛け算)をかけてやります。
fixed4 frag (v2f i) : SV_Target
{
fixed4 col = tex2D(_MainTex, i.uv);
col *= _Color; // 追加
return col;
}
そして保存をするとインスペクターにカラーが現れます。
![](https://assets.st-note.com/img/1656485279513-5d5AypIdnH.png)
ShaderGraphと同じように設定してあげます。
![](https://assets.st-note.com/img/1656485327709-tq9IRvN1pk.png)
![](https://assets.st-note.com/production/uploads/images/81654725/picture_pc_f0f8f91ef209eab6cbcb1fcde40d3e24.gif)
最終的な結果はこんな感じ。
完成したコード全文
Shader "Unlit/Demo"
{
Properties
{
_MainTex ("Texture", 2D) = "white" {}
_Color("MainColor", Color) = (1,1,1,1) // 追加
}
SubShader
{
Tags { "RenderType"="Opaque" }
LOD 100
Pass
{
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#include "UnityCG.cginc"
struct appdata
{
float4 vertex : POSITION;
float2 uv : TEXCOORD0;
};
struct v2f
{
float2 uv : TEXCOORD0;
float4 vertex : SV_POSITION;
};
sampler2D _MainTex;
float4 _MainTex_ST;
float4 _Color; // 追加
v2f vert (appdata v)
{
v2f o;
o.vertex = UnityObjectToClipPos(v.vertex);
o.vertex.y += -_SinTime.w; // 追加
o.uv = TRANSFORM_TEX(v.uv, _MainTex);
return o;
}
fixed4 frag (v2f i) : SV_Target
{
fixed4 col = tex2D(_MainTex, i.uv);
col *= _Color; // 追加
return col;
}
ENDCG
}
}
}
まとめ
短い例でしたが、複雑なShaderGraphでも最初のノードからたどってノードを検索してoやcolに足してあげれば似たような結果が出てきます。
(全く同じ結果にするのは難しいかもしれません。)
参考資料
似たようなことをやっている記事
この記事が気に入ったらサポートをしてみませんか?