Allow WebGL tile layer style to be updated

src/ol/layer/WebGLTile.js

@@ -311,6 +311,28 @@ class WebGLTileLayer extends BaseTileLayer {
     });
   }
 
+  /**
+   * Update the layer style.  The `updateStyleVariables` function is a more efficient
+   * way to update layer rendering.  In cases where the whole style needs to be updated,
+   * this method may be called instead.
+   * @param {Style} style The new style.
+   */
+  setStyle(style) {
+    this.style_ = style;
+    const source = this.getSource();
+    const parsedStyle = parseStyle(
+      this.style_,
+      'bandCount' in source ? source.bandCount : 4
+    );
+    const renderer = this.getRenderer();
+    renderer.reset({
+      vertexShader: parsedStyle.vertexShader,
+      fragmentShader: parsedStyle.fragmentShader,
+      uniforms: parsedStyle.uniforms,
+    });
+    this.changed();
+  }
+
   /**
    * Update any variables used by the layer style and trigger a re-render.
    * @param {Object<string, number>} variables Variables to update.

src/ol/renderer/webgl/Layer.js

@@ -90,6 +90,17 @@ class WebGLLayerRenderer extends LayerRenderer {
     layer.addChangeListener(LayerProperty.MAP, this.removeHelper_.bind(this));
   }
 
+  /**
+   * Reset options (only handles uniforms).
+   * @param {Options} options Options.
+   */
+  reset(options) {
+    this.uniforms_ = options.uniforms;
+    if (this.helper) {
+      this.helper.setUniforms(this.uniforms_);
+    }
+  }
+
   removeHelper_() {
     if (this.helper) {
       this.helper.dispose();

src/ol/renderer/webgl/TileLayer.js

@@ -213,6 +213,24 @@ class WebGLTileLayerRenderer extends WebGLLayerRenderer {
     this.tileTextureCache_ = new LRUCache(cacheSize);
   }
 
+  /**
+   * @param {Options} options Options.
+   */
+  reset(options) {
+    super.reset({
+      uniforms: options.uniforms,
+    });
+    this.vertexShader_ = options.vertexShader;
+    this.fragmentShader_ = options.fragmentShader;
+
+    if (this.helper) {
+      this.program_ = this.helper.getProgram(
+        this.fragmentShader_,
+        this.vertexShader_
+      );
+    }
+  }
+
   afterHelperCreated() {
     this.program_ = this.helper.getProgram(
       this.fragmentShader_,

src/ol/webgl/Helper.js

@@ -340,7 +340,6 @@ class WebGLHelper extends Disposable {
      * @type {WebGLRenderingContext}
      */
     this.gl_ = getContext(this.canvas_);
-    const gl = this.getGL();
 
     /**
      * @private
@@ -407,14 +406,11 @@ class WebGLHelper extends Disposable {
      */
     this.uniforms_ = [];
     if (options.uniforms) {
-      for (const name in options.uniforms) {
+      this.setUniforms(options.uniforms);
-        this.uniforms_.push({
-          name: name,
-          value: options.uniforms[name],
-        });
-      }
     }
 
+    const gl = this.getGL();
+
     /**
      * An array of PostProcessingPass objects is kept in this variable, built from the steps provided in the
      * options. If no post process was given, a default one is used (so as not to have to make an exception to
@@ -447,6 +443,20 @@ class WebGLHelper extends Disposable {
     this.startTime_ = Date.now();
   }
 
+  /**
+   * @param {Object<string, UniformValue>} uniforms Uniform definitions.
+   */
+  setUniforms(uniforms) {
+    this.uniforms_ = [];
+    for (const name in uniforms) {
+      this.uniforms_.push({
+        name: name,
+        value: uniforms[name],
+      });
+    }
+    this.uniformLocations_ = {};
+  }
+
   /**
    * @param {string} canvasCacheKey The canvas cache key.
    * @return {boolean} The provided key matches the one this helper was constructed with.