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.

<< Description | Demo | Installation | Usage | Change log >>

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.
• Sample _GrabTexture with blur-algorithms.
• Implementation example: https://pastebin.com/z3w8jhs4

Alternatively, you can use PostProcessingStack package.

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

Future Plans

• Support render mode: World Space - Camera
• Support pre-generated RenderTexture as result

Demo

• WebGL Demo

Installation

Requirement

• Unity 2018.3 or later

Using OpenUPM

This package is available on OpenUPM.
You can install it via 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 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.

Script usage

// Add UIEffectSnapshot instance at runtime.
uiEffectSnapshot = gameObject.AddComponent<UIEffectSnapshot>();

// 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.

Script usage

// 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 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.

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. :)

License

• MIT

Author

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