Hypsometric Tint from terrain-RGB tiles

src/render/draw_color_relief.ts

@@ -0,0 +1,110 @@
+import {Texture} from './texture';
+import type {StencilMode} from '../gl/stencil_mode';
+import {DepthMode} from '../gl/depth_mode';
+import {CullFaceMode} from '../gl/cull_face_mode';
+import {type ColorMode} from '../gl/color_mode';
+import {
+    colorReliefUniformValues
+} from './program/color_relief_program';
+
+import type {Painter, RenderOptions} from './painter';
+import type {SourceCache} from '../source/source_cache';
+import type {ColorReliefStyleLayer} from '../style/style_layer/color_relief_style_layer';
+import type {OverscaledTileID} from '../source/tile_id';
+import type {Context} from '../gl/context';
+
+export function drawColorRelief(painter: Painter, sourceCache: SourceCache, layer: ColorReliefStyleLayer, tileIDs: Array<OverscaledTileID>, renderOptions: RenderOptions) {
+    if (painter.renderPass !== 'translucent') return;
+    if (!tileIDs.length) return;
+
+    const {isRenderingToTexture} = renderOptions;
+    const projection = painter.style.projection;
+    const useSubdivision = projection.useSubdivision;
+
+    const depthMode = painter.getDepthModeForSublayer(0, DepthMode.ReadOnly);
+    const colorMode = painter.colorModeForRenderPass();
+
+    // Globe (or any projection with subdivision) needs two-pass rendering to avoid artifacts when rendering texture tiles.
+    // See comments in draw_raster.ts for more details.
+    if (useSubdivision) {
+        // Two-pass rendering
+        const [stencilBorderless, stencilBorders, coords] = painter.stencilConfigForOverlapTwoPass(tileIDs);
+        renderColorRelief(painter, sourceCache, layer, coords, stencilBorderless, depthMode, colorMode, false, isRenderingToTexture); // draw without borders
+        renderColorRelief(painter, sourceCache, layer, coords, stencilBorders, depthMode, colorMode, true, isRenderingToTexture); // draw with borders
+    } else {
+        // Simple rendering
+        const [stencil, coords] = painter.getStencilConfigForOverlapAndUpdateStencilID(tileIDs);
+        renderColorRelief(painter, sourceCache, layer, coords, stencil, depthMode, colorMode, false, isRenderingToTexture);
+    }
+}
+
+function renderColorRelief(
+    painter: Painter,
+    sourceCache: SourceCache,
+    layer: ColorReliefStyleLayer,
+    coords: Array<OverscaledTileID>,
+    stencilModes: {[_: number]: Readonly<StencilMode>},
+    depthMode: Readonly<DepthMode>,
+    colorMode: Readonly<ColorMode>,
+    useBorder: boolean,
+    isRenderingToTexture: boolean
+) {
+    const projection = painter.style.projection;
+    const context = painter.context;
+    const transform = painter.transform;
+    const gl = context.gl;
+    const program = painter.useProgram('colorRelief');
+    const align = !painter.options.moving;
+
+    if(layer.colorRamp) {
+        const colorRampTexture = getColorRampTexture(context, layer);
+        context.activeTexture.set(gl.TEXTURE5);
+        colorRampTexture.bind(gl.LINEAR, gl.CLAMP_TO_EDGE);
+    }
+
+    for (const coord of coords) {
+        const tile = sourceCache.getTile(coord);
+        const dem = tile.dem;
+
+        if (!dem || !dem.data) {
+            continue;
+        }
+
+        const textureStride = dem.stride;
+
+        const pixelData = dem.getPixels();
+        context.activeTexture.set(gl.TEXTURE0);
+
+        context.pixelStoreUnpackPremultiplyAlpha.set(false);
+        tile.demTexture = tile.demTexture || painter.getTileTexture(textureStride);
+        if (tile.demTexture) {
+            const demTexture = tile.demTexture;
+            demTexture.update(pixelData, {premultiply: false});
+            demTexture.bind(gl.LINEAR, gl.CLAMP_TO_EDGE);
+        } else {
+            tile.demTexture = new Texture(context, pixelData, gl.RGBA, {premultiply: false});
+            tile.demTexture.bind(gl.LINEAR, gl.CLAMP_TO_EDGE);
+        }
+
+        const mesh = projection.getMeshFromTileID(context, coord.canonical, useBorder, true, 'raster');
+
+        const terrainData = painter.style.map.terrain?.getTerrainData(coord);
+
+        const projectionData = transform.getProjectionData({
+            overscaledTileID: coord,
+            aligned: align,
+            applyGlobeMatrix: !isRenderingToTexture,
+            applyTerrainMatrix: true
+        });
+
+        program.draw(context, gl.TRIANGLES, depthMode, stencilModes[coord.overscaledZ], colorMode, CullFaceMode.backCCW,
+            colorReliefUniformValues(layer, tile.dem, layer.elevationRange), terrainData, projectionData, layer.id, mesh.vertexBuffer, mesh.indexBuffer, mesh.segments);
+    }
+}
+
+function getColorRampTexture(context: Context, layer: ColorReliefStyleLayer): Texture {
+    if (!layer.colorRampTexture) {
+        layer.colorRampTexture = new Texture(context, layer.colorRamp, context.gl.RGBA);
+    }
+    return layer.colorRampTexture;
+}

