Skip to content

Latest commit

 

History

History
221 lines (152 loc) · 7.16 KB

README.md

File metadata and controls

221 lines (152 loc) · 7.16 KB
Raw

GaussianBlur_URP

Web Demo

A screen blur effect for Unity/C#

Asset Store Link
HRP version
non-ShaderGraph version

© 2022 Justin Garza

PLEASE LEAVE A REVIEW OR RATE THE PACKAGE IF YOU FIND IT USEFUL! Enjoy! :)

Table of Contents

Contact

My Contact info is on my github profile
https://github.com/jgarza9788

Terms of Use

Required: please follow Unity's EULA

Suggestion/Optional: please put my name in the credits, or in the special thanks section. :)

Description Features

  • Alpha Mask
  • Mobile Friendly
  • Adjust Blur, Lightness, Saturation, and TintColor
  • Built on URP
  • easily modifiable/editable Shader Graph
  • 3 Shaders
    • GaussianBlur_IU
    • GaussianBlur_IUEffect
    • GaussianBlur_WS (WorldSpace, or Objects)

Set Up

You need to set up your project to use a URP Asset.

  1. You can use the URP_Asset i provided (in *\GaussianBlur_URP\Assets\URP) and change the camera settings
    1. Project Settings
      1. Image Link
    2. Camera Settings
      1. Image Link

Note: you might need to make your own URP_Asset if there is not one that matches the unity version.

  • right click -> Create -> Rendering -> URP Asset (with Universal Renderer)
  • if you use your own check ✅ "Opaque Texture"
    Image Link
    • if you are making a mobile game consider changing the "opaque Downsampling" option.

Note:
"Opaque Texture" gives us the ability to access _CameraOpaqueTexture, a texture of what the main camera sees (but this texture will not have transparent objects (like Sprites) within it)

Set Up (for Transparent objects)

if you need sprites and non-opaque to show up in the blur, please see the Demo_Basic(Sprites).scene

Image Link

  1. the RTCamera outputs an image to a RenderTexture
    • (most of the time you'll want this to view exactly what the main Camera sees)
  2. the Shader uses the RenderTexture as the based image for the blur.

You can actual use nearly any image you want.
So if you don't want to use a second camera, consider a static image.

In addition, you can change the Size and Color Format of your RenderTexture.
reducing the size and optimizing it.

GaussianBlur_IU

To use the shader on the UI, just use the material.
(or create you're own material and use my shader)

CustomTexture:
pass in any texture (image) you'd like (i.e. a Render Texture or 2D Texture)

useCameraOpaqueTexture:
this will be used as a default texture for blurring.
note: this will not render transparent (Sprite and non-Opaque) objects (you might want to use a Render Texture)

  • see Set Up (for Transparent objects) section above

BlurScale:
This is how much to blur the texture.
(This will automatically adjust two other variables)

Lightness:
how light or dark the UI should be.

Tint:
a color tint to be applied to the UI.

Saturation:
adjusts the saturation (color) of the UI.

Image Link

GaussianBlur_IUEffect

This will use the Source Image.
So you can fade the blur depending on where it is on the screen.

see Demo_UIEffect.scene:
The Source Image is our map to know how much to blur the edges and the center.
Image Link

GaussianBlur_WS

This is for Objects in the WorldSpace.
see Demo_3DModel.scene for an example.

note:
The Layer should be set to BlurObject.

Metallic & Smoothness:
these are used to adjust the shinny-ness of the object.

if this is not working we might want to double check our custom-renderer. it's in *\GaussianBlur_URP\Assets\URP

Image Link

Here are the settings for the custom-renderer.

  1. we filter out the Layer "BlurObject"
    • because we do not want the camera to render it.
  2. we create a render feature to add the BlurObject back into the final image after being rendered my the GaussianBlur_WS material. Image Link

Demo_AdvancedUI_1.0 and Demo_AdvancedUI_2.0

these scenes shows how we can blur only a piece of the image.
In the ShaderGraph we are creating a mask.

we are controlling the about of blur and other items with shader properties and Animator Component.

Image Link

Videos

these videos go in deal on how the ShaderGraphs work.
please watch these if you plan to create your own remix of the shader.

GaussianBlur_UI Video
GaussianBlur_WS Video
GaussianBlur_UIEffect Video

FAQs

why can't i see Sprites in the Blur?

by default by Shader will be using the _CameraOpaqueTexture, this texture only contains Opaque Objects. However we can use whatever Texture we want.

please read the Set Up (for Transparent objects) section above.

it's just GREY!

Most of the time this is just caused by the settings in the URP_Asset or the settings you picked in the shader.

please review the settings and make sure they are ok.
Try re-downloading the asset and/or Contact me for help.

it's still Grey!

Try deleting the Asset\Settings folder.
This folder was created when the URP project was created.

I'm not sure why this causes an issue with the project,
but it fixes the project sometimes.

Can I layer multiple Blur objects?

this asset can be adjusted for multiple Blur Layers, however there are a few issues with adjusting this asset for Blurred Layers.

  1. i like to keep this asset simple enough so most people can easily use it.
  2. multiple blur layers can be very taxing on the CPU/GPU
  3. we would need to have multiple cameras, render textures, etc (one for each layer) or have a special shader to merge and blur each.

better performance from mobile

  1. use Vulkan
    • this should be in the PlayerSettings, Other Settings, Rendering.
  2. DownSampling
    • you can also change the "Opaque Downsampling" option in the URP_Asset.
    • reduce the size and color format of the render texture.