Port asymmetric viewport rendering to gl-js

src/geo/edge_insets.js

@@ -0,0 +1,105 @@
+// @flow
+import { number } from "../style-spec/util/interpolate";
+import Point  from "@mapbox/point-geometry";
+
+/**
+ * An `EdgeInset` object represents screen space padding applied to the edges of the viewport.
+ * This shifts the apprent center or the vanishing point of the map. This is useful for adding floating UI elements
+ * on top of the map and having the vanishing point shift as UI elements resize.
+ *
+ * @param {number} [top=0]
+ * @param {number} [bottom=0]
+ * @param {number} [left=0]
+ * @param {number} [right=0]
+ */
+class EdgeInsets {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+
+    constructor(top: number = 0, bottom: number = 0, left: number = 0, right: number = 0) {
+        if (isNaN(top) || top < 0 ||
+            isNaN(bottom) || bottom < 0 ||
+            isNaN(left) || left < 0 ||
+            isNaN(right) || right < 0
+        ) {
+            throw new Error('Invalid value for edge-insets, top, bottom, left and right must all be numbers');
+        }
+
+        this.top = top;
+        this.bottom = bottom;
+        this.left = left;
+        this.right = right;
+    }
+
+    /**
+     * Interpolates the inset in-place.
+     * This maintains the current inset value for any inset not present in `target`.
+     *
+     * @param {EdgeInsetLike} target
+     * @param {number} t
+     * @returns {EdgeInsets}
+     * @memberof EdgeInsets
+     */
+    interpolate(target: EdgeInsetLike, t: number): EdgeInsets {
+        if (target.top != null) this.top = number(this.top, target.top, t);
+        if (target.bottom != null) this.bottom = number(this.bottom, target.bottom, t);
+        if (target.left != null) this.left = number(this.left, target.left, t);
+        if (target.right != null) this.right = number(this.right, target.right, t);
+
+        return this;
+    }
+
+    /**
+     * Utility method that computes the new apprent center or vanishing point after applying insets.
+     * This is in pixels and with the top left being (0.0) and +y being downwards.
+     *
+     * @param {number} width
+     * @param {number} height
+     * @returns {Point}
+     * @memberof EdgeInsets
+     */
+    getCenter(width: number, height: number): Point {
+        // Clamp insets so they never overflow width/height and always calculate a valid center
+        const totalXInset = Math.min(this.left + this.right, width);
+        const totalYInset = Math.min(this.top + this.bottom, height);
+
+        const x = Math.min(this.left, width) + 0.5 * (width - totalXInset);
+        const y = Math.min(this.top, height) + 0.5 * (height - totalYInset);
+
+        return new Point(x, y);
+    }
+
+    equals(other: EdgeInsetLike): boolean {
+        return this.top === other.top &&
+            this.bottom === other.bottom &&
+            this.left === other.left &&
+            this.right === other.right;
+    }
+
+    clone(): EdgeInsets {
+        return new EdgeInsets(this.top, this.bottom, this.left, this.right);
+    }
+
+    /**
+     * Returns the current sdtate as json, useful when you want to have a
+     * read-only representation of the inset.
+     *
+     * @returns {EdgeInsetJSON}
+     * @memberof EdgeInsets
+     */
+    toJSON(): EdgeInsetJSON {
+        return {
+            top: this.top,
+            bottom: this.bottom,
+            left: this.left,
+            right: this.right
+        };
+    }
+}
+
+export type EdgeInsetLike = EdgeInsets | {top?: number, bottom?: number, right?: number, left?: number} | EdgeInsetJSON;
+export type EdgeInsetJSON = {top: number, bottom: number, right: number, left: number}
+
+export default EdgeInsets;

src/geo/transform.js

@@ -10,8 +10,10 @@ import tileCover from '../util/tile_cover';
 import { UnwrappedTileID } from '../source/tile_id';
 import EXTENT from '../data/extent';
 import { vec4, mat4, mat2 } from 'gl-matrix';
+import EdgeInsets from './edge_insets';
 
 import type { OverscaledTileID, CanonicalTileID } from '../source/tile_id';
