UI: Improve menu dropshadow #111794

Merged
Harley Acheson merged 7 commits from lone_noel/blender:menu-dropshadow into main 2023-11-24 22:50:32 +01:00
Member

Adjust ui_draw_dropshadow so the inside of the shadow is transparent.

This allows for it to be also used for the dropshadow under popup
menus, making round_box_shadow_edges obsolete. It also improves
the appearance of transparent nodes like frame nodes or nodes that
are muted.

Additionally this commit removes UI_draw_box_shadow, which was only
used for auto complete suggestions in the text editor, and also
replaces it with ui_draw_dropshadow.

This adresses some of the issues in #93371


Issue

In certain configurations e.g. large rounded corners of menus and small menu shadows or transparent menu backgrounds with large sahdows the shadow creates undesired artefacts around or underneath the menu.

Comparisons

*Note that I used a white theme and quite a strong shadow which makes the artifacts more apparent than they are for most themes.

Extreme cases where the current approach fails

Parameters main branch pull request
menu roundness: 1.0, shadow: 2 px
transparent menu, shadow: 12 px

Default values

Here's a comparison using a menu roundness of 0.4 and a shadow width of 2 px, just like the default "Blender Dark" theme. Currently the sadow in the PR is a lot more subtle when the width is very small.

Parameters main branch pull request
menu roundness: 0.4, shadow: 2 px

Nodes

Note how the area underneath the frames or the muted nodes is not darkened anymore.

main branch updated PR
main_shadow_transparent-nodes.png pr_shadow_transparent-nodes.png

Text Editor

The old shadow was only at the bottom and right edge of the suggestion pupup, but otherwise I tried to match it as close as possible.

main branch pull request
main_text-editor.png pr_text-editor.png
Adjust `ui_draw_dropshadow` so the inside of the shadow is transparent. This allows for it to be also used for the dropshadow under popup menus, making `round_box_shadow_edges` obsolete. It also improves the appearance of transparent nodes like frame nodes or nodes that are muted. Additionally this commit removes `UI_draw_box_shadow`, which was only used for auto complete suggestions in the text editor, and also replaces it with `ui_draw_dropshadow`. This adresses some of the issues in #93371 --- ### Issue In certain configurations e.g. large rounded corners of menus and small menu shadows or transparent menu backgrounds with large sahdows the shadow creates undesired artefacts around or underneath the menu. ### Comparisons *Note that I used a white theme and quite a strong shadow which makes the artifacts more apparent than they are for most themes. #### Extreme cases where the current approach fails |Parameters|main branch|pull request| |---|---|---| |**menu roundness: 1.0, shadow: 2 px**|![](https://projects.blender.org/attachments/f610bdb6-7be8-4208-8203-a06c47fa310c)|![](https://projects.blender.org/attachments/d1367bb6-a2b5-4be3-b32d-b30ac3addc64)| |**transparent menu, shadow: 12 px**|![](https://projects.blender.org/attachments/82b59aa0-3c53-42ef-aba4-2c393632aeb2)|![](https://projects.blender.org/attachments/43518e88-4096-48a9-b93d-b8c641e82fbc)| #### Default values Here's a comparison using a menu roundness of 0.4 and a shadow width of 2 px, just like the default "Blender Dark" theme. Currently the sadow in the PR is a lot more subtle when the width is very small. |Parameters|main branch|pull request| |---|---|---| |**menu roundness: 0.4, shadow: 2 px**|![](https://projects.blender.org/attachments/3dc842a5-d7b1-4d86-90dc-2890b9caa923)|![](https://projects.blender.org/attachments/2dd423d5-7044-4afe-9225-a84e6d1c3e85)| #### Nodes Note how the area underneath the frames or the muted nodes is not darkened anymore. |main branch|updated PR| |---|---| |![main_shadow_transparent-nodes.png](/attachments/dab95124-9e65-43eb-9b62-14522bb5cc50)|![pr_shadow_transparent-nodes.png](/attachments/ed926f54-451f-4bbb-bf47-7c04740151f6)| #### Text Editor The old shadow was only at the bottom and right edge of the suggestion pupup, but otherwise I tried to match it as close as possible. |main branch|pull request| |---|---| |![main_text-editor.png](/attachments/adae5200-fbd2-4310-824c-7bb0ef0c2dde)|![pr_text-editor.png](/attachments/5d70c2ae-766b-467d-b90b-1902ceb55074)|
Leon Schittek added this to the User Interface project 2023-09-01 16:47:44 +02:00
Pablo Vazquez added the
Module
User Interface
label 2023-09-01 17:06:35 +02:00
Member

