Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Drop shadows #640

Closed
StarArawn opened this issue Jul 24, 2024 · 2 comments · Fixed by #665
Closed

Drop shadows #640

StarArawn opened this issue Jul 24, 2024 · 2 comments · Fixed by #665
Labels
help wanted Extra attention is needed

Comments

@StarArawn
Copy link

Support for drop shadows would be excellent! I did this in my own custom UI renderer by using SDF's for quads, but I imagine for any shape it might be a little bit more tricky..

You can see my quad sdf box shadow code here if it helps at all:
https://github.com/StarArawn/kayak_ui/blob/main/src/render/unified/shaders/sample_quad.wgsl#L86

@raphlinus raphlinus added the help wanted Extra attention is needed label Aug 14, 2024
@raphlinus
Copy link
Contributor

For arbitrary shapes (and blurs of layers other than images) the best bet is to do image filters, which are on the longer term roadmap but require quite a bit of architectural and infrastructure work.

Doing blurred rounded rectangles shouldn't be too hard. The code linked above is simple and efficient, but not especially accurate (you'll have curvature discontinuities) if you look at isolines. A better approach is the blurred rounded rectangle technique from my blog a few years back.

Tactically, I think the best way to implement this is as another type of gradient. The PR to add conical gradients (#435) is probably a good guideline for what's involved. In brief, getting the gradient parameters encoded, doing processing (roughly analogous to a vertex shader) in draw_leaf, and of course computing the alpha values (analogous to a fragment shader) in fine.

This is a great issue for someone to get up to speed on the Vello codebase, help would be appreciated.

@msiglreith
Copy link
Collaborator

I would take a stab at implementing as it seems pretty straightforward and I'm also in need for it 👀

github-merge-queue bot pushed a commit that referenced this issue Aug 27, 2024
Implements the blurred rounded rectangle approximation outlined in
https://raphlinus.github.io/graphics/2020/04/21/blurred-rounded-rects.html.
Closes #640

The convolution is mostly taken verbatim from
https://git.sr.ht/~raph/blurrr translated to wgsl. Added input bounds
for the `erf` function due to artifacts at `std_dev < 0.1`.

Possible optimizations would include moving parts of the precomputation
to the CPU side, right now each tile recalculates the same values.

Scene output:

![grafik](https://github.com/user-attachments/assets/22014ad8-5c37-4177-b30a-967cd7aa15d2)

---------

Co-authored-by: Daniel McNab <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
help wanted Extra attention is needed
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants