テクノロジー
【Unity Shader】画像処理の方法を5分でサクッと解説
TECH::NOTE(テックノート)は、未経験から最先端のテクノロジー人材へTECH::CAMP(テックキャンプ)、10週間でエンジニア転職実現までサポートを行うTECH::EXPERT(テックエキスパート)、これらのサービスを運営する株式会社divのオウンドメディアです。

C#はある程度書けるが、Shaderってどうやって書くんだろう。

そう思ったことはないですか?

今回は、UnityのShaderを使って画像処理の入門をしていきたいと思います。

初心者用なので、Shaderを使ったことのない方にもスタートダッシュが切れるように

画像処理の中でも一番簡単なネガ反転をやってみましょう。

Shader初心者の方はこの記事を機会に勉強し始めるといいかもしれません。

画像処理について

画像処理とは

cmgjqyi34rrnuhdok2y5kk1d46qj3n8u4a8zaj6nctwrwb023nyrdn06dlfzafagfcz75elejxewetsibjt6gqgv_qly_nr924evqfr_oig7vftiieuyn2kd-oobp2keta6rkmdc

画像処理とは、コンピューターグラフィックにおける画像に対する処理全般の事を指します。画像は、pixelがたくさん並んだ箱のようになっています。その画像のpixcelデータのRGB値を一つ一つ調べていく作業も画像処理です。

何ができるのか

アーティステックなことから、車が人や他の車と衝突しないための制御まで様々なところで活用されています。

また、Photoshopなどのアプリケーションには標準で画像処理の機能が豊富に備わっています。

普段あなたが携帯で自分の画像を可愛くしてみたり、肌をきれいにする作業も画像処理の一部です。

Unityにおけるshaderの書き方

Shaderとは

kemc7y4tnydusuhrvo1qi8nq6-fugie8mjn_9noyzocq3yevv_mrrbdai6wljqjd0unyzxwp03-wubu-u-nqrk2b-uhasdcua_zg3hmbuahoefr0tlvbwqgttfg1fsrdd6nkinmk

Shaderとは、簡単に説明すると物の形、そして色、光、影を描画してくれる3DCGには必要不可決なツールです。この上記の物の形、色、光からの影響、影をプログラムを書く事で変更させる事が可能です。

Shaderの使い方

Shaderの記述方法は、まずProjectsビューの欄でCreateを選択して、『Shader』->『Standard Surface Shader』をクリックします。

⚠️他の3つもShaderですが、今回はStandard Surface Shaderを使用します。

nrn1dypq8_ui7ywz2d5zjkqqjf-cgcumu6zfc76yyizcbytljn0dnpfjb10hti4fbquevlvinp8tepvpu8cffx1rppkbb0q41a1pkwmyxrrshjwlgdy66cqabuxic7nqbmh8wmtw

すると以下のようにShaderがProjectビュー欄に出ているのを確認することができると思います。

7zzn5kfa7dyeaevepocbzg9xuz8-uhb0svcmdjmfcrxfuqq4eyw1rhkdjoskmocyi2ylopccbqaseziigemiejsw3ukuxkj3g92k9gfilojywmyyk9tacfv54vvmvvpeve_laek6

Projectsビュー欄にあるShaderをダブルクリックしましょう。

以下のようなコードが表示されると思います。

g6qoedvx6ob2crg4idewfy94tm5fcej1j8ax4wpz4gpatmlqgmeg22rujejvoqqn0irnaxazuw5wmncmsvbym9nkfewygn7qwqxkldinwoebew7i-dwgxmyvo2dhas_726nvpcn5

SurfaceShaderとは

SurfaceShaderは、色や光の影響などを描画してくれます。

色を描画することも可能なので、画像処理もすることができます。

実践してみよう

 画像処理の準備

まず新しくMaterialを作りましょう。

Projectsビュー欄でCreateをクリックし、Materialをクリックしましょう。

mmp-f0jusqoan2lrvhbeiwix0yukquulc66uwwiy-ove0fwnxbbn47edjk3hdgovrcb-rgddqy41ff8ebecpt8pjy4vdw6fmw6d7a809wvrlku-ecfbqofhqfezln8ibecku4yy4

以下のようになれば大丈夫です。

bhkrlvmw36aw362bc-rnwb3lua8yhtps6ka3inziyfahf96wxdjk5sgtvqaiune0-jnbash_in3reri6bpkc1hnk137fv348vzvfuggyg9tpi3-syqaec0dzak1pagjvebrftq04

次に今できたMaterialに、NewSurfaceShaderをドラックアンドドロップしましょう。