@lone_noel

Haven't yet tested this, but love it!

In your section about the situation with worse result, you say it is an opaque menu with large shadow and "very small (but not 0) corner roundness". Are you implying that this is not a problem if the corner radius is zero? Your example shows a result that looks indistinguishable from having 0 corner radius, so there should be a point where we can clamp very small values to exactly zero?

@lone_noel Haven't yet tested this, but love it! In your section about the situation with worse result, you say it is an opaque menu with large shadow and "very small (but not 0) corner roundness". Are you implying that this is not a problem if the corner radius is zero? Your example shows a result that looks indistinguishable from having 0 corner radius, so there should be a point where we can clamp very small values to exactly zero?
Author
Member

Are you implying that this is not a problem if the corner radius is zero?

Yes, sharp corners are handled as a special case, since for those the shadow doesn't have to wrap around the rounded corner.

Your example shows a result that looks indistinguishable from having 0 corner radius, so there should be a point where we can clamp very small values to exactly zero?

True! I added a heuristic to treat the corners as sharp when the corner radius is small and the shadow is larger than the rounded corner.
I went back and forth on this quite a lot and couldn't really decide where to put the cutoff. Maybe now corners can get too round before switching over?

Table with screenshots
roundness: screenshot
0.0 tweak_roundness-00_shadow-12.png
0.1 tweak_roundness-01_shadow-12.png
0.4 tweak_roundness-04_shadow-12.png
0.5 (cutoff at resolution scale 2.0) tweak_roundness-05_shadow-12.png
1.0 tweak_roundness-10_shadow-12.png
>Are you implying that this is not a problem if the corner radius is zero? Yes, sharp corners are handled as a special case, since for those the shadow doesn't have to wrap around the rounded corner. > Your example shows a result that looks indistinguishable from having 0 corner radius, so there should be a point where we can clamp very small values to exactly zero? True! I added a heuristic to treat the corners as sharp when the corner radius is small and the shadow is larger than the rounded corner. I went back and forth on this quite a lot and couldn't really decide where to put the cutoff. Maybe now corners can get too round before switching over? <details> <summary>Table with screenshots</summary> |roundness:|screenshot| |---|---| |**0.0**|![tweak_roundness-00_shadow-12.png](/attachments/f41b40bc-aaf9-431e-b2df-37cc7acdfdb5)| |**0.1**|![tweak_roundness-01_shadow-12.png](/attachments/2b240457-9813-4b73-9cb1-a3839178b386)| |**0.4**|![tweak_roundness-04_shadow-12.png](/attachments/a1ae047e-9c39-4377-89ab-9439368bafb6)| |**0.5 (cutoff at resolution scale 2.0)**|![tweak_roundness-05_shadow-12.png](/attachments/9468e4fb-5151-40e5-a3c8-be9072e7c4da)| |**1.0**|![tweak_roundness-10_shadow-12.png](/attachments/c378db09-2f57-45a0-a846-191eed20cb3a)| </details>
Member

Note that this work is a bit more important than it might seem. If these shadows work correctly then we no longer have to use the other shadow routine for nodes. That other one requires an opaque background, but nodes could benefit from the ability to become transparent-ish in some states.

Note that this work is a bit more important than it might seem. If these shadows work correctly then we no longer have to use the other shadow routine for nodes. That other one requires an opaque background, but nodes could benefit from the ability to become transparent-ish in some states.
Author
Member

