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.

Sign up for GitHub

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

Fix line join artifacts with 180º or very sharp angles #4008

Merged
merged 5 commits into from
Jan 18, 2017
Merged

Fix line join artifacts with 180º or very sharp angles #4008

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
07c79f8
Some fixes for line-artifacts: miter joins when angles are 180º or ve…
Jan 14, 2017
bd5df46
180º joins were still backward, just masked by extra vertex step: fli…
Jan 17, 2017
1b053c5
Rm unnecessary line diff [ci skip]
Jan 17, 2017
448463f
Add render tests for line join fixes
Jan 18, 2017
5eb1fd3
Add ignores to native line-join tests for the time being
Jan 18, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 12 additions & 3 deletions js/data/bucket/line_bucket.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ function addLineVertex(layoutVertexBuffer, point, extrude, tx, ty, dir, linesofa
(point.x << 1) | tx,
(point.y << 1) | ty,
// a_data
// add 128 to store an byte in an unsigned byte
// add 128 to store a byte in an unsigned byte
Math.round(EXTRUDE_SCALE * extrude.x) + 128,
Math.round(EXTRUDE_SCALE * extrude.y) + 128,
// Encode the -1/0/1 direction value into the first two bits of .z of a_data.
Expand Down Expand Up @@ -161,6 +161,15 @@ class LineBucket extends Bucket {
// of the segments between the previous line and the next line.
let joinNormal = prevNormal.add(nextNormal)._unit();

if (isNaN(joinNormal.x) && isNaN(joinNormal.y) && join === 'miter') {
// In the case of 180° angles, the prev and next normals cancel
// each other out: prevNormal + nextNormal = (0, 0), its
// magnitude is 0, so the unit vector becomes (NaN, NaN). We
// can use the prevNormal, though, since we are confident this
// is a 180° angle.
joinNormal = prevNormal;
nextNormal._mult(-1);
}
/* joinNormal prevNormal
* ↖ ↑
* .________. prevVertex
Expand Down Expand Up @@ -207,7 +216,7 @@ class LineBucket extends Bucket {

if (currentJoin === 'bevel') {
// The maximum extrude length is 128 / 63 = 2 times the width of the line
// so if miterLength >= 2 we need to draw a different type of bevel where.
// so if miterLength >= 2 we need to draw a different type of bevel here.
if (miterLength > 2) currentJoin = 'flipbevel';

// If the miterLength is really small and the line bevel wouldn't be visible,
Expand All @@ -228,7 +237,7 @@ class LineBucket extends Bucket {

if (miterLength > 100) {
// Almost parallel lines
joinNormal = nextNormal.clone();
joinNormal = nextNormal.clone().mult(-1);

} else {
const direction = prevNormal.x * nextNormal.y - prevNormal.y * nextNormal.x > 0 ? -1 : 1;
Expand Down
Binary file modified test/integration/render-tests/line-join/bevel-transparent/expected.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
55 changes: 43 additions & 12 deletions test/integration/render-tests/line-join/bevel-transparent/style.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,12 @@
"version": 8,
"metadata": {
"test": {
"width": 64,
"width": 112,
"height": 64,
"diff": 0.00075
"diff": 0.00075,
"ignored":{
"native": "https://github.com/mapbox/mapbox-gl-native/issues/7778"
}
}
},
"sources": {
Expand All @@ -15,43 +18,71 @@
"coordinates": [
[
[
-14,
-24,
-16
],
[
-14,
-24,
0
],
[
-14,
-24,
16
]
],
[
[
-3,
-13,
-16
],
[
-3,
-13,
0
],
[
0,
-10,
16
]
],
[
[
-2,
-16
],
[
2,
16
],
[
6,
-16
]
],
[
[
14,
-16
],
[
14,
16
],
[
14,
0
]
],
[
[
8,
24,
-16
],
[
12,
24,
16
],
[
16,
24.2,
-16
]
]
Expand All @@ -73,4 +104,4 @@
}
}
]
}
}
Binary file modified test/integration/render-tests/line-join/bevel/expected.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
55 changes: 43 additions & 12 deletions test/integration/render-tests/line-join/bevel/style.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,12 @@
"version": 8,
"metadata": {
"test": {
"width": 64,
"width": 112,
"height": 64,
"diff": 0.00075
"diff": 0.00075,
"ignored":{
"native": "https://github.com/mapbox/mapbox-gl-native/issues/7778"
}
}
},
"sources": {
Expand All @@ -15,43 +18,71 @@
"coordinates": [
[
[
-14,
-24,
-16
],
[
-14,
-24,
0
],
[
-14,
-24,
16
]
],
[
[
-3,
-13,
-16
],
[
-3,
-13,
0
],
[
0,
-10,
16
]
],
[
[
-2,
-16
],
[
2,
16
],
[
6,
-16
]
],
[
[
14,
-16
],
[
14,
16
],
[
14,
0
]
],
[
[
8,
24,
-16
],
[
12,
24,
16
],
[
16,
24.2,
-16
]
]
Expand All @@ -72,4 +103,4 @@
}
}
]
}
}
Binary file modified test/integration/render-tests/line-join/default/expected.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
55 changes: 43 additions & 12 deletions test/integration/render-tests/line-join/default/style.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,12 @@
"version": 8,
"metadata": {
"test": {
"width": 64,
"width": 112,
"height": 64,
"diff": 0.00075
"diff": 0.00075,
"ignored":{
"native": "https://github.com/mapbox/mapbox-gl-native/issues/7778"
}
}
},
"sources": {
Expand All @@ -15,43 +18,71 @@
"coordinates": [
[
[
-14,
-24,
-16
],
[
-14,
-24,
0
],
[
-14,
-24,
16
]
],
[
[
-3,
-13,
-16
],
[
-3,
-13,
0
],
[
0,
-10,
16
]
],
[
[
-2,
-16
],
[
2,
16
],
[
6,
-16
]
],
[
[
14,
-16
],
[
14,
16
],
[
14,
0
]
],
[
[
8,
24,
-16
],
[
12,
24,
16
],
[
16,
24.2,
-16
]
]
Expand All @@ -69,4 +100,4 @@
}
}
]
}
}
Binary file modified test/integration/render-tests/line-join/miter-transparent/expected.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading