UI: Improve menu dropshadow #111794
No reviewers
Labels
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
No due date set.
Dependencies
No dependencies set.
Reference: blender/blender#111794
Loading…
Reference in New Issue
No description provided.
Delete Branch "lone_noel/blender:menu-dropshadow"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
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 improvesthe appearance of transparent nodes like frame nodes or nodes that
are muted.
Additionally this commit removes
UI_draw_box_shadow
, which was onlyused 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
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.
Nodes
Note how the area underneath the frames or the muted nodes is not darkened anymore.
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.
@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?
Yes, sharp corners are handled as a special case, since for those the shadow doesn't have to wrap around the rounded corner.
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
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 ifui_draw_dropshadow
can be adjusted to support transparency after all.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.
Here's the edge case, where the previous PR compared unfavorably, which is now fixed:
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:
This works quite nicely.
One thought, just for the street cred, is to also remove
ui_shadowbox
andUI_draw_box_shadow
. It would just mean replacing the only instance ofUI_draw_box_shadow
withui_draw_dropshadow
(with roundboxtype to UI_CNR_NONE).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
It is sooo nice seeing so much red code removal in your PR now.
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:
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.
39e9ba5e83
tod00ac9d89a
UI: Improve menu dropshadowto UI: Improve menu dropshadowUI: Improve menu dropshadowto Fix: UI: Improve menu dropshadowFix: UI: Improve menu dropshadowto Fix: UI: Improve menu dropshadowd00ac9d89a
tob7a74f0d99
Fix: UI: Improve menu dropshadowto UI: Improve menu dropshadowI 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.@blender-bot build
Awesome. Thanks!