🌈
そろそろShaderをやるパート38 グリッチ表現
そろそろShaderをやります
そろそろShaderをやります。そろそろShaderをやりたいからです。
パート100までダラダラ頑張ります。10年かかってもいいのでやります。
100記事分くらい学べば私レベルの初心者でもまあまあ理解できるかなと思っています。
という感じでやってます。
※初心者がメモレベルで記録するので
技術記事としてはお力になれないかもしれません。
下準備
下記参考
そろそろShaderをやるパート1 Unite 2017の動画を見る(基礎知識～フラグメントシェーダーで色を変える)
デモ
下記の通りです。
グリッチ表現は端的に言うと、ゲームなどで描画が乱れて画面がチカチカ、ジャギジャギ、ザラザラするような表現のことです。(語彙力)
【参考リンク】：グリッチ・アートとは
Shaderサンプル
Shader "Custom/Glitch"
{
Properties
{
[NoScaleOffSet]_MainTex ("Texture", 2D) = "white" {}
_FrameRate ("FrameRate", Range(0.1,30)) = 15
_Frequency ("Frequency", Range(0,1)) = 0.1
}
SubShader
{
Tags
{
"RenderType"="Tranparent"
}
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;
float _FrameRate;
float _Frequency;
//ランダムな値を返す
float rand(float2 co) //引数はシード値と呼ばれる 同じ値を渡せば同じものを返す
{
return frac(sin(dot(co.xy, float2(12.9898, 78.233))) * 43758.5453);
}
//パーリンノイズ
float perlinNoise(fixed2 st)
{
fixed2 p = floor(st);
fixed2 f = frac(st);
fixed2 u = f * f * (3.0 - 2.0 * f);
float v00 = rand(p + fixed2(0, 0));
float v10 = rand(p + fixed2(1, 0));
float v01 = rand(p + fixed2(0, 1));
float v11 = rand(p + fixed2(1, 1));
return lerp(lerp(dot(v00, f - fixed2(0, 0)), dot(v10, f - fixed2(1, 0)), u.x),
lerp(dot(v01, f - fixed2(0, 1)), dot(v11, f - fixed2(1, 1)), u.x),
u.y) + 0.5f;
}
v2f vert(appdata v)
{
v2f o;
o.vertex = UnityObjectToClipPos(v.vertex);
o.uv = v.uv;
return o;
}
fixed4 frag(v2f i) : SV_Target
{
float2 uv = i.uv;
//ポスタライズ
float posterize1 = floor(frac(perlinNoise(_SinTime) * 10) / (1 / _FrameRate)) * (1 / _FrameRate);
float posterize2 = floor(frac(perlinNoise(_SinTime) * 5) / (1 / _FrameRate)) * (1 / _FrameRate);
//uv.x方向のノイズ計算 -0.1 < noiseX < 0.1
float noiseX = (2.0 * rand(posterize1) - 0.5) * 0.1;
//step(t,x) はxがtより大きい場合1を返す
float frequency = step(rand(posterize2), _Frequency);
noiseX *= frequency;
//uv.y方向のノイズ計算 -1 < noiseY < 1
float noiseY = 2.0 * rand(posterize1) - 0.5;
//グリッチの高さの補間値計算 どの高さに出現するかは時間変化でランダム
float glitchLine1 = step(uv.y - noiseY, rand(noiseY));
float glitchLine2 = step(uv.y + noiseY, noiseY);
float glitch = saturate(glitchLine1 - glitchLine2);
//速度調整
uv.x = lerp(uv.x, uv.x + noiseX, glitch);
//テクスチャサンプリング
float4 glitchColor = tex2D(_MainTex, uv);
return glitchColor;
}
ENDCG
}
}
}
ポスタライズ
ポスタライズとは、任意の値に基づいて入力値を丸める処理のことです。
具体例としてグラフを用意したものが下記です。
入力値xが丸められてyの値が一定の間隔で同じ値を返すようになっています。
式は下記のようにShaderに落とし込めます。
floor(In / (1 / Steps)) * (1 / Steps);
ShaderGraphのノードが生成するコードをカンニングしました。
【参考リンク】：Posterize Node
ポスタライズによって、グリッチの速度をShader側で操作可能になります。
パーリンノイズ
単純にランダムな値を返すものではなく、入力値(xとy)の変化に合わせて徐々に変化するような乱数という事です。端的に言えば、変化がなだらなかな乱数と言った感じでしょうか。
とのことです。
【参考リンク】：パーリンノイズ(PerlinNoise)とは【Unity】【パーリンノイズ】
式の原理から掘り下げるのは今回は諦めました。
どういったものか理解しておけば今のところ十分かと思います。
デモ2
ノイズ交じりのグリッチ表現です。
Shaderサンプル2
Shader "Custom/GlitchJaggy"
{
Properties
{
[NoScaleOffSet]_MainTex ("Texture", 2D) = "white" {}
_FrameRate ("FrameRate", Range(0.1,30)) = 15
_Frequency ("Frequency", Range(0,1)) = 0.1
}
SubShader
{
Tags
{
"RenderType"="Tranparent"
}
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;
float _FrameRate;
float _Frequency;
//ランダムな値を返す
float rand(float2 co) //引数はシード値と呼ばれる 同じ値を渡せば同じものを返す
{
return frac(sin(dot(co.xy, float2(12.9898, 78.233))) * 43758.5453);
}
//パーリンノイズ
float perlinNoise(fixed2 st)
{
fixed2 p = floor(st);
fixed2 f = frac(st);
fixed2 u = f * f * (3.0 - 2.0 * f);
float v00 = rand(p + fixed2(0, 0));
float v10 = rand(p + fixed2(1, 0));
float v01 = rand(p + fixed2(0, 1));
float v11 = rand(p + fixed2(1, 1));
return lerp(lerp(dot(v00, f - fixed2(0, 0)), dot(v10, f - fixed2(1, 0)), u.x),
lerp(dot(v01, f - fixed2(0, 1)), dot(v11, f - fixed2(1, 1)), u.x),
u.y) + 0.5f;
}
v2f vert(appdata v)
{
v2f o;
o.vertex = UnityObjectToClipPos(v.vertex);
o.uv = v.uv;
return o;
}
fixed4 frag(v2f i) : SV_Target
{
float2 uv = i.uv;
//ポスタライズ
float posterize1 = floor(frac(perlinNoise(_SinTime) * 10) / (1 / _FrameRate)) * (1 / _FrameRate);
float posterize2 = floor(frac(perlinNoise(_SinTime) * 5) / (1 / _FrameRate)) * (1 / _FrameRate);
//uv.x方向のノイズ計算 -0.1 < noiseX < 0.1
float noiseX = (2.0 * rand(posterize1) - 0.5) * 0.1;
//step(t,x) はxがtより大きい場合1を返す
float frequency = step(rand(posterize2), _Frequency);
noiseX *= frequency;
//uv.y方向のノイズ計算 -1 < noiseY < 1
float noiseY = 2.0 * rand(posterize1) - 0.5;
//グリッチの高さの補間値計算 どの高さに出現するかは時間変化でランダム
float glitchLine1 = step(uv.y - noiseY, rand(uv));
float glitchLine2 = step(uv.y + noiseY, noiseY);
float glitch = saturate(glitchLine1 - glitchLine2);
//速度調整
uv.x = lerp(uv.x, uv.x + noiseX, glitch);
//テクスチャサンプリング
float4 glitchColor = tex2D(_MainTex, uv);
return glitchColor;
}
ENDCG
}
}
}
グリッチの高さの補間値の計算に利用するランダムな係数の算出にuv値を利用するだけで
ノイズ交じりの表現になります。
float glitchLine1 = step(uv.y - noiseY, rand(uv));
float glitchLine2 = step(uv.y + noiseY, noiseY);
float glitch = saturate(glitchLine1 - glitchLine2);
参考リンク
【Unity(C#)】PerlinNoiseで電球切れ表現
【Unityシェーダ入門】シェーダで作るノイズ５種盛り
【Unity】ShaderGraphでポスタライズやモザイクを表現する（Posterizeノード）
【シェーダーグラフメモ その45】シンプルなGlitchエフェクト
Discussion