Preserve the drawing buffer by default for WebGL layers

src/ol/PluggableMap.js

@@ -62,6 +62,7 @@ import {removeNode} from './dom.js';
  * @property {Array<number>} viewHints ViewHints.
  * @property {!Object<string, Object<string, boolean>>} wantedTiles WantedTiles.
  * @property {string} mapId The id of the map.
+ * @property {Object<string, boolean>} renderTargets Identifiers of previously rendered elements.
  */
 
 /**
@@ -1477,6 +1478,7 @@ class PluggableMap extends BaseObject {
         viewHints: viewHints,
         wantedTiles: {},
         mapId: getUid(this),
+        renderTargets: {},
       };
       if (viewState.nextCenter && viewState.nextResolution) {
         const rotation = isNaN(viewState.nextRotation)

src/ol/source/Raster.js

@@ -648,6 +648,7 @@ class RasterSource extends ImageSource {
       viewHints: [],
       wantedTiles: {},
       mapId: getUid(this),
+      renderTargets: {},
     };
 
     this.setAttributions(function (frameState) {

src/ol/webgl.js

@@ -2,6 +2,8 @@
  * @module ol/webgl
  */
 
+import {assign} from './obj.js';
+
 /**
  * Constants taken from goog.webgl
  */
@@ -89,10 +91,11 @@ const CONTEXT_IDS = ['experimental-webgl', 'webgl', 'webkit-3d', 'moz-webgl'];
  * @return {WebGLRenderingContext} WebGL rendering context.
  */
 export function getContext(canvas, opt_attributes) {
+  const attributes = assign({preserveDrawingBuffer: true}, opt_attributes);
   const ii = CONTEXT_IDS.length;
   for (let i = 0; i < ii; ++i) {
     try {
-      const context = canvas.getContext(CONTEXT_IDS[i], opt_attributes);
+      const context = canvas.getContext(CONTEXT_IDS[i], attributes);
       if (context) {
         return /** @type {!WebGLRenderingContext} */ (context);
       }

src/ol/webgl/PostProcessingPass.js

@@ -2,6 +2,8 @@
  * @module ol/webgl/PostProcessingPass
  */
 
+import {getUid} from '../util.js';
+
 const DEFAULT_VERTEX_SHADER = `
   precision mediump float;
   
@@ -265,7 +267,21 @@ class WebGLPostProcessingPass {
     gl.activeTexture(gl.TEXTURE0);
     gl.bindTexture(gl.TEXTURE_2D, this.renderTargetTexture_);
 
-    // render the frame buffer to the canvas
+    if (!nextPass) {
+      // clear the canvas if we are the first to render to it
+      // and preserveDrawingBuffer is true
+      const canvasId = getUid(gl.canvas);
+      if (!frameState.renderTargets[canvasId]) {
+        const attributes = gl.getContextAttributes();
+        if (attributes.preserveDrawingBuffer) {
+          gl.clearColor(0.0, 0.0, 0.0, 0.0);
+          gl.clear(gl.COLOR_BUFFER_BIT);
+        }
+
+        frameState.renderTargets[canvasId] = true;
+      }
+    }
+
     gl.enable(gl.BLEND);
     gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
     gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);