maplibre · tongust · Apr 18, 2022 · May 3, 2022 · May 3, 2022 · May 7, 2022
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,6 +8,12 @@
 
 - *...Add new stuff here...*
 
+## 2.2.0-pre.3
+
+### ✨ Features and improvements
+
+- Add new paint property `fill-composite-operation` to fill type. If the fill opacity is `source-over` by default, each geometry will be alph-blended to screen. Setting it as `source-only`, all geometies are blended to frame buffer object before rendered to screen, and it can prevent the opacity on stacked polygons from being increased. (#1191)
+
 ## 2.2.0-pre.2
 
 ### ✨ Features and improvements

diff --git a/debug/polygon-opacity-per-layer.html b/debug/polygon-opacity-per-layer.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset='utf-8' />
+<title>Add a GeoJSON polygon</title>
+<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
+<script src='../dist/maplibre-gl-dev.js'></script>
+<link href='../dist/maplibre-gl.css' rel='stylesheet' />
+<style>
+	body { margin: 0; padding: 0; }
+	#map { position: absolute; top: 0; bottom: 0; width: 100%; }
+</style>
+</head>
+<body>
+<div id='map'></div>
+<script>
+    const delta = -7;
+    var map = new maplibregl.Map({
+        container: 'map',
+        // style: {version: 8, layers: [], sources: {}},
+        style: 'https://demotiles.maplibre.org/style.json',
+        center: [-73 + delta, 34],
+        zoom: 7
+    });
+
+    map.on('load', function () {
+        map.addSource('shape1',
+            {
+                'type': 'geojson',
+                'data': {
+                    'features': [
+                        {
+                            'type': 'Feature',
+                            'properties': {
+                                'color': 'red',
+                                'opacity': 0.4
+                            },
+                            'geometry': {
+                                'type': 'MultiPolygon',
+                                'coordinates': [
+                                    [// first polygon
+                                        [// first ring
+                                            [-73 + delta, 35], [-69 + delta, 35], [-69 + delta, 34], [-73 + delta, 34], [-73. + delta, 35]
+                                        ]
+                                    ]
+                                ]
+                            }
+                        },
+                        {
+                            'type': 'Feature',
+                            'properties': {
+                                'color': 'rgb(0,255,0)',
+                                'opacity': 0.9
+                            },
+                            'geometry': {
+                                'type': 'MultiPolygon',
+                                'coordinates': [
+                                    [// first polygon
+                                        [// first ring
+                                            [-74 + delta, 35], [-70 + delta, 35], [-70 + delta, 34], [-74 + delta, 34], [-74 + delta, 35]
+                                        ]
+                                    ]
+                                ]
+                            }
+                        }
+                    ],
+                    'type': 'FeatureCollection'
+                }
+            }
+        );
+
+        const paint2d = {
+            'fill-color': ['get', 'color'],
+            'fill-opacity': ['get', 'opacity'],
+            'fill-composite-operation': 'source-only',
+            'fill-outline-color': 'rgba(0,0,0,0)'
+        };
+        map.addLayer({
+            'id': 'shape1',
+            'type': 'fill',
+            'source': 'shape1',
+            'paint': paint2d
+        });
+    });
+</script>
+
+</body>
+</html>
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "maplibre-gl",
   "description": "BSD licensed community fork of mapbox-gl, a WebGL interactive maps library",
-  "version": "2.2.0-pre.2",
+  "version": "2.2.0-pre.3",
   "main": "dist/maplibre-gl.js",
   "style": "dist/maplibre-gl.css",
   "license": "BSD-3-Clause",

diff --git a/src/render/draw_fill.test.ts b/src/render/draw_fill.test.ts
@@ -0,0 +1,249 @@
+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 type EvaluationParameters from '../style/evaluation_parameters';
+import type {FillLayerSpecification} from '../style-spec/types.g';
+import FillStyleLayer from '../style/style_layer/fill_style_layer';
+import drawFill from './draw_fill';
+import FillBucket from '../data/bucket/fill_bucket';
+
+jest.mock('./painter');
+jest.mock('./program');
+jest.mock('../source/source_cache');
+jest.mock('../source/tile');
+jest.mock('../data/bucket/fill_bucket');
+jest.mock('../symbol/projection');
+
+const layerSpec = {
+    id: 'mock-layer',
+    source: 'empty-source',
+    type: 'fill',
+    layout: {},
+    paint: {
+        'fill-color': 'red',
+        'fill-opacity': 0
+    }
+} as FillLayerSpecification;
+
+describe('drawFill', () => {
+    let tileId, sourceCacheMock;
+    beforeEach(() => {
+        tileId = new OverscaledTileID(1, 0, 1, 0, 0);
+        tileId.posMatrix = mat4.create();
+        const bucketMock = new FillBucket(null);
+        bucketMock.programConfigurations = {
+            get: () => {
+                return {
+                    updatePaintBuffers: () => {}
+                };
+            }
+        } as any;
+        const tile = new Tile(tileId, 256);
+        tile.tileID = tileId;
+        tile.imageAtlasTexture = {
+            bind: () => {}
+        } as any;
+        (tile.getBucket as jest.Mock).mockReturnValue(bucketMock);
+        sourceCacheMock = new SourceCache(null, null, null);
+        (sourceCacheMock.getTile as jest.Mock).mockReturnValue(tile);
+        sourceCacheMock.map = {showCollisionBoxes: false} as any as Map;
+    });
+
+    test('should not do anything when fill-opacity is 0', () => {
+        const mockPainter = new Painter(null, null);
+        mockPainter.renderPass = 'opaque';
+
+        const layer = new FillStyleLayer(layerSpec);
+
+        layer.recalculate({zoom: 0, zoomHistory: {} as ZoomHistory} as EvaluationParameters, []);
+
+        drawFill(mockPainter, null, layer, null);
+
+        expect(mockPainter.colorModeForRenderPass).not.toHaveBeenCalled();
+    });
+
+    test('should use fill and fillOutline programs', () => {
+        const mockPainter = new Painter(null, null);
+        mockPainter.renderPass = 'translucent';
+
+        mockPainter.style = {terrain: null};
+
+        mockPainter.context = {
+            gl: {},
+            activeTexture: {
+                set: () => {}
+            }
+        } as any;
+
+        mockPainter.transform = {
+            zoom: 1
+        } as any;
+
+        const layer = new FillStyleLayer(
+            {
+                ...layerSpec,
+                paint: {
+                    'fill-color': 'red',
+                    'fill-opacity': 0.5
+                }
+            }
+        );
+
+        layer.recalculate({zoom: 0, zoomHistory: {} as ZoomHistory} as EvaluationParameters, []);
+
+        const fillProgramMock = new Program(null, null, null, null, null, null, null);
+        const fillOutlineProgramMock = new Program(null, null, null, null, null, null, null);
+        mockPainter.useProgram = (programName) => {
+            switch (programName) {
+                case 'fill': {
+                    return fillProgramMock;
+                }
+                case 'fillOutline': {
+                    return fillOutlineProgramMock;
+                }
+                default:
+                    return null;
+            }
+        };
+
+        drawFill(mockPainter, sourceCacheMock, layer, [tileId]);
+
+        expect(fillProgramMock.draw).toHaveBeenCalledTimes(1);
+        expect(fillOutlineProgramMock.draw).toHaveBeenCalledTimes(1);
+    });
+
+    test('should call bindFramebuffer in offscreen render pass', () => {
+        const mockPainter = new Painter(null, null);
+        mockPainter.renderPass = 'offscreen';
+        mockPainter.style = {terrain: null};
+
+        const bindFramebuffer = {
+            set: () => {}
+        } as any;
+        const mockFn = () => {};
+        mockPainter.context = {
+            gl: {
+                bindTexture: mockFn
+            },
+            clear: mockFn,
+            viewport: {
+                set: mockFn
+            },
+            activeTexture: {
+                set: mockFn
+            },
+            bindFramebuffer,
+            setColorMode: mockFn
+        } as any;
+
+        mockPainter.transform = {
+            zoom: 1
+        } as any;
+
+        const layer = new FillStyleLayer(
+            {
+                ...layerSpec,
+                paint: {
+                    'fill-color': 'red',
+                    'fill-opacity': 0.5,
+                    'fill-composite-operation': 'source-only'
+                }
+            }
+        );
+
+        layer.recalculate({zoom: 0, zoomHistory: {} as ZoomHistory} as EvaluationParameters, []);
+
+        layer.fillFbo = {
+            colorAttachment: {
+                get: () => {}
+            }
+        } as any;
+
+        const fillProgramMock = new Program(null, null, null, null, null, null, null);
+        const fillfboProgramMock = new Program(null, null, null, null, null, null, null);
+        mockPainter.useProgram = (programName) => {
+            switch (programName) {
+                case 'fill': {
+                    return fillProgramMock;
+                }
+                case 'fillfbo': {
+                    return fillfboProgramMock;
+                }
+                default:
+                    return null;
+            }
+        };
+
+        const spy = jest.spyOn(bindFramebuffer, 'set');
+        drawFill(mockPainter, sourceCacheMock, layer, [tileId]);
+
+        expect(spy.mock.calls[0]).toBeTruthy();
+    });
+
+    test('should render texture of fbo to screen if fill-composite-operation is source-only and render pass is translucent ', () => {
+        const mockPainter = new Painter(null, null);
+        mockPainter.renderPass = 'translucent';
+
+        const bindFramebuffer = {
+            set: () => {}
+        } as any;
+        mockPainter.context = {
+            gl: {
+                bindTexture: () => {}
+            },
+            activeTexture: {
+                set: () => {}
+            },
+            bindFramebuffer,
+            setColorMode: () => {}
+        } as any;
+
+        mockPainter.transform = {
+            zoom: 1
+        } as any;
+
+        const layer = new FillStyleLayer(
+            {
+                ...layerSpec,
+                paint: {
+                    'fill-color': 'red',
+                    'fill-opacity': 0.5,
+                    'fill-composite-operation': 'source-only'
+                }
+            }
+        );
+
+        layer.recalculate({zoom: 0, zoomHistory: {} as ZoomHistory} as EvaluationParameters, []);
+
+        layer.fillFbo = {
+            colorAttachment: {
+                get: () => {}
+            }
+        } as any;
+
+        const fillProgramMock = new Program(null, null, null, null, null, null, null);
+        const fillfboProgramMock = new Program(null, null, null, null, null, null, null);
+        mockPainter.useProgram = (programName) => {
+            switch (programName) {
+                case 'fill': {
+                    return fillProgramMock;
+                }
+                case 'fillfbo': {
+                    return fillfboProgramMock;
+                }
+                default:
+                    return null;
+            }
+        };
+
+        drawFill(mockPainter, sourceCacheMock, layer, [tileId]);
+
+        expect(fillProgramMock.draw).toHaveBeenCalledTimes(0);
+        expect(fillfboProgramMock.draw).toHaveBeenCalledTimes(1);
+    });
+});