Hypsometric Tint from terrain-RGB tiles

.cspell.json

@@ -62,6 +62,7 @@
     "highp",
     "Hira",
     "Hoare",
+    "hypsometric",
     "ifdef",
     "ifdefs",
     "iframes",

CHANGELOG.md

@@ -1,7 +1,7 @@
 ## main
 
 ### ✨ Features and improvements
-
+- Add new `color-relief` layer type to render hypsometric tint from terrain-RGB tiles. ([#5742](https://github.com/maplibre/maplibre-gl-js/pull/5742))
 - _...Add new stuff here..._
 
 ### 🐞 Bug fixes

src/render/draw_color_relief.ts

@@ -0,0 +1,99 @@
+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';
+
+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 maxLength = Math.floor((gl.getParameter(gl.MAX_FRAGMENT_UNIFORM_VECTORS) - 3) / 2);
+    const colorRampLength = layer.getColorRamp(maxLength).colorStops.length;
+    const defines = [`#define NUM_ELEVATION_STOPS ${colorRampLength}`];
+    const program = painter.useProgram('colorRelief', null, false, defines);
+    const align = !painter.options.moving;
+
+    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, maxLength), terrainData, projectionData, layer.id, mesh.vertexBuffer, mesh.indexBuffer, mesh.segments);
+    }
+}

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,53 @@
+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_dimension': Uniform2f;
+    'u_elevation_stops': UniformFloatArray;
+    'u_color_stops': UniformColorArray;
+    'u_opacity': Uniform1f;
+};
+
+const colorReliefUniforms = (context: Context, locations: UniformLocations): ColorReliefUniformsType => ({
+    'u_image': new Uniform1i(context, locations.u_image),
+    'u_unpack': new Uniform4f(context, locations.u_unpack),
+    '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_opacity': new Uniform1f(context, locations.u_opacity)
+});
+
+const colorReliefUniformValues = (
+    layer: ColorReliefStyleLayer,
+    dem: DEMData,
+    maxLength: number
+): UniformValues<ColorReliefUniformsType> => {
+
+    const colorRamp = layer.getColorRamp(maxLength);
+    return {
+        'u_image': 0,
+        'u_unpack': dem.getUnpackVector(),
+        'u_dimension': [dem.stride, dem.stride],
+        'u_elevation_stops': colorRamp.elevationStops,
+        'u_color_stops': colorRamp.colorStops,
+        'u_opacity': layer.paint.get('color-relief-opacity')
+    };
+};
+
+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 @@ const LAYERS: { [keyof in StyleLayer['type']]?: boolean } = {
     fill: true,
     line: true,
     raster: true,
-    hillshade: true
+    hillshade: true,
+    'color-relief': true
 };
 
 /**

src/shaders/color_relief.fragment.glsl

@@ -0,0 +1,41 @@
+uniform sampler2D u_image;
+uniform vec4 u_unpack;
+uniform float u_elevation_stops[NUM_ELEVATION_STOPS];
+uniform vec4 u_color_stops[NUM_ELEVATION_STOPS];
+uniform float u_opacity;
+
+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);
+
+    // Binary search
+    int r = (NUM_ELEVATION_STOPS - 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 = u_opacity*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));
+
+#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 @@ export function createStyleLayer(layer: LayerSpecification | CustomLayerInterfac
             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':