Adding a Mosaic effect to a 2D image using Unity

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.

モザイクの概要

Overview of the mosaic effect

Confirm sample assets with WebEditor

Confirm sample assets with WebEditor
Launch the WebEditor

* If you  register STYLY, you can check the sample assets created with this TIPS with WebEditor.
If you do not register an account, please register again and click this button again.

Register for account from here
Click here

 

Sample

STYLY Sample

http://gallery.styly.cc/r-ngtm/fb2877c7-d47c-11e8-b34d-4783bb2170d0

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.

テクスチャの配置

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.

モザイクの色の対応

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.

モザイク左下の四角の色の対応

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.

モザイク左下の四角の色の対応

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.

4x4解像度のモザイク効果

A 4×4 mosaic pattern

By changing the number of squares (resolution), an interesting effect can be gained.

モザイク解像度の比較

Comparing different resolutions

Implementation with unity

We can create a mosaic effect using Unity materials.

これから作るオブジェクト

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.

これから作成するShaderファイル

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.

Shaderファイルの作成

Creating the Shader file

Editing the Shader file

Open the Mosaic.shader and paste the code below.

Creating the Material

Next, lets create the Material.

これから作るマテリアル

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.

テクスチャのドラッグ&ドロップ登録

Drag and drop the Texture

Check the Material

If the Material becomes like the image below, you’re done!

作成したマテリアル

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.

これから作る板オブジェクト

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.

板オブジェクトの作成

Creating a Plane object

 

作成した板オブジェクト

The plane object we created

Adding a Material to the Plane object

マテリアルをドラッグ&ドロップして板オブジェクトへ登録

Drag and drop a Material onto the Plane object

Checking the Plane object

テクスチャ付き作成した板オブジェクト

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.

モザイク解像度の指定箇所

The Mosaic Resolution variable

モザイク解像度の変更

Changing the Mosaic Resolution

How it looks in the STYLY Editor

In the STYLY Editor, the object will show up like this.

STYLY Editor上での確認

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/