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

Cleanup stroke artifacts in scatter and text #2096

Merged
merged 14 commits into from
Jul 20, 2022
Merged

Conversation

ffreyer
Copy link
Collaborator

@ffreyer ffreyer commented Jun 25, 2022

Description

Using strokwidth > 0 in GLMakie with a non transparent (and non-background) color creates a thin outline around characters or makers in text and scatter.

With text, white stroke and glow:
Screenshot from 2022-06-25 16-19-00
With scatter, stroke only:
Screenshot from 2022-06-25 16-23-57

The reason for this is that the blending uses a transparent version of color as the blend target for stroke. So the rgb component of the strokecolor and the color get mixed at the edge, resulting in the artifacts seen above. The pr changes the reference color to be a transparent version of strokecolor at the outer edge, fixing this problem.

After:

Screenshot from 2022-06-25 16-19-13
Screenshot from 2022-06-25 16-24-10

Type of change

  • Bug fix (non-breaking change which fixes an issue)

Checklist

  • Added an entry in NEWS.md (for new features and breaking changes)

@ffreyer ffreyer changed the title Remove artifacts when using stroke Cleanup artifacts when using stroke Jun 25, 2022
@ffreyer ffreyer changed the title Cleanup artifacts when using stroke Cleanup stroke artifacts in scatter and text Jun 25, 2022
@MakieBot
Copy link
Collaborator

MakieBot commented Jun 25, 2022

Compile Times benchmark

Note, that these numbers may fluctuate on the CI servers, so take them with a grain of salt. All benchmark results are based on the mean time and negative percent mean faster than the base branch. Note, that GLMakie + WGLMakie run on an emulated GPU, so the runtime benchmark is much slower. Results are from running:

using_time = @ctime using Backend
# Compile time
create_time = @ctime fig = scatter(1:4; color=1:4, colormap=:turbo, markersize=20, visible=true)
display_time = @ctime Makie.colorbuffer(display(fig))
# Runtime
create_time = @benchmark fig = scatter(1:4; color=1:4, colormap=:turbo, markersize=20, visible=true)
display_time = @benchmark Makie.colorbuffer(display(fig))
using create display create display
GLMakie 19.63s (19.29, 20.06) 0.26+- 26.28s (25.92, 26.75) 0.28+- 23.08s (22.77, 23.56) 0.27+- 29.63ms (29.23, 30.15) 0.35+- 114.40ms (112.05, 119.37) 2.83+-
master 19.67s (19.00, 20.17) 0.44+- 26.78s (25.85, 28.16) 0.73+- 23.51s (22.90, 25.06) 0.80+- 29.44ms (29.19, 29.83) 0.22+- 114.63ms (112.55, 120.80) 2.86+-
evaluation -0.21%, -0.04s invariant (-0.11d, 0.83p, 0.35std) -1.92%, -0.5s invariant (-0.92d, 0.13p, 0.50std) -1.86%, -0.43s invariant (-0.72d, 0.22p, 0.53std) +0.65%, 0.19ms invariant (0.66d, 0.24p, 0.28std) -0.20%, -0.23ms invariant (-0.08d, 0.88p, 2.85std)
CairoMakie 12.66s (11.58, 13.19) 0.51+- 19.56s (17.87, 20.23) 0.77+- 2.39s (2.18, 2.50) 0.10+- 21.27ms (19.62, 22.37) 0.82+- 24.06ms (21.86, 24.79) 0.99+-
master 12.69s (11.73, 13.08) 0.44+- 19.50s (17.98, 20.05) 0.69+- 2.42s (2.24, 2.50) 0.09+- 21.10ms (19.56, 21.76) 0.76+- 24.10ms (21.63, 24.94) 1.12+-
evaluation -0.25%, -0.03s invariant (-0.07d, 0.90p, 0.47std) +0.30%, 0.06s invariant (0.08d, 0.89p, 0.73std) -1.00%, -0.02s invariant (-0.26d, 0.64p, 0.09std) +0.79%, 0.17ms invariant (0.21d, 0.70p, 0.79std) -0.14%, -0.03ms invariant (-0.03d, 0.95p, 1.05std)
WGLMakie 19.16s (18.81, 19.59) 0.30+- 36.44s (35.88, 37.54) 0.67+- 51.20s (50.33, 52.46) 0.91+- 29.24ms (28.15, 32.83) 1.62+- 1.98s (1.90, 2.11) 0.07+-
master 18.91s (18.64, 19.43) 0.31+- 36.86s (36.38, 37.70) 0.44+- 51.46s (50.34, 52.81) 0.94+- 28.57ms (27.82, 29.67) 0.75+- 1.96s (1.91, 2.04) 0.05+-
evaluation +1.30%, 0.25s invariant (0.81d, 0.15p, 0.31std) -1.15%, -0.42s invariant (-0.74d, 0.20p, 0.55std) -0.52%, -0.26s invariant (-0.29d, 0.60p, 0.92std) +2.29%, 0.67ms invariant (0.53d, 0.35p, 1.18std) +0.57%, 0.01s invariant (0.19d, 0.73p, 0.06std)

