diff --git a/src/ol/layer/WebGLTile.js b/src/ol/layer/WebGLTile.js
index 4e2f042232..65c3038337 100644
--- a/src/ol/layer/WebGLTile.js
+++ b/src/ol/layer/WebGLTile.js
@@ -69,7 +69,7 @@ import {assign} from '../obj.js';
  * of sources for this layer. Takes precedence over `source`. Can either be an array of sources, or a function that
  * expects an extent and a resolution (in view projection units per pixel) and returns an array of sources. See
  * {@link module:ol/source.sourcesFromTileGrid} for a helper function to generate sources that are organized in a
- * pyramid following the same pattern as a tile grid.
+ * pyramid following the same pattern as a tile grid. **Note:** All sources must have the same band count and content.
  * @property {import("../PluggableMap.js").default} [map] Sets the layer as overlay on a map. The map will not manage
  * this layer in its layers collection, and the layer will be rendered on top. This is useful for
  * temporary layers. The standard way to add a layer to a map and have it managed by the map is to
@@ -404,8 +404,11 @@ class WebGLTileLayer extends BaseTileLayer {
    * @return {number} The number of source bands.
    */
   getSourceBandCount_() {
-    const source = this.getSource();
-    return source && 'bandCount' in source ? source.bandCount : 4;
+    const max = Number.MAX_SAFE_INTEGER;
+    const sources = this.getSources([-max, -max, max, max], max);
+    return sources && sources.length && 'bandCount' in sources[0]
+      ? sources[0].bandCount
+      : 4;
   }
 
   createRenderer() {
diff --git a/test/browser/spec/ol/layer/WebGLTile.test.js b/test/browser/spec/ol/layer/WebGLTile.test.js
index 8577aa8856..e9293dfa89 100644
--- a/test/browser/spec/ol/layer/WebGLTile.test.js
+++ b/test/browser/spec/ol/layer/WebGLTile.test.js
@@ -545,6 +545,31 @@ describe('ol/layer/WebGLTile', function () {
     });
   });
 
+  describe('multiple sources', () => {
+    it('can determine the correct band count for static sources array', () => {
+      const layer = new WebGLTileLayer({
+        sources: [
+          new DataTileSource({
+            bandCount: 7,
+          }),
+        ],
+      });
+      expect(layer.getSourceBandCount_()).to.be(7);
+    });
+    it('can determine the correct band count for sources function', () => {
+      const layer = new WebGLTileLayer({
+        sources: sourcesFromTileGrid(
+          createXYZ(),
+          ([z, x, y]) =>
+            new DataTileSource({
+              bandCount: 7,
+            })
+        ),
+      });
+      expect(layer.getSourceBandCount_()).to.be(7);
+    });
+  });
+
   it('dispatches a precompose event with WebGL context', (done) => {
     let called = false;
     layer.on('precompose', (event) => {