From bf199bbe389c1a8290a5cdcd9d1ee44b7210b73a Mon Sep 17 00:00:00 2001
From: mike-000 <49240900+mike-000@users.noreply.github.com>
Date: Thu, 10 Feb 2022 11:40:44 +0000
Subject: [PATCH 1/2] handle WebGL layers

---
 src/ol/source/Raster.js | 22 +++++++++++++---------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/ol/source/Raster.js b/src/ol/source/Raster.js
index dfe0e1df75..d4c1a0f982 100644
--- a/src/ol/source/Raster.js
+++ b/src/ol/source/Raster.js
@@ -917,15 +917,19 @@ function getImageData(layer, frameState) {
   }
   const container = renderer.renderFrame(frameState, null);
   let element;
-  if (container) {
-    element = container.firstElementChild;
-  }
-  if (!(element instanceof HTMLCanvasElement)) {
-    throw new Error('Unsupported rendered element: ' + element);
-  }
-  if (element.width === width && element.height === height) {
-    const context = element.getContext('2d');
-    return context.getImageData(0, 0, width, height);
+  if (container instanceof HTMLCanvasElement) {
+    element = container;
+  } else {
+    if (container) {
+      element = container.firstElementChild;
+    }
+    if (!(element instanceof HTMLCanvasElement)) {
+      throw new Error('Unsupported rendered element: ' + element);
+    }
+    if (element.width === width && element.height === height) {
+      const context = element.getContext('2d');
+      return context.getImageData(0, 0, width, height);
+    }
   }
 
   if (!sharedContext) {

From 44136af99d156a76154e677ee735521002501341 Mon Sep 17 00:00:00 2001
From: mike-000 <49240900+mike-000@users.noreply.github.com>
Date: Thu, 10 Feb 2022 12:06:11 +0000
Subject: [PATCH 2/2] test with interpolated WebGL layer

---
 .../cases/source-raster-webgl/expected.png    | Bin 0 -> 4132 bytes
 .../cases/source-raster-webgl/main.js         |  45 ++++++++++++++++++
 2 files changed, 45 insertions(+)
 create mode 100644 test/rendering/cases/source-raster-webgl/expected.png
 create mode 100644 test/rendering/cases/source-raster-webgl/main.js

diff --git a/test/rendering/cases/source-raster-webgl/expected.png b/test/rendering/cases/source-raster-webgl/expected.png
new file mode 100644
index 0000000000000000000000000000000000000000..5af08c5f991a5b7a1314a714549a20b1f4f8a649
GIT binary patch
literal 4132
zcmai%dpuP6|HnV)IGB;zF)nLbWrlGJrO`#jcP<UhAT-)8SWRS<E^ck5m^m0NR*Xrq
z3PYkz*<_Q{W@^`^+`8~vOGT!>_@)>t6JzFg)c5z@-ygrn<M-D&=W!m7^LV_^>+^cO
zp6`qRzfB7b78?Kn7IHak9sm$_3jv%Sb_t2QB$$7S=WSwv>Q0MM0KR&`Wiz)P3w>LZ
z9Hm(QwfMKZ0B?L!CxcTQaW?HAk+@Qmz>ijT-bJSdiTe+{jk%jL7`dWx$*Jt-C+l3F
z<j_SL^{7e*BH%LQIYdaU{#1M7`0>R-GqW=@i~EF)yAbM&uQY!Q(5A*u0^!_D&(&>J
z=kf)K1Ji2{-t6ySA$Kg*8I2Lc182aKS0{wRyZiT5h=jryt5@SEgcEj}{1VZ2_?SpE
z9vT|@F31Ya$;r80_t$~)D)9NUlT*=T^w(iwQj&Assy6@1z?z@q;Lo32Gyi6wQFQdp
zhlXAvWRcSn)_>@x^jk2lFB<x#L;Veo?A$o;;zg!&$Heb10}fn1_&;w_K|^&aN|s$h
z{xFlhSzkv!z$`n&<iJP1+eDO7_jFUK5pti!r)kuP*7OLDnDI5tNEZ_v$_RLeiA$0U
z6Ou#RDhHZCmLi2*iGp%_LAe#g>Gp6(5XNB1CIG93e@M5)!BZ5M1<*CI0KX&x|6O6B
zpK^r_knW{EF0*;uj0~D<X|OEIi{u<eayCZytJ`pZvXE7n&MNc;)yfqVQ2r}t-v#e|
z#*kY}qZqh6<yT}xRdA6(3oQ|r`~6t7=5o;*BQ##U5u^~S;sLH9+5;+^-o*l)K4eeu
zNL0tD4kqIvH#?>Y!q9S48f=+1h-8|Xmz+=kufKjXyh!E`ji3LafTrDp3@#G~=#u9)
z;a=N|rACZGPBxEY3Oy1v53JN&L?m{nPm@?&@Lrn*6yxD~=hDDG3%0r&BMe3kKx8d>
zb}8sW*aE-Jd|CdrfB5vS69knjhXWpMLDt#E<{6`!mJMCW;rCX!rqh;2xVO+k-|C}3
zGMD50OnKdl0IS#)9;9z>4g5wFvQY4DxOyQPQWt;b`V;MXq~4<YS=V=K)x+Agf{J>9
zZMFW|>3ByR*bx70%7P4VfUZ3e1M~6bNAay@<d0_QR5F+GW}~xdu&i}>U4UM>A&0a)
zhD4+gSTYC_2dqpB;3Vh5yNnnH7CQ{wU-)>^Hs*blyti}>$ZOkNqvLp;<F14F8lk{f
zKf7chY=8(TApen5=>@0K=Qkxhn4Dp<B4brC$Z8x=wc$`2ubsxT1<eET>IeiaxqYf+
zgFj<JUn}@Jm7UKUs-#=$bSA*RcpCB&&-+z|^^Z?yx`&!-q^3Y%)y}Ry8@@~+i&y(#
zb0map*jLENY8+Q#din!n`B4~ma-a~{AcJ=h9s=ef7rbiFl@b7#Eag)n9Xn|1A2Hq}
zmQweha~4&bNr!_-Td%`%|Ll^blz<pYfNgS5RL`m4nd!UZ(S3(*1}3SZi&IT{{4*~b
zBF$Q*^6XXM=0Eri)E-b!8qyw6OF*SP31&D{o`_?Bsoia-nb=X5ae&kAo%b7@b`KZq
z&K)Y*$lPSaCXOnp(l|IpJE@9yQrV<9geT<JY(-4ISKl&!MP%Z*6?pDeV}iPWu&ak3
zvT)mLyX^$Pn>@msOa?Bsd_nB$T6>&*oI2jaO?YJghN=``)qjhEX$c?8IZ+G+qsu?e
zO^hyBoPf9ZO-qHiuoN*&yyOtUc!=u2c`y6&UdAoDV5-3-6X1n7w(0#>c=H?Df2*2#
z`;N)ckfy!Kbb*Yu#6e0b-|BTi8{5wBO*T#2Qw+fs*mM;-EnRw$E?i3hKCNy(oI1iZ
z&aJ624+K$H2H9;nrd<nXHSQvA@d8`g>>syruw(z(pRzNO(i@VL=@KKp+9QpPxv=Yb
zXIGJ}r7Bh1UG*0gL4OiYA#VQs=Vx3vNRs=~9}nJszKr<kTfuTX#QqpK{Cd2<KX`l8
zXrtw#AHw<%tdRnstv~XjPn8OgKncDTIXnkAIMf*ggF29W6HrSztj(KQcr!kg>DcKi
zxdQBUw&-0jG_N-taS{h4CXY1!La?1twQU0l#4FpX4n2F)IGrSVdgOMI!SuOdvge1>
zWy^Gum7+v7W@7!P4-88U88ad;R5`sewSxuXeU}yEVX_R1tViJwjhS*iC>wD!H1*k0
zVl!sp>ik3%Z$Dz6!m;uwX7l_Q6T6m*vUMBT*Q!c_S3{%PU*3KC^r_k=kxr+N7dA+H
z3`EQIZncxePQ@%UQ^;$Hs9NuL|D3!!mUk6dmd`uBT>o`k`!f2iFqm(<KhjolJf>QI
z`1r)gpQ(z-macdIirjvMVbwyPAN~L&ycwKg2k*b7YlY_!B~<=<DnG3BQiSA=xLlhD
z?FtQTXbjH8x+3Rx#rm$A@6{B9g<C~_<ee_H1LM)wY?eWmi7FHDp1r<Uub>JRs8{Oj
z)@#^EmXa#AdZu@a#^jmniCq8+M9AQ2vLZ4Sg_C#U$WMsNW{6VFfc2n>mIv?6{bO$t
z`{mpK&P5~SvPn=t^S;35(ySw1sOp@Vhz2t_sS?{VNyQCG<;OW9ymvIx4@?NFZ52`1
z|Ev}>3oR?3{@nX<Hpz~H<_k`CGhbN#*?wR3XA>6aR{aiv;E8CgyZT5JjuGIS2FU0m
zL{2<!qdNZEJ8x&@8|5*ly0=FhWdjX1*M{`57TBZ9AZAl7xb^$EZn{uUI~@<bN^*&i
z9TQIW(elDzg6L`2l*9<Ivi7kIdk`R+D2c1d$O6|F@4pfBy&_-p+xYCcio4%NTsf(j
z8}wHvwaB#{bO-2F#>k$N0ZGX%U8UNP<umW!cVEoc+`W7EWWIQ<kJ^JMswK#YMX#2S
z0sH~;&j<5KgmBFhwZ3Ptak`Zlm7P00cYu=L$BMBZ*{i3BoSv$6#JdfBNeBB2TfENk
zyaJ5^s#Ld$KqyqJakqx>x9S&X&3lD1)5Gr+=rs|uG~t5GD8b@wpm%3YZA0HqQ%kf}
z`4to+)7LM&(=rDPv42xw6Vq)I6U1a^i=^m$G<f;LLzTtvDz}X>?^&vY&%88(Dac~N
zUK{oU<l$^Tu0{e|>)y2@Y%$mnde3u=E+Drvj^g-Unc-gd7hUQ5W6FZy!UnL5#VR2U
zcZpDt26nKTce3)~T;()L<N&dK%h>)_kG0W=g<_W%$cydEi?zQ{WJK0fG?iq5AUtUj
z8Js&GDNoSLDTyRg(88(=lLv+`x_b76Y+my=iiR0~O(1*i=|`ey*IZ2W*`I5(E$MT?
z+wYTK#=BW$9<2S#-VE*i$#JZmfRYi4yk2;G`YTindf}L2FpR%)o2ZvT&Ta{>Ie0Vp
z-f-oi1y&RwjiJ8e+~4eT-@#la&~S0&6{+^WyN90Kf&f)~vAmmBp9KhEzQ$pfa6o-e
z^svd62De6CQ9d6V6;(F=yAYb@I^r!Z7I>3K=-bbEtk;$!l2npwdJc)rWn^hdP^GE_
zt9ji2nGk255)Wl_uwbo=u`pO)$fQ2zlz9}g1Bo#|suVjW+HgFt3t4L}W>r|B+muIb
z(4SebDY#=vr?alVPTLc*uz9{1%;ut8+T9BhT&9i{CPZx?4Ed__!=P%^QT_ggvCFJm
zP>~%3F#v&a80IgKo1xB(L1)IPk{vb3(A;@Dc>;W}(^zJBY`4opNgl;IpYpfzj+_?*
zUg>Ej<_;64$!5H6rI~bk#fqk8LosP&5!B9Lb}%x<OEK>gCYb0HNNmpBWdO&0ZhA><
zzT{&19(7XlE^k1M&G#RYuxBx|pK#agK^UaU&7>b_eI#foI!OKCZ(fss;k7%Qgxtxx
z+(}#b@=qeH9el+<;aqbof8ww}NKVIx-mB`dt8?$)jsF0UGvDF}@L?MU9=fJGKOK3(
zOlFIxsK9m`<}r~6)<4n29oOO3S@J_ho8_Ca(36)dOQwuN+G4KGuCNAT^QU6-%iw<*
z+_A66n-iNml-*Ns2;)rD5D^e8UDKm<X~IQ{aaRrIU<+oGD-$5^F$W*_O|ZiClI6Ml
zw9+vAn_6*Ec!lR;(IVX?o&@1!%iODnc$}t9(N!~e7FU5W>OpVPW>56$P!2|I*69-Q
zl%bWuUwSa(;i%*5t%=Fz+Ij_@00c|t<#g|GzhMdHlO2oq9N~P)tH-K^ANyAD*APA5
z(u2|JH@$F;Ze{}(?K=`Kl?^Rm6PF(%E^qR0Q&wWU7Q;Ykd)sODEV7uP178)}hdUl*
zQ~cg&taZH%5<P*#yGh<NrP*~|O+m7Y&T|Ukfnngom+XJhkMKRsaw1XG0VbfMa%C-(
zkt}yY2>bA+NqDYy+$bg!bM&vAuwVVkCN$BAxu}s^mIdssUshITO+TAE#Vl*->gu{(
z*Z<bUQFYFs(`26MB-9ECbrV@JzD|SXyF-L8)H<8{1PjL_7xRY{hu53-3meZSrWGmt
zS)gE_%TxC1r&PVzY!M#f+co=H^!S~_$=7Kp;GWf^bpUyOvlu*{#o&I}Mq&j<=)vSa
zoh4#${xsPDmT9S!?@mjInCi0hmSur@8>|^5ml%?ZE|~unfnxhiQ*-6oB+Ub??g`J{
zZQ70zJ6)fmXl%GgZt}$Tt<6{A_Lc6s*p#m<hp<E^f;qaiTs0d~y?z1IzVhc|wm1}B
z3gH+z4*m%A4dO<;;<D9gcT)bf`1W5pimp=G1ze$&y+w~aZkJJin0RKM*$Zg45$)*_
zzF4;t0L#pu@?(^)8OC~F^800Eh=c3d)WX?Yrn?yJzOfy?IuJjysVk>Md)0Bb1ott<
z&7@yYyJaFeaKmbZFO;QP!Joh%b7215^OMTYqyX#aWDdr7RJ^$dzF^0yC=yk~9HB?Z
z(}#DGKbJa6SXMzWaB$%bI>MY>1vmHaD$iqQeXjCVwEwTlzkvH9Y@><BWMz;X1SAJz
zY@1o9`A>^Cf5)+<fa>PVH+KHU7$YsgM8wj&9M8}yW=5a4V5?OxSJB6<&A~9wy~`K{
zNYmE;_!tr3?}Ywxo9ClG{)PMuM$S6#=un@YNA>}#ButN{xvRjW?=&8C*L^52j^L9Z
zGNLp|vEK&H+YO#5PRRms1gE4MM!fE5L^3qPjr|sJ|6aqzlaDrI=w<=FpxdpG@6F(X
gaGuha03Z)o3yr}@+)#d|Ikxr#uBRWnn#E7~Z(zmqf&c&j

literal 0
HcmV?d00001

diff --git a/test/rendering/cases/source-raster-webgl/main.js b/test/rendering/cases/source-raster-webgl/main.js
new file mode 100644
index 0000000000..0754770b9d
--- /dev/null
+++ b/test/rendering/cases/source-raster-webgl/main.js
@@ -0,0 +1,45 @@
+import DataTile from '../../../../src/ol/source/DataTile.js';
+import ImageLayer from '../../../../src/ol/layer/Image.js';
+import Map from '../../../../src/ol/Map.js';
+import RasterSource from '../../../../src/ol/source/Raster.js';
+import TileLayer from '../../../../src/ol/layer/WebGLTile.js';
+import View from '../../../../src/ol/View.js';
+
+const size = 256;
+
+const data = new Uint8Array(size * size);
+for (let row = 0; row < size; ++row) {
+  for (let col = 0; col < size; ++col) {
+    data[row * size + col] = (row + col) % 2 === 0 ? 255 : 0;
+  }
+}
+
+const raster = new RasterSource({
+  sources: [
+    new TileLayer({
+      source: new DataTile({
+        maxZoom: 0,
+        interpolate: true,
+        loader: () => data,
+      }),
+    }),
+  ],
+  threads: 0, // Avoid using workers to work with puppeteer
+  operation: function (pixels) {
+    const pixel = pixels[0];
+    pixel[3] = pixel[0] < 144 ? 0 : 255;
+    return pixel;
+  },
+});
+
+const map = new Map({
+  target: 'map',
+  layers: [new ImageLayer({source: raster})],
+  view: new View({
+    center: [0, 0],
+    zoom: 4,
+  }),
+});
+map.renderSync();
+
+render();