Skip to content

General Effects

Manages various standard effects provided by RedGPU, such as radial blur and grayscale.

[Learning Guide]

Technically, tone mapping is executed at the very first stage of the overall post-processing, but in this chapter, we first cover General Effects where visual changes can be experienced most intuitively.

1. Usage (addEffect)

After creating an effect object, register it through view.postEffectManager.addEffect(). A pipeline chain is formed in the order of registration.

javascript
const radialBlur = new RedGPU.PostEffect.RadialBlur(redGPUContext);
view.postEffectManager.addEffect(radialBlur);

2. Key Effect Examples

2.1 Radial Blur

Creates a sense of speed or concentration effects that spread outward from a center point.

2.2 Grayscale

Converts the image to black and white to create a classic atmosphere.

3. Full Support List

Full list of all general effects provided by RedGPU. All effects are located under the RedGPU.PostEffect namespace.

CategoryClass NameDescription
BlurBlur, GaussianBlurGaussian blur (Most common blur effect)
BlurX, BlurYUnidirectional (horizontal/vertical) blur
DirectionalBlurBlur effect in a specified angle direction
RadialBlurBlur effect spreading outward from the center in a circle
ZoomBlurBlur effect expanding outward from the center
AdjustmentsBrightnessContrastBrightness and contrast adjustment
HueSaturationHue and saturation adjustment
ColorBalanceColor balance (midtones, shadows, highlights) adjustment
ColorTemperatureTintColor temperature and tint adjustment
VibranceVibrance (adjust mainly unsaturated parts)
GrayscaleConverts image to black and white
InvertColor inversion
ThresholdBinarization based on a threshold
LensOldBloomClassic light bleeding effect
DOFDepth of field (blur areas out of focus)
VignettingEffect of darkening the outer edges of the screen
ChromaticAberrationRecreates lens chromatic aberration
LensDistortionLens distortion effect
AtmosphericFogDistance-based fog effect
HeightFogHeight-based fog effect
Visual / UtilityFilmGrainFilm noise (grain) effect
SharpenSharpening
ConvolutionKernel-based filter (supports Sharpen, Edge, Emboss, etc.)

[Check Live]

All the effects above can be checked in real-time demos in the PostEffect category of the RedGPU Official Examples Page.

Key Summary

  • You can layer effects in any order using addEffect().
  • All effect objects require redGPUContext upon creation.
  • Actual rendering is performed immediately after the tone mapping stage.

Next Learning Recommendations