こんばんは、初めまして青崎アキです。

Unity Advent Calendar 2016　7日目の記事です！

カメラの自撮り画像をなんの加工もなしに、そのままので直視できない＞＜
明るくしたりフィルターかけたりしたい！！！

f:id:mahuyyu:20161207144213g:plain

SNOW みたいなカメラアプリ作れるようになりたい。SNOWー

とりあえず、白に近づければ明るくなって良さそう。

ちなみに、Unityは5.4.2f2使っています。 NGUI使うけど、UIがメインのお話じゃないので、他のUIでも大丈夫だと思います。

Sprite黒に近づける（デフォルト）

f:id:mahuyyu:20161207144735p:plain

Sprite白に近づける（shader）

f:id:mahuyyu:20161207144736p:plain

デフォルトで黒に近づけることはできるけど、
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 イメージエフェクト

1がトーンカーブっぽい。RGB各カラーチャンネルの色調整ができる！

使ってみる。

メニューの、Assets > Import Package > Effect にあればそれをインポートする。
なかったら、
https://unity3d.com/jp/get-unity/download/archive さっきの、ビルトインシェーダーの下あたりにある「標準アセット」をダウンロードする

/Assets/Standard\ Assets/Effects/ImageEffects/Scripts/ColorCorrectionCurves.cs をカメラにアタッチして、

赤の値大きくしたら、赤みがかった！

f:id:mahuyyu:20161207144738p:plain

カメラ全体じゃなくて、スプライト単体にだけ適用したい。

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を作って、完成ー！

f:id:mahuyyu:20161207144220g:plain

のあたりも書きたかったけど。もう時間ないからまた今度。またね( ･ᴗ･ )

以上、画像に白を重ねたり、イメージエフェクトのカラーコレクションカーブを使ってみた記事でした。
楽しかったので、皆さんも是非やってみてください。

追記。5.6から Image Effectsは、Legacyになってしまわれたようです…
Post Processing Stack を使ってねって感じらしい？いつか確認してこの記事書換える、

半年待った airClosetが、やっと届いたの！

f:id:mahuyyu:20150805023225j:plain

事前登録もしてたんだけど、サービス始まってからの登録が遅かったみたいで、半年またされた・・・！すごい人気だね、いいなー。
それがわかってたら、すぐ登録したよ。きっと。ふえええ。

届いたお洋服：

f:id:mahuyyu:20150805015003p:plain

シフォン素材のプリーツスカート：anatelier (アナトリエ)
袖がクシュっとしてるブラウス：Swingle(スウィングル)
ブラックのキャミワンピース：Swingle(スウィングル)

っぽい。たぶん。

かわいい・・・( ´ ˘ ` )
普段こういう系の服装しないけど、ワンピースとか。可愛い。
サイズもどれもいい感じ。

スカート

レースとかのデザインは可愛いんだけど、
合わせられそうな服を持ってなかったから、着ていってない。。

ブラウス

「スカートと合わせる時にはタイトなものやミニ丈と合わせるのがオススメです。」

って書いてあったし、同梱のスカートはミニ丈だったら良かったのに。

ブラウスと、その上にワンピース着て、お出かけしたー。
袖のところがそのうち、ほつれてきそうが気がしたから、レンタルぐらいがちょうど良いと思った。個人的には。

ワンピース

「一枚でさらっと着こなしても、下にTシャツを合わせてカジュアルな着こなしもオススメです。」

ってあったけど、一枚で着ると普段着に見えないっていうか、ドレス系にも見える。
このワンピースはなんか好き。

気に入ったお洋服はそのまま購入することができるんだけど、
ワンピースは買取しようか、ちょっと迷った。
でもまあ2万2千円だし、どれぐらい着るかわかんないし、とりあえず返送にしよ。

可愛い。次回届くのも楽しみ(。・ω・。)♡

えびふらいのしっぽ꒰•̫͡•ོ꒱

カメラの自撮り直視したくないから、明るくしたりフィルターで加工してみた