概要
Unityを利用して画像にモザイク効果をかける手順を解説します。 モザイク効果を絵や写真に適用することで面白い効果が得られるでしょう。 本記事では、最初にモザイク効果の解説を行い、次にUnity上でのモザイク効果の実装方法について解説いたします。
![20181020-173721 - STYLY モザイクの概要](https://styly.cc/wp-content/uploads/2018/10/20181020-173721-e1540047076632.png)
モザイクの概要
サンプル
STYLY サンプル
GitHubサンプルプロジェクト
https://github.com/styly-dev/STYLY-Unity-Examples/tree/master/Assets/STYLY_Examples/MosaicTexture_Sample
使用素材の準備
今回の記事ではパブリックドメイン美術館の凱風快晴を使用させていただきました。
http://www.bestweb-link.net/PD-Museum-of-Art/ukiyoe/ukiyoe/fugaku36/No.027.jpg
今回の記事ではこの凱風快晴を使用するので、ダウンロードしてUnityプロジェクトの中に入れてください。
![img_5bcb3d1c7267d - STYLY テクスチャの配置](https://styly.cc/wp-content/uploads/2018/10/img_5bcb3d1c7267d.png)
テクスチャの配置
モザイクの仕組み
モザイク効果を生み出す仕組みについて解説いたします。 画像を格子状に区切り、それぞれの長方形の左下の色を使って長方形を塗りつぶすことで モザイクがかかったような見た目になります。
![img_5bcb4f8d4a4c6 - STYLY モザイクの色の対応](https://styly.cc/wp-content/uploads/2018/10/img_5bcb4f8d4a4c6-e1540050863586.png)
モザイクの色の対応
例えば、左下の四角形領域は赤く丸を付けた部分の色で塗りつぶします。
![img_5bcaf4b6c6310 - STYLY モザイク左下の四角の色の対応](https://styly.cc/wp-content/uploads/2018/10/img_5bcaf4b6c6310-1024x512.png)
モザイク左下の四角の色の対応
その上の四角形領域も同様に左下の点の色を利用して塗りつぶします。
![img_5bcaf5bbb3666 - STYLY モザイク左下の四角の色の対応](https://styly.cc/wp-content/uploads/2018/10/img_5bcaf5bbb3666-1024x512.png)
モザイク左下の四角の色の対応
同様の手順ですべての四角形に対して塗りつぶしを行うことで、全体にモザイクがかかったような見た目になります。
![mosaic_4x4 - STYLY 4x4解像度のモザイク効果](https://styly.cc/wp-content/uploads/2018/10/mosaic_4x4-e1540047271256.png)
4×4解像度のモザイク効果
四角形の個数(解像度)を変えることで面白い効果が得られます。
![img_5bcb4bcdad12e - STYLY モザイク解像度の比較](https://styly.cc/wp-content/uploads/2018/10/img_5bcb4bcdad12e-1024x355.png)
モザイク解像度の比較
Unityによる実装
Unityのマテリアルを利用してモザイク効果を作ります。
![img_5bcb42b56457b - STYLY これから作るオブジェクト](https://styly.cc/wp-content/uploads/2018/10/img_5bcb42b56457b.png)
これから作るオブジェクト
Shaderの作成
Shaderファイルの作成
まずはマテリアルの元となるShaderファイルを作成します。
![img_5bcb36ebd4d89 - STYLY これから作成するShaderファイル](https://styly.cc/wp-content/uploads/2018/10/img_5bcb36ebd4d89.png)
これから作成するShaderファイル
Projectウィンドウで右クリックして、Shaderファイルを作成します。 シェーダーファイルの名前はMosaic.shaderとします。
![img_5bcb35b6b3c8a - STYLY Shaderファイルの作成](https://styly.cc/wp-content/uploads/2018/10/img_5bcb35b6b3c8a.png)
Shaderファイルの作成
Shaderファイルの編集
Mosaic.shaderを開いて以下のコードを貼り付けます。
Shader "STYLY/Examples/Mosaic" { Properties{ _MainTex("Texture", 2D) = "white" {} [Space] _Color("Main Color", Color) = (1,1,1,1) [HDR]_EmissionColor("Emission Color", Color) = (0,0,0,1) _MosaicResolution("Mosaic Resolution", Range(2, 64)) = 32 _MosaicResolutionX("X Mosaic Resolution", Range(1, 4)) = 1 _MosaicResolutionY("Y Mosaic Resolution", Range(1, 4)) = 1 [Space] _Glossiness("Smoothness", Range(0,1)) = 0 _Metallic("Metallic", Range(0,1)) = 0 } SubShader{ Tags { "RenderType" = "Opaque" } LOD 200 CGPROGRAM #pragma surface surf Standard fullforwardshadows #pragma target 3.0 sampler2D _MainTex; struct Input { float2 uv_MainTex; }; half4 _Color; half4 _EmissionColor; half _Glossiness; half _Metallic; int _MosaicResolution; int _MosaicResolutionX; int _MosaicResolutionY; #define MOSAIC (_MosaicResolution * float2(_MosaicResolutionX, _MosaicResolutionY)) // Surface Shader void surf(Input IN, inout SurfaceOutputStandard o) { float2 uv = IN.uv_MainTex; uv = floor(uv * MOSAIC) / MOSAIC; fixed4 c = tex2D(_MainTex, uv); o.Albedo = c.rgb * _Color; o.Emission = c.rgb * _EmissionColor; o.Metallic = _Metallic; o.Smoothness = _Glossiness; o.Alpha = 1.0; } ENDCG } FallBack "Diffuse" }
Materialの作成
次にマテリアルを作成します。
![img_5bcb3dda7b1b2 - STYLY これから作るマテリアル](https://styly.cc/wp-content/uploads/2018/10/img_5bcb3dda7b1b2.png)
これから作るマテリアル
Materialファイルの作成
Mosaic.shaderを右クリックしてマテリアルを作成します。
Materialへテクスチャ登録
マテリアルをクリックして選択した状態で、テクスチャをドラッグ&ドロップしてマテリアルへ登録します。
![img_5bcb3da366602 - STYLY テクスチャのドラッグ&ドロップ登録](https://styly.cc/wp-content/uploads/2018/10/img_5bcb3da366602.png)
テクスチャのドラッグ&ドロップ登録
マテリアルの確認
マテリアルが以下のような見た目になればOKです。
![img_5bcb3e250fd90 - STYLY 作成したマテリアル](https://styly.cc/wp-content/uploads/2018/10/img_5bcb3e250fd90.png)
作成したマテリアル
テクスチャ付きの板の作成
次に、以下のようなテクスチャ付きの板オブジェクトを作成します
![img_5bcb3e99950a8 - STYLY これから作る板オブジェクト](https://styly.cc/wp-content/uploads/2018/10/img_5bcb3e99950a8.png)
これから作る板オブジェクト
板オブジェクトの作成
HierarchyウィンドウのCreateボタンをクリックし、Planeオブジェクトを作成します。
![img_5bcb3f3da2cb4 - STYLY 板オブジェクトの作成](https://styly.cc/wp-content/uploads/2018/10/img_5bcb3f3da2cb4.png)
板オブジェクトの作成
![img_5bcb3f71457b5 - STYLY 作成した板オブジェクト](https://styly.cc/wp-content/uploads/2018/10/img_5bcb3f71457b5.png)
作成した板オブジェクト
板オブジェクトへマテリアル登録
![img_5bcb3ff8d2e61 - STYLY マテリアルをドラッグ&ドロップして板オブジェクトへ登録](https://styly.cc/wp-content/uploads/2018/10/img_5bcb3ff8d2e61-1024x704.png)
マテリアルをドラッグ&ドロップして板オブジェクトへ登録
板オブジェクトの確認
![img_5bcb421a29941 - STYLY テクスチャ付き作成した板オブジェクト](https://styly.cc/wp-content/uploads/2018/10/img_5bcb421a29941.png)
作成したテクスチャ付き板オブジェクト
以上で完成です。
モザイクの解像度を変えてみる
モザイクの解像度を変えて遊んでみましょう。 MosaicマテリアルのMosaic Resolutionがモザイク解像度になります。 この数字を変更することでモザイク解像度を変更することができます。
![img_5bcb43f11ec54 - STYLY モザイク解像度の指定箇所](https://styly.cc/wp-content/uploads/2018/10/img_5bcb43f11ec54.png)
モザイク解像度の指定箇所
![change_mosaic_resolution - STYLY モザイク解像度の変更](https://styly.cc/wp-content/uploads/2018/10/change_mosaic_resolution.gif)
モザイク解像度の変更
STYLY Editor上での見え方
STYLY Editor上では以下のような見え方になります。
![img_5bcb4a56200ce - STYLY STYLY Editor上での確認](https://styly.cc/wp-content/uploads/2018/10/img_5bcb4a56200ce-1024x713.png)
STYLY Editor上での確認
STYLYへのアップロード
UnityからSTYLYへのアップロードする方法についてはこちらをご覧ください。 https://styly.cc/ja/manual/unity-asset-uploader/