[WIP] Heightmap cascades

src/geo/transform.js

@@ -4,7 +4,7 @@ import LngLat from './lng_lat';
 import LngLatBounds from './lng_lat_bounds';
 import MercatorCoordinate, {mercatorXfromLng, mercatorYfromLat, mercatorZfromAltitude, latFromMercatorY} from './mercator_coordinate';
 import Point from '@mapbox/point-geometry';
-import {wrap, clamp, radToDeg, degToRad} from '../util/util';
+import {wrap, clamp, radToDeg, degToRad, distanceToLine} from '../util/util';
 import {number as interpolate} from '../style-spec/util/interpolate';
 import EXTENT from '../data/extent';
 import {vec4, mat4, mat2, vec3, quat} from 'gl-matrix';
@@ -1060,18 +1060,23 @@ class Transform {
         if (cache[posMatrixKey]) {
             return cache[posMatrixKey];
         }
+        const posMatrix = this.calcTranslationScaleMatrix(unwrappedTileID);
+        mat4.multiply(posMatrix, aligned ? this.alignedProjMatrix : this.projMatrix, posMatrix);
+
+        cache[posMatrixKey] = new Float32Array(posMatrix);
+        return cache[posMatrixKey];
+    }
 
+    calcTranslationScaleMatrix(unwrappedTileID: UnwrappedTileID): Float64Array {
         const canonical = unwrappedTileID.canonical;
         const scale = this.worldSize / this.zoomScale(canonical.z);
         const unwrappedX = canonical.x + Math.pow(2, canonical.z) * unwrappedTileID.wrap;
 
         const posMatrix = mat4.identity(new Float64Array(16));
         mat4.translate(posMatrix, posMatrix, [unwrappedX * scale, canonical.y * scale, 0]);
         mat4.scale(posMatrix, posMatrix, [scale / EXTENT, scale / EXTENT, 1]);
-        mat4.multiply(posMatrix, aligned ? this.alignedProjMatrix : this.projMatrix, posMatrix);
 
-        cache[posMatrixKey] = new Float32Array(posMatrix);
-        return cache[posMatrixKey];
+        return posMatrix;
     }
 
     customLayerMatrix(): Array<number> {

src/gl/framebuffer.js

@@ -2,6 +2,7 @@
 import {ColorAttachment, DepthAttachment} from './value';
 
 import type Context from './context';
+import type Painter from '../render/painter';
 import assert from 'assert';
 
 class Framebuffer {
@@ -26,6 +27,15 @@ class Framebuffer {
         assert(gl.checkFramebufferStatus(gl.FRAMEBUFFER) === gl.FRAMEBUFFER_COMPLETE);
     }
 
+    makeActive() {
+        const context = this.context;
+        const gl = context.gl;
+
+        gl.bindTexture(gl.TEXTURE_2D, this.colorAttachment.get());
+        context.bindFramebuffer.set(this.framebuffer);
+        context.viewport.set([0, 0, this.width, this.height]);
+    }
+
     destroy() {
         const gl = this.context.gl;
 

src/render/draw_circle.js

@@ -109,7 +109,7 @@ function drawCircles(painter: Painter, sourceCache: SourceCache, layer: CircleSt
     for (const segmentsState of segmentsRenderStates) {
         const {programConfiguration, program, layoutVertexBuffer, indexBuffer, uniformValues, tile} = segmentsState.state;
         const segments = segmentsState.segments;
-        if (painter.terrain) painter.terrain.setupElevationDraw(tile, program, {useDepthForOcclusion: true});
+        // if (painter.terrain) painter.terrain.setupElevationDraw(tile, program, {useDepthForOcclusion: true});
 
         program.draw(context, gl.TRIANGLES, depthMode, stencilMode, colorMode, CullFaceMode.disabled,
             uniformValues, layer.id,

src/render/draw_debug.js

@@ -3,14 +3,15 @@
 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 {debugUniformValues, debugTextureUniformValues} from './program/debug_program';
 import Color from '../style-spec/util/color';
 import ColorMode from '../gl/color_mode';
 import browser from '../util/browser';
 
 import type Painter from './painter';
 import type SourceCache from '../source/source_cache';
 import type {OverscaledTileID} from '../source/tile_id';
+import type Framebuffer from '../gl/framebuffer';
 
 export default drawDebug;
 
@@ -42,6 +43,23 @@ export function drawDebugQueryGeometry(painter: Painter, sourceCache: SourceCach
     }
 }
 
+export function drawDebugFramebuffer(painter: Painter, fbo: Framebuffer, viewport: [number, number, number, number]) {
+    const context = painter.context;
+    const gl = context.gl;
+    context.viewport.set(viewport);
+
+    context.activeTexture.set(gl.TEXTURE0);
+    gl.bindTexture(gl.TEXTURE_2D, fbo.colorAttachment.get());
+
+    painter.useProgram('debugTexture').draw(context, gl.TRIANGLES,
+        DepthMode.disabled, StencilMode.disabled, ColorMode.unblended, CullFaceMode.disabled,
+        debugTextureUniformValues(painter, 0),
+        '$debug_fbo', painter.viewportBuffer, painter.quadTriangleIndexBuffer,
+        painter.viewportSegments);
+
+    context.viewport.set([0, 0, painter.width, painter.height]);
+}
+
 function drawCrosshair(painter: Painter, x: number, y: number, color: Color) {
     const size = 20;
     const lineWidth = 2;

src/render/painter.js

@@ -34,7 +34,7 @@ import fillExtrusion from './draw_fill_extrusion';
 import hillshade from './draw_hillshade';
 import raster from './draw_raster';
 import background from './draw_background';
-import debug, {drawDebugPadding, drawDebugQueryGeometry} from './draw_debug';
+import debug, {drawDebugPadding, drawDebugQueryGeometry, drawDebugFramebuffer} from './draw_debug';
 import custom from './draw_custom';
 import sky from './draw_sky';
 import {Terrain} from '../terrain/terrain';
@@ -534,6 +534,14 @@ class Painter {
                     draw.debug(this, selectedSource, selectedSource.getVisibleCoordinates());
                 }
 
+                if(this.terrain) {
+                    drawDebugFramebuffer(this, this.terrain.heightmapCascade._nearFBO, [0, 0, 512, 512]);
+
+                    if(this.terrain.heightmapCascade.needsFarCascade) {
+                        drawDebugFramebuffer(this, this.terrain.heightmapCascade._farFBO, [0, 515, 512, 512]);
+                    }
+                }
+
                 Debug.run(() => {
                     if (this.options.showQueryGeometry && selectedSource) {
                         drawDebugQueryGeometry(this, selectedSource, selectedSource.getVisibleCoordinates());

src/render/program/debug_program.js

@@ -4,8 +4,10 @@ import {
     UniformColor,
     UniformMatrix4f,
     Uniform1i,
-    Uniform1f
+    Uniform1f,
+    Uniform2f
 } from '../uniform_binding';
+import {mat4} from 'gl-matrix';
 
 import type Context from '../../gl/context';
 import type {UniformValues, UniformLocations} from '../uniform_binding';
@@ -18,6 +20,12 @@ export type DebugUniformsType = {|
     'u_overlay_scale': Uniform1f
 |};
 
+export type DebugTextureUniformsType = {|
+    'u_matrix': UniformMatrix4f,
+    'u_world': Uniform2f,
+    'u_image': Uniform1i
+|};
+
 const debugUniforms = (context: Context, locations: UniformLocations): DebugUniformsType => ({
     'u_color': new UniformColor(context, locations.u_color),
     'u_matrix': new UniformMatrix4f(context, locations.u_matrix),
@@ -32,4 +40,27 @@ const debugUniformValues = (matrix: Float32Array, color: Color, scaleRatio: numb
     'u_overlay_scale': scaleRatio
 });
 
-export {debugUniforms, debugUniformValues};
+const debugTextureUniforms = (context: Context, locations: UniformLocations): DebugTextureUniformsType => ({
+    'u_matrix': new UniformMatrix4f(context, locations.u_matrix),
+    'u_world': new Uniform2f(context, locations.u_world),
+    'u_image': new Uniform1i(context, locations.u_image)
+});
+
+const debugTextureUniformValues = (
+    painter: Painter,
+    textureUnit: number
+): UniformValues<DebugTextureUniformsType> => {
+    mat4
+    const matrix = mat4.create();
+    mat4.ortho(matrix, 0, painter.width, painter.height, 0, 0, 1);
+
+    const gl = painter.context.gl;
+
+    return {
+        'u_matrix': matrix,
+        'u_world': [gl.drawingBufferWidth, gl.drawingBufferHeight],
+        'u_image': textureUnit
+    };
+};
+
+export {debugUniforms, debugUniformValues, debugTextureUniforms, debugTextureUniformValues};

src/render/program/program_uniforms.js

@@ -6,15 +6,15 @@ import {fillExtrusionUniforms, fillExtrusionPatternUniforms} from './fill_extrus
 import {fillUniforms, fillPatternUniforms, fillOutlineUniforms, fillOutlinePatternUniforms} from './fill_program';
 import {circleUniforms} from './circle_program';
 import {collisionUniforms, collisionCircleUniforms} from './collision_program';
-import {debugUniforms} from './debug_program';
+import {debugUniforms, debugTextureUniforms} from './debug_program';
 import {clippingMaskUniforms} from './clipping_mask_program';
 import {heatmapUniforms, heatmapTextureUniforms} from './heatmap_program';
 import {hillshadeUniforms, hillshadePrepareUniforms} from './hillshade_program';
 import {lineUniforms, lineGradientUniforms, linePatternUniforms, lineSDFUniforms} from './line_program';
 import {rasterUniforms} from './raster_program';
 import {symbolIconUniforms, symbolSDFUniforms, symbolTextAndIconUniforms} from './symbol_program';
 import {backgroundUniforms, backgroundPatternUniforms} from './background_program';
-import {terrainRasterUniforms} from '../../terrain/terrain_raster_program';
+import {terrainRasterUniforms, terrainHeightUniforms} from '../../terrain/terrain_raster_program';
 import {skyboxUniforms, skyboxGradientUniforms} from './skybox_program';
 import {skyboxCaptureUniforms} from './skybox_capture_program';
 
@@ -31,6 +31,7 @@ export const programUniforms = {
     collisionBox: collisionUniforms,
     collisionCircle: collisionCircleUniforms,
     debug: debugUniforms,
+    debugTexture: debugTextureUniforms,
     clippingMask: clippingMaskUniforms,
     heatmap: heatmapUniforms,
     heatmapTexture: heatmapTextureUniforms,
@@ -48,6 +49,7 @@ export const programUniforms = {
     backgroundPattern: backgroundPatternUniforms,
     terrainRaster: terrainRasterUniforms,
     terrainDepth: terrainRasterUniforms,
+    terrainHeight: terrainHeightUniforms,
     skybox: skyboxUniforms,
     skyboxGradient: skyboxGradientUniforms,
     skyboxCapture: skyboxCaptureUniforms

src/shaders/debug_texture.fragment.glsl

@@ -0,0 +1,10 @@
+uniform sampler2D u_image;
+varying vec2 v_pos;
+
+void main() {
+    gl_FragColor = texture2D(u_image, v_pos);
+
+#ifdef OVERDRAW_INSPECTOR
+    gl_FragColor = vec4(0.0);
+#endif
+}

src/shaders/debug_texture.vertex.glsl

@@ -0,0 +1,11 @@
+uniform mat4 u_matrix;
+uniform vec2 u_world;
+attribute vec2 a_pos;
+varying vec2 v_pos;
+
+void main() {
+    gl_Position = u_matrix * vec4(a_pos * u_world, 0, 1);
+
+    v_pos.x = a_pos.x;
+    v_pos.y = 1.0 - a_pos.y;
+}

src/shaders/shaders.js

@@ -22,6 +22,8 @@ import collisionCircleFrag from './collision_circle.fragment.glsl';
 import collisionCircleVert from './collision_circle.vertex.glsl';
 import debugFrag from './debug.fragment.glsl';
 import debugVert from './debug.vertex.glsl';
+import debugTextureFrag from './debug_texture.fragment.glsl';
+import debugTextureVert from './debug_texture.vertex.glsl';
 import fillFrag from './fill.fragment.glsl';
 import fillVert from './fill.vertex.glsl';
 import fillOutlineFrag from './fill_outline.fragment.glsl';
@@ -61,6 +63,8 @@ import terrainRasterFrag from './terrain_raster.fragment.glsl';
 import terrainRasterVert from './terrain_raster.vertex.glsl';
 import terrainDepthFrag from './terrain_depth.fragment.glsl';
 import terrainDepthVert from './terrain_depth.vertex.glsl';
+import terrainHeightFrag from './terrain_height.fragment.glsl';
+import terrainHeightVert from './terrain_height.vertex.glsl';
 import preludeTerrainVert from './_prelude_terrain.vertex.glsl';
 import skyboxCaptureFrag from './skybox_capture.fragment.glsl';
 import skyboxCaptureVert from './skybox_capture.vertex.glsl';
@@ -77,6 +81,7 @@ export const heatmapTexture = compile(heatmapTextureFrag, heatmapTextureVert);
 export const collisionBox = compile(collisionBoxFrag, collisionBoxVert);
 export const collisionCircle = compile(collisionCircleFrag, collisionCircleVert);
 export const debug = compile(debugFrag, debugVert);
+export const debugTexture = compile(debugTextureFrag, debugTextureVert);
 export const fill = compile(fillFrag, fillVert);
 export const fillOutline = compile(fillOutlineFrag, fillOutlineVert);
 export const fillOutlinePattern = compile(fillOutlinePatternFrag, fillOutlinePatternVert);
@@ -95,6 +100,7 @@ export const symbolSDF = compile(symbolSDFFrag, symbolSDFVert);
 export const symbolTextAndIcon = compile(symbolTextAndIconFrag, symbolTextAndIconVert);
 export const terrainRaster = compile(terrainRasterFrag, terrainRasterVert);
 export const terrainDepth = compile(terrainDepthFrag, terrainDepthVert);
+export const terrainHeight = compile(terrainHeightFrag, terrainHeightVert);
 export const skybox = compile(skyboxFrag, skyboxVert);
 export const skyboxGradient = compile(skyboxGradientFrag, skyboxVert);
 export const skyboxCapture = compile(skyboxCaptureFrag, skyboxCaptureVert);

src/shaders/terrain_height.fragment.glsl

@@ -0,0 +1,94 @@
+#define MIN_ELEV -1000.0
+#define MAX_ELEV 2000.0
+
+#ifdef GL_ES
+precision highp float;
+#endif
+varying vec2 v_pos;
+#ifdef TERRAIN
+
+uniform sampler2D u_dem;
+uniform sampler2D u_dem_prev;
+uniform vec4 u_dem_unpack;
+uniform vec2 u_dem_tl;
+uniform vec2 u_dem_tl_prev;
+uniform float u_dem_scale;
+uniform float u_dem_scale_prev;
+uniform float u_dem_size;
+uniform float u_dem_lerp;
+uniform float u_exaggeration;
+uniform float u_meter_to_dem;
+uniform mat4 u_label_plane_matrix_inv;
+
+uniform sampler2D u_depth;
+uniform vec2 u_depth_size_inv;
+
+vec4 tileUvToDemSample(vec2 uv, float dem_size, float dem_scale, vec2 dem_tl) {
+    vec2 pos = dem_size * (uv * dem_scale + dem_tl) + 1.0;
+    vec2 f = fract(pos);
+    return vec4((pos - f + 0.5) / (dem_size + 2.0), f);
+}
+
+float decodeElevation(vec4 v) {
+    return dot(vec4(v.xyz * 255.0, -1.0), u_dem_unpack);
+}
+
+float currentElevation(vec2 apos) {
+    float dd = 1.0 / (u_dem_size + 2.0);
+    vec4 r = tileUvToDemSample(apos / 8192.0, u_dem_size, u_dem_scale, u_dem_tl);
+    vec2 pos = r.xy;
+    vec2 f = r.zw;
+
+    float tl = decodeElevation(texture2D(u_dem, pos));
+    float tr = decodeElevation(texture2D(u_dem, pos + vec2(dd, 0.0)));
+    float bl = decodeElevation(texture2D(u_dem, pos + vec2(0.0, dd)));
+    float br = decodeElevation(texture2D(u_dem, pos + vec2(dd, dd)));
+
+    return u_exaggeration * mix(mix(tl, tr, f.x), mix(bl, br, f.x), f.y);
+}
+
+float prevElevation(vec2 apos) {
+    float dd = 1.0 / (u_dem_size + 2.0);
+    vec4 r = tileUvToDemSample(apos / 8192.0, u_dem_size, u_dem_scale_prev, u_dem_tl_prev);
+    vec2 pos = r.xy;
+    vec2 f = r.zw;
+
+    float tl = decodeElevation(texture2D(u_dem_prev, pos));
+    float tr = decodeElevation(texture2D(u_dem_prev, pos + vec2(dd, 0.0)));
+    float bl = decodeElevation(texture2D(u_dem_prev, pos + vec2(0.0, dd)));
+    float br = decodeElevation(texture2D(u_dem_prev, pos + vec2(dd, dd)));
+
+    return u_exaggeration * mix(mix(tl, tr, f.x), mix(bl, br, f.x), f.y);
+}
+
+#ifdef TERRAIN_VERTEX_MORPHING
+float elevation(vec2 apos) {
+    float nextElevation = currentElevation(apos);
+    float prevElevation = prevElevation(apos);
+    return mix(prevElevation, nextElevation, u_dem_lerp);
+}
+#else
+float elevation(vec2 apos) {
+    return currentElevation(apos);
+}
+#endif
+
+#else
+
+float elevation(vec2 pos) { return 0.0; }
+#endif
+
+// Pack depth to RGBA. A piece of code copied in various libraries and WebGL
+// shadow mapping examples.
+vec4 pack_normalized(float n) {
+    const vec4 bit_shift = vec4(256.0 * 256.0 * 256.0, 256.0 * 256.0, 256.0, 1.0);
+    const vec4 bit_mask  = vec4(0.0, 1.0 / 256.0, 1.0 / 256.0, 1.0 / 256.0);
+    vec4 res = fract(n * bit_shift);
+    res -= res.xxyz * bit_mask;
+    return res;
+}
+
+void main() {
+    float elevation = (elevation(v_pos) - MIN_ELEV)/(MAX_ELEV - MIN_ELEV);
+    gl_FragColor = vec4(elevation, elevation, elevation, 1.0);
+}

src/shaders/terrain_height.vertex.glsl

@@ -0,0 +1,10 @@
+attribute vec2 a_pos;
+varying vec2 v_pos;
+
+uniform mat4 u_matrix;
+
+void main() {
+    // This vertex shader expects a EXTENT x EXTENT quad
+    v_pos = a_pos;
+    gl_Position = u_matrix * vec4(a_pos , 0, 1);
+}