+import type { EdgeInsetLike, EdgeInsetJSON } from './edge_insets';
 
 /**
  * A single transform, generally used for a single tile to be
@@ -47,6 +49,7 @@ class Transform {
     _minZoom: number;
     _maxZoom: number;
     _center: LngLat;
+    _edgeInsets: EdgeInsets;
     _constraining: boolean;
     _posMatrixCache: {[number]: Float32Array};
     _alignedPosMatrixCache: {[number]: Float32Array};
@@ -69,6 +72,7 @@ class Transform {
         this._fov = 0.6435011087932844;
         this._pitch = 0;
         this._unmodified = true;
+        this._edgeInsets = new EdgeInsets();
         this._posMatrixCache = {};
         this._alignedPosMatrixCache = {};
     }
@@ -85,6 +89,7 @@ class Transform {
         clone._fov = this._fov;
         clone._pitch = this._pitch;
         clone._unmodified = this._unmodified;
+        clone._edgeInsets = this._edgeInsets.clone();
         clone._calcMatrices();
         return clone;
     }
@@ -118,8 +123,8 @@ class Transform {
         return this.tileSize * this.scale;
     }
 
-    get centerPoint(): Point {
-        return this.size._div(2);
+    get centerOffset(): Point {
+        return this._edgeInsets.getCenter(this.width, this.height).sub(this.size._div(2));
     }
 
     get size(): Point {
@@ -185,6 +190,52 @@ class Transform {
         this._calcMatrices();
     }
 
+    get padding(): EdgeInsetJSON { return this._edgeInsets.toJSON(); }
+    set padding(padding: EdgeInsetLike) {
+        if (this._edgeInsets.equals(padding)) return;
+        this._unmodified = false;
+        //Update edge-insets inplace
+        this._edgeInsets.interpolate(padding, 1);
+        this._calcMatrices();
+    }
+
+    /**
+     * The center of the screen in pixels with the top-left corner being (0,0)
+     * and +y axis pointing downwards. This accounts for padding.
+     *
+     * @readonly
+     * @type {Point}
+     * @memberof Transform
+     */
+    get centerPoint(): Point {
+        return this._edgeInsets.getCenter(this.width, this.height);
+    }
+
+    /**
+     * Returns if the padding params match
+     *
+     * @param {EdgeInsetLike} padding
+     * @returns {boolean}
+     * @memberof Transform
+     */
+    isPaddingEqual(padding: EdgeInsetLike): boolean {
+        return this._edgeInsets.equals(padding);
+    }
+
+    /**
+     * Helper method to upadte edge-insets inplace
+     *
+     * @param {EdgeInsetLike} target
+     * @param {number} t
+     * @memberof Transform
+     */
+    interpolatePadding(target: EdgeInsetLike, t: number) {
+        this._unmodified = false;
+        this._edgeInsets.interpolate(target, t);
+        this._constrain();
+        this._calcMatrices();
+    }
+
     /**
      * Return a zoom level that will cover all tiles the transform
      * @param {Object} options
@@ -520,15 +571,17 @@ class Transform {
     _calcMatrices() {
         if (!this.height) return;
 
-        this.cameraToCenterDistance = 0.5 / Math.tan(this._fov / 2) * this.height;
+        const halfFov = this._fov / 2;
+        const offset = this.centerOffset;
+        this.cameraToCenterDistance = 0.5 / Math.tan(halfFov) * this.height;
 
-        // Find the distance from the center point [width/2, height/2] to the
-        // center top point [width/2, 0] in Z units, using the law of sines.
+        // Find the distance from the center point [width/2 + offset.x, height/2 + offset.y] to the
+        // center top point [width/2 + offset.x, 0] in Z units, using the law of sines.
         // 1 Z unit is equivalent to 1 horizontal px at the center of the map
         // (the distance between[width/2, height/2] and [width/2 + 1, height/2])
-        const halfFov = this._fov / 2;
         const groundAngle = Math.PI / 2 + this._pitch;
-        const topHalfSurfaceDistance = Math.sin(halfFov) * this.cameraToCenterDistance / Math.sin(Math.PI - groundAngle - halfFov);
+        const fovAboveCenter = this._fov * (0.5 + offset.y / this.height);
+        const topHalfSurfaceDistance = Math.sin(fovAboveCenter) * this.cameraToCenterDistance / Math.sin(Math.PI - groundAngle - fovAboveCenter);
         const point = this.point;
         const x = point.x, y = point.y;
 
@@ -550,6 +603,10 @@ class Transform {
         let m = new Float64Array(16);
         mat4.perspective(m, this._fov, this.width / this.height, nearZ, farZ);
 
+        //Apply center of perspective offset
+        m[8] = -offset.x * 2 / this.width;
+        m[9] = offset.y * 2 / this.height;
+
         mat4.scale(m, m, [1, -1, 1]);
         mat4.translate(m, m, [0, 0, -this.cameraToCenterDistance]);
         mat4.rotateX(m, m, this._pitch);

src/render/draw_debug.js

@@ -9,15 +9,60 @@ import SegmentVector from '../data/segment';
 import DepthMode from '../gl/depth_mode';
 import StencilMode from '../gl/stencil_mode';
 import CullFaceMode from '../gl/cull_face_mode';
-import { debugUniformValues } from './program/debug_program';
+import ColorMode from '../gl/color_mode';
+import { debugUniformValues, debugSSRectUniformValues } from './program/debug_program';
 import Color from '../style-spec/util/color';
+import browser from '../util/browser';
 
 import type Painter from './painter';
 import type SourceCache from '../source/source_cache';
 import type {OverscaledTileID} from '../source/tile_id';
 
 export default drawDebug;
 
+const topColor = new Color(1, 0, 0, 0.4);
+const btmColor = new Color(0, 1, 0, 0.4);
+const leftColor = new Color(0, 0, 1, 0.4);
+const rightColor = new Color(1, 0, 1, 0.4);
+const centerColor = new Color(0, 1, 1, 0.4);
+
+export function drawDebugPadding(painter: Painter) {
+    const padding = painter.transform.padding;
+    // Top
+    drawDebugSSRect(painter, 0, 0, painter.transform.width, padding.top, topColor);
+    // Bottom
+    drawDebugSSRect(painter, 0, painter.transform.height - padding.bottom, painter.transform.width, padding.bottom, btmColor);
+    // Left
+    drawDebugSSRect(painter, 0, 0, padding.left, painter.transform.height, leftColor);
+    // Right
+    drawDebugSSRect(painter, painter.transform.width - padding.right, 0, padding.right, painter.transform.height, rightColor);
+    // Center
+    const center = painter.transform.centerPoint;
+    const centerSize = 10;
+    drawDebugSSRect(painter, center.x - centerSize / 2, center.y - centerSize / 2, centerSize, centerSize, centerColor);
+}
+
+function drawDebugSSRect(painter: Painter, x: number, y: number, width: number, height: number, color: Color) {
+    const context = painter.context;
+    const gl = context.gl;
+
+    const program = painter.useProgram('debugSSRect');
+
+    const depthMode = DepthMode.disabled;
+    const stencilMode = StencilMode.disabled;
+    const colorMode = ColorMode.alphaBlended;
+    const id = '$debug_ss_rect';
+    // convert pixel-space coordinates to gl coordinates
+    const glWidth = 2 * browser.devicePixelRatio * width / painter.width;
+    const glHeight = 2 * browser.devicePixelRatio * -height / painter.height;
+    const glX =  (2 * browser.devicePixelRatio * x / painter.width - 1);
+    const glY = -1 * (2 * browser.devicePixelRatio * y / painter.height - 1);
+
+    program.draw(context, gl.TRIANGLES, depthMode, stencilMode, colorMode, CullFaceMode.disabled,
+        debugSSRectUniformValues(color, [glX, glY], [glWidth, glHeight]), id,
+        painter.viewportBuffer, painter.quadTriangleIndexBuffer, painter.viewportSegments);
+}
+
 function drawDebug(painter: Painter, sourceCache: SourceCache, coords: Array<OverscaledTileID>) {
     for (let i = 0; i < coords.length; i++) {
         drawDebugTile(painter, sourceCache, coords[i]);

src/render/painter.js

@@ -33,7 +33,7 @@ import fillExtrusion from './draw_fill_extrusion';
 import hillshade from './draw_hillshade';
 import raster from './draw_raster';
 import background from './draw_background';
-import debug from './draw_debug';
+import debug, { drawDebugPadding } from './draw_debug';
 import custom from './draw_custom';
 
 const draw = {
@@ -68,6 +68,7 @@ export type RenderPass = 'offscreen' | 'opaque' | 'translucent';
 type PainterOptions = {
     showOverdrawInspector: boolean,
     showTileBoundaries: boolean,
+    showPadding: boolean,
     rotating: boolean,
     zooming: boolean,
     moving: boolean,
@@ -434,6 +435,10 @@ class Painter {
             }
         }
 
+        if (this.options.showPadding) {
+            drawDebugPadding(this);
+        }
+
         // Set defaults for most GL values so that anyone using the state after the render
         // encounters more expected values.
         this.context.setDefault();

src/render/program/debug_program.js

@@ -2,7 +2,8 @@
 
 import {
     UniformColor,
-    UniformMatrix4f
+    UniformMatrix4f,
+    Uniform2f
 } from '../uniform_binding';
 
 import type Context from '../../gl/context';
@@ -14,14 +15,32 @@ export type DebugUniformsType = {|
     'u_matrix': UniformMatrix4f
 |};
 
+export type DebugSSRectUniformsType = {|
+    'u_color': UniformColor,
+    'u_offset': Uniform2f,
+    'u_dim': Uniform2f
+|};
+
 const debugUniforms = (context: Context, locations: UniformLocations): DebugUniformsType => ({
     'u_color': new UniformColor(context, locations.u_color),
     'u_matrix': new UniformMatrix4f(context, locations.u_matrix)
 });
 
+const debugSSRectUniforms = (context: Context, locations: UniformLocations): DebugSSRectUniformsType => ({
+    'u_color': new UniformColor(context, locations.u_color),
+    'u_offset': new Uniform2f(context, locations.u_offset),
+    'u_dim': new Uniform2f(context, locations.u_dim)
+});
+
+const debugSSRectUniformValues = (color: Color, offset: [number, number], dim: [number, number]): UniformValues<DebugSSRectUniformsType> => ({
+    'u_color': color,
+    'u_offset': offset,
+    'u_dim': dim,
+});
+
 const debugUniformValues = (matrix: Float32Array, color: Color): UniformValues<DebugUniformsType> => ({
     'u_matrix': matrix,
     'u_color': color
 });
 
-export { debugUniforms, debugUniformValues };
+export { debugUniforms, debugUniformValues, debugSSRectUniforms, debugSSRectUniformValues };

src/render/program/program_uniforms.js

@@ -4,7 +4,7 @@ import { fillExtrusionUniforms, fillExtrusionPatternUniforms } from './fill_extr
 import { fillUniforms, fillPatternUniforms, fillOutlineUniforms, fillOutlinePatternUniforms } from './fill_program';
 import { circleUniforms } from './circle_program';
 import { collisionUniforms } from './collision_program';
-import { debugUniforms } from './debug_program';
+import { debugUniforms, debugSSRectUniforms } from './debug_program';
 import { clippingMaskUniforms } from './clipping_mask_program';
 import { heatmapUniforms, heatmapTextureUniforms } from './heatmap_program';
 import { hillshadeUniforms, hillshadePrepareUniforms } from './hillshade_program';
@@ -24,6 +24,7 @@ export const programUniforms = {
     collisionBox: collisionUniforms,
     collisionCircle: collisionUniforms,
     debug: debugUniforms,
+    debugSSRect: debugSSRectUniforms,
     clippingMask: clippingMaskUniforms,
     heatmap: heatmapUniforms,
     heatmapTexture: heatmapTextureUniforms,

src/shaders/debug_ss_rect.vertex.glsl

@@ -0,0 +1,8 @@
+attribute vec2 a_pos;
+
+uniform vec2 u_offset;
+uniform vec2 u_dim;
+
+void main() {
+    gl_Position = vec4((a_pos*u_dim)+u_offset, 0, 1);
+}