src/render/painter.ts

@@ -25,6 +25,7 @@ import {drawLine} from './draw_line';
 import {drawFill} from './draw_fill';
 import {drawFillExtrusion} from './draw_fill_extrusion';
 import {drawHillshade} from './draw_hillshade';
+import {drawColorRelief} from './draw_color_relief';
 import {drawRaster} from './draw_raster';
 import {drawBackground} from './draw_background';
 import {drawDebug, drawDebugPadding, selectDebugSource} from './draw_debug';
@@ -56,6 +57,7 @@ import {isLineStyleLayer} from '../style/style_layer/line_style_layer';
 import {isFillStyleLayer} from '../style/style_layer/fill_style_layer';
 import {isFillExtrusionStyleLayer} from '../style/style_layer/fill_extrusion_style_layer';
 import {isHillshadeStyleLayer} from '../style/style_layer/hillshade_style_layer';
+import {isColorReliefStyleLayer} from '../style/style_layer/color_relief_style_layer';
 import {isRasterStyleLayer} from '../style/style_layer/raster_style_layer';
 import {isBackgroundStyleLayer} from '../style/style_layer/background_style_layer';
 import {isCustomStyleLayer} from '../style/style_layer/custom_style_layer';
@@ -671,6 +673,8 @@ export class Painter {
             drawFillExtrusion(painter, sourceCache, layer, coords, renderOptions);
         } else if (isHillshadeStyleLayer(layer)) {
             drawHillshade(painter, sourceCache, layer, coords, renderOptions);
+        } else if (isColorReliefStyleLayer(layer)) {
+            drawColorRelief(painter, sourceCache, layer, coords, renderOptions);
         } else if (isRasterStyleLayer(layer)) {
             drawRaster(painter, sourceCache, layer, coords, renderOptions);
         } else if (isBackgroundStyleLayer(layer)) {

src/render/program/color_relief_program.ts

@@ -0,0 +1,61 @@
+import {
+    Uniform1i,
+    Uniform1f,
+    Uniform2f,
+    Uniform4f,
+    UniformFloatArray,
+    UniformColorArray
+} from '../uniform_binding';
+
+import type {Context} from '../../gl/context';
+import type {UniformValues, UniformLocations} from '../uniform_binding';
+import type {ColorReliefStyleLayer} from '../../style/style_layer/color_relief_style_layer';
+import type {DEMData} from '../../data/dem_data';
+
+export type ColorReliefUniformsType = {
+    'u_image': Uniform1i;
+    'u_unpack': Uniform4f;
+    'u_colormap': Uniform1i;
+    'u_colormap_scale': Uniform1f;
+    'u_elevation_start': Uniform1f;
+    'u_dimension': Uniform2f;
+    'u_elevation_stops': UniformFloatArray;
+    'u_color_stops': UniformColorArray;
+    'u_colormap_length': Uniform1i;
+};
+
+const colorReliefUniforms = (context: Context, locations: UniformLocations): ColorReliefUniformsType => ({
+    'u_image': new Uniform1i(context, locations.u_image),
+    'u_unpack': new Uniform4f(context, locations.u_unpack),
+    'u_colormap': new Uniform1i(context, locations.u_colormap),
+    'u_colormap_scale': new Uniform1f(context, locations.u_colormap_scale),
+    'u_elevation_start': new Uniform1f(context, locations.u_elevation_start),
+    'u_dimension': new Uniform2f(context, locations.u_dimension),
+    'u_elevation_stops': new UniformFloatArray(context, locations.u_elevation_stops),
+    'u_color_stops': new UniformColorArray(context, locations.u_color_stops),
+    'u_colormap_length': new Uniform1i(context, locations.u_colormap_length)
+});
+
+const colorReliefUniformValues = (
+    layer: ColorReliefStyleLayer,
+    dem: DEMData,
+    elevationRange: {start: number; end: number}
+): UniformValues<ColorReliefUniformsType> => {
+
+    return {
+        'u_image': 0,
+        'u_unpack': dem.getUnpackVector(),
+        'u_colormap': 5,
+        'u_colormap_scale': 1.0 / (elevationRange.end - elevationRange.start),
+        'u_elevation_start': elevationRange.start,
+        'u_dimension': [dem.stride, dem.stride],
+        'u_elevation_stops': layer.elevationStops,
+        'u_color_stops': layer.colorStops,
+        'u_colormap_length': layer.elevationStops.length
+    };
+};
+
+export {
+    colorReliefUniforms,
+    colorReliefUniformValues,
+};

src/render/program/program_uniforms.ts

@@ -5,6 +5,7 @@ import {collisionUniforms, collisionCircleUniforms} from './collision_program';
 import {debugUniforms} from './debug_program';
 import {heatmapUniforms, heatmapTextureUniforms} from './heatmap_program';
 import {hillshadeUniforms, hillshadePrepareUniforms} from './hillshade_program';
+import {colorReliefUniforms} from './color_relief_program';
 import {lineUniforms, lineGradientUniforms, linePatternUniforms, lineSDFUniforms} from './line_program';
 import {rasterUniforms} from './raster_program';
 import {symbolIconUniforms, symbolSDFUniforms, symbolTextAndIconUniforms} from './symbol_program';
@@ -33,6 +34,7 @@ export const programUniforms = {
     heatmapTexture: heatmapTextureUniforms,
     hillshade: hillshadeUniforms,
     hillshadePrepare: hillshadePrepareUniforms,
+    colorRelief: colorReliefUniforms,
     line: lineUniforms,
     lineGradient: lineGradientUniforms,
     linePattern: linePatternUniforms,

src/render/render_to_texture.ts

@@ -18,7 +18,8 @@
     fill: true,
     line: true,
     raster: true,
-    hillshade: true
+    hillshade: true,
+    'color-relief': true
 };
 
 /**

src/render/uniform_binding.ts

@@ -113,7 +113,7 @@
     }
 }
 
 class UniformColorArray extends Uniform<Array<Color>> {
     constructor(context: Context, location: WebGLUniformLocation) {
         super(context, location);
         this.current = new Array<Color>();
@@ -134,7 +134,7 @@
     }
 }
 
 class UniformFloatArray extends Uniform<Array<number>> {
     constructor(context: Context, location: WebGLUniformLocation) {
         super(context, location);
         this.current = new Array<number>();
@@ -174,6 +174,41 @@
         }
     }
 }
+class UniformColorArray extends Uniform<Array<Color>> {
+    constructor(context: Context, location: WebGLUniformLocation) {
+        super(context, location);
+        this.current = new Array<Color>();
+    }
+
+    set(v: Array<Color>): void {
+        if (v != this.current) {
+            this.current = v;
+            const values = new Float32Array(v.length*4);
+            for( let i = 0; i < v.length; i++) {
+                values[4*i] = v[i].r;
+                values[4*i+1] = v[i].g;
+                values[4*i+2] = v[i].b;
+                values[4*i+3] = v[i].a;
+            }
+            this.gl.uniform4fv(this.location, values);
+        }
+    }
+}
+
+class UniformFloatArray extends Uniform<Array<number>> {
+    constructor(context: Context, location: WebGLUniformLocation) {
+        super(context, location);
+        this.current = new Array<number>();
+    }
+
+    set(v: Array<number>): void {
+        if (v != this.current) {
+            this.current = v;
+            const values = new Float32Array(v);
+            this.gl.uniform1fv(this.location, values);
+        }
+    }
+}
 
 export {
     Uniform,

src/shaders/color_relief.fragment.glsl

@@ -0,0 +1,61 @@
+uniform sampler2D u_image;
+uniform vec4 u_unpack;
+uniform float u_colormap_scale;
+uniform float u_elevation_start;
+uniform sampler2D u_colormap;
+uniform float u_elevation_stops[17];
+uniform vec4 u_color_stops[17];
+uniform int u_colormap_length;
+
+in vec2 v_pos;
+
+float getElevation(vec2 coord) {
+    // Convert encoded elevation value to meters
+    vec4 data = texture(u_image, coord) * 255.0;
+    data.a = -1.0;
+    return dot(data, u_unpack);
+}
+
+void main() {
+    float el = getElevation(v_pos);
+
+    // Naive lookup table
+    /*fragColor = u_color_stops[0];
+    for(int i = 0; i < u_colormap_length - 1; i++)
+    {
+        if(el >= u_elevation_stops[i] && el < u_elevation_stops[i+1])
+        {
+            fragColor = mix(u_color_stops[i],
+                u_color_stops[i+1],
+                (el - u_elevation_stops[i])/(u_elevation_stops[i+1]-u_elevation_stops[i])); 
+        }
+    }*/
+
+    // Binary search
+    int r = (u_colormap_length - 1);
+    int l = 0;
+    while(r - l > 1)
+    {
+        int m = (r + l) / 2;
+        if(el < u_elevation_stops[m])
+        {
+            r = m;
+        }
+        else
+        {
+            l = m;
+        }
+    }
+    fragColor = mix(u_color_stops[l],
+        u_color_stops[r],
+        clamp((el - u_elevation_stops[l])/(u_elevation_stops[r]-u_elevation_stops[l]), 0.0, 1.0)); 
+
+
+    // Texture interpolation
+    //float x = (el - u_elevation_start)*u_colormap_scale;
+    //fragColor = texture(u_colormap, vec2(x, 0));
+
+#ifdef OVERDRAW_INSPECTOR
+    fragColor = vec4(1.0);
+#endif
+}

