@scoova/mgl 1.0.0

package/src/render/program/hillshade_program.ts

@@ -0,0 +1,116 @@
+import {mat4} from 'gl-matrix';
+
+import {
+    Uniform1i,
+    Uniform1f,
+    Uniform2f,
+    UniformColor,
+    UniformMatrix4f,
+    Uniform4f
+} from '../uniform_binding';
+import {EXTENT} from '../../data/extent';
+import {MercatorCoordinate} from '../../geo/mercator_coordinate';
+
+import type {Context} from '../../gl/context';
+import type {UniformValues, UniformLocations} from '../uniform_binding';
+import type {Tile} from '../../source/tile';
+import type {Painter} from '../painter';
+import type {HillshadeStyleLayer} from '../../style/style_layer/hillshade_style_layer';
+import type {DEMData} from '../../data/dem_data';
+import type {OverscaledTileID} from '../../source/tile_id';
+
+export type HillshadeUniformsType = {
+    'u_matrix': UniformMatrix4f;
+    'u_image': Uniform1i;
+    'u_latrange': Uniform2f;
+    'u_light': Uniform2f;
+    'u_shadow': UniformColor;
+    'u_highlight': UniformColor;
+    'u_accent': UniformColor;
+};
+
+export type HillshadePrepareUniformsType = {
+    'u_matrix': UniformMatrix4f;
+    'u_image': Uniform1i;
+    'u_dimension': Uniform2f;
+    'u_zoom': Uniform1f;
+    'u_unpack': Uniform4f;
+};
+
+const hillshadeUniforms = (context: Context, locations: UniformLocations): HillshadeUniformsType => ({
+    'u_matrix': new UniformMatrix4f(context, locations.u_matrix),
+    '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)
+});
+
+const hillshadePrepareUniforms = (context: Context, locations: UniformLocations): HillshadePrepareUniformsType => ({
+    'u_matrix': new UniformMatrix4f(context, locations.u_matrix),
+    'u_image': new Uniform1i(context, locations.u_image),
+    'u_dimension': new Uniform2f(context, locations.u_dimension),
+    'u_zoom': new Uniform1f(context, locations.u_zoom),
+    'u_unpack': new Uniform4f(context, locations.u_unpack)
+});
+
+const hillshadeUniformValues = (
+    painter: Painter,
+    tile: Tile,
+    layer: HillshadeStyleLayer,
+    coord: OverscaledTileID
+): 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 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.angle;
+    }
+    const align = !painter.options.moving;
+    return {
+        'u_matrix': coord ? coord.posMatrix : painter.transform.calculatePosMatrix(tile.tileID.toUnwrapped(), align),
+        '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
+    };
+};
+
+const hillshadeUniformPrepareValues = (tileID: OverscaledTileID, dem: DEMData): UniformValues<HillshadePrepareUniformsType> => {
+
+    const stride = dem.stride;
+    const matrix = mat4.create();
+    // Flip rendering at y axis.
+    mat4.ortho(matrix, 0, EXTENT, -EXTENT, 0, 0, 1);
+    mat4.translate(matrix, matrix, [0, -EXTENT, 0]);
+
+    return {
+        'u_matrix': matrix,
+        'u_image': 1,
+        'u_dimension': [stride, stride],
+        'u_zoom': tileID.overscaledZ,
+        'u_unpack': dem.getUnpackVector()
+    };
+};
+
+function getTileLatRange(painter: Painter, tileID: OverscaledTileID) {
+    // for scaling the magnitude of a points slope by its latitude
+    const tilesAtZoom = Math.pow(2, tileID.canonical.z);
+    const y = tileID.canonical.y;
+    return [
+        new MercatorCoordinate(0, y / tilesAtZoom).toLngLat().lat,
+        new MercatorCoordinate(0, (y + 1) / tilesAtZoom).toLngLat().lat];
+}
+
+export {
+    hillshadeUniforms,
+    hillshadePrepareUniforms,
+    hillshadeUniformValues,
+    hillshadeUniformPrepareValues
+};

package/src/render/program/line_program.ts

