Overview
In this article, I will introduce how to blur out an image using Unity. By adding a mosaic effect over images, you can gain an interesting effect. First, I will explain about the mosaic effect, then introduce the steps how to implement a blur out effect.
![20181020-173721 - STYLY モザイクの概要](https://styly.cc/wp-content/uploads/2018/10/20181020-173721-e1540047076632.png)
Overview of the mosaic effect
Sample
STYLY Sample
GitHub Sample Project
https://github.com/styly-dev/STYLY-Unity-Examples/tree/master/Assets/STYLY_Examples/MosaicTexture_Sample
The image used in this article
In this article, I borrowed and used an image named 凱風快晴 from the Public Domain Museum.
http://www.bestweb-link.net/PD-Museum-of-Art/ukiyoe/ukiyoe/fugaku36/No.027.jpg
In this tutorial, we will use 凱風快晴, so please download it and add it to the Unity Project.
![img_5bcb3d1c7267d - STYLY テクスチャの配置](https://styly.cc/wp-content/uploads/2018/10/img_5bcb3d1c7267d.png)
Texture Position
The mechanism of a mosaic effect
I will explain how to create a mosaic effect. By dividing the image into square blocks, and filling each square with the color of the lower left square, the image will become like a mosaic.
![img_5bcb4f8d4a4c6 - STYLY モザイクの色の対応](https://styly.cc/wp-content/uploads/2018/10/img_5bcb4f8d4a4c6-e1540050863586.png)
The color pattern of a mosaic
For example, the red square range at the lower left would be filled with the color from the red circle area.
![img_5bcaf4b6c6310 - STYLY モザイク左下の四角の色の対応](https://styly.cc/wp-content/uploads/2018/10/img_5bcaf4b6c6310-1024x512.png)
The color pattern of the lower left square
For the square above it, do the same with process, moving the red circle position the same amount.
![img_5bcaf5bbb3666 - STYLY モザイク左下の四角の色の対応](https://styly.cc/wp-content/uploads/2018/10/img_5bcaf5bbb3666-1024x512.png)
The color pattern of the lower left square
By repeating the process for each square area of the image, the whole picture will become blurred out with a mosaic pattern.
![mosaic_4x4 - STYLY 4x4解像度のモザイク効果](https://styly.cc/wp-content/uploads/2018/10/mosaic_4x4-e1540047271256.png)
A 4×4 mosaic pattern
By changing the number of squares (resolution), an interesting effect can be gained.
![img_5bcb4bcdad12e - STYLY モザイク解像度の比較](https://styly.cc/wp-content/uploads/2018/10/img_5bcb4bcdad12e-1024x355.png)
Comparing different resolutions
Implementation with Unity
We can create a mosaic effect using Unity materials.
![img_5bcb42b56457b - STYLY これから作るオブジェクト](https://styly.cc/wp-content/uploads/2018/10/img_5bcb42b56457b.png)
The object we are going to create
Creating a Shader
Creating a Shader file
First, create a Shader file, which we are going to use for creating a material.
![img_5bcb36ebd4d89 - STYLY これから作成するShaderファイル](https://styly.cc/wp-content/uploads/2018/10/img_5bcb36ebd4d89.png)
The Shader file we are going to create
Right click in the Project window, and create a Shader file. Name the Shader file Mosaic.shader.
![img_5bcb35b6b3c8a - STYLY Shaderファイルの作成](https://styly.cc/wp-content/uploads/2018/10/img_5bcb35b6b3c8a.png)
Creating the Shader file
Editing the Shader file
Open the Mosaic.shader and paste the code below.
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" }
Creating the Material
Next, lets create the Material.
![img_5bcb3dda7b1b2 - STYLY これから作るマテリアル](https://styly.cc/wp-content/uploads/2018/10/img_5bcb3dda7b1b2.png)
The Material we are going to create
Creating the Material
。 Right click the Mosaic.shader, and select Create > Material.
Adding a texture to the Material
Select the Material, and drag and drop the texture to the Inspector window to add the Texture to the Material.
![img_5bcb3da366602 - STYLY テクスチャのドラッグ&ドロップ登録](https://styly.cc/wp-content/uploads/2018/10/img_5bcb3da366602.png)
Drag and drop the Texture
Check the Material
If the Material becomes like the image below, you’re done!
![img_5bcb3e250fd90 - STYLY 作成したマテリアル](https://styly.cc/wp-content/uploads/2018/10/img_5bcb3e250fd90.png)
The Material we created
Creating a plane with texture
Next, we will create a plane with texture on it, just like the one in the image below.
![img_5bcb3e99950a8 - STYLY これから作る板オブジェクト](https://styly.cc/wp-content/uploads/2018/10/img_5bcb3e99950a8.png)
The plane object we are going to create
Creating the plane object
Click the Create button in the Hierarchy window, and create a new Plane object.
![img_5bcb3f3da2cb4 - STYLY 板オブジェクトの作成](https://styly.cc/wp-content/uploads/2018/10/img_5bcb3f3da2cb4.png)
Creating a Plane object
![img_5bcb3f71457b5 - STYLY 作成した板オブジェクト](https://styly.cc/wp-content/uploads/2018/10/img_5bcb3f71457b5.png)
The plane object we created
Adding a Material to the Plane object
![img_5bcb3ff8d2e61 - STYLY マテリアルをドラッグ&ドロップして板オブジェクトへ登録](https://styly.cc/wp-content/uploads/2018/10/img_5bcb3ff8d2e61-1024x704.png)
Drag and drop a Material onto the Plane object
Checking the Plane object
![img_5bcb421a29941 - STYLY テクスチャ付き作成した板オブジェクト](https://styly.cc/wp-content/uploads/2018/10/img_5bcb421a29941.png)
The Plane object with texture we created
Now, we’re done with the Plane object!
Changing the resolution of the Mosaic
Let’s change the resolution of the Mosaic as we wish. The Mosaic Resolution of the Mosaic Material is the value of the resolution. By changing the value of it, we can change the resolution of the Mosaic pattern.
![img_5bcb43f11ec54 - STYLY モザイク解像度の指定箇所](https://styly.cc/wp-content/uploads/2018/10/img_5bcb43f11ec54.png)
The Mosaic Resolution variable
![change_mosaic_resolution - STYLY モザイク解像度の変更](https://styly.cc/wp-content/uploads/2018/10/change_mosaic_resolution.gif)
Changing the Mosaic Resolution
How it looks in the STYLY Editor
In the STYLY Editor, the object will show up like this.
![img_5bcb4a56200ce - STYLY STYLY Editor上での確認](https://styly.cc/wp-content/uploads/2018/10/img_5bcb4a56200ce-1024x713.png)
Checking the object from the STYLY Editor
Uploading to STYLY
To learn how to upload object from STYLY to Unity, please refer to this article. https://styly.cc/ja/manual/unity-asset-uploader/