UI Blur – Chloroplast Games & Azurite Techs Documentation

Files: UIBlur.shader
Path: “CGF/Shaders/UI”
Shader menu: “CG Framework/UI/UI Blur”
Asset Store

Description

UI shader that applies a blur effect to the content behind the object with the shader.

Support all UI features like alpha clip or masks.
Five blur modes: Simple, Medium, Advanced, Box and Gaussian.
Two use types: Texture (All render pipelines) and Grab pass (only for Built In).

Reference

Blur – Manages the blur effect.

Use

You can use sevaral procedures to use the shader to apply the blur effect:

Option 1 – Render Texture:
- Built In:
  1. Only affects opaque and transparent world object, not canvas objects.
  2. Only support Screen space – Overlay of Canvas Render Mode.
  3. Create a material with this shader and assign the material to the Material property of Image component of a canvas object.
  4. Create a secondary camera in the scene.
  5. Create a render texture.
  6. Drag the render texture to the “Target Texture” property of the secondary camera.
  7. Add the script CGFSetRenderTextureSizeFromCameraBehavior to the object with the Image component and the material.
  8. Drag the render texture to the “Render Texture” property of CGFSetRenderTextureSizeFromCameraBehavior.
  9. Set the value of the “Size Multiplier” property of CGFSetRenderTextureSizeFromCameraBehavior. 1 or 0.5 is suitable for a good blur effect.
  10. Drag the Main Camera of the scene to the “Main Camera” property of CGFSetRenderTextureSizeFromCameraBehavior.
  11. Drag the render texture to the “Screen Texture” property of material.
  12. Press play to see the effect.
- URP:
  1. Only affects opaque and transparent world object, not canvas objects.
  2. Only support Screen space – Overlay of Canvas Render Mode.
  3. Create a material with this shader and assign the material to the Material property of Image component of a canvas object.
  4. Create a secondary camera in the scene.
  5. Drag the render texture to the “Output Texture” property of the secondary camera.
  6. Create a render texture.
  7. Add the script CGFSetRenderTextureSizeFromCameraBehavior to the object with the Image component and the material.
  8. Drag the render texture the “Render Texture” property of CGFSetRenderTextureSizeFromCameraBehavior.
  9. Set the value of the “Size Multiplier” property of CGFSetRenderTextureSizeFromCameraBehavior. 1 or 0.5 is suitable for a good blur effect.
  10. Drag the Main Camera of the scene to the “Main Camera” property of CGFSetRenderTextureSizeFromCameraBehavior.
  11. Press play to see the effect.
Option 2 – Screen Texture:
1. Only for Built In render pipeline.
2. Only affects opaque and transparent world object, not canvas objects.
3. Only support Screen space – Overlay of Canvas Render Mode.
4. Create a material with this shader and assign the material to the Material property of Image component of a canvas object.
5. Create a secondary camera in the scene.
6. Add the script CGFRenderImageToMaterialBehavior.
7. Drag the material that uses the shader to the “Material” property of CGFRenderImageToMaterialBehavior.
8. Enter the name of the texture in the “Texture Name” property of CGFRenderImageToMaterialBehavior. In this case is “_ScreenTex”
9. Select the “Simple” option of the “Blur Mode” of the material.
10. Configure the other properties of the material as you wish.
Option 3 – Grap Pass:
1. Only for Built In render pipeline.
2. Affects all types of obejcts: opaque, transparent and canvas objects.
3. Supports all Canvas Render Mode.
4. Create a material with this shader and assign the material to the Material property of Image component of a canvas object.
5. Select the “Grap Pass” option of the “Blur Destination” of the material.
6. Configure the other properties of the material as you wish.