-
-
Notifications
You must be signed in to change notification settings - Fork 3k
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
WebGL / Improve line antialiasing #15554
Conversation
📦 Preview the website for this branch here: https://deploy-preview-15554--ol-site.netlify.app/. |
a820f78
to
a1c8452
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks, @jahow! You may want to consider my comment regarding renderSync()
vs. rendercomplete
event. Looks good otherwise.
requestAnimationFrame(() => { | ||
map.renderSync(); | ||
render({ | ||
message: 'renders four polygons with various pattern fills', | ||
}); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm wondering if it wouldn't be better to do something like this instead:
map.once('rendercomplete', () => {
render({
message: 'renders four polygons with various pattern fills',
});
});
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Amended the first commit with this change
a1c8452
to
f30e34f
Compare
This makes sure that icons are loaded before rendering
Antialiasing is now done on the +0.5 -0.5 range; previously it was done on the +0 -1 range, which meant line width was always 1px less that expected
47b8e14
to
ae4b923
Compare
thanks for the quick review! |
Antialiasing is now done on the
+0.5 -0.5
range; previously it was done on the+0 -1
range, which meant line width was always 1px less that expected.Before (line of 1px width):
![image](https://private-user-images.githubusercontent.com/10629150/304700521-a0a4bdee-3643-42e1-84c7-7b6d8889f2cb.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjE4MDE2NjUsIm5iZiI6MTcyMTgwMTM2NSwicGF0aCI6Ii8xMDYyOTE1MC8zMDQ3MDA1MjEtYTBhNGJkZWUtMzY0My00MmUxLTg0YzctN2I2ZDg4ODlmMmNiLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MjQlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzI0VDA2MDkyNVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTkyOTlkYzg3MTc4YTA1Njc2ZWJmNjk1NzI5OWU4N2UzZGM3ODk0OTM5MDU3YWM4ZTUzZmU4NDQ4OTJjYzM0ZWYmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.eVdl11Sz8_ygC6OkThrTmGnUuPtl3CpLKTuzzqKuhDE)
After:
![image](https://private-user-images.githubusercontent.com/10629150/304700197-27fa4bdc-0758-4d1d-8fce-7b551106bb83.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjE4MDE2NjUsIm5iZiI6MTcyMTgwMTM2NSwicGF0aCI6Ii8xMDYyOTE1MC8zMDQ3MDAxOTctMjdmYTRiZGMtMDc1OC00ZDFkLThmY2UtN2I1NTExMDZiYjgzLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MjQlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzI0VDA2MDkyNVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTE3MDVkMWMxODM1MDJmOTlhN2FmOWIzNGYyZmUwNjkxODM0MDlmZWVkOGUzNGNmNTVlMzkyYWNiMDk3YjhiZDAmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.bTTe4AEiDWuVe3HEcgcWh73lksKKe1VBILGvG1HdJOY)
This PR also contains a workaround for the webgl fill and line patterns that sometimes fail because the images might not be ready for rendering.