Note that this work is a bit more important than it might seem. If these shadows work correctly then we no longer have to use the other shadow routine for nodes. That other one requires an opaque background, but nodes could benefit from the ability to become transparent-ish in some states.

I see. In that case I'll investigate how well the approach in widget_softshadow scales, when drawing a lot of nodes, or if ui_draw_dropshadow can be adjusted to support transparency after all.

> Note that this work is a bit more important than it might seem. If these shadows work correctly then we no longer have to use the other shadow routine for nodes. That other one requires an opaque background, but nodes could benefit from the ability to become transparent-ish in some states. I see. In that case I'll investigate how well the approach in `widget_softshadow` scales, when drawing a lot of nodes, or if `ui_draw_dropshadow` can be adjusted to support transparency after all.
Author
Member

So I adjusted ui_draw_dropshadow and the related shaders used for the node's dropshadow to also support transparency. So I was able to deduplicate the dropshadow code.
I also managed to fix the falloff at the top which was a drawbacks in the previous version.

Parameters main branch updated PR previous PR
transparent menu, shadow: 12 px main_transparent_rounding-10_shadow-12.png prv2_transparent_rounding-10_shadow-12.png.png pr_transparent_rounding-10_shadow-12.png

Here's the edge case, where the previous PR compared unfavorably, which is now fixed:

Parameters main branch updated PR previous PR
menu roundness: 0.1, shadow: 12 px main_rounding-01_shadow-12.png prv2_rounding-01_shadow-12.png pr_rounding-01_shadow-12.png

The shadow now doesn't darken the area underneath transparent nodes. We can still decide, whether that's a good thing or we want to keep the option to have that area filled:

main branch updated PR
main_shadow_transparent-nodes.png pr_shadow_transparent-nodes.png
So I adjusted `ui_draw_dropshadow` and the related shaders used for the node's dropshadow to also support transparency. So I was able to deduplicate the dropshadow code. I also managed to fix the falloff at the top which was a drawbacks in the previous version. |Parameters|main branch|updated PR| previous PR | |---|---|---|---| |**transparent menu, shadow: 12 px**|![main_transparent_rounding-10_shadow-12.png](/attachments/fdb6990e-c515-44fd-9cad-5ef8d6dcf693)|![prv2_transparent_rounding-10_shadow-12.png.png](/attachments/636dd0b7-8d3d-4826-b0cb-abebeb181e75)|![pr_transparent_rounding-10_shadow-12.png](/attachments/8d0806fa-bc09-460b-b04b-d764b160abc1)| Here's the edge case, where the previous PR compared unfavorably, which is now fixed: |Parameters|main branch|updated PR| previous PR| |---|---|---|---| |**menu roundness: 0.1, shadow: 12 px**|![main_rounding-01_shadow-12.png](/attachments/a3d8dad3-508b-4a8e-957b-e3ae997e6e30)|![prv2_rounding-01_shadow-12.png](/attachments/d0aef357-0ec6-4f0a-9194-22200030c0b2)|![pr_rounding-01_shadow-12.png](/attachments/061f43f3-98a1-4a25-a701-a2844e8f18c7)| The shadow now doesn't darken the area underneath transparent nodes. We can still decide, whether that's a good thing or we want to keep the option to have that area filled: |main branch|updated PR| |---|---| |![main_shadow_transparent-nodes.png](/attachments/dab95124-9e65-43eb-9b62-14522bb5cc50)|![pr_shadow_transparent-nodes.png](/attachments/ed926f54-451f-4bbb-bf47-7c04740151f6)|
Member

This works quite nicely.

One thought, just for the street cred, is to also remove ui_shadowbox and UI_draw_box_shadow. It would just mean replacing the only instance of UI_draw_box_shadow with ui_draw_dropshadow (with roundboxtype to UI_CNR_NONE).