@asinghvi17
Copy link
Member

Looks good to me, but could you add the example you posted in the PR as a test for this situation?

@ffreyer
Copy link
Collaborator Author

ffreyer commented Jul 1, 2022

I made a new version of the marker vs rotation test with stroke and glow. I also noticed that this sometimes creates some at the edges: (y, o, ...)
Screenshot from 2022-07-02 01-11-15

The reason for this is texture bleed.

Characters are encoded with signed distance fields, so the values in the texture represent the distance from the edge of a character, with positive numbers being outside. Stroke and glow basically draw between 0 distance and strokewidth/glowwidth. If opengl ends up interpolating between a positive value and a smaller value at the edge of the glyph texture, that region can become relevant for stroke and glow again. And that is what happens here because the texture is initialized to 0. Changing that to floatmax(Float16) fixes this issue, though at large strokewidths/glowwidths it results in a sharp cutoff.

Screenshot from 2022-07-02 01-30-01

@ffreyer
Copy link
Collaborator Author

ffreyer commented Jul 2, 2022

I reduced the background value to 0.5PIXELSIZE_IN_ATLAS[] + GLYPH_PADDING[] because that should be the maximum reachable distance from the center of a glyph/character. That makes the cutoff problem a bit less of an issue

Is there a way to force the texture atlas to get regenerated with the next tagged version?

@github-actions
Copy link
Contributor

github-actions bot commented Jul 2, 2022

Missing reference images

Found 1 new images without existing references.
Upload new reference images before merging this PR.

@github-actions
Copy link
Contributor

github-actions bot commented Jul 2, 2022

Missing reference images

Found 2 new images without existing references.
Upload new reference images before merging this PR.

@github-actions
Copy link
Contributor

github-actions bot commented Jul 4, 2022

Missing reference images

Found 2 new images without existing references.
Upload new reference images before merging this PR.

@github-actions
Copy link
Contributor

github-actions bot commented Jul 5, 2022

Missing reference images

Found 2 new images without existing references.
Upload new reference images before merging this PR.

@github-actions
Copy link
Contributor

github-actions bot commented Jul 7, 2022

Missing reference images

Found 2 new images without existing references.
Upload new reference images before merging this PR.

@ffreyer ffreyer requested a review from SimonDanisch July 7, 2022 14:08
@ffreyer
Copy link
Collaborator Author

ffreyer commented Jul 7, 2022

scatter with stroke.png: Test Failed at /home/runner/work/Makie.jl/Makie.jl/ReferenceTests/src/runtests.jl:85
   Expression: score <= threshold
   Evaluated: 0.042828262466251814 <= 0.032

I guess I was too optimistic here. CairoMakie seems to stroke inwards and GLMakie outwards... (this is CairoMakie vs GLMakie)
cairomakie_stroke glmakie_stroke

Edit: I was on the wrong branch

@ffreyer
Copy link
Collaborator Author

ffreyer commented Jul 7, 2022

I also tried an over operator for blending now, doesn't seem better to me
glmakie_stroke_over

@SimonDanisch SimonDanisch merged commit 1bc0922 into master Jul 20, 2022
@SimonDanisch SimonDanisch deleted the ff/cleanup_stroke branch July 20, 2022 22:14
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants