読者です 読者をやめる 読者になる 読者になる

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

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

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 が変更なしの状態で、
それより小さいと暗く、大きいと明るくなる

f:id:mahuyyu:20161207144728p:plain

この画像はカメラ画像をRGBが、185,191,201 に明るくしたもの。

白多めにすれば明るめで良い感じになった。

Photoshopトーンカーブみたいなもの

もっといろんなフィルタほしいー
トーンカーブ使えば、明るさやコントラスト、色調の補正ができるらしいです。
デザイナーさんやカメラマンさんだったら、補正の仕方について詳しそうだけど、
私はエンジニアなので、補正の仕方を求めて、photoshopチュートリアルとかあるかなーと検索したりしました。
How to make Instagram Filters in Photoshop この記事の値よさそう。

Unityだと、どうやってやるのか検索してたら、いろいろ出てきた。

Standard Assets イメージエフェクト

  1. Unity - マニュアル: カラーコレクションカーブ
  2. Unity - マニュアル: Color Correction Ramp Texture
  3. Unity - マニュアル: カラー コレクション ルックアップ テクスチャ

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

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

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

昨日は、utibenkeiさん。これから顔認証やってみたいので、opencvやdlibの記事参考にさせて頂きます!
明日は、3pandaさん。
http://qiita.com/advent-calendar/2016/unity