rwpvqmdberdljh_gjhfr7zk8vjgbozupsiksmxd3pgx7-3nrqhagqczjkfgp70nzamz_ejwgizlxpwnj5c23ojsienhowkayt0smksxaflui865tfs3au4ad9xbimecy7yoibjj4

Materialをクリックしましょう。

以下のようにインスペクターが表示されているはずです。

bmdbqz4jjxwwtw3nxeyllv152xndgugnjqdyvxwlrwq67ve55on1mjmml1pnstf_wqx6ta6hvmj2ixhtdbxy2ov4ptk2tihjj0rpulhivhti2upyoorvps9b7bfpkt7y5fxdsi-d

これで、Shaderの準備は終了です。

次に、実際に目に見えるように、HierarchyビューからGameObjectを作成してMaterialを貼り付けましょう。

まずHierarchyビューから、『Create』->『3D Object』を選択し、Cubeをクリックしましょう。

k2jb6px4usko9p8r-rpddnshln7nz9iywk_tqhq3-rplz8agmba6m1pzjygh8nbe2begpjuzqm80r0auxfz16jjyl5inho4sbdiv-uyf8f8ujwxgvruxtk4f_-uvy-_uaswyy7_h

以下のようになれば大丈夫です。

f83yoown-14v8ayriyye8conpsz9r73fnkjxpzikztoiryckzrrb2aow0jb1jnwek8_fqif_bf81hol6ceuxqxkli9rp3kdzimyk9ey8rubg82mxq9voadqgkdrwwxvtdqyk-dbm

それでは、MaterialをCubeへドラックアンドドロップしましょう。

6yfkpeeosobpbcjd0ljth_db8uetoza8gxpbt6xrbtmg-isksdpipfbkzei4dyh4pk7na115w5o9zsgg956o5ji5qvx-canxxong6to3dvfowlmhouopx0sr8wmgakhhsktf1nf2

以下のようになれば大丈夫です。

blpfplgri0pm47ewgl5qj92ozlxwki5ytvydubmpkckztw11ojpl-tdcpe9buiccbecvqotnwjmpyeg17gnxrd9hzzzzill8sgokyzj65b644veke7fw16a_tfzckvfjbssnfxnz

画像処理の準備のために以下の画像をインポートしましょう。

このブログでは、以下の画像を用いて画像処理を行っていきます。

fyulirppprrlkojilub4huybdwgvz-_8smm1la2ebz1bgiye5irnaxj7cxgk3gflp0w1spzync-4yktokjd9mta07zb0sm4xe-mamhpe3lw-7p6fvxjcswwrq7qawmjih4pkcea

まず、画像をインポートしましょう。

自分の写真を直接 Projectsビューにドラック&ドロップします。

muthi_znekpehhromys4trhdk2mtaglz4xu4k5n0xuz7fqooimhhvsss3tq-lycf1eupisf_dngt_bgzfdlm-crpvxrq1awnkkmrfe3hbcinrb71czyqn2bnqrf7avemllo0-d

以下のようになれば大丈夫です。

iom7b-n-jaxvgsrns8qnwvxmdiik-yemy5utm5zjoiwvuyqretc5udjd0kcvt7fcdjzc7utgrmkjkx5tqusphvpjarmeqiwov7hq5ujpjkqzeifdwnyryvsdcgdcgcmp3ocw8hya

次に実際に、Cubeに貼り付けてみましょう。

Cubeをクリックし、Materialのテクスチャ部分に画像をドラック&ドロップしましょう。

b3txbugy7i8glat8rnnsrvzvjjgc8xttvokjb6_yseri8qxrqb8l4mxap8k3ue8plqkd4epqdlpuyudnmmcbttm5mdgqti8ohcabvf9ycftqzryriilhfbl664vn9skco8xmvwra

以下のようになれば大丈夫です。

ilfb6t8giogv0dco92uc17bmkrjmonialpgbwo7smwl-z8fz09pjmwypi47qt1pywhnnztqiszqmwaonpt-lnzzfhuppb3otegspwdmcfyxooimcqltojxqs_einzvyj8ni92jhg

Sceanビューを見てみると、次のように表示されていると思います。

qqzeoyqj-ftbvtci4y7hxh3ot6hziqxsoy6vxb5icigftsouezt5swpadl3yyoh_8hstjssfz1oqfwuuoun8zjn90pzfjjh7mhm7bsruuwpwlg4xpo47kpgefbfrjq2rnjhkcarh

上記のようにTextureが張り付いていたら大丈夫です。

ネガ反転の計算式とは

まず準備として

shaderの場合RGBの数値は、(1,1,1)で白色 (0,0,0)で黒になります。

Unityの色は、基本的に(255,255,255)で白色になるので、255が1と対応しています。