This works quite nicely. One thought, just for the street cred, is to also remove `ui_shadowbox` and `UI_draw_box_shadow`. It would just mean replacing the only instance of `UI_draw_box_shadow` with `ui_draw_dropshadow` (with roundboxtype to UI_CNR_NONE).
Author
Member

I originally left ui_shadowbox alone because it does a different kind of shadow (it only does a shadow at the bottom-right, rather than left-bottom-right), but for that one occasion it's probably close enough.

I tweaked the values to match the old shadow pretty closely, just to not change the design too much. This could be tied in with the theme settings in the future.

Comparison

main branch pull request
main_text-editor.png pr_text-editor.png
I originally left `ui_shadowbox` alone because it does a different kind of shadow (it only does a shadow at the bottom-right, rather than *left*-bottom-right), but for that one occasion it's probably close enough. I tweaked the values to match the old shadow pretty closely, just to not change the design too much. This could be tied in with the theme settings in the future. #### Comparison |main branch|pull request| |---|---| |![main_text-editor.png](/attachments/adae5200-fbd2-4310-824c-7bb0ef0c2dde)|![pr_text-editor.png](/attachments/5d70c2ae-766b-467d-b90b-1902ceb55074)|
Member

It is sooo nice seeing so much red code removal in your PR now.

It is sooo nice seeing so much red code removal in your PR now.
Author
Member

I've updated the description and screenshots in the first post to reflect the current state of the PR.

While doing that I noticed that for a small shadow width (like the 2px that is used in the default theme), the shadow is quite a bit less prominent than before:

Parameters main branch pull request
menu roundness: 0.4, shadow: 2 px

Not sure if that's something that I should try to make up for in the shadow function to match the old implementation more closely or if we should just adjusted the themes a bit.

I've updated the description and screenshots in the first post to reflect the current state of the PR. While doing that I noticed that for a small shadow width (like the 2px that is used in the default theme), the shadow is quite a bit less prominent than before: |Parameters|main branch|pull request| |---|---|---| |**menu roundness: 0.4, shadow: 2 px**|![](https://projects.blender.org/attachments/3dc842a5-d7b1-4d86-90dc-2890b9caa923)|![](https://projects.blender.org/attachments/2dd423d5-7044-4afe-9225-a84e6d1c3e85)| Not sure if that's something that I should try to make up for in the shadow function to match the old implementation more closely or if we should just adjusted the themes a bit.
Leon Schittek force-pushed menu-dropshadow from 39e9ba5e83 to d00ac9d89a 2023-10-04 15:04:44 +02:00 Compare
Leon Schittek changed title from UI: Improve menu dropshadow to UI: Improve menu dropshadow 2023-10-04 15:04:59 +02:00
lone_noel changed target branch from main to blender-v4.0-release 2023-10-04 15:05:01 +02:00
Leon Schittek changed title from UI: Improve menu dropshadow to Fix: UI: Improve menu dropshadow 2023-10-04 15:06:09 +02:00
Leon Schittek changed title from Fix: UI: Improve menu dropshadow to Fix: UI: Improve menu dropshadow 2023-11-09 23:27:17 +01:00
lone_noel changed target branch from blender-v4.0-release to main 2023-11-09 23:27:22 +01:00
Leon Schittek force-pushed menu-dropshadow from d00ac9d89a to b7a74f0d99 2023-11-09 23:31:36 +01:00 Compare
Leon Schittek changed title from Fix: UI: Improve menu dropshadow to UI: Improve menu dropshadow 2023-11-09 23:33:29 +01:00
Harley Acheson added 2 commits 2023-11-24 21:58:01 +01:00
Harley Acheson requested review from Harley Acheson 2023-11-24 21:58:18 +01:00
Member

I think we should stop overthinking this and just treat your improvement as the new normal. It doesn't have any negative impact and any differences are very slight. We catch look for any minor improvements we can make during this release.

I updated the PR to the current state of main and make only slight changes. Removed one unneeded include from node_draw.cc. And I added to the comment regarding the outline emphasis in node_draw_shadow to make it clear that this is a line inside the outline and not really to do with the shadow. I realize this is just a feature that was in ui_draw_dropshadow so makes sense to keep it. But we might want to move that later to where the outline is drawn.

