こんばんは、初めまして青崎アキです。
Unity Advent Calendar 2016 7日目の記事です！
カメラの自撮り画像をなんの加工もなしに、そのままので直視できない＞＜
明るくしたりフィルターかけたりしたい！！！
SNOW みたいなカメラアプリ作れるようになりたい。SNOWー
とりあえず、白に近づければ明るくなって良さそう。
ちなみに、Unityは5.4.2f2使っています。 NGUI使うけど、UIがメインのお話じゃないので、他のUIでも大丈夫だと思います。
Sprite黒に近づける（デフォルト）
Sprite白に近づける（shader）
デフォルトで黒に近づけることはできるけど、
shaderを使えば、白に近づけることもできるよ、という記事がいろいろ検索したら書いてありました。
方法は、
- https://unity3d.com/jp/get-unity/download/archive 自分の使っているUnityのバージョンのビルトインシェーダーをダウンロードする
- DefaultResourcesExtra/Sprites-Default.shader をUnityのプロジェクトにインポートする
- ファイル名を「Sprites-Filter.shader」に変更する。開いて、1行目の、"Sprites/Default" を"Sprites/Filter" にする
- マテリアルを作成してシェーダーを設定する
- Sprite や Texture にそのマテリアルを設定する。今回は、UITextureに設定する
- frag() の処理を変更する
これを
fixed4 frag(v2f IN) : SV_Target
{
fixed4 c = SampleSpriteTexture (IN.texcoord) * IN.color;
c.rgb *= c.a;
return c;
}
こう
fixed4 frag(v2f IN) : SV_Target
{
fixed4 c = tex2D (_MainTex, IN.texcoord) * _Color;
c *= IN.color;
c.rgb = c.rgb*2+max(fixed3(0,0,0),IN.color.rgb-0.5)*2;
return c;
}
RGBが、127,127,127 が変更なしの状態で、
それより小さいと暗く、大きいと明るくなる
この画像はカメラ画像をRGBが、185,191,201 に明るくしたもの。
白多めにすれば明るめで良い感じになった。
Photoshop のトーンカーブみたいなもの
もっといろんなフィルタほしいー
トーンカーブ使えば、明るさやコントラスト、色調の補正ができるらしいです。
デザイナーさんやカメラマンさんだったら、補正の仕方について詳しそうだけど、
私はエンジニアなので、補正の仕方を求めて、photoshopのチュートリアルとかあるかなーと検索したりしました。
How to make Instagram Filters in Photoshop
この記事の値よさそう。
Unityだと、どうやってやるのか検索してたら、いろいろ出てきた。
Standard Assets イメージエフェクト
- Unity - マニュアル: カラーコレクションカーブ
- Unity - マニュアル: Color Correction Ramp Texture
- Unity - マニュアル: カラー コレクション ルックアップ テクスチャ
1がトーンカーブっぽい。RGB各カラーチャンネルの色調整ができる！
使ってみる。
メニューの、Assets > Import Package > Effect にあればそれをインポートする。
なかったら、
https://unity3d.com/jp/get-unity/download/archive
さっきの、ビルトインシェーダーの下あたりにある「標準アセット」をダウンロードする
/Assets/Standard\ Assets/Effects/ImageEffects/Scripts/ColorCorrectionCurves.cs をカメラにアタッチして、
赤の値大きくしたら、赤みがかった！
カメラ全体じゃなくて、スプライト単体にだけ適用したい。
ColorCorrectionCurves.cs は、ColorCorrectionCurves.shader を使ってたけど、
ColorCorrectionCurvesSimple.shader という、depthとかないカラーだけのやつがあったのでこれを参考にする。
さっきの、Sprites-Filter.shader の処理を変更する。
fixed4 frag(v2f IN) : SV_Target
{
fixed4 color = tex2D (_MainTex, IN.texcoord) * _Color;
fixed3 red = tex2D(_RgbTex, half2(color.r, 0.5/4.0)).rgb * fixed3(1,0,0);
fixed3 green = tex2D(_RgbTex, half2(color.g, 1.5/4.0)).rgb * fixed3(0,1,0);
fixed3 blue = tex2D(_RgbTex, half2(color.b, 2.5/4.0)).rgb * fixed3(0,0,1);
color = fixed4(red+green+blue, color.a);
return color;
}
追加する
_RgbTex ("_RgbTex (RGB)", 2D) = "" {}
追加する
sampler2D _RgbTex;
ColorCorrectionCurvesSimple.shader を使ってるC#スクリプトが見当たらなかったので、
ColorCorrectionCurves.cs を参考にして、
コピペ。コピぺ。
必要そうなところだけ持ってきた。
あとフィルタ選択するUIを作って、完成ー！
のあたりも書きたかったけど。もう時間ないからまた今度。またね( ･ᴗ･ )
以上、画像に白を重ねたり、イメージエフェクトのカラーコレクションカーブを使ってみた記事でした。
楽しかったので、皆さんも是非やってみてください。
追記。5.6から Image Effectsは、Legacyになってしまわれたようです…
Post Processing Stack を使ってねって感じらしい？いつか確認してこの記事書換える、