fsmwe4qixfeaf8wn2t39a1z4bxmlarzk-rh5lskhuhh-nzwvmyxhxoczs2syc97wfoqzljjq5ufk-av47zk9pdc9ot5aw9uobuktsrphnovkqxzryeonb8xgoo8cmxstcbbcibkl

ネガ反転はとてもシンプルな計算式からできています。

RGBの値を反転させているだけです。

RGBの数値 = (1-現在のRの値、1-現在のGの値、1-現在のBの値)

です。

現在のRGBの数値を1から引くことによって、

色の反転を求めることができます。

例えば白色のネガ反転の場合以下のようになります。

igeyfn8bjyfbvqtfgsxibvv9wbkm54jsi1beqjq5fawd6hm2kf6gu7itrsxenmfxwqerlfxj4lallsmt0ypu7-u0f_mupcw_eelx-9jgzx7yd2rhpi3ip97se_x84dsorunf0abf

また、赤色のネガ反転の場合には以下のようになります。

xrm3airzoo_q7c1zetc6ysvxrrtojyogvkxsqkxe_vxcmxpvvn0su3bbumwvylrnprgrs64vyjcoi-72kxfvaok1rt9sfm31zcvd23nhcfsjy9o4ul7h44ppjgr096zpwl3olwx

実践してみましょう

NewSurfaceShaderをダブルクリックしましょう。

kzeh2ss9qyfdddbu3a5egkct0vfroyrw1cucu-uuizzflomlgsba0h27v-tlyntgx6hd7-vn7usqegje5ndpvyocfdnc0khxrvgpl2d3_yzsv6ml7oauon2n869_fwddwza24tho

以下のようなコードが表示されると思います。

g6qoedvx6ob2crg4idewfy94tm5fcej1j8ax4wpz4gpatmlqgmeg22rujejvoqqn0irnaxazuw5wmncmsvbym9nkfewygn7qwqxkldinwoebew7i-dwgxmyvo2dhas_726nvpcn5

このスクリプトで、色を表しているのは、

以下の部分です。

g6qoedvx6ob2crg4idewfy94tm5fcej1j8ax4wpz4gpatmlqgmeg22rujejvoqqn0irnaxazuw5wmncmsvbym9nkfewygn7qwqxkldinwoebew7i-dwgxmyvo2dhas_726nvpcn5

上の画像の注目している部分

o.Albedo = c.rgb;

になります。

 

ここで、先ほどのように1を引くためにはどうすればいいのかというと、

o.Albedo =1- c.rgb;

たったこれだけです。

Albedoは、基本的な色を設定してくれます。

 

それでは保存して、Unityエディターに戻り、Sceanビューを見てみましょう。

riq5nqksdprbqokcsmxmwn2pahxtrjzmkvy_ko-6mtbtzjzehuykcz01air2wicwdvjgk0vbownfgeyjmjwcw9agl3ubea0v6ivs-pbadxhs8_prbfnjvhuzfiweees5_-hcwd

次に、ネガ反転している場合としていない場合を比べてみると以下のようになります。

cylrsotvzenvssyuveohfcyepukgkbjz5onnnvbczjnbtckrixahs9warjf5brmhu-gmxpas8-477bxl1ct_ngpwnctlvpvkkao25avbmtqvn5lkrihyiaz5w849kd7ec1jnhtop

オススメのサイト

 

もしもっと勉強してみたいという方がいらっしゃいましたら以下のサイトをご活用ください。

Unity のシェーダの基礎を勉強してみたのでやる気出してまとめてみた

UnityのShaderについて画像付きでとてもわかりやすく書いてあるサイトです。Shaderの勉強をしたいのであれば是非一度目を通すといいと思います。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-12-12-46-01

その1 UnityにおけるShaderとは?

ゲームつくろーのサイトです。 Unityのshaderについてだけでなく、他のプラットフォームでも使用できるShaderについての記述もありとても勉強になります。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-12-12-51-12

公式シェーダーリファレンス

もう既にご存知の方もいらっしゃると思いますが、公式のShaderリファレンスです。

上記の二つのサイトに比べると、難しいですが、Unityで使えるShaderの機能だけにフォーカスして詳しく書かれています。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-12-12-54-08

 

まとめ

いかがでしたでしょうか?

画像処理やShaderは難しそうと思われていた方もこれで想像よりも簡単にshaderを活用することができたのではないでしょうか?

Shaderを扱えるようになればできる表現も大きく増えますので、是非勉強してみてください。

 

こちらの記事もご参考ください。

【Unity Asset】ゲーム開発のための徹底解説

 

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

SNSでもご購読できます。

  • カテゴリー