I think we should stop overthinking this and just treat your improvement as the new normal. It doesn't have any negative impact and any differences are very slight. We catch look for any minor improvements we can make during this release. I updated the PR to the current state of main and make only slight changes. Removed one unneeded include from node_draw.cc. And I added to the comment regarding the outline emphasis in node_draw_shadow to make it clear that this is a line _inside_ the outline and not really to do with the shadow. I realize this is just a feature that was in `ui_draw_dropshadow` so makes sense to keep it. But we might want to move that later to where the outline is drawn.
Member

@blender-bot build

@blender-bot build
Harley Acheson approved these changes 2023-11-24 22:45:43 +01:00
Harley Acheson left a comment
Member

Awesome. Thanks!

Awesome. Thanks!
Harley Acheson merged commit 0335b6a3b7 into main 2023-11-24 22:50:32 +01:00
Leon Schittek deleted branch menu-dropshadow 2023-11-25 10:08:50 +01:00
Som1Lse referenced this issue from a commit 2023-11-27 18:49:10 +01:00
Sign in to join this conversation.
No reviewers
No Label
Interest
Alembic
Interest
Animation & Rigging
Interest
Asset Browser
Interest
Asset Browser Project Overview
Interest
Audio
Interest
Automated Testing
Interest
Blender Asset Bundle
Interest
BlendFile
Interest
Collada
Interest
Compatibility
Interest
Compositing
Interest
Core
Interest
Cycles
Interest
Dependency Graph
Interest
Development Management
Interest
EEVEE
Interest
EEVEE & Viewport
Interest
Freestyle
Interest
Geometry Nodes
Interest
Grease Pencil
Interest
ID Management
Interest
Images & Movies
Interest
Import Export
Interest
Line Art
Interest
Masking
Interest
Metal
Interest
Modeling
Interest
Modifiers
Interest
Motion Tracking
Interest
Nodes & Physics
Interest
OpenGL
Interest
Overlay
Interest
Overrides
Interest
Performance
Interest
Physics
Interest
Pipeline, Assets & IO
Interest
Platforms, Builds & Tests
Interest
Python API
Interest
Render & Cycles
Interest
Render Pipeline
Interest
Sculpt, Paint & Texture
Interest
Text Editor
Interest
Translations
Interest
Triaging
Interest
Undo
Interest
USD
Interest
User Interface
Interest
UV Editing
Interest
VFX & Video
Interest
Video Sequencer
Interest
Virtual Reality
Interest
Vulkan
Interest
Wayland
Interest
Workbench
Interest: X11
Legacy
Blender 2.8 Project
Legacy
Milestone 1: Basic, Local Asset Browser
Legacy
OpenGL Error
Meta
Good First Issue
Meta
Papercut
Meta
Retrospective
Meta
Security
Module
Animation & Rigging
Module
Core
Module
Development Management
Module
EEVEE & Viewport
Module
Grease Pencil
Module
Modeling
Module
Nodes & Physics
Module
Pipeline, Assets & IO
Module
Platforms, Builds & Tests
Module
Python API
Module
Render & Cycles
Module
Sculpt, Paint & Texture
Module
Triaging
Module
User Interface
Module
VFX & Video
Platform
FreeBSD
Platform
Linux
Platform
macOS
Platform
Windows
Priority
High
Priority
Low
Priority
Normal
Priority
Unbreak Now!
Status
Archived
Status
Confirmed
Status
Duplicate
Status
Needs Info from Developers
Status
Needs Information from User
Status
Needs Triage
Status
Resolved
Type
Bug
Type
Design
Type
Known Issue
Type
Patch
Type
Report
Type
To Do
No Milestone
No project
No Assignees
2 Participants
Notifications
Due Date
The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.

No due date set.

Dependencies

No dependencies set.

Reference: blender/blender#111794
No description provided.