Implement stencil logic for render-to-texture tiles (#1672)

* Create render-to-texture renderpool to render terrain in paralell

* simpler reuse logic of rtt pool-objects

* implement stencil logic for render-to-texture tiles

* Fix tests

* Fix some more tests

* Fix lint

* add a hasStencil parameter to context.createFramebuffer mehtod

* replace Terrain style instance variable with painter

* create unit-tests for render_to_texture.ts

* Add AWS, Meta, MIERUNE to README (#1673)

* Automatically show opencollective backers and supporters in README (#1675)

* Release 3.0.0-pre.0 (#1679)

* Release 3.0.0-pre.0

* update changelog

* Bump @typescript-eslint/parser from 5.36.2 to 5.38.0 (#1686)

Bumps [@typescript-eslint/parser](https://github.com/typescript-eslint/typescript-eslint/tree/HEAD/packages/parser) from 5.36.2 to 5.38.0.
- [Release notes](https://github.com/typescript-eslint/typescript-eslint/releases)
- [Changelog](https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/parser/CHANGELOG.md)
- [Commits](https://github.com/typescript-eslint/typescript-eslint/commits/v5.38.0/packages/parser)

---
updated-dependencies:
- dependency-name: "@typescript-eslint/parser"
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <[email protected]>

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Bump @types/react from 18.0.19 to 18.0.21 (#1685)

Bumps [@types/react](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/react) from 18.0.19 to 18.0.21.
- [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases)
- [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/react)

---
updated-dependencies:
- dependency-name: "@types/react"
  dependency-type: direct:development
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <[email protected]>

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Bump playwright from 1.25.2 to 1.26.0 (#1684)

Bumps [playwright](https://github.com/Microsoft/playwright) from 1.25.2 to 1.26.0.
- [Release notes](https://github.com/Microsoft/playwright/releases)
- [Commits](microsoft/playwright@v1.25.2...v1.26.0)

---
updated-dependencies:
- dependency-name: playwright
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <[email protected]>

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Bump stylelint from 14.11.0 to 14.12.1 (#1681)

Bumps [stylelint](https://github.com/stylelint/stylelint) from 14.11.0 to 14.12.1.
- [Release notes](https://github.com/stylelint/stylelint/releases)
- [Changelog](https://github.com/stylelint/stylelint/blob/main/CHANGELOG.md)
- [Commits](stylelint/stylelint@14.11.0...14.12.1)

---
updated-dependencies:
- dependency-name: stylelint
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <[email protected]>

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Bump rollup from 2.79.0 to 2.79.1 (#1680)

Bumps [rollup](https://github.com/rollup/rollup) from 2.79.0 to 2.79.1.
- [Release notes](https://github.com/rollup/rollup/releases)
- [Changelog](https://github.com/rollup/rollup/blob/master/CHANGELOG.md)
- [Commits](rollup/rollup@v2.79.0...v2.79.1)

---
updated-dependencies:
- dependency-name: rollup
  dependency-type: direct:development
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <[email protected]>

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Bump eslint from 8.23.1 to 8.24.0 (#1682)

Bumps [eslint](https://github.com/eslint/eslint) from 8.23.1 to 8.24.0.
- [Release notes](https://github.com/eslint/eslint/releases)
- [Changelog](https://github.com/eslint/eslint/blob/main/CHANGELOG.md)
- [Commits](eslint/eslint@v8.23.1...v8.24.0)

---
updated-dependencies:
- dependency-name: eslint
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <[email protected]>

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Bump @typescript-eslint/eslint-plugin from 5.36.2 to 5.38.0 (#1683)

Bumps [@typescript-eslint/eslint-plugin](https://github.com/typescript-eslint/typescript-eslint/tree/HEAD/packages/eslint-plugin) from 5.36.2 to 5.38.0.
- [Release notes](https://github.com/typescript-eslint/typescript-eslint/releases)
- [Changelog](https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/eslint-plugin/CHANGELOG.md)
- [Commits](https://github.com/typescript-eslint/typescript-eslint/commits/v5.38.0/packages/eslint-plugin)

---
updated-dependencies:
- dependency-name: "@typescript-eslint/eslint-plugin"
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <[email protected]>

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Bump pdf-merger-js from 4.1.0 to 4.1.1 (#1665)

Bumps [pdf-merger-js](https://github.com/nbesli/pdf-merger-js) from 4.1.0 to 4.1.1.
- [Release notes](https://github.com/nbesli/pdf-merger-js/releases)
- [Commits](nbesli/pdf-merger-js@v4.1.0...v4.1.1)

---
updated-dependencies:
- dependency-name: pdf-merger-js
  dependency-type: direct:development
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <[email protected]>

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Bump @rollup/plugin-node-resolve from 14.0.1 to 14.1.0 (#1663)

Bumps [@rollup/plugin-node-resolve](https://github.com/rollup/plugins/tree/HEAD/packages/node-resolve) from 14.0.1 to 14.1.0.
- [Release notes](https://github.com/rollup/plugins/releases)
- [Changelog](https://github.com/rollup/plugins/blob/master/packages/node-resolve/CHANGELOG.md)
- [Commits](https://github.com/rollup/plugins/commits/node-resolve-v14.1.0/packages/node-resolve)

---
updated-dependencies:
- dependency-name: "@rollup/plugin-node-resolve"
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <[email protected]>

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* bugfix in renderpool useObject logic, updated tests

* lint fixes

* test and tiles (#2414)

* reduce changes

---------

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: HarelM <[email protected]>
Co-authored-by: Oliver Wipfli <[email protected]>
Co-authored-by: Birk Skyum <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Victor Gerard Temprano <[email protected]>

src/gl/context.ts

@@ -206,13 +206,14 @@ class Context {
         return rbo;
     }
 
-    createFramebuffer(width: number, height: number, hasDepth: boolean) {
-        return new Framebuffer(this, width, height, hasDepth);
+    createFramebuffer(width: number, height: number, hasDepth: boolean, hasStencil: boolean) {
+        return new Framebuffer(this, width, height, hasDepth, hasStencil);
     }
 
     clear({
         color,
-        depth
+        depth,
+        stencil
     }: ClearArgs) {
         const gl = this.gl;
         let mask = 0;
@@ -234,12 +235,11 @@ class Context {
             this.depthMask.set(true);
         }
 
-        // See note in Painter#clearStencil: implement this the easy way once GPU bug/workaround is fixed upstream
-        // if (typeof stencil !== 'undefined') {
-        //     mask |= gl.STENCIL_BUFFER_BIT;
-        //     this.clearStencil.set(stencil);
-        //     this.stencilMask.set(0xFF);
-        // }
+        if (typeof stencil !== 'undefined') {
+            mask |= gl.STENCIL_BUFFER_BIT;
+            this.clearStencil.set(stencil);
+            this.stencilMask.set(0xFF);
+        }
 
         gl.clear(mask);
     }

src/gl/framebuffer.ts

@@ -1,4 +1,4 @@
-import {ColorAttachment, DepthAttachment} from './value';
+import {ColorAttachment, DepthAttachment, DepthStencilAttachment} from './value';
 
 import type Context from './context';
 
@@ -10,7 +10,7 @@ class Framebuffer {
     colorAttachment: ColorAttachment;
     depthAttachment: DepthAttachment;
 
-    constructor(context: Context, width: number, height: number, hasDepth: boolean) {
+    constructor(context: Context, width: number, height: number, hasDepth: boolean, hasStencil: boolean) {
         this.context = context;
         this.width = width;
         this.height = height;
@@ -19,7 +19,9 @@ class Framebuffer {
 
         this.colorAttachment = new ColorAttachment(context, fbo);
         if (hasDepth) {
-            this.depthAttachment = new DepthAttachment(context, fbo);
+            this.depthAttachment = hasStencil ? new DepthStencilAttachment(context, fbo) : new DepthAttachment(context, fbo);
+        } else if (hasStencil) {
+            throw new Error('Stencil cannot be setted without depth');
         }
         if (gl.checkFramebufferStatus(gl.FRAMEBUFFER) !== gl.FRAMEBUFFER_COMPLETE) {
             throw new Error('Framebuffer is not complete');

src/gl/render_pool.ts

@@ -38,10 +38,10 @@ export default class RenderPool {
     }
 
     private _createObject(id: number): PoolObject {
-        const fbo = this._context.createFramebuffer(this._tileSize, this._tileSize, true);
+        const fbo = this._context.createFramebuffer(this._tileSize, this._tileSize, true, true);
         const texture = new Texture(this._context, {width: this._tileSize, height: this._tileSize, data: null}, this._context.gl.RGBA);
         texture.bind(this._context.gl.LINEAR, this._context.gl.CLAMP_TO_EDGE);
-        fbo.depthAttachment.set(this._context.createRenderbuffer(this._context.gl.DEPTH_COMPONENT16, this._tileSize, this._tileSize));
+        fbo.depthAttachment.set(this._context.createRenderbuffer(this._context.gl.DEPTH_STENCIL, this._tileSize, this._tileSize));
         fbo.colorAttachment.set(texture.texture);
         return {id, fbo, texture, stamp: -1, inUse: false};
     }

src/gl/value.ts

@@ -516,3 +516,16 @@ export class DepthAttachment extends FramebufferAttachment<WebGLRenderbuffer> {
         this.dirty = false;
     }
 }
+
+export class DepthStencilAttachment extends FramebufferAttachment<WebGLRenderbuffer> {
+    set(v?: WebGLRenderbuffer | null): void {
+        if (v === this.current && !this.dirty) return;
+        this.context.bindFramebuffer.set(this.parent);
+        // note: it's possible to attach a texture to the depth attachment
+        // point, but thus far MBGL only uses renderbuffers for depth
+        const gl = this.gl;
+        gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_STENCIL_ATTACHMENT, gl.RENDERBUFFER, v);
+        this.current = v;
+        this.dirty = false;
+    }
+}

src/render/draw_heatmap.ts

@@ -86,7 +86,7 @@ function bindFramebuffer(context: Context, painter: Painter, layer: HeatmapStyle
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
 
-        fbo = layer.heatmapFbo = context.createFramebuffer(painter.width / 4, painter.height / 4, false);
+        fbo = layer.heatmapFbo = context.createFramebuffer(painter.width / 4, painter.height / 4, false, false);
 
         bindTextureToFramebuffer(context, painter, texture, fbo);
 

src/render/draw_hillshade.ts

@@ -103,7 +103,7 @@ function prepareHillshade(
             const renderTexture = new Texture(context, {width: tileSize, height: tileSize, data: null}, gl.RGBA);
             renderTexture.bind(gl.LINEAR, gl.CLAMP_TO_EDGE);
 
-            fbo = tile.fbo = context.createFramebuffer(tileSize, tileSize, true);
+            fbo = tile.fbo = context.createFramebuffer(tileSize, tileSize, true, false);
             fbo.colorAttachment.set(renderTexture.texture);
         }
 

src/render/render_to_texture.ts

@@ -156,7 +156,8 @@ export default class RenderToTexture {
                 tile.rtt[stack] = {id: obj.id, stamp: obj.stamp};
                 // prepare PoolObject for rendering
                 painter.context.bindFramebuffer.set(obj.fbo.framebuffer);
-                painter.context.clear({color: Color.transparent});
+                painter.context.clear({color: Color.transparent, stencil: 0});
+                painter.currentStencilSource = undefined;
                 for (let l = 0; l < layers.length; l++) {
                     const layer = painter.style._layers[layers[l]];
                     const coords = layer.source ? this._coordsDescendingInv[layer.source][tile.tileID.key] : [tile.tileID];

src/render/terrain.ts

@@ -237,7 +237,7 @@ export default class Terrain {
             this._fboDepthTexture.bind(painter.context.gl.NEAREST, painter.context.gl.CLAMP_TO_EDGE);
         }
         if (!this._fbo) {
-            this._fbo = painter.context.createFramebuffer(width, height, true);
+            this._fbo = painter.context.createFramebuffer(width, height, true, false);
             this._fbo.depthAttachment.set(painter.context.createRenderbuffer(painter.context.gl.DEPTH_COMPONENT16, width, height));
         }
         this._fbo.colorAttachment.set(texture === 'coords' ? this._fboCoordsTexture.texture : this._fboDepthTexture.texture);

test/integration/render/tests/terrain-shading/default/style.json

@@ -0,0 +1,53 @@
+{
+  "version": 8,
+  "metadata": {
+    "test": {
+      "height": 500,
+      "width": 500,
+      "operations" : [
+        ["sleep", 5000]
+      ]
+    }
+  },
+  "center": [11.037826538085028, 47.49076091764255],
+  "zoom": 11.55649951496926,
+  "pitch" : 60,
+  "sources": {
+    "terrainSource": {
+      "type": "raster-dem",
+      "tiles": ["local://tiles/terrain-shading/{z}-{x}-{y}.terrain.png"],
+      "minzoom": 0,
+      "maxzoom": 12
+    },
+    "hillshadeSource": {
+      "type": "raster-dem",
+      "tiles": ["local://tiles/terrain-shading/{z}-{x}-{y}.terrain.png"],
+      "minzoom": 0,
+      "maxzoom": 12
+    }
+  },
+  "layers": [
+    {
+      "id": "background",
+      "type": "background",
+      "paint": {
+        "background-color": "white"
+      }
+    },
+    {
+      "id": "hills",
+      "type": "hillshade",
+      "source": "hillshadeSource",
+      "layout": { "visibility": "visible" },
+      "paint": {
+        "hillshade-shadow-color": "#473B24",
+        "hillshade-illumination-anchor": "map",
+        "hillshade-illumination-direction": 150
+      }
+    }
+  ],
+  "terrain": {
+    "source": "terrainSource",
+    "exaggeration": 1
+  }
+}