@scoova/mgl 1.0.0

package/src/render/draw_fill.test.ts

@@ -0,0 +1,137 @@
+import {mat4} from 'gl-matrix';
+import {OverscaledTileID} from '../source/tile_id';
+import {SourceCache} from '../source/source_cache';
+import {Tile} from '../source/tile';
+import {Painter} from './painter';
+import {Program} from './program';
+import type {ZoomHistory} from '../style/zoom_history';
+import type {Map} from '../ui/map';
+import {Transform} from '../geo/transform';
+import type {EvaluationParameters} from '../style/evaluation_parameters';
+import type {FillLayerSpecification} from '@maplibre/maplibre-gl-style-spec';
+import {Style} from '../style/style';
+import {FillStyleLayer} from '../style/style_layer/fill_style_layer';
+import {drawFill} from './draw_fill';
+import {FillBucket} from '../data/bucket/fill_bucket';
+import {ProgramConfiguration, ProgramConfigurationSet} from '../data/program_configuration';
+
+jest.mock('./painter');
+jest.mock('./program');
+jest.mock('../source/source_cache');
+jest.mock('../source/tile');
+jest.mock('../data/bucket/symbol_bucket');
+jest.mock('../symbol/projection');
+
+describe('drawFill', () => {
+    test('should call programConfiguration.setConstantPatternPositions for transitioning fill-pattern', () => {
+
+        const painterMock: Painter = constructMockPainter();
+        const layer: FillStyleLayer = constructMockLayer();
+
+        const programMock = new Program(null as any, null as any, null as any, null as any, null as any, null as any);
+        (painterMock.useProgram as jest.Mock).mockReturnValue(programMock);
+
+        const mockTile = constructMockTile(layer);
+
+        const sourceCacheMock = new SourceCache(null as any, null as any, null as any);
+        (sourceCacheMock.getTile as jest.Mock).mockReturnValue(mockTile);
+        sourceCacheMock.map = {showCollisionBoxes: false} as any as Map;
+
+        drawFill(painterMock, sourceCacheMock, layer, [mockTile.tileID]);
+
+        // twice: first for fill, second for stroke
+        expect(programMock.draw).toHaveBeenCalledTimes(2);
+
+        const bucket: FillBucket = (mockTile.getBucket(layer) as any);
+        const programConfiguration = bucket.programConfigurations.get(layer.id);
+
+        expect(programConfiguration.setConstantPatternPositions).toHaveBeenCalled();
+    });
+
+    function constructMockLayer(): FillStyleLayer {
+        const layerSpec = {
+            id: 'mock-layer',
+            source: 'empty-source',
+            type: 'fill',
+            layout: {},
+            'paint': {
+                'fill-pattern': 'pattern0'
+            }
+        } as FillLayerSpecification;
+        const layer = new FillStyleLayer(layerSpec);
+        layer.getCrossfadeParameters = () => ({} as any);
+        layer.recalculate({zoom: 0, zoomHistory: {} as ZoomHistory} as EvaluationParameters, []);
+
+        // Important: this setup is on purpose -- to NOT match layerspec
+        // 'fill-pattern': 'pattern0'
+        // so tile.imageAtlas.patternPositions['pattern0'] would return nothing
+        // mimicing the transitioning fill-pattern value
+        layer.getPaintProperty = () => {
+            return 'pattern1';
+        };
+
+        return layer;
+    }
+
+    function constructMockPainter(): Painter {
+        const painterMock = new Painter(null as any, null as any);
+        painterMock.context = {
+            gl: {},
+            activeTexture: {
+                set: () => {}
+            }
+        } as any;
+        painterMock.renderPass = 'translucent';
+        painterMock.transform = {pitch: 0, labelPlaneMatrix: mat4.create()} as any as Transform;
+        painterMock.options = {} as any;
+        painterMock.style = {
+            map: {}
+        } as any as Style;
+
+        return painterMock;
+    }
+
+    function constructMockTile(layer: FillStyleLayer): Tile {
+        const tileId = new OverscaledTileID(1, 0, 1, 0, 0);
+        tileId.posMatrix = mat4.create();
+
+        const tile = new Tile(tileId, 256);
+        tile.tileID = tileId;
+
+        // Important: this setup is on purpose -- to NOT match layerspec
+        // 'fill-pattern': 'pattern0'
+        // so tile.imageAtlas.patternPositions['pattern0'] would return nothing
+        // mimicing the transitioning fill-pattern value
+        tile.imageAtlas = {
+            patternPositions: {
+                'pattern1': {}
+            }
+        } as any;
+        tile.imageAtlasTexture = {
+            bind: () => {}
+        } as any;
+
+        const bucketMock = constructMockBucket(layer);
+
+        (tile.getBucket as jest.Mock).mockReturnValue(bucketMock);
+        (tile.patternsLoaded as jest.Mock).mockReturnValue(true);
+        return tile;
+    }
+
+    function constructMockBucket(layer: FillStyleLayer) {
+        const bucketMock = new FillBucket({
+            layers: [layer]
+        } as any);
+
+        const mockProgramConfigurations: ProgramConfigurationSet<FillStyleLayer> = {} as any;
+        const mockProgramConfiguration: ProgramConfiguration = {} as any;
+        mockProgramConfiguration.updatePaintBuffers = () => {};
+        mockProgramConfiguration.setConstantPatternPositions = jest.fn();
+
+        mockProgramConfigurations.get = () => mockProgramConfiguration;
+
+        bucketMock.programConfigurations = mockProgramConfigurations;
+
+        return bucketMock;
+    }
+});

