Add 'circle-pitch-alignment' property.

Follows model of 'text-pitch-alignment'. Requested in issue #4120.
mapbox · Jul 3, 2017 · c4ae954 · c4ae954
1 parent 65eb624
commit c4ae954
Show file tree

Hide file tree

Showing 11 changed files with 246 additions and 12 deletions.
diff --git a/debug/circles.html b/debug/circles.html
@@ -58,7 +58,9 @@
                     [{ zoom: 6, value: 0 }, 'blue'],
                     [{ zoom: 6, value: 100 }, 'green']
                 ]
-            }
+            },
+            "circle-pitch-scale": "map",
+            "circle-pitch-alignment": "map"
         }
     });
 });

diff --git a/src/render/draw_circle.js b/src/render/draw_circle.js
@@ -1,5 +1,6 @@
 
 const browser = require('../util/browser');
+const pixelsToTileUnits = require('../source/pixels_to_tile_units');
 
 module.exports = drawCircles;
 
@@ -28,13 +29,14 @@ function drawCircles(painter, sourceCache, layer, coords) {
         const program = painter.useProgram('circle', programConfiguration);
         programConfiguration.setUniforms(gl, program, layer, {zoom: painter.transform.zoom});
 
-        if (layer.paint['circle-pitch-scale'] === 'map') {
-            gl.uniform1i(program.u_scale_with_map, true);
-            gl.uniform2f(program.u_extrude_scale,
-                painter.transform.pixelsToGLUnits[0] * painter.transform.cameraToCenterDistance,
-                painter.transform.pixelsToGLUnits[1] * painter.transform.cameraToCenterDistance);
+        gl.uniform1f(program.u_camera_to_center_distance, painter.transform.cameraToCenterDistance);
+        gl.uniform1i(program.u_scale_with_map, layer.paint['circle-pitch-scale'] === 'map');
+        if (layer.paint['circle-pitch-alignment'] === 'map') {
+            gl.uniform1i(program.u_pitch_with_map, true);
+            const pixelRatio = pixelsToTileUnits(tile, 1, painter.transform.zoom);
+            gl.uniform2f(program.u_extrude_scale, pixelRatio, pixelRatio);
         } else {
-            gl.uniform1i(program.u_scale_with_map, false);
+            gl.uniform1i(program.u_pitch_with_map, false);
             gl.uniform2fv(program.u_extrude_scale, painter.transform.pixelsToGLUnits);
         }
 

diff --git a/src/shaders/circle.vertex.glsl b/src/shaders/circle.vertex.glsl
@@ -1,6 +1,8 @@
 uniform mat4 u_matrix;
 uniform bool u_scale_with_map;
+uniform bool u_pitch_with_map;
 uniform vec2 u_extrude_scale;
+uniform highp float u_camera_to_center_distance;
 
 attribute vec2 a_pos;
 
@@ -28,12 +30,28 @@ void main(void) {
 
     // multiply a_pos by 0.5, since we had it * 2 in order to sneak
     // in extrusion data
-    gl_Position = u_matrix * vec4(floor(a_pos * 0.5), 0, 1);
-
-    if (u_scale_with_map) {
-        gl_Position.xy += extrude * (radius + stroke_width) * u_extrude_scale;
+    vec2 circle_center = floor(a_pos * 0.5);
+    if (u_pitch_with_map) {
+        vec2 corner_position = circle_center;
+        if (u_scale_with_map) {
+            corner_position += extrude * (radius + stroke_width) * u_extrude_scale;
+        } else {
+            // Pitching the circle with the map effectively scales it with the map
+            // To counteract the effect for pitch-scale: viewport, we rescale the
+            // whole circle based on the pitch scaling effect at its central point
+            vec4 projected_center = u_matrix * vec4(circle_center, 0, 1);
+            corner_position += extrude * (radius + stroke_width) * u_extrude_scale * (projected_center.w / u_camera_to_center_distance);
+        }
+
+        gl_Position = u_matrix * vec4(corner_position, 0, 1);
     } else {
-        gl_Position.xy += extrude * (radius + stroke_width) * u_extrude_scale * gl_Position.w;
+        gl_Position = u_matrix * vec4(circle_center, 0, 1);
+
+        if (u_scale_with_map) {
+            gl_Position.xy += extrude * (radius + stroke_width) * u_extrude_scale * u_camera_to_center_distance;
+        } else {
+            gl_Position.xy += extrude * (radius + stroke_width) * u_extrude_scale * gl_Position.w;
+        }
     }
 
     // This is a minimum blur distance that serves as a faux-antialiasing for

diff --git a/test/integration/render-tests/circle-pitch-alignment/map-scale-map/expected.png b/test/integration/render-tests/circle-pitch-alignment/map-scale-map/expected.png
diff --git a/test/integration/render-tests/circle-pitch-alignment/map-scale-map/style.json b/test/integration/render-tests/circle-pitch-alignment/map-scale-map/style.json
@@ -0,0 +1,53 @@
+{
+    "version": 8,
+    "metadata": {
+        "test": {
+            "ignored": {
+                "native": "https://github.com/mapbox/mapbox-gl-native/issues/9349"
+            },
+            "width": 512,
+            "height": 512
+        }
+    },
+    "center": [
+        0,
+        0
+    ],
+    "zoom": 0,
+    "pitch": 90,
+    "sources": {
+        "geojson": {
+            "type": "geojson",
+            "data": {
+                "type": "MultiPoint",
+                "coordinates": [
+                    [
+                        0,
+                        0
+                    ],
+                    [
+                        0,
+                        60
+                    ],
+                    [
+                        0,
+                        -60
+                    ]
+                ]
+            }
+        }
+    },
+    "layers": [
+        {
+            "id": "circles",
+            "type": "circle",
+            "source": "geojson",
+            "paint": {
+                "circle-radius": 40,
+                "circle-color": "blue",
+                "circle-pitch-scale": "map",
+                "circle-pitch-alignment": "map"
+            }
+        }
+    ]
+}
diff --git a/...integration/render-tests/circle-pitch-alignment/map-scale-viewport/expected.png b/...integration/render-tests/circle-pitch-alignment/map-scale-viewport/expected.png
diff --git a/test/integration/render-tests/circle-pitch-alignment/map-scale-viewport/style.json b/test/integration/render-tests/circle-pitch-alignment/map-scale-viewport/style.json
@@ -0,0 +1,53 @@
+{
+    "version": 8,
+    "metadata": {
+        "test": {
+            "ignored": {
+                "native": "https://github.com/mapbox/mapbox-gl-native/issues/9349"
+            },
+            "width": 512,
+            "height": 512
+        }
+    },
+    "center": [
+        0,
+        0
+    ],
+    "zoom": 0,
+    "pitch": 90,
+    "sources": {
+        "geojson": {
+            "type": "geojson",
+            "data": {
+                "type": "MultiPoint",
+                "coordinates": [
+                    [
+                        0,
+                        0
+                    ],
+                    [
+                        0,
+                        60
+                    ],
+                    [
+                        0,
+                        -60
+                    ]
+                ]
+            }
+        }
+    },
+    "layers": [
+        {
+            "id": "circles",
+            "type": "circle",
+            "source": "geojson",
+            "paint": {
+                "circle-radius": 40,
+                "circle-color": "blue",
+                "circle-pitch-scale": "viewport",
+                "circle-pitch-alignment": "map"
+            }
+        }
+    ]
+}
diff --git a/...integration/render-tests/circle-pitch-alignment/viewport-scale-map/expected.png b/...integration/render-tests/circle-pitch-alignment/viewport-scale-map/expected.png
diff --git a/test/integration/render-tests/circle-pitch-alignment/viewport-scale-map/style.json b/test/integration/render-tests/circle-pitch-alignment/viewport-scale-map/style.json
@@ -0,0 +1,53 @@
+{
+    "version": 8,
+    "metadata": {
+        "test": {
+            "ignored": {
+                "native": "https://github.com/mapbox/mapbox-gl-native/issues/9349"
+            },
+            "width": 512,
+            "height": 512
+        }
+    },
+    "center": [
+        0,
+        0
+    ],
+    "zoom": 0,
+    "pitch": 90,
+    "sources": {
+        "geojson": {
+            "type": "geojson",
+            "data": {
+                "type": "MultiPoint",
+                "coordinates": [
+                    [
+                        0,
+                        0
+                    ],
+                    [
+                        0,
+                        60
+                    ],
+                    [
+                        0,
+                        -60
+                    ]
+                ]
+            }
+        }
+    },
+    "layers": [
+        {
+            "id": "circles",
+            "type": "circle",
+            "source": "geojson",
+            "paint": {
+                "circle-radius": 40,
+                "circle-color": "blue",
+                "circle-pitch-scale": "map",
+                "circle-pitch-alignment": "viewport"
+            }
+        }
+    ]
+}
diff --git a/...ration/render-tests/circle-pitch-alignment/viewport-scale-viewport/expected.png b/...ration/render-tests/circle-pitch-alignment/viewport-scale-viewport/expected.png
diff --git a/test/integration/render-tests/circle-pitch-alignment/viewport-scale-viewport/style.json b/test/integration/render-tests/circle-pitch-alignment/viewport-scale-viewport/style.json
@@ -0,0 +1,53 @@
+{
+    "version": 8,
+    "metadata": {
+        "test": {
+            "ignored": {
+                "native": "https://github.com/mapbox/mapbox-gl-native/issues/9349"
+            },
+            "width": 512,
+            "height": 512
+        }
+    },
+    "center": [
+        0,
+        0
+    ],
+    "zoom": 0,
+    "pitch": 90,
+    "sources": {
+        "geojson": {
+            "type": "geojson",
+            "data": {
+                "type": "MultiPoint",
+                "coordinates": [
+                    [
+                        0,
+                        0
+                    ],
+                    [
+                        0,
+                        60
+                    ],
+                    [
+                        0,
+                        -60
+                    ]
+                ]
+            }
+        }
+    },
+    "layers": [
+        {
+            "id": "circles",
+            "type": "circle",
+            "source": "geojson",
+            "paint": {
+                "circle-radius": 40,
+                "circle-color": "blue",
+                "circle-pitch-scale": "viewport",
+                "circle-pitch-alignment": "viewport"
+            }
+        }
+    ]
+}