Refactor fill extrusion texture/fbo cache

src/render/draw_fill_extrusion.js

@@ -33,7 +33,7 @@ function draw(painter: Painter, source: SourceCache, layer: FillExtrusionStyleLa
 }
 
 function drawExtrusionTexture(painter, layer) {
-    const renderedTexture = painter.prerenderedFrames[layer.id];
+    const renderedTexture = layer.viewportFrame;
     if (!renderedTexture) return;
 
     const gl = painter.gl;
@@ -56,10 +56,6 @@ function drawExtrusionTexture(painter, layer) {
 
     renderedTexture.vao.bind(gl, program, renderedTexture.buffer);
     gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
-
-    // Since this texture has been rendered, make it available for reuse in the next frame.
-    painter.viewportFrames.push(renderedTexture);
-    delete painter.prerenderedFrames[layer.id];
 }
 
 function drawExtrusion(painter, source, layer, coord) {

src/render/painter.js

@@ -63,8 +63,6 @@ class Painter {
     emptyProgramConfiguration: ProgramConfiguration;
     width: number;
     height: number;
-    viewportFrames: Array<RenderTexture>;
-    prerenderedFrames: { [string]: ?RenderTexture };
     depthRbo: WebGLRenderbuffer;
     depthRboAttached: boolean;
     _depthMask: boolean;
@@ -95,8 +93,6 @@ class Painter {
         this.gl = gl;
         this.transform = transform;
         this._tileTextures = {};
-        this.prerenderedFrames = {};
-        this.viewportFrames = [];
 
         this.frameHistory = new FrameHistory();
 
@@ -124,11 +120,11 @@ class Painter {
         this.height = height * browser.devicePixelRatio;
         gl.viewport(0, 0, this.width, this.height);
 
-        for (const frame of this.viewportFrames) {
-            this.gl.deleteTexture(frame.texture);
-            this.gl.deleteFramebuffer(frame.fbo);
+        if (this.style) {
+            for (const layerId of this.style._order) {
+                this.style._layers[layerId].resize(gl);
+            }
         }
-        this.viewportFrames = [];
 
         if (this.depthRbo) {
             this.gl.deleteRenderbuffer(this.depthRbo);
@@ -312,7 +308,8 @@ class Painter {
 
                 this._setup3DRenderbuffer();
 
-                const renderTarget = this.viewportFrames.pop() || new RenderTexture(this);
+                const renderTarget = layer.viewportFrame || new RenderTexture(this);
+                layer.viewportFrame = renderTarget;
                 renderTarget.bindWithDepth(this.depthRbo);
 
                 if (first) {
@@ -323,7 +320,6 @@ class Painter {
                 this.renderLayer(this, (sourceCache: any), layer, coords);
 
                 renderTarget.unbind();
-                this.prerenderedFrames[layer.id] = renderTarget;
             }
         }
 

src/style/style_layer.js

@@ -11,6 +11,7 @@ const Evented = require('../util/evented');
 import type {Bucket, BucketParameters} from '../data/bucket';
 import type Point from '@mapbox/point-geometry';
 import type {Feature} from '../style-spec/function';
+import type RenderTexture from '../render/render_texture';
 
 export type GlobalProperties = {
     zoom: number
@@ -36,6 +37,8 @@ class StyleLayer extends Evented {
     paint: { [string]: any };
     layout: { [string]: any };
 
+    viewportFrame: ?RenderTexture;
+
     _paintSpecifications: any;
     _layoutSpecifications: any;
     _paintTransitions: {[string]: StyleTransition};
@@ -75,7 +78,7 @@ class StyleLayer extends Evented {
         this._layoutSpecifications = styleSpec[`layout_${this.type}`];
 
         this._paintTransitions = {}; // {[propertyName]: StyleTransition}
-        this._paintTransitionOptions = {}; // 
+        this._paintTransitionOptions = {}; //
         this._paintDeclarations = {}; // {[className]: {[propertyName]: StyleDeclaration}}
         this._layoutDeclarations = {}; // {[propertyName]: StyleDeclaration}
         this._layoutFunctions = {}; // {[propertyName]: Boolean}
@@ -386,6 +389,10 @@ class StyleLayer extends Evented {
     has3DPass() {
         return false;
     }
+
+    resize(gl: WebGLRenderingContext) { // eslint-disable-line
+        // noop
+    }
 }
 
 module.exports = StyleLayer;

src/style/style_layer/fill_extrusion_style_layer.js

@@ -44,6 +44,15 @@ class FillExtrusionStyleLayer extends StyleLayer {
     has3DPass() {
         return this.paint['fill-extrusion-opacity'] !== 0 && this.layout['visibility'] !== 'none';
     }
+
+    resize(gl: WebGLRenderingContext) {
+        if (this.viewportFrame) {
+            const {texture, fbo} = this.viewportFrame;
+            gl.deleteTexture(texture);
+            gl.deleteFramebuffer(fbo);
+            this.viewportFrame = null;
+        }
+    }
 }
 
 module.exports = FillExtrusionStyleLayer;