package/src/render/draw_fill.ts

@@ -0,0 +1,128 @@
+import {Color} from '@maplibre/maplibre-gl-style-spec';
+import {DepthMode} from '../gl/depth_mode';
+import {CullFaceMode} from '../gl/cull_face_mode';
+import {ColorMode} from '../gl/color_mode';
+import {
+    fillUniformValues,
+    fillPatternUniformValues,
+    fillOutlineUniformValues,
+    fillOutlinePatternUniformValues
+} from './program/fill_program';
+
+import type {Painter} from './painter';
+import type {SourceCache} from '../source/source_cache';
+import type {FillStyleLayer} from '../style/style_layer/fill_style_layer';
+import type {FillBucket} from '../data/bucket/fill_bucket';
+import type {OverscaledTileID} from '../source/tile_id';
+import {updatePatternPositionsInProgram} from './update_pattern_positions_in_program';
+
+export function drawFill(painter: Painter, sourceCache: SourceCache, layer: FillStyleLayer, coords: Array<OverscaledTileID>) {
+    const color = layer.paint.get('fill-color');
+    const opacity = layer.paint.get('fill-opacity');
+
+    if (opacity.constantOr(1) === 0) {
+        return;
+    }
+
+    const colorMode = painter.colorModeForRenderPass();
+
+    const pattern = layer.paint.get('fill-pattern');
+    const pass = painter.opaquePassEnabledForLayer() &&
+        (!pattern.constantOr(1 as any) &&
+            color.constantOr(Color.transparent).a === 1 &&
+            opacity.constantOr(0) === 1) ? 'opaque' : 'translucent';
+
+    // Draw fill
+    if (painter.renderPass === pass) {
+        const depthMode = painter.depthModeForSublayer(
+            1, painter.renderPass === 'opaque' ? DepthMode.ReadWrite : DepthMode.ReadOnly);
+        drawFillTiles(painter, sourceCache, layer, coords, depthMode, colorMode, false);
+    }
+
+    // Draw stroke
+    if (painter.renderPass === 'translucent' && layer.paint.get('fill-antialias')) {
+
+        // If we defined a different color for the fill outline, we are
+        // going to ignore the bits in 0x07 and just care about the global
+        // clipping mask.
+        // Otherwise, we only want to drawFill the antialiased parts that are
+        // *outside* the current shape. This is important in case the fill
+        // or stroke color is translucent. If we wouldn't clip to outside
+        // the current shape, some pixels from the outline stroke overlapped
+        // the (non-antialiased) fill.
+        const depthMode = painter.depthModeForSublayer(
+            layer.getPaintProperty('fill-outline-color') ? 2 : 0, DepthMode.ReadOnly);
+        drawFillTiles(painter, sourceCache, layer, coords, depthMode, colorMode, true);
+    }
+}
+
+function drawFillTiles(
+    painter: Painter,
+    sourceCache: SourceCache,
+    layer: FillStyleLayer,
+    coords: Array<OverscaledTileID>,
+    depthMode: Readonly<DepthMode>,
+    colorMode: Readonly<ColorMode>,
+    isOutline: boolean) {
+    const gl = painter.context.gl;
+    const fillPropertyName = 'fill-pattern';
+    const patternProperty = layer.paint.get(fillPropertyName);
+    const image = patternProperty && patternProperty.constantOr(1 as any);
+    const crossfade = layer.getCrossfadeParameters();
+    let drawMode, programName, uniformValues, indexBuffer, segments;
+
+    if (!isOutline) {
+        programName = image ? 'fillPattern' : 'fill';
+        drawMode = gl.TRIANGLES;
+    } else {
+        programName = image && !layer.getPaintProperty('fill-outline-color') ? 'fillOutlinePattern' : 'fillOutline';
+        drawMode = gl.LINES;
+    }
+
+    const constantPattern = patternProperty.constantOr(null);
+
+    for (const coord of coords) {
+        const tile = sourceCache.getTile(coord);
+        if (image && !tile.patternsLoaded()) continue;
+
+        const bucket: FillBucket = (tile.getBucket(layer) as any);
+        if (!bucket) continue;
+
+        const programConfiguration = bucket.programConfigurations.get(layer.id);
+        const program = painter.useProgram(programName, programConfiguration);
+        const terrainData = painter.style.map.terrain && painter.style.map.terrain.getTerrainData(coord);
+
+        if (image) {
+            painter.context.activeTexture.set(gl.TEXTURE0);
+            tile.imageAtlasTexture.bind(gl.LINEAR, gl.CLAMP_TO_EDGE);
+            programConfiguration.updatePaintBuffers(crossfade);
+        }
+
+        updatePatternPositionsInProgram(programConfiguration, fillPropertyName, constantPattern, tile, layer);
+
+        const terrainCoord = terrainData ? coord : null;
+        const posMatrix = terrainCoord ? terrainCoord.posMatrix : coord.posMatrix;
+        const tileMatrix = painter.translatePosMatrix(posMatrix, tile,
+            layer.paint.get('fill-translate'), layer.paint.get('fill-translate-anchor'));
+
+        if (!isOutline) {
+            indexBuffer = bucket.indexBuffer;
+            segments = bucket.segments;
+            uniformValues = image ?
+                fillPatternUniformValues(tileMatrix, painter, crossfade, tile) :
+                fillUniformValues(tileMatrix);
+        } else {
+            indexBuffer = bucket.indexBuffer2;
+            segments = bucket.segments2;
+            const drawingBufferSize = [gl.drawingBufferWidth, gl.drawingBufferHeight] as [number, number];
+            uniformValues = (programName === 'fillOutlinePattern' && image) ?
+                fillOutlinePatternUniformValues(tileMatrix, painter, crossfade, tile, drawingBufferSize) :
+                fillOutlineUniformValues(tileMatrix, drawingBufferSize);
+        }
+
+        program.draw(painter.context, drawMode, depthMode,
+            painter.stencilModeForClipping(coord), colorMode, CullFaceMode.disabled, uniformValues, terrainData,
+            layer.id, bucket.layoutVertexBuffer, indexBuffer, segments,
+            layer.paint, painter.transform.zoom, programConfiguration);
+    }
+}

