Implement drop shadows using blurring techniques #34

jserv · 2024-08-11T17:01:11Z

Drop shadow is one of the most popular visual effects rendered in modern window systems and compositing window managers. Gaussian blur works by setting the value of each pixel in the active layer or selection to the average of all pixel values within a defined radius. A higher radius value will produce a greater amount of blur. This task aims to create the graphical effect of a visually elevated shape with a shadow underneath the window frame, managed by the built-in window management system. In other words, an additional operation redirects all windows to offscreen pixmaps and tracks when painting occurs on those offscreen pixmaps, adding the drop shadow effect.

(An experimental popup modifier theme that incorporates blurring, alpha blending, gradients, and a drop shadow, taken from PicoGUI.)

The stack blur algorithm was invented by Mario Klingemann. Compared to Mario's original source code, the lookup table in lasem has been removed as the benefit doesn't justify the memory usage in cases of large radii. See also:

Expected Outcome:
A polished drop shadow effect that enhances the window rendering of Mado, with minimal performance overhead and flexibility to customize the appearance.

Reference implementations:

Use Pascal's Triangle to approximate a 5x5 Gaussian Kernel, and apply Gaussian blur on the 'twin_pixmap_t' to implement the blurring technique. See: sysprog21#34

jserv · 2024-11-25T16:51:13Z

ctx is a renderer and serialization format for 2D vector graphics, aiming for compatibility with HTML5 Canvas' 2D context. Search CTX_ENABLE_SHADOW_BLUR in ctx repository.

Add the `twin_stack_blur()` function to implement Mario's Stack Blur algorithm, which blurs the target pixel map. Create a test window to evaluate the effect of `twin_stack_blur()`. Additionally, implement a shadow pixel map beneath the test window with a shadow effect, enabling the shadow pixel map to blur the background and create a frosted glass effect. The shadow effect of the test window only becomes visible when the test window is on the top layer. Ref: https://melatonin.dev/blog/implementing-marios-stack-blur-15-times-in-cpp/ See sysprog21#34 Signed-off-by: Wei-Hsin Yeh <weihsinyeh168@gmail.com>

Add the `twin_stack_blur()` function to implement Mario's Stack Blur algorithm, which blurs the target pixel map. Additionally, create a test window to evaluate the effect of `twin_stack_blur()`. Implement a shadow pixel map beneath the test window with a shadow effect, enabling the shadow pixel map to blur the background and create a frosted glass effect. The shadow effect of the test window only becomes visible when the test window is on the top layer. Ref: https://melatonin.dev/blog/implementing-marios-stack-blur-15-times-in-cpp/ See sysprog21#34 Signed-off-by: Wei-Hsin Yeh <weihsinyeh168@gmail.com>

Add the `twin_stack_blur()` function to implement Mario's Stack Blur algorithm, which blurs the target pixel map. Additionally, create a test window to evaluate the effect of `twin_stack_blur()`. Implement a shadow pixel map beneath the window with a blur effect to create a frosted glass appearance. The drop shadow effect of the window is only visible when it is on the top layer, ensuring the active window stands out visually. Ref: https://melatonin.dev/blog/implementing-marios-stack-blur-15-times-in-cpp/ See sysprog21#34 Signed-off-by: Wei-Hsin Yeh <weihsinyeh168@gmail.com>

Add the `twin_stack_blur()` function to implement Mario's Stack Blur algorithm, which blurs the target pixel map. Additionally, create a test window to evaluate the effect of `twin_stack_blur()`. Implement a shadow pixel map beneath the window with a blur effect to create a frosted glass appearance. The drop shadow effect of the window is only visible when it is on the top layer, ensuring the active window stands out visually. Furthermore, implement the `twin_shadow_border()` function that aims to create darker edge of the active window that give a more dimensional appearance. Ref: https://melatonin.dev/blog/implementing-marios-stack-blur-15-times-in-cpp/ See sysprog21#34 Signed-off-by: Wei-Hsin Yeh <weihsinyeh168@gmail.com>

Add the `twin_stack_blur()` function to implement Mario's Stack Blur algorithm, which blurs the target pixel map. Additionally, create a test window to evaluate the effect of `twin_stack_blur()`. Implement the `twin_drop_shadow()` function to handle the pixels within the drop shadow area of the active window's pixel map. The drop shadow effect of the window is only visible when the window is on the top layer, ensuring the active window stands out visually. Implement the `twin_shadow_border()` function to create a darker border of the active window that gives a more dimensional appearance. In the `twin_drop_shadow()` function, `twin_stack_blur()` will apply a blur effect to the pixels beneath the active window's pixel map, which aims to create a frosted glass appearance. Furthermore, implement the `twin_cover()` function to cover the target pixels with the desired color. Ref: https://melatonin.dev/blog/implementing-marios-stack-blur-15-times-in-cpp/ See sysprog21#34 Signed-off-by: Wei-Hsin Yeh <weihsinyeh168@gmail.com>

Add the twin_stack_blur() function to implement Mario's Stack Blur algorithm, which blurs the target pixel map. Additionally, create a test window to evaluate the effect of twin_stack_blur(). Implement the twin_drop_shadow() function to handle the pixels within the drop shadow area of the active window's pixel map. The drop shadow effect of the window is only visible when the window is on the top layer, ensuring the active window stands out visually. Implement the twin_shadow_border() function to create a darker border of the active window that gives a more dimensional appearance. In the twin_drop_shadow() function, twin_stack_blur() will apply a blur effect to the pixels beneath the active window's pixel map, which aims to create a frosted glass appearance. Furthermore, implement the twin_cover() function to cover the target pixels with the desired color. Ref: https://melatonin.dev/blog/implementing-marios-stack-blur-15-times-in-cpp/ Close sysprog21#34 Signed-off-by: Wei-Hsin Yeh <weihsinyeh168@gmail.com>

Add the twin_stack_blur() function to implement Mario's Stack Blur algorithm, which blurs the target pixel map. Additionally, create a blur window to show the effect of twin_stack_blur(). Implement the twin_drop_shadow() function to handle the pixels within the drop shadow area of the active window's pixel map. The drop shadow effect of the window is only visible when the window is on the top layer, ensuring the active window stands out visually. Implement the twin_shadow_border() function to create a darker border of the active window that gives a more dimensional appearance. In the twin_drop_shadow() function, twin_stack_blur() will apply a blur effect to the pixels beneath the active window's pixel map, which aims to create a frosted glass appearance. Furthermore, implement the twin_cover() function to cover the target pixels with the desired color. Ref: https://melatonin.dev/blog/implementing-marios-stack-blur-15-times-in-cpp/ Close sysprog21#34 Signed-off-by: Wei-Hsin Yeh <weihsinyeh168@gmail.com>

jserv assigned weihsinyeh Aug 18, 2024

weihsinyeh mentioned this issue Oct 6, 2024

Render drop shadow for active window #58

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Implement drop shadows using blurring techniques #34

Implement drop shadows using blurring techniques #34

jserv commented Aug 11, 2024 •

edited

Loading

jserv commented Nov 25, 2024

Implement drop shadows using blurring techniques #34

Implement drop shadows using blurring techniques #34

Comments

jserv commented Aug 11, 2024 • edited Loading

jserv commented Nov 25, 2024

jserv commented Aug 11, 2024 •

edited

Loading