Render drop shadow for active window

[weihsinyeh]

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: #34

[weihsinyeh]

The idea behind #34 is to implement drop shadow, one of the most popular visual effects in modern window systems and compositing window managers. The effect should be applied at the window management level, not to background images, meaning the background image should not be blurred. The graphical effect of a visually elevated shape with a shadow underneath the window frame should occur transparently.

Because I'm still unsure where to place the blur operation, whether to implement the blur in '_twin_widget_queue_paint()', as this function handles the rendering order of each widget object. It would need to read the corresponding pixel block currently on the screen during rendering to blur the current background. Or should I implement this operation when each widget's TwinEventPaint occurs? So I first try to implement this function on the background to see its effect.

[jserv]

Or should I implement this operation when each widget's TwinEventPaint occurs? So I first try to implement this function on the background to see its effect.

Alternatively, you can write an image viewer with drop shadow functionality to evaluate performance and visual effects in the initial stage. Once you have a better understanding of the window manager events and their flow, we can proceed with integrating it into the window system.

See MDN: drop-shadow

[jserv]

Alternatively, you can write an image viewer with drop shadow functionality to evaluate performance and visual effects in the initial stage.

For performance evaluation, you may consider the code mentioned in #55 (comment) .

[weihsinyeh]

I haven't applied stack blur to the drop shadow yet, because I don't know how to access the current screen's topmost pixel map. I want to apply the stack blur to a specific region of the topmost pixel map that overlaps with the shadow and then use this as the new shadow. The topmost pixel map is efficiently updated by refreshing only the damaged areas.

[jserv]

Compilation error/warning reported by Clang:

src/window.c:72:13: error: non-void function 'twin_window_create' should return a value [-Wreturn-type]
   72 |             return;
      |             ^
src/window.c:65:17: warning: left operand of comma operator has no effect [-Wunused-value]
   65 |         window->shadow_offset_x, window->shadow_offset_y = 50, 50;
      |         ~~~~~~  ^~~~~~~~~~~~~~~
src/window.c:65:64: warning: expression result unused [-Wunused-value]
   65 |         window->shadow_offset_x, window->shadow_offset_y = 50, 50;
      |                    

[jserv]

I am unsure how to validate this. Could you provide the relevant procedures or methods along with the expected behavior?

[jserv]

The blur appeared too strong and spread out compared to typical drop shadow effects found in compositing window managers. Would you adjust the Gaussian kernel to create a tighter, more natural-looking shadow?

[weihsinyeh]

Do you want to directly reduce kernel size or use the gradient method to reduce kernel size?

[jserv]

Do you want to directly reduce kernel size or use the gradient method to reduce kernel size?

For window compositing, the blur effect should only be applied to the window decorator when creating drop shadows, not to the entire window. The kernel size shrinks.

[weihsinyeh]

Do all windows need to have the drop shadow feature? And only the window on the top layer will display the drop shadow.

[jserv]

Do all windows need to have the drop shadow feature? And only the window on the top layer will display the drop shadow.

Blur effects are only applied to the active window, using drop shadow to make it visually distinct.

[jserv]

It looks much better now.

The latest update enforces blur effects on the active window, matching the standard behavior of compositing window managers. To enhance the visual depth, we should replace the right and bottom window borders with drop shadows, creating darker edges that give a more dimensional appearance. This means disabling the standard border rendering on those sides and implementing drop shadow effects instead.

Reference video: Apply Blur to xfce 4 Desktop Manager
picom is a compositor for X, and a fork of Compton.

[weihsinyeh]

This is the version that directly applies the shadow.

This is the version where the shadow has a gradient effect.

Is "Replace the right and bottom window borders with drop shadows, creating darker edges that give a more dimensional appearance" referring to one of these two?

[jserv]

Is "Replace the right and bottom window borders with drop shadows, creating darker edges that give a more dimensional appearance" referring to one of these two?

Yes, exactly.

[jserv]

