Fix color style for WebGL tile layer

src/ol/expr/gpu.js

@@ -62,13 +62,7 @@ export function arrayToGlsl(array) {
 export function colorToGlsl(color) {
   const array = asArray(color);
   const alpha = array.length > 3 ? array[3] : 1;
-  // all components are premultiplied with alpha value
-  return arrayToGlsl([
-    (array[0] / 255) * alpha,
-    (array[1] / 255) * alpha,
-    (array[2] / 255) * alpha,
-    alpha,
-  ]);
+  return arrayToGlsl([array[0] / 255, array[1] / 255, array[2] / 255, alpha]);
 }
 
 /**
@@ -371,14 +365,14 @@ ${tests.join('\n')}
     }
     if (compiledArgs.length === 2) {
       //grayscale with alpha
-      return `(${compiledArgs[1]} * vec4(vec3(${compiledArgs[0]} / 255.0), 1.0))`;
+      return `vec4(vec3(${compiledArgs[0]} / 255.0), ${compiledArgs[1]})`;
     }
     const rgb = compiledArgs.slice(0, 3).map((color) => `${color} / 255.0`);
     if (compiledArgs.length === 3) {
       return `vec4(${rgb.join(', ')}, 1.0)`;
     }
     const alpha = compiledArgs[3];
-    return `(${alpha} * vec4(${rgb.join(', ')}, 1.0))`;
+    return `vec4(${rgb.join(', ')}, ${alpha})`;
   }),
   [Ops.Band]: createCompiler(([band, xOffset, yOffset], context) => {
     if (!(GET_BAND_VALUE_FUNC in context.functions)) {

src/ol/webgl/ShaderBuilder.js

@@ -27,12 +27,6 @@ uniform mediump int u_hitDetection;
 
 const float PI = 3.141592653589793238;
 const float TWO_PI = 2.0 * PI;
-
-// this used to produce an alpha-premultiplied color from a texture
-vec4 samplePremultiplied(sampler2D sampler, vec2 texCoord) {
-  vec4 color = texture2D(sampler, texCoord);
-  return vec4(color.rgb * color.a, color.a);
-}
 `;
 
 const DEFAULT_STYLE = createDefaultStyle();
@@ -58,6 +52,10 @@ const DEFAULT_STYLE = createDefaultStyle();
  *   .setSymbolSizeExpression('...')
  *   .getSymbolFragmentShader();
  * ```
+ *
+ * A note on [alpha premultiplication](https://en.wikipedia.org/wiki/Alpha_compositing#Straight_versus_premultiplied):
+ * The ShaderBuilder class expects all colors to **not having been alpha-premultiplied!** This is because alpha
+ * premultiplication is done at the end of each fragment shader.
  */
 export class ShaderBuilder {
   constructor() {
@@ -580,6 +578,7 @@ void main(void) {
   float s = sin(v_angle);
   coordsPx = vec2(c * coordsPx.x - s * coordsPx.y, s * coordsPx.x + c * coordsPx.y);
   gl_FragColor = ${this.symbolColorExpression_};
+  gl_FragColor.rgb *= gl_FragColor.a;
   if (u_hitDetection > 0) {
     if (gl_FragColor.a < 0.05) { discard; };
     gl_FragColor = v_prop_hitColor;
@@ -843,7 +842,7 @@ void main(void) {
   float currentLengthPx = max(0., min(dot(segmentTangent, startToPoint), segmentLength)) + v_distanceOffsetPx; 
   float currentRadiusPx = abs(dot(segmentNormal, startToPoint));
   float currentRadiusRatio = dot(segmentNormal, startToPoint) * 2. / v_width;
-  vec4 color = ${this.strokeColorExpression_} * u_globalAlpha;
+  vec4 color = ${this.strokeColorExpression_};
   float capType = ${this.strokeCapExpression_};
   float joinType = ${this.strokeJoinExpression_};
   float segmentStartDistance = computeSegmentPointDistance(currentPoint, v_segmentStart, v_segmentEnd, v_width, v_angleStart, capType, joinType);
@@ -853,7 +852,10 @@ void main(void) {
     max(segmentStartDistance, segmentEndDistance)
   );
   distance = max(distance, ${this.strokeDistanceFieldExpression_});
-  gl_FragColor = color * smoothstep(0.5, -0.5, distance);
+  color.a *= smoothstep(0.5, -0.5, distance);
+  gl_FragColor = color;
+  gl_FragColor.a *= u_globalAlpha;
+  gl_FragColor.rgb *= gl_FragColor.a;
   if (u_hitDetection > 0) {
     if (gl_FragColor.a < 0.1) { discard; };
     gl_FragColor = v_prop_hitColor;
@@ -951,7 +953,9 @@ void main(void) {
   }
   #endif
   if (${this.discardExpression_}) { discard; }
-  gl_FragColor = ${this.fillColorExpression_} * u_globalAlpha;
+  gl_FragColor = ${this.fillColorExpression_};
+  gl_FragColor.a *= u_globalAlpha;
+  gl_FragColor.rgb *= gl_FragColor.a;
   if (u_hitDetection > 0) {
     if (gl_FragColor.a < 0.1) { discard; };
     gl_FragColor = v_prop_hitColor;

src/ol/webgl/styleparser.js

@@ -53,11 +53,11 @@ export function packColor(color) {
 }
 
 const UNPACK_COLOR_FN = `vec4 unpackColor(vec2 packedColor) {
-  return fract(packedColor[1] / 256.0) * vec4(
+  return vec4(
     fract(floor(packedColor[0] / 256.0) / 256.0),
     fract(packedColor[0] / 256.0),
     fract(floor(packedColor[1] / 256.0) / 256.0),
-    1.0
+    fract(packedColor[1] / 256.0)
   );
 }`;
 
@@ -182,9 +182,9 @@ function getColorFromDistanceField(
     color = `mix(${strokeColor}, ${color}, ${strokeFillRatio})`;
   }
   const shapeOpacity = `(1.0 - smoothstep(-0.63, 0.58, ${distanceField}))`;
-  let result = `${color} * ${shapeOpacity}`;
+  let result = `${color} * vec4(1.0, 1.0, 1.0, ${shapeOpacity})`;
   if (opacity !== null) {
-    result = `${result} * ${opacity}`;
+    result = `${result} * vec4(1.0, 1.0, 1.0, ${opacity})`;
   }
   return result;
 }
@@ -511,11 +511,11 @@ function parseIconProperties(
 
   // OPACITY
   if ('icon-opacity' in style) {
-    color = `${color} * ${expressionToGlsl(
+    color = `${color} * vec4(1.0, 1.0, 1.0, ${expressionToGlsl(
       fragContext,
       style['icon-opacity'],
       NumberType,
-    )}`;
+    )})`;
   }
 
   // IMAGE & SIZE
@@ -529,7 +529,7 @@ function parseIconProperties(
   );
   builder
     .setSymbolColorExpression(
-      `${color} * samplePremultiplied(u_texture${textureId}, v_texCoord)`,
+      `${color} * texture2D(u_texture${textureId}, v_texCoord)`,
     )
     .setSymbolSizeExpression(sizeExpression);
 
@@ -673,7 +673,7 @@ function parseStrokeProperties(
   uCoordPx = clamp(uCoordPx, 0.5, sampleSize.x - 0.5);
   float vCoordPx = (-currentRadiusRatio * 0.5 + 0.5) * sampleSize.y;
   vec2 texCoord = (vec2(uCoordPx, vCoordPx) + textureOffset) / textureSize;
-  return samplePremultiplied(texture, texCoord);
+  return texture2D(texture, texCoord);
 }`;
     const textureName = `u_texture${textureId}`;
     let tintExpression = '1.';
@@ -832,7 +832,7 @@ function parseFillProperties(
   // also make sure that we're not sampling too close to the borders to avoid interpolation with outside pixels
   samplePos = clamp(samplePos, vec2(0.5), sampleSize - vec2(0.5));
   samplePos.y = sampleSize.y - samplePos.y; // invert y axis so that images appear upright
-  return samplePremultiplied(texture, (samplePos + textureOffset) / textureSize);
+  return texture2D(texture, (samplePos + textureOffset) / textureSize);
 }`;
     const textureName = `u_texture${textureId}`;
     let tintExpression = '1.';

test/browser/spec/ol/webgl/shaderbuilder.test.js

@@ -311,6 +311,7 @@ void main(void) {
   float s = sin(v_angle);
   coordsPx = vec2(c * coordsPx.x - s * coordsPx.y, s * coordsPx.x + c * coordsPx.y);
   gl_FragColor = vec4(0.3137254901960784, 0.0, 1.0, 1.0);
+  gl_FragColor.rgb *= gl_FragColor.a;
   if (u_hitDetection > 0) {
     if (gl_FragColor.a < 0.05) { discard; };
     gl_FragColor = v_prop_hitColor;
@@ -345,6 +346,7 @@ void main(void) {
   float s = sin(v_angle);
   coordsPx = vec2(c * coordsPx.x - s * coordsPx.y, s * coordsPx.x + c * coordsPx.y);
   gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
+  gl_FragColor.rgb *= gl_FragColor.a;
   if (u_hitDetection > 0) {
     if (gl_FragColor.a < 0.05) { discard; };
     gl_FragColor = v_prop_hitColor;
@@ -602,7 +604,7 @@ void main(void) {
   float currentLengthPx = max(0., min(dot(segmentTangent, startToPoint), segmentLength)) + v_distanceOffsetPx; 
   float currentRadiusPx = abs(dot(segmentNormal, startToPoint));
   float currentRadiusRatio = dot(segmentNormal, startToPoint) * 2. / v_width;
-  vec4 color = vec4(0.3137254901960784, 0.0, 1.0, 1.0) * u_globalAlpha;
+  vec4 color = vec4(0.3137254901960784, 0.0, 1.0, 1.0);
   float capType = ${stringToGlsl('butt')};
   float joinType = ${stringToGlsl('bevel')};
   float segmentStartDistance = computeSegmentPointDistance(currentPoint, v_segmentStart, v_segmentEnd, v_width, v_angleStart, capType, joinType);
@@ -612,7 +614,10 @@ void main(void) {
     max(segmentStartDistance, segmentEndDistance)
   );
   distance = max(distance, cos(currentLengthPx));
-  gl_FragColor = color * smoothstep(0.5, -0.5, distance);
+  color.a *= smoothstep(0.5, -0.5, distance);
+  gl_FragColor = color;
+  gl_FragColor.a *= u_globalAlpha;
+  gl_FragColor.rgb *= gl_FragColor.a;
   if (u_hitDetection > 0) {
     if (gl_FragColor.a < 0.1) { discard; };
     gl_FragColor = v_prop_hitColor;
@@ -702,7 +707,9 @@ void main(void) {
   }
   #endif
   if (u_myUniform > 0.5) { discard; }
-  gl_FragColor = vec4(0.3137254901960784, 0.0, 1.0, 1.0) * u_globalAlpha;
+  gl_FragColor = vec4(0.3137254901960784, 0.0, 1.0, 1.0);
+  gl_FragColor.a *= u_globalAlpha;
+  gl_FragColor.rgb *= gl_FragColor.a;
   if (u_hitDetection > 0) {
     if (gl_FragColor.a < 0.1) { discard; };
     gl_FragColor = v_prop_hitColor;

test/browser/spec/ol/webgl/styleparser.test.js

@@ -46,7 +46,7 @@ describe('ol/webgl/styleparser', () => {
         },
       ]);
       expect(result.builder.symbolColorExpression_).to.eql(
-        'vec4(0.2, 0.4, 0.6, 1.0) * (1.0 - smoothstep(-0.63, 0.58, circleDistanceField(coordsPx, mix(4.0, 8.0, clamp((v_prop_population - u_var_lower) / (u_var_higher - u_var_lower), 0.0, 1.0))))) * 0.5',
+        'vec4(0.2, 0.4, 0.6, 1.0) * vec4(1.0, 1.0, 1.0, (1.0 - smoothstep(-0.63, 0.58, circleDistanceField(coordsPx, mix(4.0, 8.0, clamp((v_prop_population - u_var_lower) / (u_var_higher - u_var_lower), 0.0, 1.0)))))) * vec4(1.0, 1.0, 1.0, 0.5)',
       );
       expect(result.builder.symbolSizeExpression_).to.eql(
         `vec2(mix(4.0, 8.0, clamp((a_prop_population - u_var_lower) / (u_var_higher - u_var_lower), 0.0, 1.0)) * 2. + 0.5)`,
@@ -73,7 +73,7 @@ describe('ol/webgl/styleparser', () => {
         },
       ]);
       expect(result.builder.symbolColorExpression_).to.eql(
-        'vec4(0.2, 0.4, 0.6, 1.0) * (1.0 - smoothstep(-0.63, 0.58, circleDistanceField(coordsPx, 6.0)))',
+        'vec4(0.2, 0.4, 0.6, 1.0) * vec4(1.0, 1.0, 1.0, (1.0 - smoothstep(-0.63, 0.58, circleDistanceField(coordsPx, 6.0))))',
       );
       expect(result.builder.symbolSizeExpression_).to.eql(
         'vec2(6.0 * 2. + 0.5)',
@@ -142,7 +142,7 @@ describe('ol/webgl/styleparser', () => {
             },
           ]);
           expect(result.builder.symbolColorExpression_).to.eql(
-            'mix(v_prop_color2, v_prop_color1, smoothstep(-(3.0 + 4.0) + 0.63, -(3.0 + 4.0) - 0.58, circleDistanceField(coordsPx / vec2(1.5, 1.7), (v_prop_attr1 + (3.0 + 4.0) * 0.5)))) * (1.0 - smoothstep(-0.63, 0.58, circleDistanceField(coordsPx / vec2(1.5, 1.7), (v_prop_attr1 + (3.0 + 4.0) * 0.5)))) * (0.5 * 0.75)',
+            'mix(v_prop_color2, v_prop_color1, smoothstep(-(3.0 + 4.0) + 0.63, -(3.0 + 4.0) - 0.58, circleDistanceField(coordsPx / vec2(1.5, 1.7), (v_prop_attr1 + (3.0 + 4.0) * 0.5)))) * vec4(1.0, 1.0, 1.0, (1.0 - smoothstep(-0.63, 0.58, circleDistanceField(coordsPx / vec2(1.5, 1.7), (v_prop_attr1 + (3.0 + 4.0) * 0.5))))) * vec4(1.0, 1.0, 1.0, (0.5 * 0.75))',
           );
           expect(result.builder.symbolSizeExpression_).to.eql(
             'vec2((a_prop_attr1 + (3.0 + 4.0) * 0.5) * 2. + 0.5) * vec2(1.5, 1.7)',
@@ -168,7 +168,7 @@ describe('ol/webgl/styleparser', () => {
         });
         it('uses a simplified color expression', () => {
           expect(result.builder.symbolColorExpression_).to.eql(
-            'vec4(0.5, 0.5, 0.5, 0.5) * (1.0 - smoothstep(-0.63, 0.58, circleDistanceField(coordsPx, 10.0)))',
+            'vec4(1.0, 1.0, 1.0, 0.5) * vec4(1.0, 1.0, 1.0, (1.0 - smoothstep(-0.63, 0.58, circleDistanceField(coordsPx, 10.0))))',
           );
         });
       });
@@ -182,7 +182,7 @@ describe('ol/webgl/styleparser', () => {
         });
         it('uses a transparent fill color', () => {
           expect(result.builder.symbolColorExpression_).to.eql(
-            'mix(vec4(1.0, 0.0, 0.0, 1.0), vec4(0.), smoothstep(-4.0 + 0.63, -4.0 - 0.58, circleDistanceField(coordsPx, (10.0 + 4.0 * 0.5)))) * (1.0 - smoothstep(-0.63, 0.58, circleDistanceField(coordsPx, (10.0 + 4.0 * 0.5))))',
+            'mix(vec4(1.0, 0.0, 0.0, 1.0), vec4(0.), smoothstep(-4.0 + 0.63, -4.0 - 0.58, circleDistanceField(coordsPx, (10.0 + 4.0 * 0.5)))) * vec4(1.0, 1.0, 1.0, (1.0 - smoothstep(-0.63, 0.58, circleDistanceField(coordsPx, (10.0 + 4.0 * 0.5)))))',
           );
         });
       });
@@ -246,7 +246,7 @@ describe('ol/webgl/styleparser', () => {
             },
           ]);
           expect(result.builder.symbolColorExpression_).to.eql(
-            'mix(v_prop_color2, v_prop_color1, smoothstep(-(3.0 + 4.0) + 0.63, -(3.0 + 4.0) - 0.58, starDistanceField(coordsPx / vec2(1.5, 1.7), (10.0 - 3.0), v_prop_attr1 + (3.0 + 4.0) * 0.5, (2.0 * 5.0) + (3.0 + 4.0) * 0.5, (0.5 * 3.141592653589793)))) * (1.0 - smoothstep(-0.63, 0.58, starDistanceField(coordsPx / vec2(1.5, 1.7), (10.0 - 3.0), v_prop_attr1 + (3.0 + 4.0) * 0.5, (2.0 * 5.0) + (3.0 + 4.0) * 0.5, (0.5 * 3.141592653589793)))) * (0.5 * 0.75)',
+            'mix(v_prop_color2, v_prop_color1, smoothstep(-(3.0 + 4.0) + 0.63, -(3.0 + 4.0) - 0.58, starDistanceField(coordsPx / vec2(1.5, 1.7), (10.0 - 3.0), v_prop_attr1 + (3.0 + 4.0) * 0.5, (2.0 * 5.0) + (3.0 + 4.0) * 0.5, (0.5 * 3.141592653589793)))) * vec4(1.0, 1.0, 1.0, (1.0 - smoothstep(-0.63, 0.58, starDistanceField(coordsPx / vec2(1.5, 1.7), (10.0 - 3.0), v_prop_attr1 + (3.0 + 4.0) * 0.5, (2.0 * 5.0) + (3.0 + 4.0) * 0.5, (0.5 * 3.141592653589793))))) * vec4(1.0, 1.0, 1.0, (0.5 * 0.75))',
           );
           expect(result.builder.symbolSizeExpression_).to.eql(
             'vec2((max(a_prop_attr1, (2.0 * 5.0)) + (3.0 + 4.0) * 0.5) * 2. + 0.5) * vec2(1.5, 1.7)',
@@ -273,7 +273,7 @@ describe('ol/webgl/styleparser', () => {
         });
         it('uses a simplified color expression', () => {
           expect(result.builder.symbolColorExpression_).to.eql(
-            'vec4(0.5, 0.5, 0.5, 0.5) * (1.0 - smoothstep(-0.63, 0.58, regularDistanceField(coordsPx, 5.0, 10.0, 0.)))',
+            'vec4(1.0, 1.0, 1.0, 0.5) * vec4(1.0, 1.0, 1.0, (1.0 - smoothstep(-0.63, 0.58, regularDistanceField(coordsPx, 5.0, 10.0, 0.))))',
           );
         });
       });
@@ -288,7 +288,7 @@ describe('ol/webgl/styleparser', () => {
         });
         it('uses a transparent fill color', () => {
           expect(result.builder.symbolColorExpression_).to.eql(
-            'mix(vec4(1.0, 0.0, 0.0, 1.0), vec4(0.), smoothstep(-4.0 + 0.63, -4.0 - 0.58, regularDistanceField(coordsPx, 5.0, 10.0 + 4.0 * 0.5, 0.))) * (1.0 - smoothstep(-0.63, 0.58, regularDistanceField(coordsPx, 5.0, 10.0 + 4.0 * 0.5, 0.)))',
+            'mix(vec4(1.0, 0.0, 0.0, 1.0), vec4(0.), smoothstep(-4.0 + 0.63, -4.0 - 0.58, regularDistanceField(coordsPx, 5.0, 10.0 + 4.0 * 0.5, 0.))) * vec4(1.0, 1.0, 1.0, (1.0 - smoothstep(-0.63, 0.58, regularDistanceField(coordsPx, 5.0, 10.0 + 4.0 * 0.5, 0.))))',
           );
         });
       });
@@ -344,7 +344,7 @@ describe('ol/webgl/styleparser', () => {
             },
           ]);
           expect(result.builder.symbolColorExpression_).to.eql(
-            `v_prop_color1 * (0.5 * 0.75) * samplePremultiplied(u_texture${uid}, v_texCoord)`,
+            `v_prop_color1 * vec4(1.0, 1.0, 1.0, (0.5 * 0.75)) * texture2D(u_texture${uid}, v_texCoord)`,
           );
           expect(result.builder.symbolSizeExpression_).to.eql(
             'vec2(30.0, 40.0) * vec2(1.5, 1.7)',

test/node/ol/expr/gpu.test.js

@@ -46,12 +46,12 @@ describe('ol/expr/gpu.js', () => {
   });
 
   describe('colorToGlsl()', () => {
-    it('normalizes color and outputs numbers with dot separators, including premultiplied alpha', () => {
+    it('normalizes color and outputs numbers with dot separators', () => {
       expect(colorToGlsl([100, 0, 255])).to.eql(
         'vec4(0.39215686274509803, 0.0, 1.0, 1.0)',
       );
       expect(colorToGlsl([100, 0, 255, 0.7])).to.eql(
-        'vec4(0.2745098039215686, 0.0, 0.7, 0.7)',
+        'vec4(0.39215686274509803, 0.0, 1.0, 0.7)',
       );
     });
     it('handles colors in string format', () => {
@@ -61,7 +61,7 @@ describe('ol/expr/gpu.js', () => {
         'vec4(0.39215686274509803, 0.0, 1.0, 1.0)',
       );
       expect(colorToGlsl('rgba(100, 0, 255, 0.3)')).to.eql(
-        'vec4(0.11764705882352941, 0.0, 0.3, 0.3)',
+        'vec4(0.39215686274509803, 0.0, 1.0, 0.3)',
       );
     });
   });
@@ -230,7 +230,7 @@ describe('ol/expr/gpu.js', () => {
         name: 'multiplication (infer string as color)',
         type: ColorType,
         expression: ['*', [255, 127.5, 0, 0.5], 'red'],
-        expected: '(vec4(0.5, 0.25, 0.0, 0.5) * vec4(1.0, 0.0, 0.0, 1.0))',
+        expected: '(vec4(1.0, 0.5, 0.0, 0.5) * vec4(1.0, 0.0, 0.0, 1.0))',
       },
       {
         name: 'division',
@@ -382,8 +382,7 @@ describe('ol/expr/gpu.js', () => {
         name: 'color constructor',
         type: AnyType,
         expression: ['color', ['get', 'attr4'], 1, 2, 0.5],
-        expected:
-          '(0.5 * vec4(a_prop_attr4 / 255.0, 1.0 / 255.0, 2.0 / 255.0, 1.0))',
+        expected: 'vec4(a_prop_attr4 / 255.0, 1.0 / 255.0, 2.0 / 255.0, 0.5)',
       },
       {
         name: 'grayscale color',
@@ -395,7 +394,7 @@ describe('ol/expr/gpu.js', () => {
         name: 'grayscale color with alpha',
         type: AnyType,
         expression: ['color', 100, 0.5],
-        expected: '(0.5 * vec4(vec3(100.0 / 255.0), 1.0))',
+        expected: 'vec4(vec3(100.0 / 255.0), 0.5)',
       },
       {
         name: 'rgb color',
@@ -407,8 +406,7 @@ describe('ol/expr/gpu.js', () => {
         name: 'rgb color with alpha',
         type: AnyType,
         expression: ['color', 100, 150, 200, 0.5],
-        expected:
-          '(0.5 * vec4(100.0 / 255.0, 150.0 / 255.0, 200.0 / 255.0, 1.0))',
+        expected: 'vec4(100.0 / 255.0, 150.0 / 255.0, 200.0 / 255.0, 0.5)',
       },
       {
         name: 'band',
@@ -657,7 +655,7 @@ describe('ol/expr/gpu.js', () => {
           ['match', ['get', 'year'], 2000, 'green', '#ffe52c'],
         ],
         expected:
-          'mix(vec4(0.5, 0.5, 0.0, 0.5), (a_prop_year == 2000.0 ? vec4(0.0, 0.5019607843137255, 0.0, 1.0) : vec4(1.0, 0.8980392156862745, 0.17254901960784313, 1.0)), clamp((pow((mod((u_time + mix(0.0, 8.0, clamp((a_prop_year - 1850.0) / (2015.0 - 1850.0), 0.0, 1.0))), 8.0) / 8.0), 0.5) - 0.0) / (1.0 - 0.0), 0.0, 1.0))',
+          'mix(vec4(1.0, 1.0, 0.0, 0.5), (a_prop_year == 2000.0 ? vec4(0.0, 0.5019607843137255, 0.0, 1.0) : vec4(1.0, 0.8980392156862745, 0.17254901960784313, 1.0)), clamp((pow((mod((u_time + mix(0.0, 8.0, clamp((a_prop_year - 1850.0) / (2015.0 - 1850.0), 0.0, 1.0))), 8.0) / 8.0), 0.5) - 0.0) / (1.0 - 0.0), 0.0, 1.0))',
       },
       {
         name: 'array for symbol size',

test/rendering/cases/webgl-tile-layer-style-color-array/main.js

@@ -0,0 +1,25 @@
+import Map from '../../../../src/ol/Map.js';
+import TileLayer from '../../../../src/ol/layer/WebGLTile.js';
+import View from '../../../../src/ol/View.js';
+import XYZ from '../../../../src/ol/source/XYZ.js';
+
+new Map({
+  layers: [
+    new TileLayer({
+      source: new XYZ({
+        url: '/data/tiles/satellite/{z}/{x}/{y}.jpg',
+        transition: 0,
+      }),
+      style: {
+        color: ['array', 0.25, ['band', 2], ['band', 3], 0.5],
+      },
+    }),
+  ],
+  target: 'map',
+  view: new View({
+    center: [15700000, 2700000],
+    zoom: 2,
+  }),
+});
+
+render();