src/shaders/color_relief.vertex.glsl

@@ -0,0 +1,20 @@
+uniform vec2 u_dimension;
+
+in vec2 a_pos;
+
+out vec2 v_pos;
+
+void main() {
+    gl_Position = projectTile(a_pos, a_pos);
+    highp vec2 epsilon = 1.0 / u_dimension;
+    float scale = (u_dimension.x - 2.0) / u_dimension.x;
+    v_pos = (a_pos / 8192.0) * scale + epsilon;
+    // North pole
+    if (a_pos.y < -32767.5) {
+        v_pos.y = 0.0;
+    }
+    // South pole
+    if (a_pos.y > 32766.5) {
+        v_pos.y = 1.0;
+    }
+}

src/shaders/shaders.ts

@@ -18,6 +18,8 @@ import collisionBoxFrag from './collision_box.fragment.glsl.g';
 import collisionBoxVert from './collision_box.vertex.glsl.g';
 import collisionCircleFrag from './collision_circle.fragment.glsl.g';
 import collisionCircleVert from './collision_circle.vertex.glsl.g';
+import colorReliefFrag from './color_relief.fragment.glsl.g';
+import colorReliefVert from './color_relief.vertex.glsl.g';
 import debugFrag from './debug.fragment.glsl.g';
 import debugVert from './debug.vertex.glsl.g';
 import depthVert from './depth.vertex.glsl.g';
