diff --git a/src/ol/WebGLMap.js b/src/ol/WebGLMap.js
index 5db5371194..8d7005125e 100644
--- a/src/ol/WebGLMap.js
+++ b/src/ol/WebGLMap.js
@@ -5,10 +5,7 @@ import PluggableMap from './PluggableMap.js';
 import {defaults as defaultControls} from './control.js';
 import {defaults as defaultInteractions} from './interaction.js';
 import {assign} from './obj.js';
-import WebGLImageLayerRenderer from './renderer/webgl/ImageLayer.js';
 import WebGLMapRenderer from './renderer/webgl/Map.js';
-import WebGLTileLayerRenderer from './renderer/webgl/TileLayer.js';
-import WebGLVectorLayerRenderer from './renderer/webgl/VectorLayer.js';
 
 
 /**
@@ -80,13 +77,7 @@ class WebGLMap extends PluggableMap {
   }
 
   createRenderer() {
-    const renderer = new WebGLMapRenderer(this);
-    renderer.registerLayerRenderers([
-      WebGLImageLayerRenderer,
-      WebGLTileLayerRenderer,
-      WebGLVectorLayerRenderer
-    ]);
-    return renderer;
+    return new WebGLMapRenderer(this);
   }
 }
 
diff --git a/src/ol/layer/Image.js b/src/ol/layer/Image.js
index 2a83a18cc9..ad6b8025c8 100644
--- a/src/ol/layer/Image.js
+++ b/src/ol/layer/Image.js
@@ -32,10 +32,11 @@ class ImageLayer extends BaseImageLayer {
 
   /**
    * Create a renderer for this layer.
+   * @param {import("../renderer/Map.js").default} mapRenderer The map renderer.
    * @return {import("../renderer/Layer.js").default} A layer renderer.
    * @protected
    */