@@ -0,0 +1,207 @@
+import {Uniform1i, Uniform1f, Uniform2f, Uniform3f, UniformMatrix4f} from '../uniform_binding';
+import {pixelsToTileUnits} from '../../source/pixels_to_tile_units';
+import {extend} from '../../util/util';
+
+import type {Context} from '../../gl/context';
+import type {UniformValues, UniformLocations} from '../uniform_binding';
+import type {Transform} from '../../geo/transform';
+import type {Tile} from '../../source/tile';
+import type {CrossFaded} from '../../style/properties';
+import type {LineStyleLayer} from '../../style/style_layer/line_style_layer';
+import type {Painter} from '../painter';
+import type {CrossfadeParameters} from '../../style/evaluation_parameters';
+import {OverscaledTileID} from '../../source/tile_id';
+
+export type LineUniformsType = {
+    'u_matrix': UniformMatrix4f;
+    'u_ratio': Uniform1f;
+    'u_device_pixel_ratio': Uniform1f;
+    'u_units_to_pixels': Uniform2f;
+};
+
+export type LineGradientUniformsType = {
+    'u_matrix': UniformMatrix4f;
+    'u_ratio': Uniform1f;
+    'u_device_pixel_ratio': Uniform1f;
+    'u_units_to_pixels': Uniform2f;
+    'u_image': Uniform1i;
+    'u_image_height': Uniform1f;
+};
+
+export type LinePatternUniformsType = {
+    'u_matrix': UniformMatrix4f;
+    'u_texsize': Uniform2f;
+    'u_ratio': Uniform1f;
+    'u_device_pixel_ratio': Uniform1f;
+    'u_units_to_pixels': Uniform2f;
+    'u_image': Uniform1i;
+    'u_scale': Uniform3f;
+    'u_fade': Uniform1f;
+};
+
+export type LineSDFUniformsType = {
+    'u_matrix': UniformMatrix4f;
+    'u_ratio': Uniform1f;
+    'u_device_pixel_ratio': Uniform1f;
+    'u_units_to_pixels': Uniform2f;
+    'u_patternscale_a': Uniform2f;
+    'u_patternscale_b': Uniform2f;
+    'u_sdfgamma': Uniform1f;
+    'u_image': Uniform1i;
+    'u_tex_y_a': Uniform1f;
+    'u_tex_y_b': Uniform1f;
+    'u_mix': Uniform1f;
+};
+
+const lineUniforms = (context: Context, locations: UniformLocations): LineUniformsType => ({
+    'u_matrix': new UniformMatrix4f(context, locations.u_matrix),
+    'u_ratio': new Uniform1f(context, locations.u_ratio),
+    'u_device_pixel_ratio': new Uniform1f(context, locations.u_device_pixel_ratio),
+    'u_units_to_pixels': new Uniform2f(context, locations.u_units_to_pixels)
+});
+
+const lineGradientUniforms = (context: Context, locations: UniformLocations): LineGradientUniformsType => ({
+    'u_matrix': new UniformMatrix4f(context, locations.u_matrix),
+    'u_ratio': new Uniform1f(context, locations.u_ratio),
+    'u_device_pixel_ratio': new Uniform1f(context, locations.u_device_pixel_ratio),
+    'u_units_to_pixels': new Uniform2f(context, locations.u_units_to_pixels),
+    'u_image': new Uniform1i(context, locations.u_image),
+    'u_image_height': new Uniform1f(context, locations.u_image_height)
+});
+
+const linePatternUniforms = (context: Context, locations: UniformLocations): LinePatternUniformsType => ({
+    'u_matrix': new UniformMatrix4f(context, locations.u_matrix),
+    'u_texsize': new Uniform2f(context, locations.u_texsize),
+    'u_ratio': new Uniform1f(context, locations.u_ratio),
+    'u_device_pixel_ratio': new Uniform1f(context, locations.u_device_pixel_ratio),
+    'u_image': new Uniform1i(context, locations.u_image),
+    'u_units_to_pixels': new Uniform2f(context, locations.u_units_to_pixels),
+    'u_scale': new Uniform3f(context, locations.u_scale),
+    'u_fade': new Uniform1f(context, locations.u_fade)
+});
+
+const lineSDFUniforms = (context: Context, locations: UniformLocations): LineSDFUniformsType => ({
+    'u_matrix': new UniformMatrix4f(context, locations.u_matrix),
+    'u_ratio': new Uniform1f(context, locations.u_ratio),
+    'u_device_pixel_ratio': new Uniform1f(context, locations.u_device_pixel_ratio),
+    'u_units_to_pixels': new Uniform2f(context, locations.u_units_to_pixels),
+    'u_patternscale_a': new Uniform2f(context, locations.u_patternscale_a),
+    'u_patternscale_b': new Uniform2f(context, locations.u_patternscale_b),
+    'u_sdfgamma': new Uniform1f(context, locations.u_sdfgamma),
+    'u_image': new Uniform1i(context, locations.u_image),
+    'u_tex_y_a': new Uniform1f(context, locations.u_tex_y_a),
+    'u_tex_y_b': new Uniform1f(context, locations.u_tex_y_b),
+    'u_mix': new Uniform1f(context, locations.u_mix)
+});
+
+const lineUniformValues = (
+    painter: Painter,
+    tile: Tile,
+    layer: LineStyleLayer,
+    coord: OverscaledTileID
+): UniformValues<LineUniformsType> => {
+    const transform = painter.transform;
+
+    return {
+        'u_matrix': calculateMatrix(painter, tile, layer, coord),
+        'u_ratio': 1 / pixelsToTileUnits(tile, 1, transform.zoom),
+        'u_device_pixel_ratio': painter.pixelRatio,
+        'u_units_to_pixels': [
+            1 / transform.pixelsToGLUnits[0],
+            1 / transform.pixelsToGLUnits[1]
+        ]
+    };
+};
+
+const lineGradientUniformValues = (
+    painter: Painter,
+    tile: Tile,
+    layer: LineStyleLayer,
+    imageHeight: number,
+    coord: OverscaledTileID
+): UniformValues<LineGradientUniformsType> => {
+    return extend(lineUniformValues(painter, tile, layer, coord), {
+        'u_image': 0,
+        'u_image_height': imageHeight,
+    });
+};
+
+const linePatternUniformValues = (
+    painter: Painter,
+    tile: Tile,
+    layer: LineStyleLayer,
+    crossfade: CrossfadeParameters,
+    coord: OverscaledTileID
+): UniformValues<LinePatternUniformsType> => {
+    const transform = painter.transform;
+    const tileZoomRatio = calculateTileRatio(tile, transform);
+    return {
+        'u_matrix': calculateMatrix(painter, tile, layer, coord),
+        'u_texsize': tile.imageAtlasTexture.size,
+        // camera zoom ratio
+        'u_ratio': 1 / pixelsToTileUnits(tile, 1, transform.zoom),
+        'u_device_pixel_ratio': painter.pixelRatio,
+        'u_image': 0,
+        'u_scale': [tileZoomRatio, crossfade.fromScale, crossfade.toScale],
+        'u_fade': crossfade.t,
+        'u_units_to_pixels': [
+            1 / transform.pixelsToGLUnits[0],
+            1 / transform.pixelsToGLUnits[1]
+        ]
+    };
+};
+
+const lineSDFUniformValues = (
+    painter: Painter,
+    tile: Tile,
+    layer: LineStyleLayer,
+    dasharray: CrossFaded<Array<number>>,
+    crossfade: CrossfadeParameters,
+    coord: OverscaledTileID
+): UniformValues<LineSDFUniformsType> => {
+    const transform = painter.transform;
+    const lineAtlas = painter.lineAtlas;
+    const tileRatio = calculateTileRatio(tile, transform);
+
+    const round = layer.layout.get('line-cap') === 'round';
+
+    const posA = lineAtlas.getDash(dasharray.from, round);
+    const posB = lineAtlas.getDash(dasharray.to, round);
+
+    const widthA = posA.width * crossfade.fromScale;
+    const widthB = posB.width * crossfade.toScale;
+
+    return extend(lineUniformValues(painter, tile, layer, coord), {
+        'u_patternscale_a': [tileRatio / widthA, -posA.height / 2],
+        'u_patternscale_b': [tileRatio / widthB, -posB.height / 2],
+        'u_sdfgamma': lineAtlas.width / (Math.min(widthA, widthB) * 256 * painter.pixelRatio) / 2,
+        'u_image': 0,
+        'u_tex_y_a': posA.y,
+        'u_tex_y_b': posB.y,
+        'u_mix': crossfade.t
+    });
+};
+
+function calculateTileRatio(tile: Tile, transform: Transform) {
+    return 1 / pixelsToTileUnits(tile, 1, transform.tileZoom);
+}
+
+function calculateMatrix(painter: Painter, tile: Tile, layer: LineStyleLayer, coord: OverscaledTileID) {
+    return painter.translatePosMatrix(
+        coord ? coord.posMatrix : tile.tileID.posMatrix,
+        tile,
+        layer.paint.get('line-translate'),
+        layer.paint.get('line-translate-anchor')
+    );
+}
+
+export {
+    lineUniforms,
+    lineGradientUniforms,
+    linePatternUniforms,
+    lineSDFUniforms,
+    lineUniformValues,
+    lineGradientUniformValues,
+    linePatternUniformValues,
+    lineSDFUniformValues
+};