package/src/render/draw_fill_extrusion.ts

@@ -0,0 +1,97 @@
+import {DepthMode} from '../gl/depth_mode';
+import {StencilMode} from '../gl/stencil_mode';
+import {ColorMode} from '../gl/color_mode';
+import {CullFaceMode} from '../gl/cull_face_mode';
+import {
+    fillExtrusionUniformValues,
+    fillExtrusionPatternUniformValues,
+} from './program/fill_extrusion_program';
+
+import type {Painter} from './painter';
+import type {SourceCache} from '../source/source_cache';
+import type {FillExtrusionStyleLayer} from '../style/style_layer/fill_extrusion_style_layer';
+import type {FillExtrusionBucket} from '../data/bucket/fill_extrusion_bucket';
+import type {OverscaledTileID} from '../source/tile_id';
+
+import {updatePatternPositionsInProgram} from './update_pattern_positions_in_program';
+
+export function drawFillExtrusion(painter: Painter, source: SourceCache, layer: FillExtrusionStyleLayer, coords: Array<OverscaledTileID>) {
+    const opacity = layer.paint.get('fill-extrusion-opacity');
+    if (opacity === 0) {
+        return;
+    }
+
+    if (painter.renderPass === 'translucent') {
+        const depthMode = new DepthMode(painter.context.gl.LEQUAL, DepthMode.ReadWrite, painter.depthRangeFor3D);
+
+        if (opacity === 1 && !layer.paint.get('fill-extrusion-pattern').constantOr(1 as any)) {
+            const colorMode = painter.colorModeForRenderPass();
+            drawExtrusionTiles(painter, source, layer, coords, depthMode, StencilMode.disabled, colorMode);
+
+        } else {
+            // Draw transparent buildings in two passes so that only the closest surface is drawn.
+            // First draw all the extrusions into only the depth buffer. No colors are drawn.
+            drawExtrusionTiles(painter, source, layer, coords, depthMode,
+                StencilMode.disabled,
+                ColorMode.disabled);
+
+            // Then draw all the extrusions a second type, only coloring fragments if they have the
+            // same depth value as the closest fragment in the previous pass. Use the stencil buffer
+            // to prevent the second draw in cases where we have coincident polygons.
+            drawExtrusionTiles(painter, source, layer, coords, depthMode,
+                painter.stencilModeFor3D(),
+                painter.colorModeForRenderPass());
+        }
+    }
+}
+
+function drawExtrusionTiles(
+    painter: Painter,
+    source: SourceCache,
+    layer: FillExtrusionStyleLayer,
+    coords: OverscaledTileID[],
+    depthMode: DepthMode,
+    stencilMode: Readonly<StencilMode>,
+    colorMode: Readonly<ColorMode>) {
+    const context = painter.context;
+    const gl = context.gl;
+    const fillPropertyName = 'fill-extrusion-pattern';
+    const patternProperty = layer.paint.get(fillPropertyName);
+    const image = patternProperty.constantOr(1 as any);
+    const crossfade = layer.getCrossfadeParameters();
+    const opacity = layer.paint.get('fill-extrusion-opacity');
+    const constantPattern = patternProperty.constantOr(null);
+    for (const coord of coords) {
+        const tile = source.getTile(coord);
+        const bucket: FillExtrusionBucket = (tile.getBucket(layer) as any);
+        if (!bucket) continue;
+
+        const terrainData = painter.style.map.terrain && painter.style.map.terrain.getTerrainData(coord);
+        const programConfiguration = bucket.programConfigurations.get(layer.id);
+        const program = painter.useProgram(image ? 'fillExtrusionPattern' : 'fillExtrusion', programConfiguration);
+
+        if (image) {
+            painter.context.activeTexture.set(gl.TEXTURE0);
+            tile.imageAtlasTexture.bind(gl.LINEAR, gl.CLAMP_TO_EDGE);
+            programConfiguration.updatePaintBuffers(crossfade);
+        }
+
+        updatePatternPositionsInProgram(programConfiguration, fillPropertyName, constantPattern, tile, layer);
+
+        const matrix = painter.translatePosMatrix(
+            coord.posMatrix,
+            tile,
+            layer.paint.get('fill-extrusion-translate'),
+            layer.paint.get('fill-extrusion-translate-anchor'));
+
+        const shouldUseVerticalGradient = layer.paint.get('fill-extrusion-vertical-gradient');
+        const uniformValues = image ?
+            fillExtrusionPatternUniformValues(matrix, painter, shouldUseVerticalGradient, opacity, coord, crossfade, tile) :
+            fillExtrusionUniformValues(matrix, painter, shouldUseVerticalGradient, opacity);
+
+        program.draw(context, context.gl.TRIANGLES, depthMode, stencilMode, colorMode, CullFaceMode.backCCW,
+            uniformValues, terrainData, layer.id, bucket.layoutVertexBuffer, bucket.indexBuffer,
+            bucket.segments, layer.paint, painter.transform.zoom,
+            programConfiguration, painter.style.map.terrain && bucket.centroidVertexBuffer);
+    }
+}

