{"id":19685765,"url":"https://github.com/mob-sakai/blurringatlasforugui","last_synced_at":"2025-04-29T06:30:49.884Z","repository":{"id":109499038,"uuid":"140826303","full_name":"mob-sakai/BlurringAtlasForUGUI","owner":"mob-sakai","description":"A blur effect for uGUI in Unity, that is effective even for atlas images including dynamic fonts.","archived":false,"fork":false,"pushed_at":"2019-01-03T11:16:29.000Z","size":3884,"stargazers_count":41,"open_issues_count":0,"forks_count":11,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-08-03T19:09:46.837Z","etag":null,"topics":["atlas","blur","effect","font","gui","ugui","uguicomponent","ui","unity","unity3d"],"latest_commit_sha":null,"homepage":"","language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mob-sakai.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2018-07-13T09:23:30.000Z","updated_at":"2024-07-31T06:54:17.000Z","dependencies_parsed_at":"2023-04-06T06:34:49.172Z","dependency_job_id":null,"html_url":"https://github.com/mob-sakai/BlurringAtlasForUGUI","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mob-sakai%2FBlurringAtlasForUGUI","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mob-sakai%2FBlurringAtlasForUGUI/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mob-sakai%2FBlurringAtlasForUGUI/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mob-sakai%2FBlurringAtlasForUGUI/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mob-sakai","download_url":"https://codeload.github.com/mob-sakai/BlurringAtlasForUGUI/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224152995,"owners_count":17264817,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["atlas","blur","effect","font","gui","ugui","uguicomponent","ui","unity","unity3d"],"created_at":"2024-11-11T18:23:55.321Z","updated_at":"2024-11-11T18:23:55.957Z","avatar_url":"https://github.com/mob-sakai.png","language":"C#","funding_links":[],"categories":[],"sub_categories":[],"readme":"BlurringAtlasForUGUI\n===\n\nダイナミックフォントを含むアトラス画像でも効果的な, UGUI用のブラーエフェクト.\n\nA blur effect for uGUI that is effective even for atlas images including dynamic fonts.\n\n### NOTE: This project has been integrated into [UIEffect](https://github.com/mob-sakai/UIEffect), so we are NOT continuing development in this repository.\n\n[![](https://img.shields.io/github/release/mob-sakai/BlurringAtlasForUGUI.svg?label=latest%20version)](https://github.com/mob-sakai/BlurringAtlasForUGUI/releases)\n[![](https://img.shields.io/github/release-date/mob-sakai/BlurringAtlasForUGUI.svg)](https://github.com/mob-sakai/BlurringAtlasForUGUI/releases)\n![](https://img.shields.io/badge/unity-5.5%2B-green.svg)\n[![](https://img.shields.io/github/license/mob-sakai/BlurringAtlasForUGUI.svg)](https://github.com/mob-sakai/BlurringAtlasForUGUI/blob/master/LICENSE.txt)\n\n\n\n\u003c\u003c [Description](#Description) | [WebGL Demo](#demo) | [Download](https://github.com/mob-sakai/BlurringAtlasForUGUI/releases) | [Usage](#usage) | [Development Note](#development-note) \u003e\u003e\n\n### What's new? Please see [RELEASE NOTE ![](https://img.shields.io/github/release-date/mob-sakai/BlurringAtlasForUGUI.svg?label=last%20updated\u0026style=for-the-badge)](https://github.com/mob-sakai/BlurringAtlasForUGUI/blob/develop/CHANGELOG.md)\n\n\n\n\n\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\n## Description\n\n![](https://user-images.githubusercontent.com/12690315/42547121-80134788-84fb-11e8-97a0-048bba9634ea.png)\n\nこのプラグインは, uGUI用のブラーエフェクトにおいて発生しうる一般的なアーティファクト（＝副産物, ノイズ）を軽減します.  \n以下の2つのアーティファクトについて解決します.\n\n**NOTE: アーティファクトの名称は適当です.**  \n\nThis plug-in reduces common artifacts in the blur effect for uGUI.  \nThis plug-in solve the following two artifacts.  \n\n**NOTE: I do not know if the name of the artifact is an exact name;)**  \n\n\n\u003cbr\u003e\u003cbr\u003e\n### 1. UV Conflict\n\n![](https://user-images.githubusercontent.com/12690315/42547753-b07b42e2-84fe-11e8-89d9-385842c6d1b8.png)\n\nぼかし効果は, カーネルに基づきフラグメントシェーダで複数のテクセルを合成します.  \nカーネルサイズが大きい, またはアトラスのパディングサイズが小さいなどの理由から, 隣接スプライトのUVを参照した場合, アーティファクトが発生します.\n\nThe blur effect combines multiple texels based on the kernel size, in the fragment shader.  \nArtifacts 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.\n\n\u003cbr\u003e\n#### Solution: UV Masking\n\n![](https://user-images.githubusercontent.com/12690315/42552447-4799f96c-8517-11e8-89c3-32fda327ef41.png)\n\n頂点毎に参照しうるUVをマスクします.  \nUIの場合, スプライトや文字のUV範囲と一致します.  \nマスクされていないUVを参照した場合（＝範囲外のUVを参照した場合）, そのテクセルは`(0,0,0,0)`の色を返すものと見なします.\n\nFor each vertex, mask UVs that vertices can reference.  \nIn the case of UI element, it will match the UV range of the sprite or the character.  \nWhen referring to unmasked UV, the texel returns color `(0,0,0,0)`.\n\n```\nfloat4 mask;  // xy: minimum uv, zw: maximum uv.\nfloat2 uv;\nfloat4 color = tex2D(_MainTex, uv)\n                * step(mask.x, uv.x)\n                * step(mask.y, uv.y)\n                * step(uv.x, mask.z)\n                * step(uv.y, mask.w);\n```\n\n\n\u003cbr\u003e\u003cbr\u003e\n### 2. Mesh clipping\n\n![](https://user-images.githubusercontent.com/12690315/42547838-0afab77a-84ff-11e8-8e29-9fa2cec2bb62.png)\n\nフラグメントシェーダで描画できるピクセルは, ラスタライズによって生成されます.  \n通常, UIシェーダは与えられたmeshより外側の領域を描画しません.  \nカーネルサイズが大きい, またはスプライトのマージンが小さいとき, 「meshでクリップされたように見えるアーティファクト」が発生します.\n\nPixels that can be rendered with fragment shaders are generated by rasterization.  \nIn most cases, the UI shader does not draw areas outside the given mesh.  \nWhen the kernel size is large or the margin of the sprite is small, \"artifacts that looks like clipped by mesh\" will occur.\n\n\u003cbr\u003e\n#### Solution: Edge Expanding\n\n![](https://user-images.githubusercontent.com/12690315/42552928-9477421a-8519-11e8-91fc-251961c23e49.png)\n\n**外周にある頂点**をUVごと外側に膨張させ, 描画領域を拡大します.  \nこの解決方法は, 頂点数を増やしません. また, 「9-Sliced」や「Tiled」に対しても有効です.\n\nExpand the drawing area by expanding the coordinates and UV of **the vertices on the outer side.**  \nThis solution does not increase the number of vertices. It is also available for \"9-Slice\" and \"Tiled\".\n\n\n\u003cbr\u003e\u003cbr\u003e\n### Features\n\n* Easy to use\n* Controls amount of the blurring from inspector or script\n* Supports RawImage, Image, Text element\n* Supports 'small padding' atlas such as dynamic fonts\n* Supports draw call batching\n\n\n\n\n\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\n## Demo\n\n[WebGL Demo](http://mob-sakai.github.io/BlurringAtlasForUGUI)\n\n\n\n\n\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\n## Usage\n\n1. Download BlurringAtlasForUGUI.unitypackage from [Releases](https://github.com/mob-sakai/BlurringAtlasForUGUI/releases).\n1. Import the package into your Unity project. Select `Import Package \u003e Custom Package` from the `Assets` menu.\n1. In Unity5.6+, enable `TexCoord1` channel of canvas. See also [Development Note](##note-unity-56).\n1. Add `UIBlurringAtlas` component to UI element (Image, RawImage, Text, etc...) from `Add Component` in inspector.\n1. Enjoy!\n\n\n\n\n##### Requirement\n\n* Unity 5.5+ *(including Unity 2018.x)*\n* No other SDK are required\n\n\n\n\n\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\n## Development Note\n\n### Note: Unity 5.6+\n\nIn Unity 5.6+, Canvas supports **Additional Shader Channels**.  \nPlease enable `TexCoord1` to use this plugin.  \n![image](https://user-images.githubusercontent.com/12690315/28405830-f4f261e8-6d68-11e7-9faf-7e5442062f59.png)\n\n\n### How to pack UV range to vertex\n\nSee [UIEffect](https://github.com/mob-sakai/UIEffect#how-to-control-effect-parameters-for-ugui-element-without-materialpropertyblock).\n\nこのプラグインでは, UV範囲`(uMin, vMin, uMax, vMax)`の各要素に12bit(4096ステップ)を使用し, 頂点のuv1に割り当てます.\n（Unity 5.6+において, `TexCoord1`チャンネルを有効にすべき理由です.）\n\nThis plugin uses 12bit (4096 steps) for each element of the UV range `(uMin, vMin, uMax, vMax)` and assigns it to the vertex uv1.\n(In Unity 5.6+, it is the reason to activate `TexCoord 1` channel.)\n\n`uiVertex.uv1 = new Vector2( Packer.ToFloat(uMin, vMin), Packer.ToFloat(uMax, vMax) );`\n\n\n### Application idea\n\nこの手法を応用すると, uvずらしを使った表現(グローエフェクトやソフトシャドウなど)がuGUI要素単体に対しても利用できます.  \n後ほどグローエフェクトを公開予定です.\n\nBy applying this technique, effects using uv shift (such as glow effect or soft shadow) can be used for a single uGUI element.  \nI will release the glow effect later.\n\n(WIP)  \n![](https://user-images.githubusercontent.com/12690315/41465393-da6ef2ae-70d8-11e8-9e1f-e8a5f7bf4643.gif)\n\n\n### Future plans\n\n* Code refactoring\n* Merge to [UIEffect](https://github.com/mob-sakai/UIEffect)\n\n\n\n\n\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\n## License\n\n* MIT\n* [Superpowers Asset Packs](http://sparklinlabs.itch.io/superpowers) \n[![](https://img.shields.io/github/license/sparklinlabs/superpowers-asset-packs.svg)](https://github.com/sparklinlabs/superpowers-asset-packs/blob/master/LICENSE.txt)\n\n\n\n## Author\n\n[mob-sakai](https://github.com/mob-sakai)\n\n\n\n## See Also\n\n* GitHub page : https://github.com/mob-sakai/BlurringAtlasForUGUI\n* Releases : https://github.com/mob-sakai/BlurringAtlasForUGUI/releases\n* Issue tracker : https://github.com/mob-sakai/BlurringAtlasForUGUI/issues\n* Current project : https://github.com/mob-sakai/BlurringAtlasForUGUI/projects/1\n* Change log : https://github.com/mob-sakai/BlurringAtlasForUGUI/blob/master/CHANGELOG.md\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmob-sakai%2Fblurringatlasforugui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmob-sakai%2Fblurringatlasforugui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmob-sakai%2Fblurringatlasforugui/lists"}