Unity5 ポストエフェクトを自作してレーザービームを作る

#概要
下のようなレーザーをUnity5のカスタムイメージエフェクトを作って描画させる方法を説明します。

![image](https://qiita-image-store.s3.amazonaws.com/0/44288/70a5fea6-ab08-eb12-afe9-3e63ab0532c9.png)

カスタムイメージエフェクトについては以下のサイトで詳しく説明されていると思います。
　【Unity】カスタムイメージエフェクトのつくりかた ( http://fspace.hatenablog.com/entry/2015/08/11/185815 )

ちなみにUnityのバージョンは5.2.0b3(Pro)です。

#準備
まず、以下のスクリプトを作成し、カメラにアタッチします

 ```CustomImageEffect.cs
using UnityEngine;

public class CustomImageEffect : MonoBehaviour
{
    public Material material;
    void OnRenderImage(RenderTexture source, RenderTexture destination)
    {
        Graphics.Blit(source, destination , material);
    }
}
```
![image](https://qiita-image-store.s3.amazonaws.com/0/44288/75b29f44-89aa-03d7-c445-f98c687680b3.png)



#シェーダーを作る
![image](https://qiita-image-store.s3.amazonaws.com/0/44288/2a59e0ed-930d-bf14-bcd6-0489a283211a.png)
Projectビューで右クリック　→　Create/Shader/Image Effect Shader を選択

<br>
![image](https://qiita-image-store.s3.amazonaws.com/0/44288/bd3d3c92-03fd-62ec-f2fd-1dfc24ce8945.png)
「NewImageEffectShader.shader」というファイルが作られるのでこれの名前を「LaserBeam.shader」に変えます。

<br>
![image](https://qiita-image-store.s3.amazonaws.com/0/44288/f8a04276-0241-e420-35f5-92d4690fd89d.png)
「LaserBeam.shader」のできあがり。

<br>

#マテリアルを作る
![image](https://qiita-image-store.s3.amazonaws.com/0/44288/729cd52e-9ec4-194b-f239-782bc199b4eb.png)
Materialを作り、名前を「LeaderBeam」に変えます

#マテリアルにシェーダーをアタッチする
![image](https://qiita-image-store.s3.amazonaws.com/0/44288/89e5cd51-17b3-c88d-07e6-c34fbced95d1.png)

「LaserBeam.shader」を「LaserBeam.material」へドラッグ&ドロップしてアタッチします。

#マテリアルをアタッチする
![image](https://qiita-image-store.s3.amazonaws.com/0/44288/fc122e83-9773-1f32-ab81-9163a3ce4c28.png)
「LaserBeam.material」を先ほどカメラにアタッチした「CustomImageEffect」にアタッチします
<br>
![image](https://qiita-image-store.s3.amazonaws.com/0/44288/dcd848a1-d0c1-04b5-0860-b95836d6785f.png)
こうなればOK
<br>

これでシェーダーを使ってカメラのレンダリング結果をいじる準備ができました。　次に実際にシェーダーを書いていきます。

<br>
#シェーダーを書き換える
![image](https://qiita-image-store.s3.amazonaws.com/0/44288/79e5eacf-6003-5868-02c4-91712e69ab0d.png)
先ほど作った「LaserBeam.shader」を開きます。

<br>


```LaserBeam.shader
・・・・
fixed4 frag (v2f i) : SV_Target
{
    fixed4 col = tex2D(_MainTex, i.uv);
    // just invert the colors
    col = 1 - col;
    return col;
}
・・・・・
```
40行目あたりに上のコードがあるので、ここを以下のように書き換えます。

```LaserBeam.shader
・・・・
float metaball(float2 uv, float2 center, float2 size)
{
	return size / length(uv - center);
}
fixed4 frag (v2f i) : SV_Target
{
	fixed4 col = tex2D(_MainTex, i.uv);
	float2 center = float2(0.5, 0.5);
	col += metaball(i.uv, float2(0.5, 0.5), 0.02);
	col += metaball(i.uv, float2(0.7, 0.5), 0.04);
	col += metaball(i.uv, float2(0.9, 0.5), 0.08);
	return col;
}
・・・・・
```

#再生ボタンを押して完成
![image](https://qiita-image-store.s3.amazonaws.com/0/44288/bf5d61f9-b1c8-ec00-0063-8cee74ff72ac.png)

#補足
```
float metaball(float2 uv, float2 center, float2 size)
{
	return size / length(uv - center);
}
```
上の関数はメタボールを計算する関数です。 uvはUV座標(テクスチャ座標)、centerはメタボールの中心座標、sizeはメタボールの大きさです。
メタボールについてはWikipediaに詳しい説明が載っています。
https://ja.wikipedia.org/wiki/%E3%83%A1%E3%82%BF%E3%83%9C%E3%83%BC%E3%83%AB
<br>

```
col += metaball(i.uv, float2(0.5, 0.5), 0.02);
col += metaball(i.uv, float2(0.7, 0.5), 0.04);
col += metaball(i.uv, float2(0.9, 0.5), 0.08);
```
ここでは計算したメタボールを足し合わせています。
<br>

イメージ
![image](https://qiita-image-store.s3.amazonaws.com/0/44288/c8a6a4ae-08be-8a4a-9025-fe82a4537fc4.png)

##参考
【Unity】カスタムイメージエフェクトのつくりかた
http://fspace.hatenablog.com/entry/2015/08/11/185815
Wikipedia - メタボール
https://ja.wikipedia.org/wiki/%E3%83%A1%E3%82%BF%E3%83%9C%E3%83%BC%E3%83%AB

<br>