Hillshade

CHANGELOG.md

@@ -1,10 +1,12 @@
 ## main
 
 ### ✨ Features and improvements
+- Add additional hillshade methods ([#5768](https://github.com/maplibre/maplibre-gl-js/pull/5768))
 - _...Add new stuff here..._
 
 ### 🐞 Bug fixes
 - Fix scroll min zoom on globe view ([#5775](https://github.com/maplibre/maplibre-gl-js/pull/5775))
+- ⚠️ Fix hillshade appearance change between 256x256 and 512x512 tiles. This will change the appearance of hillshade layers using 512x512 tiles. ([#5768](https://github.com/maplibre/maplibre-gl-js/pull/5768))
 - _...Add new stuff here..._
 
 ## 5.4.0

build/generate-style-code.ts

@@ -29,6 +29,10 @@ function nativeType(property) {
             return 'Color';
         case 'padding':
             return 'Padding';
+        case 'numberArray':
+            return 'NumberArray';
+        case 'colorArray':
+            return 'ColorArray';
         case 'variableAnchorOffsetCollection':
             return 'VariableAnchorOffsetCollection';
         case 'sprite':
@@ -186,7 +190,7 @@ import {
     CrossFaded
 } from '../properties';
 
-import type {Color, Formatted, Padding, ResolvedImage, VariableAnchorOffsetCollection} from '@maplibre/maplibre-gl-style-spec';
+import type {Color, Formatted, Padding, NumberArray, ColorArray, ResolvedImage, VariableAnchorOffsetCollection} from '@maplibre/maplibre-gl-style-spec';
 import {StylePropertySpecification} from '@maplibre/maplibre-gl-style-spec';
 `);
 

package.json

@@ -24,7 +24,7 @@
     "@mapbox/unitbezier": "^0.0.1",
     "@mapbox/vector-tile": "^1.3.1",
     "@mapbox/whoots-js": "^3.1.0",
-    "@maplibre/maplibre-gl-style-spec": "^23.1.0",
+    "@maplibre/maplibre-gl-style-spec": "^23.2.1",
     "@types/geojson": "^7946.0.16",
     "@types/geojson-vt": "3.2.5",
     "@types/mapbox__point-geometry": "^0.1.4",

src/render/draw_hillshade.ts

@@ -59,7 +59,9 @@ function renderHillshade(
     const context = painter.context;
     const transform = painter.transform;
     const gl = context.gl;
-    const program = painter.useProgram('hillshade');
+
+    const defines = [`#define NUM_ILLUMINATION_SOURCES ${layer.paint.get('hillshade-highlight-color').values.length}`];
+    const program = painter.useProgram('hillshade', null, false, defines);
     const align = !painter.options.moving;
 
     for (const coord of coords) {

src/render/painter.ts

@@ -711,12 +711,12 @@ export class Painter {
      * Finds the required shader and its variant (base/terrain/globe, etc.) and binds it, compiling a new shader if required.
      * @param name - Name of the desired shader.
      * @param programConfiguration - Configuration of shader's inputs.
-     * @param defines - Additional macros to be injected at the beginning of the shader. Expected format is `['#define XYZ']`, etc.
      * @param forceSimpleProjection - Whether to force the use of a shader variant with simple mercator projection vertex shader.
+     * @param defines - Additional macros to be injected at the beginning of the shader. Expected format is `['#define XYZ']`, etc.
      * False by default. Use true when drawing with a simple projection matrix is desired, eg. when drawing a fullscreen quad.
      * @returns
      */
-    useProgram(name: string, programConfiguration?: ProgramConfiguration | null, forceSimpleProjection: boolean = false): Program<any> {
+    useProgram(name: string, programConfiguration?: ProgramConfiguration | null, forceSimpleProjection: boolean = false, defines: Array<string> = []): Program<any> {
         this.cache = this.cache || {};
         const useTerrain = !!this.style.map.terrain;
 
@@ -729,8 +729,9 @@ export class Painter {
         const configurationKey = (programConfiguration ? programConfiguration.cacheKey : '');
         const overdrawKey = (this._showOverdrawInspector ? '/overdraw' : '');
         const terrainKey = (useTerrain ? '/terrain' : '');
+        const definesKey = (defines ? `/${defines.join('/')}` : '');
 
-        const key = name + configurationKey + projectionKey + overdrawKey + terrainKey;
+        const key = name + configurationKey + projectionKey + overdrawKey + terrainKey + definesKey;
 
         if (!this.cache[key]) {
             this.cache[key] = new Program(
@@ -741,7 +742,8 @@ export class Painter {
                 this._showOverdrawInspector,
                 useTerrain,
                 projectionPrelude,
-                projectionDefine
+                projectionDefine,
+                defines
             );
         }
         return this.cache[key];

src/render/program.ts

@@ -52,7 +52,8 @@ export class Program<Us extends UniformBindings> {
         showOverdrawInspector: boolean,
         hasTerrain: boolean,
         projectionPrelude: PreparedShader,
-        projectionDefine: string) {
+        projectionDefine: string,
+        extraDefines: Array<string> = []) {
 
         const gl = context.gl;
         this.program = gl.createProgram();
@@ -85,6 +86,9 @@ export class Program<Us extends UniformBindings> {
         if (projectionDefine) {
             defines.push(projectionDefine);
         }
+        if (extraDefines) {
+            defines.push(...extraDefines);
+        }
 
         let fragmentSource = defines.concat(shaders.prelude.fragmentSource, projectionPrelude.fragmentSource, source.fragmentSource).join('\n');
         let vertexSource = defines.concat(shaders.prelude.vertexSource, projectionPrelude.vertexSource, source.vertexSource).join('\n');

src/render/program/hillshade_program.ts

@@ -5,6 +5,8 @@ import {
     Uniform1f,
     Uniform2f,
     UniformColor,
+    UniformFloatArray,
+    UniformColorArray,
     UniformMatrix4f,
     Uniform4f
 } from '../uniform_binding';
@@ -22,10 +24,13 @@ import type {OverscaledTileID} from '../../source/tile_id';
 export type HillshadeUniformsType = {
     'u_image': Uniform1i;
     'u_latrange': Uniform2f;
-    'u_light': Uniform2f;
-    'u_shadow': UniformColor;
-    'u_highlight': UniformColor;
+    'u_exaggeration': Uniform1f;
+    'u_altitudes': UniformFloatArray;
+    'u_azimuths': UniformFloatArray;
     'u_accent': UniformColor;
+    'u_method': Uniform1i;
+    'u_shadows': UniformColorArray;
+    'u_highlights': UniformColorArray;
 };
 
 export type HillshadePrepareUniformsType = {
@@ -39,10 +44,13 @@ export type HillshadePrepareUniformsType = {
 const hillshadeUniforms = (context: Context, locations: UniformLocations): HillshadeUniformsType => ({
     'u_image': new Uniform1i(context, locations.u_image),
     'u_latrange': new Uniform2f(context, locations.u_latrange),
-    'u_light': new Uniform2f(context, locations.u_light),
-    'u_shadow': new UniformColor(context, locations.u_shadow),
-    'u_highlight': new UniformColor(context, locations.u_highlight),
-    'u_accent': new UniformColor(context, locations.u_accent)
+    'u_exaggeration': new Uniform1f(context, locations.u_exaggeration),
+    'u_altitudes': new UniformFloatArray(context, locations.u_altitudes),
+    'u_azimuths': new UniformFloatArray(context, locations.u_azimuths),
+    'u_accent': new UniformColor(context, locations.u_accent),
+    'u_method': new Uniform1i(context, locations.u_method),
+    'u_shadows': new UniformColorArray(context, locations.u_shadows),
+    'u_highlights': new UniformColorArray(context, locations.u_highlights)
 });
 
 const hillshadePrepareUniforms = (context: Context, locations: UniformLocations): HillshadePrepareUniformsType => ({
@@ -58,22 +66,45 @@ const hillshadeUniformValues = (
     tile: Tile,
     layer: HillshadeStyleLayer,
 ): UniformValues<HillshadeUniformsType> => {
-    const shadow = layer.paint.get('hillshade-shadow-color');
-    const highlight = layer.paint.get('hillshade-highlight-color');
     const accent = layer.paint.get('hillshade-accent-color');
+    let method;
+    switch (layer.paint.get('hillshade-method')) {
+        case 'basic':
+            method = 4;
+            break;
+        case 'combined':
+            method = 1;
+            break;
+        case 'igor':
+            method = 2;
+            break;
+        case 'multidirectional':
+            method = 3;
+            break;
+        case 'standard':
+        default:
+            method = 0;
+            break;
+    }
+
+    const illumination = layer.getIlluminationProperties();
 
-    let azimuthal = layer.paint.get('hillshade-illumination-direction') * (Math.PI / 180);
-    // modify azimuthal angle by map rotation if light is anchored at the viewport
-    if (layer.paint.get('hillshade-illumination-anchor') === 'viewport') {
-        azimuthal += painter.transform.bearingInRadians;
+    for (let i = 0; i < illumination.directionRadians.length; i++) {
+        // modify azimuthal angle by map rotation if light is anchored at the viewport
+        if (layer.paint.get('hillshade-illumination-anchor') === 'viewport') {
+            illumination.directionRadians[i] += painter.transform.bearingInRadians;
+        }
     }
     return {
         'u_image': 0,
         'u_latrange': getTileLatRange(painter, tile.tileID),
-        'u_light': [layer.paint.get('hillshade-exaggeration'), azimuthal],
-        'u_shadow': shadow,
-        'u_highlight': highlight,
-        'u_accent': accent
+        'u_exaggeration': layer.paint.get('hillshade-exaggeration'),
+        'u_altitudes': illumination.altitudeRadians,
+        'u_azimuths': illumination.directionRadians,
+        'u_accent': accent,
+        'u_method': method,
+        'u_highlights': illumination.highlightColor,
+        'u_shadows': illumination.shadowColor
     };
 };
 

src/render/uniform_binding.test.ts

@@ -7,8 +7,11 @@ import {
     Uniform2f,
     Uniform3f,
     Uniform4f,
+    UniformFloatArray,
+    UniformColorArray,
     UniformMatrix4f
 } from './uniform_binding';
+import {Color} from '@maplibre/maplibre-gl-style-spec';
 
 describe('Uniform Binding', () => {
     test('Uniform1i', () => {
@@ -120,4 +123,40 @@ describe('Uniform Binding', () => {
         u.set([2, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]);
     });
 
+    test('UniformColorArray', () => {
+        expect.assertions(4);
+
+        const context = {
+            gl: {
+                uniform4fv: () => { expect(true).toBeTruthy(); }
+            }
+        } as any as Context;
+
+        const u = new UniformColorArray(context, 0);
+        expect(u.current).toEqual(new Array<Color>);
+        const v = [new Color(0.1, 0.2, 0.3), new Color(0.7, 0.8, 0.9)];
+        u.set(v);
+        expect(u.current).toEqual(v);
+        u.set(v);
+        u.set([new Color(0.3, 0.4, 0.5), new Color(0.4, 0.5, 0.6), new Color(0.5, 0.6, 0.7)]);
+    });
+
+    test('UniformFloatArray', () => {
+        expect.assertions(4);
+
+        const context = {
+            gl: {
+                uniform1fv: () => { expect(true).toBeTruthy(); }
+            }
+        } as any as Context;
+
+        const u = new UniformFloatArray(context, 0);
+        expect(u.current).toEqual(new Array<number>);
+        const v = [1.2, 3.4];
+        u.set(v);
+        expect(u.current).toEqual(v);
+        u.set(v);
+        u.set([5.6, 7.8, 9.1]);
+    });
+
 });

src/render/uniform_binding.ts

@@ -113,6 +113,42 @@ class UniformColor extends Uniform<Color> {
     }
 }
 
+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);
+        }
+    }
+}
+
 const emptyMat4 = new Float32Array(16) as mat4;
 class UniformMatrix4f extends Uniform<mat4> {
     constructor(context: Context, location: WebGLUniformLocation) {
@@ -147,6 +183,8 @@ export {
     Uniform3f,
     Uniform4f,
     UniformColor,
+    UniformColorArray,
+    UniformFloatArray,
     UniformMatrix4f
 };