Home/ Questions/Q 8411487
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T00:26:00+00:00

I am trying to implement Adobe Photoshop’s Drop Shadow layer style in OpenGL. I

  • 0

I am trying to implement Adobe Photoshop’s Drop Shadow layer style in OpenGL. I need to add a blurriness to the edges of the shadow which is controlled by “Size” property in Photoshop.I first thought that running it through a typical Gaussian blur algo would be fine.But looking closer at the effect it is clear to me that the Gaussian blur wouldn’t give the same effect as it processes all the fragments of the raster uniformly.In Photoshop the Blur areas are always along the edges of the shadow shape.Those get wider towards the center of the shape.Anyone can point to an algorithm or GLSL example which blurs the shape on its edges based on the size parameter just like in Photoshop ?

UPDATE: Here is my final result using Euclidian Distance field and the technique outlined in
this Valve paper + the recent book “OpenGL Insights”:
enter image description here

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I am very interested in this answer as well, since I am trying to replicate the Photoshop Layer Styles in my open source project:

    https://github.com/vinniefalco/LayerEffects

    This is what I know:

    • Drop Shadow and Inner Shadow are duals of each other. Adding a drop shadow on a layer is the same as adding an Inner Shadow to a layer with an inverted mask.

    • Outer Glow with Technique set to “Precise” calculates a Euclidean Distance Transform (EDT) with a Chamfer metric.

    • Stroke set to Gradient, “Shape Burst” uses an identical EDT.

    • Outer Glow with Technique set to “Softer” uses some unknown transform identical to the one used for Drop Shadow.

    Since the distance transform plays a key role in almost every Photoshop Layer Style, it might be reasonable to assume that the unknown transform in Drop Shadow is a variation of the EDT. The only other variation I have been able to find is called the “Gaussian Distance Transform” (GDT). Unfortunately there is only one description of it, in the book “2-D and 3-D Image Registration for Medical, Remote Sensing, and Industrial Applications.” The PDF is available:

    http://read.pudn.com/downloads85/ebook/327739/Wiley%5B1%5D.Interscience.2-D.and.3-D.Image.Registration.for.Medical.Remote.Sensing.and.Industrial.Applications.pdf

    Here’s the description of the GDT:

    If we convolve an image with a monotonically increasing radial function, an image will be obtained that functions like a distance transform image. The inverse of a Gaussian may be used as the monotonically increasing radial function. Therefore, to obtain the distance transform of an image, the image is convolved with a Gaussian and the intensities of the convolved image are inverted. Computation of the distance transform in this manner makes the obtained distances less sensitive to noise. This is demonstrated in an example in Fig.4.6. Figures4.6a and 4.6b show distance transforms of images4.5a and 4.5b, respectively, computed by Gaussian convolution. Compared to the Euclidean distance transform, the distance transform computed by Gaussian convolution is less sensitive to noise.

    Given this image:

    Before
    (source: imgfsr.com)

    Here’s the signed Euclidean Distance Transform and the signed Gaussian Distance Transform:

    EDT
    (source: imgfsr.com)
    GDT

    (Images from http://www.imgfsr.com/ifsr_dtg.html)

    • 0