Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix color style for WebGL tile layer #16075

Merged
merged 3 commits into from
Aug 14, 2024
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 3 additions & 9 deletions src/ol/expr/gpu.js
Original file line number Diff line number Diff line change
Expand Up @@ -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]);
}

/**
Expand Down Expand Up @@ -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)) {
Expand Down
18 changes: 9 additions & 9 deletions src/ol/webgl/ShaderBuilder.js
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -580,6 +574,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;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

BTW, currently u_globalAlpha is not applied here. Is this OK for a symbol...?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh, right, maybe that was missing. I think this should be done in another PR, I have the feeling this isn't tested anywhere

if (u_hitDetection > 0) {
if (gl_FragColor.a < 0.05) { discard; };
gl_FragColor = v_prop_hitColor;
Expand Down Expand Up @@ -843,7 +838,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);
Expand All @@ -853,7 +848,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;
Expand Down Expand Up @@ -951,7 +949,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;
Expand Down
18 changes: 9 additions & 9 deletions src/ol/webgl/styleparser.js
Original file line number Diff line number Diff line change
Expand Up @@ -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)
);
}`;

Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -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
Expand All @@ -529,7 +529,7 @@ function parseIconProperties(
);
builder
.setSymbolColorExpression(
`${color} * samplePremultiplied(u_texture${textureId}, v_texCoord)`,
`${color} * texture2D(u_texture${textureId}, v_texCoord)`,
)
.setSymbolSizeExpression(sizeExpression);

Expand Down Expand Up @@ -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.';
Expand Down Expand Up @@ -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.';
Expand Down
13 changes: 10 additions & 3 deletions test/browser/spec/ol/webgl/shaderbuilder.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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);
Expand All @@ -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;
Expand Down Expand Up @@ -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;
Expand Down
18 changes: 9 additions & 9 deletions test/browser/spec/ol/webgl/styleparser.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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)`,
Expand All @@ -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)',
Expand Down Expand Up @@ -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)',
Expand All @@ -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))))',
);
});
});
Expand All @@ -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)))))',
);
});
});
Expand Down Expand Up @@ -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)',
Expand All @@ -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.))))',
);
});
});
Expand All @@ -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.))))',
);
});
});
Expand Down Expand Up @@ -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)',
Expand Down
18 changes: 8 additions & 10 deletions test/node/ol/expr/gpu.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand All @@ -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)',
);
});
});
Expand Down Expand Up @@ -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',
Expand Down Expand Up @@ -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',
Expand All @@ -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',
Expand All @@ -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',
Expand Down Expand Up @@ -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',
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
25 changes: 25 additions & 0 deletions test/rendering/cases/webgl-tile-layer-style-color-array/main.js
Original file line number Diff line number Diff line change
@@ -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();
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading