Home

Awesome

BlurringAtlasForUGUI

ダイナミックフォントを含むアトラス画像でも効果的な, UGUI用のブラーエフェクト.

A blur effect for uGUI that is effective even for atlas images including dynamic fonts.

NOTE: This project has been integrated into UIEffect, so we are NOT continuing development in this repository.

<< Description | WebGL Demo | Download | Usage | Development Note >>

What's new? Please see RELEASE NOTE

<br><br><br><br>

Description

このプラグインは, uGUI用のブラーエフェクトにおいて発生しうる一般的なアーティファクト（＝副産物, ノイズ）を軽減します.
以下の2つのアーティファクトについて解決します.

NOTE: アーティファクトの名称は適当です.

This plug-in reduces common artifacts in the blur effect for uGUI.
This plug-in solve the following two artifacts.

NOTE: I do not know if the name of the artifact is an exact name;)

<br><br>

1. UV Conflict

ぼかし効果は, カーネルに基づきフラグメントシェーダで複数のテクセルを合成します.
カーネルサイズが大きい, またはアトラスのパディングサイズが小さいなどの理由から, 隣接スプライトのUVを参照した場合, アーティファクトが発生します.

The blur effect combines multiple texels based on the kernel size, in the fragment shader.
Artifacts will occur when referencing the UVs of adjacent sprites, for example because the kernel size is large or the padding size of the atlas is small.

<br> #### Solution: UV Masking

頂点毎に参照しうるUVをマスクします.
UIの場合, スプライトや文字のUV範囲と一致します.
マスクされていないUVを参照した場合（＝範囲外のUVを参照した場合）, そのテクセルは(0,0,0,0)の色を返すものと見なします.

For each vertex, mask UVs that vertices can reference.
In the case of UI element, it will match the UV range of the sprite or the character.
When referring to unmasked UV, the texel returns color (0,0,0,0).

float4 mask;  // xy: minimum uv, zw: maximum uv.
float2 uv;
float4 color = tex2D(_MainTex, uv)
                * step(mask.x, uv.x)
                * step(mask.y, uv.y)
                * step(uv.x, mask.z)
                * step(uv.y, mask.w);

<br><br>

2. Mesh clipping

フラグメントシェーダで描画できるピクセルは, ラスタライズによって生成されます.
通常, UIシェーダは与えられたmeshより外側の領域を描画しません.
カーネルサイズが大きい, またはスプライトのマージンが小さいとき, 「meshでクリップされたように見えるアーティファクト」が発生します.

Pixels that can be rendered with fragment shaders are generated by rasterization.
In most cases, the UI shader does not draw areas outside the given mesh.
When the kernel size is large or the margin of the sprite is small, "artifacts that looks like clipped by mesh" will occur.

<br> #### Solution: Edge Expanding

外周にある頂点をUVごと外側に膨張させ, 描画領域を拡大します.
この解決方法は, 頂点数を増やしません. また, 「9-Sliced」や「Tiled」に対しても有効です.

Expand the drawing area by expanding the coordinates and UV of the vertices on the outer side.
This solution does not increase the number of vertices. It is also available for "9-Slice" and "Tiled".

<br><br>

Features

<br><br><br><br>

Demo

WebGL Demo

<br><br><br><br>

Usage

  1. Download BlurringAtlasForUGUI.unitypackage from Releases.
  2. Import the package into your Unity project. Select Import Package > Custom Package from the Assets menu.
  3. In Unity5.6+, enable TexCoord1 channel of canvas. See also Development Note.
  4. Add UIBlurringAtlas component to UI element (Image, RawImage, Text, etc...) from Add Component in inspector.
  5. Enjoy!
Requirement

<br><br><br><br>

Development Note

Note: Unity 5.6+

In Unity 5.6+, Canvas supports Additional Shader Channels.
Please enable TexCoord1 to use this plugin.
image

How to pack UV range to vertex

See UIEffect.

このプラグインでは, UV範囲(uMin, vMin, uMax, vMax)の各要素に12bit(4096ステップ)を使用し, 頂点のuv1に割り当てます. （Unity 5.6+において, TexCoord1チャンネルを有効にすべき理由です.）

This plugin uses 12bit (4096 steps) for each element of the UV range (uMin, vMin, uMax, vMax) and assigns it to the vertex uv1. (In Unity 5.6+, it is the reason to activate TexCoord 1 channel.)

uiVertex.uv1 = new Vector2( Packer.ToFloat(uMin, vMin), Packer.ToFloat(uMax, vMax) );

Application idea

この手法を応用すると, uvずらしを使った表現(グローエフェクトやソフトシャドウなど)がuGUI要素単体に対しても利用できます.
後ほどグローエフェクトを公開予定です.

By applying this technique, effects using uv shift (such as glow effect or soft shadow) can be used for a single uGUI element.
I will release the glow effect later.

(WIP)

Future plans

<br><br><br><br>

License

Author

mob-sakai

See Also