package/src/render/draw_heatmap.ts

@@ -0,0 +1,228 @@
+import {Texture} from './texture';
+import {Color} from '@maplibre/maplibre-gl-style-spec';
+import {DepthMode} from '../gl/depth_mode';
+import {StencilMode} from '../gl/stencil_mode';
+import {ColorMode} from '../gl/color_mode';
+import {CullFaceMode} from '../gl/cull_face_mode';
+import {Context} from '../gl/context';
+import {Framebuffer} from '../gl/framebuffer';
+import {Tile} from '../source/tile';
+import {
+    heatmapUniformValues,
+    heatmapTextureUniformValues
+} from './program/heatmap_program';
+import {HEATMAP_FULL_RENDER_FBO_KEY} from '../style/style_layer/heatmap_style_layer';
+
+import type {Painter} from './painter';
+import type {SourceCache} from '../source/source_cache';
+import type {HeatmapStyleLayer} from '../style/style_layer/heatmap_style_layer';
+import type {HeatmapBucket} from '../data/bucket/heatmap_bucket';
+import type {OverscaledTileID} from '../source/tile_id';
+
+export function drawHeatmap(painter: Painter, sourceCache: SourceCache, layer: HeatmapStyleLayer, tileIDs: Array<OverscaledTileID>) {
+    if (layer.paint.get('heatmap-opacity') === 0) {
+        return;
+    }
+    const context = painter.context;
+
+    if (painter.style.map.terrain) {
+        for (const coord of tileIDs) {
+            const tile = sourceCache.getTile(coord);
+            // Skip tiles that have uncovered parents to avoid flickering; we don't need
+            // to use complex tile masking here because the change between zoom levels is subtle,
+            // so it's fine to simply render the parent until all its 4 children are loaded
+            if (sourceCache.hasRenderableParent(coord)) continue;
+            if (painter.renderPass === 'offscreen') {
+                prepareHeatmapTerrain(painter, tile, layer, coord);
+            } else if (painter.renderPass === 'translucent') {
+                renderHeatmapTerrain(painter, layer, coord);
+            }
+        }
+        context.viewport.set([0, 0, painter.width, painter.height]);
+    } else {
+        if (painter.renderPass === 'offscreen') {
+            prepareHeatmapFlat(painter, sourceCache, layer, tileIDs);
+        } else if (painter.renderPass === 'translucent') {
+            renderHeatmapFlat(painter, layer);
+        }
+
+    }
+}
+
+function prepareHeatmapFlat(painter: Painter, sourceCache: SourceCache, layer: HeatmapStyleLayer, coords: Array<OverscaledTileID>) {
+    const context = painter.context;
+    const gl = context.gl;
+
+    // Allow kernels to be drawn across boundaries, so that
+    // large kernels are not clipped to tiles
+    const stencilMode = StencilMode.disabled;
+    // Turn on additive blending for kernels, which is a key aspect of kernel density estimation formula
+    const colorMode = new ColorMode([gl.ONE, gl.ONE], Color.transparent, [true, true, true, true]);
+
+    bindFramebuffer(context, painter, layer);
+
+    context.clear({color: Color.transparent});
+
+    for (let i = 0; i < coords.length; i++) {
+        const coord = coords[i];
+
+        // Skip tiles that have uncovered parents to avoid flickering; we don't need
+        // to use complex tile masking here because the change between zoom levels is subtle,
+        // so it's fine to simply render the parent until all its 4 children are loaded
+        if (sourceCache.hasRenderableParent(coord)) continue;
+
+        const tile = sourceCache.getTile(coord);
+        const bucket: HeatmapBucket = (tile.getBucket(layer) as any);
+        if (!bucket) continue;
+
+        const programConfiguration = bucket.programConfigurations.get(layer.id);
+        const program = painter.useProgram('heatmap', programConfiguration);
+        const {zoom} = painter.transform;
+
+        program.draw(context, gl.TRIANGLES, DepthMode.disabled, stencilMode, colorMode, CullFaceMode.disabled,
+            heatmapUniformValues(coord.posMatrix, tile, zoom, layer.paint.get('heatmap-intensity')), null,
+            layer.id, bucket.layoutVertexBuffer, bucket.indexBuffer,
+            bucket.segments, layer.paint, painter.transform.zoom,
+            programConfiguration);
+    }
+
+    context.viewport.set([0, 0, painter.width, painter.height]);
+}
+
+function renderHeatmapFlat(painter: Painter, layer: HeatmapStyleLayer) {
+    const context = painter.context;
+    const gl = context.gl;
+
+    context.setColorMode(painter.colorModeForRenderPass());
+
+    // Here we bind two different textures from which we'll sample in drawing
+    // heatmaps: the kernel texture, prepared in the offscreen pass, and a
+    // color ramp texture.
+    const fbo = layer.heatmapFbos.get(HEATMAP_FULL_RENDER_FBO_KEY);
+    if (!fbo) return;
+    context.activeTexture.set(gl.TEXTURE0);
+    gl.bindTexture(gl.TEXTURE_2D, fbo.colorAttachment.get());
+
+    context.activeTexture.set(gl.TEXTURE1);
+    const colorRampTexture = getColorRampTexture(context, layer);
+    colorRampTexture.bind(gl.LINEAR, gl.CLAMP_TO_EDGE);
+
+    painter.useProgram('heatmapTexture').draw(context, gl.TRIANGLES,
+        DepthMode.disabled, StencilMode.disabled, painter.colorModeForRenderPass(), CullFaceMode.disabled,
+        heatmapTextureUniformValues(painter, layer, 0, 1), null,
+        layer.id, painter.viewportBuffer, painter.quadTriangleIndexBuffer,
+        painter.viewportSegments, layer.paint, painter.transform.zoom);
+}
+
+function prepareHeatmapTerrain(painter: Painter, tile: Tile, layer: HeatmapStyleLayer, coord: OverscaledTileID) {
+    const context = painter.context;
+    const gl = context.gl;
+
+    const stencilMode = StencilMode.disabled;
+    // Turn on additive blending for kernels, which is a key aspect of kernel density estimation formula
+    const colorMode = new ColorMode([gl.ONE, gl.ONE], Color.transparent, [true, true, true, true]);
+
+    const bucket: HeatmapBucket = (tile.getBucket(layer) as any);
+    if (!bucket) return;
+
+    const tileKey = coord.key;
+    let fbo = layer.heatmapFbos.get(tileKey);
+    if (!fbo) {
+        fbo = createHeatmapFbo(context, tile.tileSize, tile.tileSize);
+        layer.heatmapFbos.set(tileKey, fbo);
+    }
+
+    context.bindFramebuffer.set(fbo.framebuffer);
+    context.viewport.set([0, 0, tile.tileSize, tile.tileSize]);
+
+    context.clear({color: Color.transparent});
+
+    const programConfiguration = bucket.programConfigurations.get(layer.id);
+    const program = painter.useProgram('heatmap', programConfiguration);
+
+    const terrainData = painter.style.map.terrain.getTerrainData(coord);
+    program.draw(context, gl.TRIANGLES, DepthMode.disabled, stencilMode, colorMode, CullFaceMode.disabled,
+        heatmapUniformValues(coord.posMatrix, tile, painter.transform.zoom, layer.paint.get('heatmap-intensity')), terrainData,
+        layer.id, bucket.layoutVertexBuffer, bucket.indexBuffer,
+        bucket.segments, layer.paint, painter.transform.zoom,
+        programConfiguration);
+}
+
+function renderHeatmapTerrain(painter: Painter, layer: HeatmapStyleLayer, coord: OverscaledTileID) {
+    const context = painter.context;
+    const gl = context.gl;
+
+    context.setColorMode(painter.colorModeForRenderPass());
+
+    const colorRampTexture = getColorRampTexture(context, layer);
+
+    // Here we bind two different textures from which we'll sample in drawing
+    // heatmaps: the kernel texture, prepared in the offscreen pass, and a
+    // color ramp texture.
+    const tileKey = coord.key;
+    const fbo = layer.heatmapFbos.get(tileKey);
+    if (!fbo) return;
+
+    context.activeTexture.set(gl.TEXTURE0);
+    gl.bindTexture(gl.TEXTURE_2D, fbo.colorAttachment.get());
+
+    context.activeTexture.set(gl.TEXTURE1);
+    colorRampTexture.bind(gl.LINEAR, gl.CLAMP_TO_EDGE);
+
+    painter.useProgram('heatmapTexture').draw(context, gl.TRIANGLES,
+        DepthMode.disabled, StencilMode.disabled, painter.colorModeForRenderPass(), CullFaceMode.disabled,
+        heatmapTextureUniformValues(painter, layer, 0, 1), null,
+        layer.id, painter.rasterBoundsBuffer, painter.quadTriangleIndexBuffer,
+        painter.rasterBoundsSegments, layer.paint, painter.transform.zoom);
+
+    // destroy the FBO after rendering
+    fbo.destroy();
+    layer.heatmapFbos.delete(tileKey);
+}
+
+function bindFramebuffer(context: Context, painter: Painter, layer: HeatmapStyleLayer) {
+    const gl = context.gl;
+    context.activeTexture.set(gl.TEXTURE1);
+
+    // Use a 4x downscaled screen texture for better performance
+    context.viewport.set([0, 0, painter.width / 4, painter.height / 4]);
+
+    let fbo = layer.heatmapFbos.get(HEATMAP_FULL_RENDER_FBO_KEY);
+
+    if (!fbo) {
+        fbo = createHeatmapFbo(context, painter.width / 4, painter.height / 4);
+        layer.heatmapFbos.set(HEATMAP_FULL_RENDER_FBO_KEY, fbo);
+    } else {
+        gl.bindTexture(gl.TEXTURE_2D, fbo.colorAttachment.get());
+        context.bindFramebuffer.set(fbo.framebuffer);
+    }
+}
+
+function createHeatmapFbo(context: Context, width: number, height: number): Framebuffer {
+    const gl = context.gl;
+    const texture = gl.createTexture();
+    gl.bindTexture(gl.TEXTURE_2D, texture);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+
+    // Use the higher precision half-float texture where available (producing much smoother looking heatmaps);
+    // Otherwise, fall back to a low precision texture
+    const numType = context.HALF_FLOAT ?? gl.UNSIGNED_BYTE;
+    const internalFormat = context.RGBA16F ?? gl.RGBA;
+
+    gl.texImage2D(gl.TEXTURE_2D, 0, internalFormat, width, height, 0, gl.RGBA, numType, null);
+
+    const fbo = context.createFramebuffer(width, height, false, false);
+    fbo.colorAttachment.set(texture);
+
+    return fbo;
+}
+
+function getColorRampTexture(context: Context, layer: HeatmapStyleLayer): Texture {
+    if (!layer.colorRampTexture) {
+        layer.colorRampTexture = new Texture(context, layer.colorRamp, context.gl.RGBA);
+    }
+    return layer.colorRampTexture;
+}