Layered Parallax Shader

Options relevant to the orels1/UI/Layered Parallax shader

An adaptation of a PBR Layered Parallax shader to work with Unity UI. It provides multi-layered parallax effects that can be used for posters or other shadowbox-style UI elements.

Shader Channels Required

Make sure your root Canvas component has Normal and Tangent checked in the Additional Shader Channels dropdown when using the Parallax Offset setting.

UI Panel with a Parallax Background effect

General Settings

Layered Parallax Inspector

Most of the settings are controlled per-layer, and each layer has an identical set of settings. However the Background and Overlay layers are special, and thus they're hoisted to the General Settings section

Ignore UI Sprite: If enabled, the shader will ignore the UI sprite provided by the Unity UI component and only draw the layers set in the materials settings. Otherwise - the UI sprite will be used as a background image
Overlay: Specifies a texture that is going to exist on top of everything with no depth offset. Can be used to add some sort of a frame or any other top-level effects
Layer Count: Controls the amount of parallax layers applied. Uses branching internally to cut on the cost of the effect. Goes from 1 to 5

Sliced Sprites

Using a Sliced image type on the Image component will cause the UVs of the mesh to be distorted, and as a result - the effect might not work as you expect. It is generally recommended to not have any source image in the UI Image component and rely solely on the shader to do all the work

Per-Layer Settings

Each layer has an identical set of settings, so they are only documented once

Layer Inspector

UV Set: The UV channel to use for the texture. Channels 1 through 4 are available
UV Mode: Controls whether the texture should be clamped or repeated. This is done on the shader level due to optimization reasons. It is highly recommended to keep the first layer's texture in the Repeat mode in the texture importer settings

Clamping Caveats

Clamped mode only works with the None and Float Movement Mode settings. As it does not make sense to scroll the clamped texture away from the visible area

Texture: Specifies the texture used by the layer

Texture Requirements

You must provide a texture in the first layer texture slot, otherwise the shader will not work

Tint: Controls the tint color of the layer's texture. It is an HDR value to allow for emissive elements. Adjusting the alpha of the Tint also allows for blending between layers
Layer Depth: Controls the perceived depth of the texture. All the layers are visually flat, but can be on a different distance from the surface
Movement Mode: Controls the layer's behavior. Has multiple options
- None: No movement
- Float: Bobs the texture back and forth in a specified direction
- Scroll: Scrolls the texture in the specified direction
Movement Speed: Only visible if the Movement Mode is not set to None. Controls the speed of the movement effect
Movement Direction: Only visible if the Movement Mode is not set to None. Controls the direction of the movement effect. Only the X and Y values are used

Here's an example of setting up a simple two-layer effect using this shader

Layered Parallax Example