package/src/render/program/pattern.ts

@@ -0,0 +1,102 @@
+import {
+    Uniform1i,
+    Uniform1f,
+    Uniform2f,
+    Uniform3f
+} from '../uniform_binding';
+import {pixelsToTileUnits} from '../../source/pixels_to_tile_units';
+
+import type {Painter} from '../painter';
+import type {OverscaledTileID} from '../../source/tile_id';
+import type {CrossFaded} from '../../style/properties';
+import type {CrossfadeParameters} from '../../style/evaluation_parameters';
+import type {UniformValues} from '../uniform_binding';
+import type {Tile} from '../../source/tile';
+import type {ResolvedImage} from '@maplibre/maplibre-gl-style-spec';
+
+type BackgroundPatternUniformsType = {
+    'u_image': Uniform1i;
+    'u_pattern_tl_a': Uniform2f;
+    'u_pattern_br_a': Uniform2f;
+    'u_pattern_tl_b': Uniform2f;
+    'u_pattern_br_b': Uniform2f;
+    'u_texsize': Uniform2f;
+    'u_mix': Uniform1f;
+    'u_pattern_size_a': Uniform2f;
+    'u_pattern_size_b': Uniform2f;
+    'u_scale_a': Uniform1f;
+    'u_scale_b': Uniform1f;
+    'u_pixel_coord_upper': Uniform2f;
+    'u_pixel_coord_lower': Uniform2f;
+    'u_tile_units_to_pixels': Uniform1f;
+};
+
+export type PatternUniformsType = {
+    // pattern uniforms:
+    'u_image': Uniform1i;
+    'u_texsize': Uniform2f;
+    'u_scale': Uniform3f;
+    'u_fade': Uniform1f;
+    'u_pixel_coord_upper': Uniform2f;
+    'u_pixel_coord_lower': Uniform2f;
+};
+
+function patternUniformValues(crossfade: CrossfadeParameters, painter: Painter, tile: Tile): UniformValues<PatternUniformsType> {
+
+    const tileRatio = 1 / pixelsToTileUnits(tile, 1, painter.transform.tileZoom);
+
+    const numTiles = Math.pow(2, tile.tileID.overscaledZ);
+    const tileSizeAtNearestZoom = tile.tileSize * Math.pow(2, painter.transform.tileZoom) / numTiles;
+
+    const pixelX = tileSizeAtNearestZoom * (tile.tileID.canonical.x + tile.tileID.wrap * numTiles);
+    const pixelY = tileSizeAtNearestZoom * tile.tileID.canonical.y;
+
+    return {
+        'u_image': 0,
+        'u_texsize': tile.imageAtlasTexture.size,
+        'u_scale': [tileRatio, crossfade.fromScale, crossfade.toScale],
+        'u_fade': crossfade.t,
+        // split the pixel coord into two pairs of 16 bit numbers. The glsl spec only guarantees 16 bits of precision.
+        'u_pixel_coord_upper': [pixelX >> 16, pixelY >> 16],
+        'u_pixel_coord_lower': [pixelX & 0xFFFF, pixelY & 0xFFFF]
+    };
+}
+
+function bgPatternUniformValues(
+    image: CrossFaded<ResolvedImage>,
+    crossfade: CrossfadeParameters,
+    painter: Painter,
+    tile: {
+        tileID: OverscaledTileID;
+        tileSize: number;
+    }
+): UniformValues<BackgroundPatternUniformsType> {
+    const imagePosA = painter.imageManager.getPattern(image.from.toString());
+    const imagePosB = painter.imageManager.getPattern(image.to.toString());
+    const {width, height} = painter.imageManager.getPixelSize();
+
+    const numTiles = Math.pow(2, tile.tileID.overscaledZ);
+    const tileSizeAtNearestZoom = tile.tileSize * Math.pow(2, painter.transform.tileZoom) / numTiles;
+
+    const pixelX = tileSizeAtNearestZoom * (tile.tileID.canonical.x + tile.tileID.wrap * numTiles);
+    const pixelY = tileSizeAtNearestZoom * tile.tileID.canonical.y;
+
+    return {
+        'u_image': 0,
+        'u_pattern_tl_a': (imagePosA as any).tl,
+        'u_pattern_br_a': (imagePosA as any).br,
+        'u_pattern_tl_b': (imagePosB as any).tl,
+        'u_pattern_br_b': (imagePosB as any).br,
+        'u_texsize': [width, height],
+        'u_mix': crossfade.t,
+        'u_pattern_size_a': (imagePosA as any).displaySize,
+        'u_pattern_size_b': (imagePosB as any).displaySize,
+        'u_scale_a': crossfade.fromScale,
+        'u_scale_b': crossfade.toScale,
+        'u_tile_units_to_pixels': 1 / pixelsToTileUnits(tile, 1, painter.transform.tileZoom),
+        // split the pixel coord into two pairs of 16 bit numbers. The glsl spec only guarantees 16 bits of precision.
+        'u_pixel_coord_upper': [pixelX >> 16, pixelY >> 16],
+        'u_pixel_coord_lower': [pixelX & 0xFFFF, pixelY & 0xFFFF]
+    };
+}
+export {bgPatternUniformValues, patternUniformValues};

