{"id":14960538,"url":"https://github.com/mob-sakai/uieffectsnapshot","last_synced_at":"2025-05-02T12:31:17.751Z","repository":{"id":41079653,"uuid":"198398018","full_name":"mob-sakai/UIEffectSnapshot","owner":"mob-sakai","description":"Capture a screenshot with effect and display it. Light-weight, non-realtime, no-camera (and no-PostProcessingStack), but be effective enough. The captured snapshot can be used as a background for a UI panel.","archived":false,"fork":false,"pushed_at":"2022-12-15T12:31:53.000Z","size":1451,"stargazers_count":159,"open_issues_count":6,"forks_count":19,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-04-07T01:52:24.185Z","etag":null,"topics":["effect","screencapture","snapshot","ugui","unity3d","unity3d-plugin","upm-package"],"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":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":"mob-sakai","patreon":"mob_sakai","open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2019-07-23T09:29:18.000Z","updated_at":"2025-04-01T15:12:57.000Z","dependencies_parsed_at":"2022-09-02T20:52:27.487Z","dependency_job_id":null,"html_url":"https://github.com/mob-sakai/UIEffectSnapshot","commit_stats":null,"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mob-sakai%2FUIEffectSnapshot","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mob-sakai%2FUIEffectSnapshot/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mob-sakai%2FUIEffectSnapshot/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mob-sakai%2FUIEffectSnapshot/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mob-sakai","download_url":"https://codeload.github.com/mob-sakai/UIEffectSnapshot/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252038132,"owners_count":21684629,"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":["effect","screencapture","snapshot","ugui","unity3d","unity3d-plugin","upm-package"],"created_at":"2024-09-24T13:22:28.797Z","updated_at":"2025-05-02T12:31:17.339Z","avatar_url":"https://github.com/mob-sakai.png","language":"C#","funding_links":["https://github.com/sponsors/mob-sakai","https://patreon.com/mob_sakai","https://www.patreon.com/join/mob_sakai?"],"categories":[],"sub_categories":[],"readme":"UIEffect Snapshot\n===\n\nCapture a screenshot with effect and display it.  \nLight-weight, non-realtime, no-camera (and no-PostProcessingStack), but be effective enough.  \nThe captured snapshot can be used as a background for a UI panel.\n\n[![](https://img.shields.io/npm/v/com.coffee.ui-effect-snapshot?label=openupm\u0026registry_uri=https://package.openupm.com)](https://openupm.com/packages/com.coffee.ui-effect-snapshot/)\n[![](https://img.shields.io/github/v/release/mob-sakai/UIEffectSnapshot?include_prereleases)](https://github.com/mob-sakai/UIEffectSnapshot/releases)\n[![](https://img.shields.io/github/release-date-pre/mob-sakai/UIEffectSnapshot)](https://github.com/mob-sakai/UIEffectSnapshot/releases)\n[![](https://img.shields.io/github/license/mob-sakai/UIEffectSnapshot.svg)](https://github.com/mob-sakai/UIEffectSnapshot/blob/upm/LICENSE.txt)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-orange.svg)](http://makeapullrequest.com)  \n![](https://img.shields.io/badge/Unity%202019.3-supported-blue.svg)\n![](https://img.shields.io/badge/Unity%202019.x-supported-blue.svg)\n![](https://img.shields.io/badge/Unity%202020.x-supported-blue.svg)\n![](https://img.shields.io/badge/Universal%20Rendering%20Pipeline-supported-blue.svg)  \n[![](https://img.shields.io/twitter/follow/mob_sakai.svg?label=Follow\u0026style=social)](https://twitter.com/intent/follow?screen_name=mob_sakai)\n\n\n\u003c\u003c [Description](#description) | [Demo](#demo) | [Installation](#installation) | [Usage](#usage) | [Change log](https://github.com/mob-sakai/UIEffectSnapshot/blob/upm/CHANGELOG.md) \u003e\u003e\n\n\n\n\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\n\n## Description\n\nDo you like blurred backgrounds, like iOS home screen?\nBlurring effect is easy to implement in Unity.\n- Grabs the current screen contents into a texture with [GrabPass](https://docs.unity3d.com/Manual/SL-GrabPass.html).\n- Sample `_GrabTexture` with [blur-algorithms].\n- Implementation example: https://pastebin.com/z3w8jhs4\n\nAlternatively, you can use [PostProcessingStack] package.\n\n[blur-algorithms]: https://software.intel.com/content/www/us/en/develop/blogs/an-investigation-of-fast-real-time-gpu-based-image-blur-algorithms.html\n\n[PostProcessingStack]: https://docs.unity3d.com/Packages/com.unity.postprocessing@2.3/manual/index.html\n\nHowever, this method requires some caution to be used as a UI.\n\n- You'll need a camera and canvas for the blur effect\n- `Screen Space - Overlay` is not supported.\n- (Especially in mobile,) GrabPass is expensive\n\n\u003cbr\u003e\n\nThis package uses **static screen content of one frame** instead of real-time screen content to provide a very light screen blur.  \n\nThe movement will disappear from the background, but it will be enough to use it as a background for panels, dialog windows and menus.  \n\nObjects that are further back than the background are (consequently) invisible.  \nDisabling their animations or hiding them would improve performance and power consumption.\n\n![](https://user-images.githubusercontent.com/12690315/94590637-f35f8800-02c1-11eb-969a-13574753f17e.gif)\n\n### Features\n\n* Easy to use: the package is out-of-the-box!\n* Light weight design:\n  * Non realtime capturing. \n  * Support for mobile.\n  * No extra camera and `PostProcessingStack` are needed.\n* Support render mode: `Screen Space - Overlay` and `Screen Space - Camera`\n* Effect Mode: **Grayscale, Sepia, Nega, Pixelation**\n* Color Mode: **Multiply, Fill, Additive, Subtract**\n* Blur Mode: **Fast Blur, Medium Blur, Detail Blur**\n* Global Mode: Capture a screenshot in cases where there is no UIEffectSnapshot instance.\n* Capture On Enable: When the component is enable, capture screen automatically.\n* Fit to screen: Fit the RectTransform to the screen.\n* Menus to create object\n* Support custom effect materials.\n  * Built-in custom effects: **Vignette, Distortion, Noise, Scanning line, RGB Shift**\n  * Apply any image effect as you like.\n* Support [Universal Render Pipeline](https://docs.unity3d.com/Packages/com.unity.render-pipelines.universal@10.0/manual/index.html)\n\n### Future Plans\n\n* Support render mode: `World Space - Camera`\n* Support pre-generated RenderTexture as result\n\n\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\n\n## Demo\n\n* [WebGL Demo](https://mob-sakai.github.io/Demos/UIEffectSnapshot)\n\n![](https://user-images.githubusercontent.com/12690315/94726503-4c99eb00-0398-11eb-8136-7dcfb5241192.png)\n![](https://user-images.githubusercontent.com/12690315/94726239-e90fbd80-0397-11eb-91b4-dde4b7440122.png)\n\n\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\n\n## Installation\n\n### Requirement\n\n* Unity 2018.3 or later\n\n### Using OpenUPM\n\nThis package is available on [OpenUPM](https://openupm.com).  \nYou can install it via [openupm-cli](https://github.com/openupm/openupm-cli).\n```\nopenupm add com.coffee.ui-effect-snapshot\n```\n\n### Using Git\n\nFind the manifest.json file in the Packages folder of your project and edit it to look like this:\n```\n{\n  \"dependencies\": {\n    \"com.coffee.ui-effect-snapshot\": \"https://github.com/mob-sakai/UIEffectSnapshot.git\",\n    ...\n  },\n}\n```\n\nTo update the package, change suffix `#{version}` to the target version.\n\n* e.g. `\"com.coffee.ui-effect-snapshot\": \"https://github.com/mob-sakai/UIEffectSnapshot.git#1.0.0\",`\n\nOr, use [UpmGitExtension](https://github.com/mob-sakai/UpmGitExtension) to install and update the package.\n\n\n\n\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\n\n## Usage\n\n### UIEffectSnapshot\n\n- This is a component to capture a screenshot with effects and display it.\n- Select `Game Object/UI/Effect Snapshot` to create.\n- Adjust the capture effect and press the `Capture` or `Release` button in the inspector to preview the snapshot.  \n![](https://user-images.githubusercontent.com/12690315/94724255-f6777880-0394-11eb-97c2-5c9e04375cfd.png)\n\n| Properties | Screenshot |\n| -- | -- |\n| **Effect Mode:** Grayscale, Sepia, Nega, Pixelation \u003cbr\u003e**Color Mode:** Multiply, Fill, Additive, Subtract \u003cbr\u003e**Blur Mode:** Fast, Medium, Detail \u003cbr\u003e\u003cbr\u003e**Custom Materials:** Additional image effect material. The built-ins include Vignette, Distortion, Noise, Scanning line, RGB Shift. \u003cbr\u003e**Global Mode:** Use a global image instead of an instance image. \u003cbr\u003e**Capture On Enable:** When the component is enable, capture screen automatically.\u003cbr\u003e**Fit To Screen:** Fit transform to the root canvas on enable/captured. \u003cbr\u003e\u003cbr\u003e**Reduction Rate:** Reduce the size of the intermediate buffer used to render effects. \u003cbr\u003e**Down Sampling Rate:** Reduce the size of the result RenderTexture. | ![][snapshot] |\n\n[snapshot]:https://user-images.githubusercontent.com/12690315/94722627-8a941080-0392-11eb-9627-322aa0c5b35c.png\n\n#### Script usage\n\n```cs\n// Add UIEffectSnapshot instance at runtime.\nuiEffectSnapshot = gameObject.AddComponent\u003cUIEffectSnapshot\u003e();\n\n// Capture a screenshot for instance.\nuiEffectSnapshot.Capture(callback: request =\u003e { Debug.Log(\"Captured\"); });\n\n// Capture a screenshot for global.\n// You can capture screen in cases where there is no UIEffectSnapshot instance.\n// The captured image will be used with 'Global Mode' instance.\n// Or, you can use 'UIEffectSnapshot.globalCapturedTexture' property to get it.\nUIEffectSnapshot.CaptureForGlobal(callback: request =\u003e { Debug.Log(\"Captured\"); });\n```\n\n#### Built-in custom material usage\n\n1. Click `New` button in inspector and save the material into the project.  \n![](https://user-images.githubusercontent.com/12690315/94723864-5cafcb80-0394-11eb-9988-4b7ce57b7bc1.png)\n2. The generated material is automatically set as a property. Adjust the functions and values of the material.  \n![](https://user-images.githubusercontent.com/12690315/94724257-f7a8a580-0394-11eb-810f-117233ea6cd4.png)\n3. Press `Capture` button to preview the custom effect.  \n![](https://user-images.githubusercontent.com/12690315/94724255-f6777880-0394-11eb-97c2-5c9e04375cfd.png)\n\n\u003cbr\u003e\u003cbr\u003e\n\n### UIEffectSnapshotPanel\n\n- This is a component for easy control of a panel with snapshot background/panel.\n- Select `Game Object/UI/UI Effect Snapshot Panel/***` to create a panel with snapshot preset.  \n![](https://user-images.githubusercontent.com/12690315/94724878-e6ac6400-0395-11eb-9c3f-e075cf42db86.png)\n- Press the `Show` or `Hide` button in the inspector to preview the snapshot.  \n![](https://user-images.githubusercontent.com/12690315/94724984-0a6faa00-0396-11eb-9c2d-9645dbdbf923.png)\n\n| Properties | Screenshot |\n| -- | -- |\n| **Snapshots:** UIEffectSnapshot instances to control. Press `Refresh` button to set children snapshots. \u003cbr\u003e**Transition Duration:** Duration of show/hide transition. \u003cbr\u003e**Show On Enable:** When the component is enable, show the panel automatically. \u003cbr\u003e**Deactivate On Hidden:** When the component is hidden, deactivate the gameObject automatically. | ![][panel] |\n\n[panel]:https://user-images.githubusercontent.com/12690315/94722637-8bc53d80-0392-11eb-9f61-5e9082fb1134.png\n\n#### Script usage\n\n```cs\n// Show/Hide the panel with snapshot.\n// Before capturing, CanvasGroup.alpha will be set to 0 and capture the screen except for the panel.\npanel.Show(callback: request =\u003e { Debug.Log(\"Shown\"); });\npanel.Hide(callback: request =\u003e { Debug.Log(\"Hidden\"); });\n```\n\n\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\n\n## How to play demo\n\n### For Unity 2019.1 or later\n\n1. Open `Package Manager` window\n2. Select `UI Effect Snapshot` package in package list\n3. Click `Import Sample` button\n4. The demo project is imported into `Assets/Samples/UI Effect Snapshot/{version}/Demo`\n5. Open `UIEffectSnapshot_Demo` scene and play it\n\n### For Unity 2018.4 or earlier\n\n1. Select `Assets/Samples/UI Effect Snapshot Demo` from menu\n2. The demo project is imported into `Assets/Samples/UI Effect Snapshot/{version}/Demo`\n3. Open `UIEffectSnapshot_Demo` scene and play it\n\n### For [Universal Render Pipeline](https://docs.unity3d.com/Packages/com.unity.render-pipelines.universal@10.0/manual/index.html) environment\n\n1. Find `RotationCube.mat` in `Assets` and select all sub-assets.  \n![](https://user-images.githubusercontent.com/12690315/94722208-eca04600-0391-11eb-9e44-cab873deee04.png)\n2. Change the shader of materials to `Universal Render Pipeline/Lit`.  \n![](https://user-images.githubusercontent.com/12690315/94722202-eb6f1900-0391-11eb-96cd-19db17a99314.png)\n\n\n\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\n\n## Contributing\n\n### Issues\n\nIssues are very valuable to this project.\n\n- Ideas are a valuable source of contributions others can make\n- Problems show where this project is lacking\n- With a question you show where contributors can improve the user experience\n\n### Pull Requests\n\nPull requests are, a great way to get your ideas into this repository.  \nSee [CONTRIBUTING.md](/../../blob/develop/CONTRIBUTING.md).\n\n### Support\n\nThis is an open source project that I am developing in my spare time.  \nIf you like it, please support me.  \nWith your support, I can spend more time on development. :)\n\n[![](https://user-images.githubusercontent.com/12690315/50731629-3b18b480-11ad-11e9-8fad-4b13f27969c1.png)](https://www.patreon.com/join/mob_sakai?)  \n[![](https://user-images.githubusercontent.com/12690315/66942881-03686280-f085-11e9-9586-fc0b6011029f.png)](https://github.com/users/mob-sakai/sponsorship)\n\n\n\n\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\n\n## License\n\n* MIT\n\n\n\n## Author\n\n[mob-sakai](https://github.com/mob-sakai)\n[![](https://img.shields.io/twitter/follow/mob_sakai.svg?label=Follow\u0026style=social)](https://twitter.com/intent/follow?screen_name=mob_sakai)\n\n\n\n## See Also\n\n* GitHub page : https://github.com/mob-sakai/UIEffectSnapshot\n* Releases : https://github.com/mob-sakai/UIEffectSnapshot/releases\n* Issue tracker : https://github.com/mob-sakai/UIEffectSnapshot/issues\n* Change log : https://github.com/mob-sakai/UIEffectSnapshot/blob/upm/CHANGELOG.md\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmob-sakai%2Fuieffectsnapshot","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmob-sakai%2Fuieffectsnapshot","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmob-sakai%2Fuieffectsnapshot/lists"}