Skip to content

Latest commit

 

History

History
212 lines (142 loc) · 5.43 KB

ShaderEffects.md

File metadata and controls

212 lines (142 loc) · 5.43 KB

Shader Effects Suite

A collection of shader-based effects that apply different blending modes to UI elements, including additive, multiply, screen, and shine effects.

Contents

1 Overview

2 Effects

3 Properties

4 Usage

5 Video Demo

6 See also

7 Credits and Donation

8 External links

Overview

The Shader Effects Suite provides a collection of shader-based visual effects for UI elements. Each effect applies a different blending mode to create various visual styles. These effects automatically apply the appropriate shader material to the target graphic component.

All shader effects in this suite share a common implementation pattern: they detect the attached graphic component and apply a specialized shader material that implements the desired blending behavior.

Effects

UIAdditiveEffect

Menu Path: UI/Effects/Extensions/UIAdditiveEffect

Applies additive blending to UI elements. This effect adds the pixel colors together, resulting in a brightening effect. Useful for glow, light, and highlight effects.

Use Cases:

  • Glow effects
  • Light overlays
  • Bright highlights
  • Additive particle effects in UI

UISoftAdditiveEffect

Menu Path: UI/Effects/Extensions/UISoftAdditiveEffect

Applies soft additive blending to UI elements. Similar to additive blending but with reduced intensity, resulting in a gentler brightening effect.

Use Cases:

  • Softer glow effects
  • Subtle light overlays
  • Gentle highlights
  • Semi-transparent light effects

UIMultiplyEffect

Menu Path: UI/Effects/Extensions/UIMultiplyEffect

Applies multiply blending to UI elements. This effect darkens by multiplying pixel colors, resulting in a darkening effect. Useful for shadows and darkening overlays.

Use Cases:

  • Shadow effects
  • Darkening overlays
  • Dimming effects
  • Dark highlights

UILinearDodgeEffect

Menu Path: UI/Effects/Extensions/UILinearDodgeEffect

Applies linear dodge (additive) blending to UI elements. Similar to additive blending with slightly different color mathematics.

Use Cases:

  • Bright light effects
  • Intense glows
  • Light trails
  • Energy effects

UIScreenEffect

Menu Path: UI/Effects/Extensions/UIScreenEffect

Applies screen blending to UI elements. This effect inverts and multiplies pixel colors, resulting in a lightening effect that's gentler than additive blending.

Use Cases:

  • Screen overlays
  • Vignette effects
  • Light blending
  • Composite lighting

ShineEffector

Menu Path: UI/Effects/Extensions/Shining Effect

Creates a moving shine/gloss effect across UI elements. Renders an animated gradient that slides across the target graphic to simulate a glossy or polished surface.

Use Cases:

  • Glossy button effects
  • Shine animations
  • Polished surface effects
  • Attention-drawing animations

Properties:

  • Y Offset (Range: -1 to 1): Vertical position of the shine effect
  • Width (Range: 0.1 to 1): Width of the shine gradient

Properties

All shader effects (except ShineEffector) share these properties:

Property Description
Graphic Component The target Graphic component (Image, RawImage, Text) that the effect will be applied to. Automatically detected on the same GameObject.
Material The shader material applied to the graphic. Automatically created using the appropriate shader for the effect type.

ShineEffector-specific properties:

Property Description
Y Offset Controls the vertical position of the shine effect. Range from -1 (top) to 1 (bottom).
Width Controls the width/thickness of the shine effect. Range from 0.1 (thin) to 1 (wide).

Usage

Basic Effect Application

Simply add the desired effect to a GameObject with a Graphic component (Image, RawImage, or Text):

// In editor: Add Component -> UI/Effects/Extensions -> [EffectName]
// Or in code:
var image = GetComponent<Image>();
image.gameObject.AddComponent<UIAdditiveEffect>();

The effect will automatically apply its shader material to the graphic component.

Using Additive Effects

public Image glowImage;

void Start()
{
    // Add additive effect to create a glow
    glowImage.gameObject.AddComponent<UIAdditiveEffect>();
}

Using ShineEffector

public ShineEffector shineEffect;

void Update()
{
    // Animate the shine effect
    shineEffect.YOffset = Mathf.Sin(Time.time) * 0.5f;
}

Combining Multiple Effects

Multiple effects can be combined for complex visual results:

var image = GetComponent<Image>();

// Add multiple effects
image.gameObject.AddComponent<UIMultiplyEffect>();
image.gameObject.AddComponent<UIAdditiveEffect>();

Note: When combining effects, be aware that the order and interaction of blending modes will affect the final result.

Video Demo

Coming soon...

See also

Credits and Donation

00christian00, ömer faruk sayılır

External links

UIAdditiveEffect Sourced from ShineEffector Sourced from