@@ -87,6 +89,7 @@ export const shaders = {
     heatmapTexture: prepare(heatmapTextureFrag, heatmapTextureVert),
     collisionBox: prepare(collisionBoxFrag, collisionBoxVert),
     collisionCircle: prepare(collisionCircleFrag, collisionCircleVert),
+    colorRelief: prepare(colorReliefFrag, colorReliefVert),
     debug: prepare(debugFrag, debugVert),
     depth: prepare(clippingMaskFrag, depthVert),
     fill: prepare(fillFrag, fillVert),

src/style/create_style_layer.ts

@@ -1,6 +1,7 @@
 import {CircleStyleLayer} from './style_layer/circle_style_layer';
 import {HeatmapStyleLayer} from './style_layer/heatmap_style_layer';
 import {HillshadeStyleLayer} from './style_layer/hillshade_style_layer';
+import {ColorReliefStyleLayer} from './style_layer/color_relief_style_layer';
 import {FillStyleLayer} from './style_layer/fill_style_layer';
 import {FillExtrusionStyleLayer} from './style_layer/fill_extrusion_style_layer';
 import {LineStyleLayer} from './style_layer/line_style_layer';
@@ -20,6 +21,8 @@
             return new BackgroundStyleLayer(layer);
         case 'circle':
             return new CircleStyleLayer(layer);
+        case 'color-relief':
+            return new ColorReliefStyleLayer(layer);
         case 'fill':
             return new FillStyleLayer(layer);
         case 'fill-extrusion':