The shadow should be aligned with the right and bottom borders, meaning the right shadow should be positioned at the top-right corner of the active window, while the bottom shadow should be placed at the bottom-left corner of the active window.

Action items:

• Adjust the gradient effect region to make it narrower and more visually natural.
• Make the drop shadow feature configurable via make config. If the feature is set, no bottom-right window decorator would appear.
• Avoid changing function prototype of twin_window_create, making drop shadow independent from the configurations.
• Ensure that drop shadow feature works with Pixman renderer instead of the built-in one.

[weihsinyeh]

This version will use the active_pix and prev_active_pix pointers that the function twin_active_pixmap() find in #88. This aims to avoid identifying the currently/previously active pixel map twice.

[weihsinyeh]

This version adds an implementation in the function twin_shadow_border() to handle the case where the vertical shadow offset is larger than the horizontal shadow offset, aiming to prevent heap buffer overflow.

[jserv]

I don't think it is worthy to have an application for stack blur. Any idea to keep it?

[weihsinyeh]

The apps_blur() function currently only resizes tux.png. This function isn't worthwhile to show by creating a standalone window feature. If it is still not worthy to have an application by adding another function, "blur," the apps_blur() function could be removed entirely.

[jserv]

The drop shadow feature's availability depends on configuration settings, so it should not expose any public functions.

[weihsinyeh]

The drop shadow functionality relies on the blur effect, but the blur effect is designed to be used independently as well. This is why in draw.c, the function twin_shadow_border() is conditionally built, while the function twin_stack_blur() is not.

[jserv]

When using xcompmgr with the arguments -c -C -f F, I noticed it produced a common drop shadow effect rather than stack blur. I actually prefer how xcompmgr renders these drop shadows - they appear more natural and aesthetically pleasing.

[jserv]

Additionally, there will be an extra gap.

Is it feasible to eliminate the extra gap by skipping resize icon? That is,

--- a/src/window.c
+++ b/src/window.c
@@ -274,12 +274,6 @@ static void twin_window_frame(twin_window_t *window)
         twin_matrix_translate(&m, close_x, icon_y);
         twin_matrix_scale(&m, icon_size, icon_size);
         twin_icon_draw(pixmap, TwinIconClose, m);
-
-        twin_matrix_identity(&m);
-        twin_matrix_translate(&m, resize_x, resize_y);
-        twin_matrix_scale(&m, twin_int_to_fixed(TWIN_TITLE_HEIGHT),
-                          twin_int_to_fixed(TWIN_TITLE_HEIGHT));
-        twin_icon_draw(pixmap, TwinIconResize, m);
     }
 
     twin_pixmap_clip(pixmap, window->client.left, window->client.top,

[weihsinyeh]

This modification removes the original extra gap while retaining the original resized icon.

[jserv]

It looks much better now! However, when Pixman based rendering is used, there is no drop shadow appearing.

[weihsinyeh]

I only found that there is no drop shadow appearing when Pixman based rendering is used once. However, when I try to reproduce the issuse, it render normally.
The following image is rendered by Pixman.

The following image is rendered by built-in way.

The way to identify them is that image rendered by Pixman will have jagged black circle.

[jserv]

This function should be built only if PNG support is specified.

[ndsl7109256]

Maybe you could define 10 as a macro with a meaningful name here.

[jserv]

Furthermore, use Kconfig to specify the shadow related configurations.

[ndsl7109256]

I'm not sure if placing twin_drop_shadow in twin_screen_update is appropriate(So is the logic that handle the color of activate window). From my understanding, twin_screen_update serves as a bridge to rendering backends, and it gets triggered whenever there are any frame updates. For example, every time a GIF frame updates, twin_screen_update is called. With this change, every GIF frame update would require checking twin_drop_shadow, which is redundant.

Maybe we could handle these window events in twin_window_dispatch. I think an additional event might be needed for deactivating a window.

[jserv]

Will these macros be promoted in private headers?