package/src/render/program/program_uniforms.ts

@@ -0,0 +1,46 @@
+import {fillExtrusionUniforms, fillExtrusionPatternUniforms} from './fill_extrusion_program';
+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 {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 {terrainUniforms, terrainDepthUniforms, terrainCoordsUniforms} from './terrain_program';
+import {skyUniforms} from './sky_program';
+
+export const programUniforms = {
+    fillExtrusion: fillExtrusionUniforms,
+    fillExtrusionPattern: fillExtrusionPatternUniforms,
+    fill: fillUniforms,
+    fillPattern: fillPatternUniforms,
+    fillOutline: fillOutlineUniforms,
+    fillOutlinePattern: fillOutlinePatternUniforms,
+    circle: circleUniforms,
+    collisionBox: collisionUniforms,
+    collisionCircle: collisionCircleUniforms,
+    debug: debugUniforms,
+    clippingMask: clippingMaskUniforms,
+    heatmap: heatmapUniforms,
+    heatmapTexture: heatmapTextureUniforms,
+    hillshade: hillshadeUniforms,
+    hillshadePrepare: hillshadePrepareUniforms,
+    line: lineUniforms,
+    lineGradient: lineGradientUniforms,
+    linePattern: linePatternUniforms,
+    lineSDF: lineSDFUniforms,
+    raster: rasterUniforms,
+    symbolIcon: symbolIconUniforms,
+    symbolSDF: symbolSDFUniforms,
+    symbolTextAndIcon: symbolTextAndIconUniforms,
+    background: backgroundUniforms,
+    backgroundPattern: backgroundPatternUniforms,
+    terrain: terrainUniforms,
+    terrainDepth: terrainDepthUniforms,
+    terrainCoords: terrainCoordsUniforms,
+    sky: skyUniforms
+};

package/src/render/program/raster_program.ts

@@ -0,0 +1,88 @@
+import {Uniform1i, Uniform1f, Uniform2f, Uniform3f, UniformMatrix4f} from '../uniform_binding';
+
+import type {Context} from '../../gl/context';
+import type {UniformValues, UniformLocations} from '../uniform_binding';
+import type {RasterStyleLayer} from '../../style/style_layer/raster_style_layer';
+import {mat4} from 'gl-matrix';
+
+export type RasterUniformsType = {
+    'u_matrix': UniformMatrix4f;
+    'u_tl_parent': Uniform2f;
+    'u_scale_parent': Uniform1f;
+    'u_buffer_scale': Uniform1f;
+    'u_fade_t': Uniform1f;
+    'u_opacity': Uniform1f;
+    'u_image0': Uniform1i;
+    'u_image1': Uniform1i;
+    'u_brightness_low': Uniform1f;
+    'u_brightness_high': Uniform1f;
+    'u_saturation_factor': Uniform1f;
+    'u_contrast_factor': Uniform1f;
+    'u_spin_weights': Uniform3f;
+};
+
+const rasterUniforms = (context: Context, locations: UniformLocations): RasterUniformsType => ({
+    'u_matrix': new UniformMatrix4f(context, locations.u_matrix),
+    'u_tl_parent': new Uniform2f(context, locations.u_tl_parent),
+    'u_scale_parent': new Uniform1f(context, locations.u_scale_parent),
+    'u_buffer_scale': new Uniform1f(context, locations.u_buffer_scale),
+    'u_fade_t': new Uniform1f(context, locations.u_fade_t),
+    'u_opacity': new Uniform1f(context, locations.u_opacity),
+    'u_image0': new Uniform1i(context, locations.u_image0),
+    'u_image1': new Uniform1i(context, locations.u_image1),
+    'u_brightness_low': new Uniform1f(context, locations.u_brightness_low),
+    'u_brightness_high': new Uniform1f(context, locations.u_brightness_high),
+    'u_saturation_factor': new Uniform1f(context, locations.u_saturation_factor),
+    'u_contrast_factor': new Uniform1f(context, locations.u_contrast_factor),
+    'u_spin_weights': new Uniform3f(context, locations.u_spin_weights)
+});
+
+const rasterUniformValues = (
+    matrix: mat4,
+    parentTL: [number, number],
+    parentScaleBy: number,
+    fade: {
+        mix: number;
+        opacity: number;
+    },
+    layer: RasterStyleLayer
+): UniformValues<RasterUniformsType> => ({
+    'u_matrix': matrix,
+    'u_tl_parent': parentTL,
+    'u_scale_parent': parentScaleBy,
+    'u_buffer_scale': 1,
+    'u_fade_t': fade.mix,
+    'u_opacity': fade.opacity * layer.paint.get('raster-opacity'),
+    'u_image0': 0,
+    'u_image1': 1,
+    'u_brightness_low': layer.paint.get('raster-brightness-min'),
+    'u_brightness_high': layer.paint.get('raster-brightness-max'),
+    'u_saturation_factor': saturationFactor(layer.paint.get('raster-saturation')),
+    'u_contrast_factor': contrastFactor(layer.paint.get('raster-contrast')),
+    'u_spin_weights': spinWeights(layer.paint.get('raster-hue-rotate'))
+});
+
+function spinWeights(angle) {
+    angle *= Math.PI / 180;
+    const s = Math.sin(angle);
+    const c = Math.cos(angle);
+    return [
+        (2 * c + 1) / 3,
+        (-Math.sqrt(3) * s - c + 1) / 3,
+        (Math.sqrt(3) * s - c + 1) / 3
+    ];
+}
+
+function contrastFactor(contrast) {
+    return contrast > 0 ?
+        1 / (1 - contrast) :
+        1 + contrast;
+}
+
+function saturationFactor(saturation) {
+    return saturation > 0 ?
+        1 - 1 / (1.001 - saturation) :
+        -saturation;
+}
+
+export {rasterUniforms, rasterUniformValues};

package/src/render/program/sky_program.ts

@@ -0,0 +1,28 @@
+import {UniformColor, Uniform1f} from '../uniform_binding';
+import type {Context} from '../../gl/context';
+import type {UniformValues, UniformLocations} from '../uniform_binding';
+import {Transform} from '../../geo/transform';
+import {Sky} from '../../style/sky';
+
+export type SkyUniformsType = {
+    'u_sky_color': UniformColor;
+    'u_horizon_color': UniformColor;
+    'u_horizon': Uniform1f;
+    'u_sky_horizon_blend': Uniform1f;
+};
+
+const skyUniforms = (context: Context, locations: UniformLocations): SkyUniformsType => ({
+    'u_sky_color': new UniformColor(context, locations.u_sky_color),
+    'u_horizon_color': new UniformColor(context, locations.u_horizon_color),
+    'u_horizon': new Uniform1f(context, locations.u_horizon),
+    'u_sky_horizon_blend': new Uniform1f(context, locations.u_sky_horizon_blend),
+});
+
+const skyUniformValues = (sky: Sky, transform: Transform, pixelRatio: number): UniformValues<SkyUniformsType> => ({
+    'u_sky_color': sky.properties.get('sky-color'),
+    'u_horizon_color': sky.properties.get('horizon-color'),
+    'u_horizon': (transform.height / 2 + transform.getHorizon()) * pixelRatio,
+    'u_sky_horizon_blend': (sky.properties.get('sky-horizon-blend') * transform.height / 2) * pixelRatio,
+});
+
+export {skyUniforms, skyUniformValues};