https://github.com/mob-sakai/uieffectsnapshot
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.
https://github.com/mob-sakai/uieffectsnapshot
effect screencapture snapshot ugui unity3d unity3d-plugin upm-package
Last synced: 5 months ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/mob-sakai/uieffectsnapshot
- Owner: mob-sakai
- License: mit
- Created: 2019-07-23T09:29:18.000Z (about 6 years ago)
- Default Branch: main
- Last Pushed: 2022-12-15T12:31:53.000Z (almost 3 years ago)
- Last Synced: 2025-04-07T01:52:24.185Z (6 months ago)
- Topics: effect, screencapture, snapshot, ugui, unity3d, unity3d-plugin, upm-package
- Language: C#
- Homepage:
- Size: 1.38 MB
- Stars: 159
- Watchers: 4
- Forks: 19
- Open Issues: 6
-
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
Awesome Lists containing this project
README
UIEffect Snapshot
===
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.
[](https://openupm.com/packages/com.coffee.ui-effect-snapshot/)
[](https://github.com/mob-sakai/UIEffectSnapshot/releases)
[](https://github.com/mob-sakai/UIEffectSnapshot/releases)
[](https://github.com/mob-sakai/UIEffectSnapshot/blob/upm/LICENSE.txt)
[](http://makeapullrequest.com)
[](https://twitter.com/intent/follow?screen_name=mob_sakai)
<< [Description](#description) | [Demo](#demo) | [Installation](#installation) | [Usage](#usage) | [Change log](https://github.com/mob-sakai/UIEffectSnapshot/blob/upm/CHANGELOG.md) >>
## Description
Do you like blurred backgrounds, like iOS home screen?
Blurring effect is easy to implement in Unity.
- Grabs the current screen contents into a texture with [GrabPass](https://docs.unity3d.com/Manual/SL-GrabPass.html).
- Sample `_GrabTexture` with [blur-algorithms].
- Implementation example: https://pastebin.com/z3w8jhs4
Alternatively, you can use [PostProcessingStack] package.
[blur-algorithms]: https://software.intel.com/content/www/us/en/develop/blogs/an-investigation-of-fast-real-time-gpu-based-image-blur-algorithms.html
[PostProcessingStack]: https://docs.unity3d.com/Packages/com.unity.postprocessing@2.3/manual/index.html
However, this method requires some caution to be used as a UI.
- You'll need a camera and canvas for the blur effect
- `Screen Space - Overlay` is not supported.
- (Especially in mobile,) GrabPass is expensive
This package uses **static screen content of one frame** instead of real-time screen content to provide a very light screen blur.
The movement will disappear from the background, but it will be enough to use it as a background for panels, dialog windows and menus.
Objects that are further back than the background are (consequently) invisible.
Disabling their animations or hiding them would improve performance and power consumption.
### Features
* Easy to use: the package is out-of-the-box!
* Light weight design:
* Non realtime capturing.
* Support for mobile.
* No extra camera and `PostProcessingStack` are needed.
* Support render mode: `Screen Space - Overlay` and `Screen Space - Camera`
* Effect Mode: **Grayscale, Sepia, Nega, Pixelation**
* Color Mode: **Multiply, Fill, Additive, Subtract**
* Blur Mode: **Fast Blur, Medium Blur, Detail Blur**
* Global Mode: Capture a screenshot in cases where there is no UIEffectSnapshot instance.
* Capture On Enable: When the component is enable, capture screen automatically.
* Fit to screen: Fit the RectTransform to the screen.
* Menus to create object
* Support custom effect materials.
* Built-in custom effects: **Vignette, Distortion, Noise, Scanning line, RGB Shift**
* Apply any image effect as you like.
* Support [Universal Render Pipeline](https://docs.unity3d.com/Packages/com.unity.render-pipelines.universal@10.0/manual/index.html)
### Future Plans
* Support render mode: `World Space - Camera`
* Support pre-generated RenderTexture as result
## Demo
* [WebGL Demo](https://mob-sakai.github.io/Demos/UIEffectSnapshot)
## Installation
### Requirement
* Unity 2018.3 or later
### Using OpenUPM
This package is available on [OpenUPM](https://openupm.com).
You can install it via [openupm-cli](https://github.com/openupm/openupm-cli).
```
openupm add com.coffee.ui-effect-snapshot
```
### Using Git
Find the manifest.json file in the Packages folder of your project and edit it to look like this:
```
{
"dependencies": {
"com.coffee.ui-effect-snapshot": "https://github.com/mob-sakai/UIEffectSnapshot.git",
...
},
}
```
To update the package, change suffix `#{version}` to the target version.
* e.g. `"com.coffee.ui-effect-snapshot": "https://github.com/mob-sakai/UIEffectSnapshot.git#1.0.0",`
Or, use [UpmGitExtension](https://github.com/mob-sakai/UpmGitExtension) to install and update the package.
## Usage
### UIEffectSnapshot
- This is a component to capture a screenshot with effects and display it.
- Select `Game Object/UI/Effect Snapshot` to create.
- Adjust the capture effect and press the `Capture` or `Release` button in the inspector to preview the snapshot.
| Properties | Screenshot |
| -- | -- |
| **Effect Mode:** Grayscale, Sepia, Nega, Pixelation
**Color Mode:** Multiply, Fill, Additive, Subtract
**Blur Mode:** Fast, Medium, Detail
**Custom Materials:** Additional image effect material. The built-ins include Vignette, Distortion, Noise, Scanning line, RGB Shift.
**Global Mode:** Use a global image instead of an instance image.
**Capture On Enable:** When the component is enable, capture screen automatically.
**Fit To Screen:** Fit transform to the root canvas on enable/captured.
**Reduction Rate:** Reduce the size of the intermediate buffer used to render effects.
**Down Sampling Rate:** Reduce the size of the result RenderTexture. | ![][snapshot] |
[snapshot]:https://user-images.githubusercontent.com/12690315/94722627-8a941080-0392-11eb-9627-322aa0c5b35c.png
#### Script usage
```cs
// Add UIEffectSnapshot instance at runtime.
uiEffectSnapshot = gameObject.AddComponent();
// Capture a screenshot for instance.
uiEffectSnapshot.Capture(callback: request => { Debug.Log("Captured"); });
// Capture a screenshot for global.
// You can capture screen in cases where there is no UIEffectSnapshot instance.
// The captured image will be used with 'Global Mode' instance.
// Or, you can use 'UIEffectSnapshot.globalCapturedTexture' property to get it.
UIEffectSnapshot.CaptureForGlobal(callback: request => { Debug.Log("Captured"); });
```
#### Built-in custom material usage
1. Click `New` button in inspector and save the material into the project.
2. The generated material is automatically set as a property. Adjust the functions and values of the material.
3. Press `Capture` button to preview the custom effect.
### UIEffectSnapshotPanel
- This is a component for easy control of a panel with snapshot background/panel.
- Select `Game Object/UI/UI Effect Snapshot Panel/***` to create a panel with snapshot preset.
- Press the `Show` or `Hide` button in the inspector to preview the snapshot.
| Properties | Screenshot |
| -- | -- |
| **Snapshots:** UIEffectSnapshot instances to control. Press `Refresh` button to set children snapshots.
**Transition Duration:** Duration of show/hide transition.
**Show On Enable:** When the component is enable, show the panel automatically.
**Deactivate On Hidden:** When the component is hidden, deactivate the gameObject automatically. | ![][panel] |
[panel]:https://user-images.githubusercontent.com/12690315/94722637-8bc53d80-0392-11eb-9f61-5e9082fb1134.png
#### Script usage
```cs
// Show/Hide the panel with snapshot.
// Before capturing, CanvasGroup.alpha will be set to 0 and capture the screen except for the panel.
panel.Show(callback: request => { Debug.Log("Shown"); });
panel.Hide(callback: request => { Debug.Log("Hidden"); });
```
## How to play demo
### For Unity 2019.1 or later
1. Open `Package Manager` window
2. Select `UI Effect Snapshot` package in package list
3. Click `Import Sample` button
4. The demo project is imported into `Assets/Samples/UI Effect Snapshot/{version}/Demo`
5. Open `UIEffectSnapshot_Demo` scene and play it
### For Unity 2018.4 or earlier
1. Select `Assets/Samples/UI Effect Snapshot Demo` from menu
2. The demo project is imported into `Assets/Samples/UI Effect Snapshot/{version}/Demo`
3. Open `UIEffectSnapshot_Demo` scene and play it
### For [Universal Render Pipeline](https://docs.unity3d.com/Packages/com.unity.render-pipelines.universal@10.0/manual/index.html) environment
1. Find `RotationCube.mat` in `Assets` and select all sub-assets.
2. Change the shader of materials to `Universal Render Pipeline/Lit`.
## Contributing
### Issues
Issues are very valuable to this project.
- Ideas are a valuable source of contributions others can make
- Problems show where this project is lacking
- With a question you show where contributors can improve the user experience
### Pull Requests
Pull requests are, a great way to get your ideas into this repository.
See [CONTRIBUTING.md](/../../blob/develop/CONTRIBUTING.md).
### Support
This is an open source project that I am developing in my spare time.
If you like it, please support me.
With your support, I can spend more time on development. :)
[](https://www.patreon.com/join/mob_sakai?)
[](https://github.com/users/mob-sakai/sponsorship)
## License
* MIT
## Author
[mob-sakai](https://github.com/mob-sakai)
[](https://twitter.com/intent/follow?screen_name=mob_sakai)
## See Also
* GitHub page : https://github.com/mob-sakai/UIEffectSnapshot
* Releases : https://github.com/mob-sakai/UIEffectSnapshot/releases
* Issue tracker : https://github.com/mob-sakai/UIEffectSnapshot/issues
* Change log : https://github.com/mob-sakai/UIEffectSnapshot/blob/upm/CHANGELOG.md