-  createRenderer() {
+  createRenderer(mapRenderer) {
     return new CanvasImageLayerRenderer(this);
   }
 
diff --git a/src/ol/layer/Layer.js b/src/ol/layer/Layer.js
index 9a0d413b01..678860e0d8 100644
--- a/src/ol/layer/Layer.js
+++ b/src/ol/layer/Layer.js
@@ -224,21 +224,23 @@ class Layer extends BaseLayer {
 
   /**
    * Get the renderer for this layer.
+   * @param {import("../renderer/Map.js").default} mapRenderer The map renderer.
    * @return {import("../renderer/Layer.js").default} The layer renderer.
    */
-  getRenderer() {
+  getRenderer(mapRenderer) {
     if (!this.renderer_) {
-      this.renderer_ = this.createRenderer();
+      this.renderer_ = this.createRenderer(mapRenderer);
     }
     return this.renderer_;
   }
 
   /**
    * Create a renderer for this layer.
+   * @param {import("../renderer/Map.js").default} mapRenderer The map renderer.
    * @return {import("../renderer/Layer.js").default} A layer renderer.
    * @protected
    */
-  createRenderer() {
+  createRenderer(mapRenderer) {
     return null;
   }
 
diff --git a/src/ol/layer/Tile.js b/src/ol/layer/Tile.js
index 6e25f2af6b..fbd6606a15 100644
--- a/src/ol/layer/Tile.js
+++ b/src/ol/layer/Tile.js
@@ -31,10 +31,11 @@ class TileLayer extends BaseTileLayer {
 
   /**
    * Create a renderer for this layer.
+   * @param {import("../renderer/Map.js").default} mapRenderer The map renderer.
    * @return {import("../renderer/Layer.js").default} A layer renderer.
    * @protected
    */
-  createRenderer() {
+  createRenderer(mapRenderer) {
     return new CanvasTileLayerRenderer(this);
   }
 
diff --git a/src/ol/layer/Vector.js b/src/ol/layer/Vector.js
index 0456b04ea0..1458890db2 100644
--- a/src/ol/layer/Vector.js
+++ b/src/ol/layer/Vector.js
@@ -29,10 +29,11 @@ class VectorLayer extends BaseVectorLayer {
 
   /**
    * Create a renderer for this layer.
+   * @param {import("../renderer/Map.js").default} mapRenderer The map renderer.
    * @return {import("../renderer/Layer.js").default} A layer renderer.
    * @protected
    */
-  createRenderer() {
+  createRenderer(mapRenderer) {
     return new CanvasVectorLayerRenderer(this);
   }
 }
diff --git a/src/ol/layer/VectorImage.js b/src/ol/layer/VectorImage.js
index 42678c778d..3c92e77398 100644
--- a/src/ol/layer/VectorImage.js
+++ b/src/ol/layer/VectorImage.js
@@ -28,10 +28,11 @@ class VectorImageLayer extends BaseVectorLayer {
 
   /**
    * Create a renderer for this layer.
+   * @param {import("../renderer/Map.js").default} mapRenderer The map renderer.
    * @return {import("../renderer/Layer.js").default} A layer renderer.
    * @protected
    */
-  createRenderer() {
+  createRenderer(mapRenderer) {
     return new CanvasVectorImageLayerRenderer(this);
   }
 }
diff --git a/src/ol/layer/VectorTile.js b/src/ol/layer/VectorTile.js
index 7bafcc3943..5938b2098e 100644
--- a/src/ol/layer/VectorTile.js
+++ b/src/ol/layer/VectorTile.js
@@ -123,10 +123,11 @@ class VectorTileLayer extends BaseVectorLayer {
 
   /**
    * Create a renderer for this layer.
+   * @param {import("../renderer/Map.js").default} mapRenderer The map renderer.
    * @return {import("../renderer/Layer.js").default} A layer renderer.
    * @protected
    */
-  createRenderer() {
+  createRenderer(mapRenderer) {
     return new CanvasVectorTileLayerRenderer(this);
   }
 
diff --git a/src/ol/layer/WebGLImage.js b/src/ol/layer/WebGLImage.js
index cb8fa40ecb..45e7fe4d0b 100644
--- a/src/ol/layer/WebGLImage.js
+++ b/src/ol/layer/WebGLImage.js
@@ -2,6 +2,7 @@
  * @module ol/layer/WebGLImage
  */
 import BaseImageLayer from './BaseImage.js';
+import WebGLImageLayerRenderer from '../renderer/webgl/ImageLayer.js';
 
 
 /**
@@ -31,12 +32,12 @@ class WebGLImageLayer extends BaseImageLayer {
 
   /**
    * Create a renderer for this layer.
+   * @param {import("../renderer/webgl/Map.js").default} mapRenderer The map renderer.
    * @return {import("../renderer/Layer.js").default} A layer renderer.
    * @protected
    */
-  createRenderer() {
-    // TODO: rework WebGL renderers to share context
-    return null;
+  createRenderer(mapRenderer) {
+    return new WebGLImageLayerRenderer(mapRenderer, this);
   }
 
 }
diff --git a/src/ol/layer/WebGLTile.js b/src/ol/layer/WebGLTile.js
index a40095d952..1b034b1857 100644
--- a/src/ol/layer/WebGLTile.js
+++ b/src/ol/layer/WebGLTile.js
@@ -2,7 +2,7 @@
  * @module ol/layer/WebGLTile
  */
 import BaseTileLayer from './BaseTile.js';
-
+import WebGLTileLayerRenderer from '../renderer/webgl/TileLayer.js';
 
 /**
  * @typedef {import("./BaseTile.js").Options} Options
@@ -30,12 +30,12 @@ class WebGLTileLayer extends BaseTileLayer {
 
   /**
    * Create a renderer for this layer.
+   * @param {import("../renderer/webgl/Map.js").default} mapRenderer The map renderer.
    * @return {import("../renderer/Layer.js").default} A layer renderer.
    * @protected
    */
-  createRenderer() {
-    // TODO: rework WebGL renderers to share context
-    return null;
+  createRenderer(mapRenderer) {
+    return new WebGLTileLayerRenderer(mapRenderer, this);
   }
 
 }
diff --git a/src/ol/layer/WebGLVector.js b/src/ol/layer/WebGLVector.js
index 03a2c6d109..3bf62b37f5 100644
--- a/src/ol/layer/WebGLVector.js
+++ b/src/ol/layer/WebGLVector.js
@@ -2,6 +2,7 @@
  * @module ol/layer/WebGLVector
  */
 import BaseVectorLayer from './BaseVector.js';
+import WebGLVectorLayerRenderer from '../renderer/webgl/VectorLayer.js';
 
 
 /**
@@ -28,12 +29,12 @@ class WebGLVectorLayer extends BaseVectorLayer {
 
   /**
    * Create a renderer for this layer.
+   * @param {import("../renderer/webgl/Map.js").default} mapRenderer The map renderer.
    * @return {import("../renderer/Layer.js").default} A layer renderer.
    * @protected
    */
-  createRenderer() {
-    // TODO: rework WebGL renderers to share context
-    return null;
+  createRenderer(mapRenderer) {
+    return new WebGLVectorLayerRenderer(mapRenderer, this);
   }
 }
 
diff --git a/src/ol/renderer/Map.js b/src/ol/renderer/Map.js
index 157dce98d5..9e3679f7c6 100644
--- a/src/ol/renderer/Map.js
+++ b/src/ol/renderer/Map.js
@@ -40,12 +40,6 @@ class MapRenderer extends Disposable {
      */
     this.layerRendererListeners_ = {};
 
-    /**
-     * @private
-     * @type {Array<typeof import("./Layer.js").default>}
-     */
-    this.layerRendererConstructors_ = [];
-
   }
 
   /**
@@ -57,14 +51,6 @@ class MapRenderer extends Disposable {
     abstract();
   }
 
-  /**
-   * Register layer renderer constructors.
-   * @param {Array<typeof import("./Layer.js").default>} constructors Layer renderers.
-   */
-  registerLayerRenderers(constructors) {
-    this.layerRendererConstructors_.push.apply(this.layerRendererConstructors_, constructors);
-  }
-
   /**
    * @param {import("../PluggableMap.js").FrameState} frameState FrameState.
    * @protected
@@ -151,10 +137,10 @@ class MapRenderer extends Disposable {
     let i;
     for (i = numLayers - 1; i >= 0; --i) {
       const layerState = layerStates[i];
-      const layer = layerState.layer;
+      const layer = /** @type {import("../layer/Layer.js").default} */ (layerState.layer);
       if (visibleAtResolution(layerState, viewResolution) && layerFilter.call(thisArg2, layer)) {
         const layerRenderer = this.getLayerRenderer(layer);
-        const source = /** @type {import("../layer/Layer.js").default} */ (layer).getSource();
+        const source = layer.getSource();
         if (source) {
           result = layerRenderer.forEachFeatureAtCoordinate(
             source.getWrapX() ? translatedCoordinate : coordinate,
@@ -208,7 +194,7 @@ class MapRenderer extends Disposable {
   }
 
   /**
-   * @param {import("../layer/Base.js").default} layer Layer.
+   * @param {import("../layer/Layer.js").default} layer Layer.
    * @protected
    * @return {import("./Layer.js").default} Layer renderer.
    */
@@ -216,26 +202,16 @@ class MapRenderer extends Disposable {
     const layerKey = getUid(layer);
     if (layerKey in this.layerRenderers_) {
       return this.layerRenderers_[layerKey];
-    } else {
-      let renderer = layer.getRenderer();
-      if (!renderer) {
-        for (let i = 0, ii = this.layerRendererConstructors_.length; i < ii; ++i) {
-          const candidate = this.layerRendererConstructors_[i];
-          if (candidate['handles'](layer)) {
-            renderer = candidate['create'](this, layer);
-            break;
-          }
-        }
-      }
-      if (renderer) {
-        this.layerRenderers_[layerKey] = renderer;
-        this.layerRendererListeners_[layerKey] = listen(renderer,
-          EventType.CHANGE, this.handleLayerRendererChange_, this);
-      } else {
-        throw new Error('Unable to create renderer for layer: ' + layer.getType());
-      }
-      return renderer;
     }
+
+    const renderer = layer.getRenderer(this);
+    if (!renderer) {
+      throw new Error('Unable to create renderer for layer: ' + layer.getType());
+    }
+
+    this.layerRenderers_[layerKey] = renderer;
+    this.layerRendererListeners_[layerKey] = listen(renderer, EventType.CHANGE, this.handleLayerRendererChange_, this);
+    return renderer;
   }
 
   /**
diff --git a/src/ol/renderer/webgl/ImageLayer.js b/src/ol/renderer/webgl/ImageLayer.js
index cbd4378773..1ec1defa10 100644
--- a/src/ol/renderer/webgl/ImageLayer.js
+++ b/src/ol/renderer/webgl/ImageLayer.js
@@ -2,7 +2,6 @@
  * @module ol/renderer/webgl/ImageLayer
  */
 import {ENABLE_RASTER_REPROJECTION} from '../../reproj/common.js';
-import LayerType from '../../LayerType.js';
 import ViewHint from '../../ViewHint.js';
 import {createCanvasContext2D} from '../../dom.js';
 import {getIntersection, isEmpty} from '../../extent.js';
@@ -269,28 +268,4 @@ class WebGLImageLayerRenderer extends WebGLLayerRenderer {
 }
 
 
-/**
- * Determine if this renderer handles the provided layer.
- * @param {import("../../layer/Layer.js").default} layer The candidate layer.
- * @return {boolean} The renderer can render the layer.
- */
-WebGLImageLayerRenderer['handles'] = function(layer) {
-  return layer.getType() === LayerType.IMAGE;
-};
-
-
-/**
- * Create a layer renderer.
- * @param {import("../Map.js").default} mapRenderer The map renderer.
- * @param {import("../../layer/Layer.js").default} layer The layer to be rendererd.
- * @return {WebGLImageLayerRenderer} The layer renderer.
- */
-WebGLImageLayerRenderer['create'] = function(mapRenderer, layer) {
-  return new WebGLImageLayerRenderer(
-    /** @type {import("./Map.js").default} */ (mapRenderer),
-    /** @type {import("../../layer/Image.js").default} */ (layer)
-  );
-};
-
-
 export default WebGLImageLayerRenderer;
diff --git a/src/ol/renderer/webgl/TileLayer.js b/src/ol/renderer/webgl/TileLayer.js
index d59e263a99..dc76346e3d 100644
--- a/src/ol/renderer/webgl/TileLayer.js
+++ b/src/ol/renderer/webgl/TileLayer.js
@@ -4,7 +4,6 @@
 // FIXME large resolutions lead to too large framebuffers :-(
 // FIXME animated shaders! check in redraw
 
-import LayerType from '../../LayerType.js';
 import ImageTile from '../../ImageTile.js';
 import TileRange from '../../TileRange.js';
 import TileState from '../../TileState.js';
@@ -396,28 +395,4 @@ class WebGLTileLayerRenderer extends WebGLLayerRenderer {
 }
 
 
-/**
- * Determine if this renderer handles the provided layer.
- * @param {import("../../layer/Layer.js").default} layer The candidate layer.
- * @return {boolean} The renderer can render the layer.
- */
-WebGLTileLayerRenderer['handles'] = function(layer) {
-  return layer.getType() === LayerType.TILE;
-};
-
-
-/**
- * Create a layer renderer.
- * @param {import("../Map.js").default} mapRenderer The map renderer.
- * @param {import("../../layer/Layer.js").default} layer The layer to be rendererd.
- * @return {WebGLTileLayerRenderer} The layer renderer.
- */
-WebGLTileLayerRenderer['create'] = function(mapRenderer, layer) {
-  return new WebGLTileLayerRenderer(
-    /** @type {import("./Map.js").default} */ (mapRenderer),
-    /** @type {import("../../layer/Tile.js").default} */ (layer)
-  );
-};
-
-
 export default WebGLTileLayerRenderer;
diff --git a/src/ol/renderer/webgl/VectorLayer.js b/src/ol/renderer/webgl/VectorLayer.js
index 1edba3559f..c609479e45 100644
--- a/src/ol/renderer/webgl/VectorLayer.js
+++ b/src/ol/renderer/webgl/VectorLayer.js
@@ -2,7 +2,6 @@
  * @module ol/renderer/webgl/VectorLayer
  */
 import {getUid} from '../../util.js';
-import LayerType from '../../LayerType.js';
 import ViewHint from '../../ViewHint.js';
 import {buffer, containsExtent, createEmpty} from '../../extent.js';
 import WebGLReplayGroup from '../../render/webgl/ReplayGroup.js';
@@ -304,28 +303,4 @@ class WebGLVectorLayerRenderer extends WebGLLayerRenderer {
 }
 
 
-/**
- * Determine if this renderer handles the provided layer.
- * @param {import("../../layer/Layer.js").default} layer The candidate layer.
- * @return {boolean} The renderer can render the layer.
- */
-WebGLVectorLayerRenderer['handles'] = function(layer) {
-  return layer.getType() === LayerType.VECTOR;
-};
-
-
-/**
- * Create a layer renderer.
- * @param {import("../Map.js").default} mapRenderer The map renderer.
- * @param {import("../../layer/Layer.js").default} layer The layer to be rendererd.
- * @return {WebGLVectorLayerRenderer} The layer renderer.
- */
-WebGLVectorLayerRenderer['create'] = function(mapRenderer, layer) {
-  return new WebGLVectorLayerRenderer(
-    /** @type {import("./Map.js").default} */ (mapRenderer),
-    /** @type {import("../../layer/Vector.js").default} */ (layer)
-  );
-};
-
-
 export default WebGLVectorLayerRenderer;