Merge pull request #10016 from jahow/webgl-attribute-link
WebGL Points Layer: allow expressions in literal style
This commit is contained in:
@@ -2,7 +2,7 @@ import {
|
||||
getSymbolVertexShader,
|
||||
formatNumber,
|
||||
getSymbolFragmentShader,
|
||||
formatColor, formatArray
|
||||
formatColor, formatArray, parse, parseSymbolStyle
|
||||
} from '../../../../src/ol/webgl/ShaderBuilder.js';
|
||||
|
||||
describe('ol.webgl.ShaderBuilder', function() {
|
||||
@@ -57,6 +57,7 @@ attribute vec2 a_position;
|
||||
attribute float a_index;
|
||||
|
||||
varying vec2 v_texCoord;
|
||||
varying vec2 v_quadCoord;
|
||||
varying float v_opacity;
|
||||
varying vec3 v_test;
|
||||
void main(void) {
|
||||
@@ -71,6 +72,9 @@ void main(void) {
|
||||
float u = a_index == 0.0 || a_index == 3.0 ? texCoord.s : texCoord.q;
|
||||
float v = a_index == 2.0 || a_index == 3.0 ? texCoord.t : texCoord.p;
|
||||
v_texCoord = vec2(u, v);
|
||||
u = a_index == 0.0 || a_index == 3.0 ? 0.0 : 1.0;
|
||||
v = a_index == 2.0 || a_index == 3.0 ? 0.0 : 1.0;
|
||||
v_quadCoord = vec2(u, v);
|
||||
v_opacity = 0.4;
|
||||
v_test = vec3(1.0, 2.0, 3.0);
|
||||
}`);
|
||||
@@ -94,6 +98,7 @@ attribute vec2 a_position;
|
||||
attribute float a_index;
|
||||
attribute vec2 a_myAttr;
|
||||
varying vec2 v_texCoord;
|
||||
varying vec2 v_quadCoord;
|
||||
|
||||
void main(void) {
|
||||
mat4 offsetMatrix = u_offsetScaleMatrix;
|
||||
@@ -107,6 +112,9 @@ void main(void) {
|
||||
float u = a_index == 0.0 || a_index == 3.0 ? texCoord.s : texCoord.q;
|
||||
float v = a_index == 2.0 || a_index == 3.0 ? texCoord.t : texCoord.p;
|
||||
v_texCoord = vec2(u, v);
|
||||
u = a_index == 0.0 || a_index == 3.0 ? 0.0 : 1.0;
|
||||
v = a_index == 2.0 || a_index == 3.0 ? 0.0 : 1.0;
|
||||
v_quadCoord = vec2(u, v);
|
||||
|
||||
}`);
|
||||
});
|
||||
@@ -128,6 +136,7 @@ attribute vec2 a_position;
|
||||
attribute float a_index;
|
||||
|
||||
varying vec2 v_texCoord;
|
||||
varying vec2 v_quadCoord;
|
||||
|
||||
void main(void) {
|
||||
mat4 offsetMatrix = u_offsetScaleMatrix * u_offsetRotateMatrix;
|
||||
@@ -141,6 +150,9 @@ void main(void) {
|
||||
float u = a_index == 0.0 || a_index == 3.0 ? texCoord.s : texCoord.q;
|
||||
float v = a_index == 2.0 || a_index == 3.0 ? texCoord.t : texCoord.p;
|
||||
v_texCoord = vec2(u, v);
|
||||
u = a_index == 0.0 || a_index == 3.0 ? 0.0 : 1.0;
|
||||
v = a_index == 2.0 || a_index == 3.0 ? 0.0 : 1.0;
|
||||
v_quadCoord = vec2(u, v);
|
||||
|
||||
}`);
|
||||
});
|
||||
@@ -168,6 +180,7 @@ void main(void) {
|
||||
expect(getSymbolFragmentShader(parameters)).to.eql(`precision mediump float;
|
||||
|
||||
varying vec2 v_texCoord;
|
||||
varying vec2 v_quadCoord;
|
||||
varying float v_opacity;
|
||||
varying vec3 v_test;
|
||||
void main(void) {
|
||||
@@ -188,6 +201,7 @@ void main(void) {
|
||||
uniform float u_myUniform;
|
||||
uniform vec2 u_myUniform2;
|
||||
varying vec2 v_texCoord;
|
||||
varying vec2 v_quadCoord;
|
||||
|
||||
void main(void) {
|
||||
gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
|
||||
@@ -196,4 +210,111 @@ void main(void) {
|
||||
});
|
||||
});
|
||||
|
||||
describe('parse', function() {
|
||||
let attributes, prefix, parseFn;
|
||||
|
||||
beforeEach(function() {
|
||||
attributes = [];
|
||||
prefix = 'a_';
|
||||
parseFn = function(value) {
|
||||
return parse(value, attributes, prefix);
|
||||
};
|
||||
});
|
||||
|
||||
it('parses expressions & literal values', function() {
|
||||
expect(parseFn(1)).to.eql('1.0');
|
||||
expect(parseFn(['get', 'myAttr'])).to.eql('a_myAttr');
|
||||
expect(parseFn(['+', ['*', ['get', 'size'], 0.001], 12])).to.eql('((a_size * 0.001) + 12.0)');
|
||||
expect(parseFn(['clamp', ['get', 'attr2'], ['get', 'attr3'], 20])).to.eql('clamp(a_attr2, a_attr3, 20.0)');
|
||||
expect(parseFn(['stretch', ['get', 'size'], 10, 100, 4, 8])).to.eql('(clamp(a_size, 10.0, 100.0) * ((8.0 - 4.0) / (100.0 - 10.0)) + 4.0)');
|
||||
expect(attributes).to.eql(['myAttr', 'size', 'attr2', 'attr3']);
|
||||
});
|
||||
|
||||
it('does not register an attribute several times', function() {
|
||||
parseFn(['get', 'myAttr']);
|
||||
parseFn(['clamp', ['get', 'attr2'], ['get', 'attr2'], ['get', 'myAttr']]);
|
||||
expect(attributes).to.eql(['myAttr', 'attr2']);
|
||||
});
|
||||
});
|
||||
|
||||
describe('parseSymbolStyle', function() {
|
||||
it('parses a style without expressions', function() {
|
||||
const result = parseSymbolStyle({
|
||||
symbolType: 'square',
|
||||
size: [4, 8],
|
||||
color: '#336699',
|
||||
rotateWithView: true
|
||||
});
|
||||
expect(result.params).to.eql({
|
||||
uniforms: [],
|
||||
attributes: [],
|
||||
varyings: [],
|
||||
colorExpression: 'vec4(0.2, 0.4, 0.6, 1.0) * vec4(1.0, 1.0, 1.0, 1.0 * 1.0)',
|
||||
sizeExpression: 'vec2(4.0, 8.0)',
|
||||
offsetExpression: 'vec2(0.0, 0.0)',
|
||||
texCoordExpression: 'vec4(0.0, 0.0, 1.0, 1.0)',
|
||||
rotateWithView: true
|
||||
});
|
||||
expect(result.attributes).to.eql([]);
|
||||
expect(result.uniforms).to.eql({});
|
||||
});
|
||||
|
||||
it('parses a style with expressions', function() {
|
||||
const result = parseSymbolStyle({
|
||||
symbolType: 'square',
|
||||
size: ['get', 'attr1'],
|
||||
color: [
|
||||
1.0, 0.0, 0.5, ['get', 'attr2']
|
||||
],
|
||||
textureCoord: [0.5, 0.5, 0.5, 1],
|
||||
offset: [3, ['get', 'attr3']]
|
||||
});
|
||||
expect(result.params).to.eql({
|
||||
uniforms: [],
|
||||
attributes: ['float a_attr1', 'float a_attr3', 'float a_attr2'],
|
||||
varyings: [{
|
||||
name: 'v_attr1',
|
||||
type: 'float',
|
||||
expression: 'a_attr1'
|
||||
}, {
|
||||
name: 'v_attr2',
|
||||
type: 'float',
|
||||
expression: 'a_attr2'
|
||||
}],
|
||||
colorExpression: 'vec4(1.0, 0.0, 0.5, v_attr2) * vec4(1.0, 1.0, 1.0, 1.0 * 1.0)',
|
||||
sizeExpression: 'vec2(a_attr1, a_attr1)',
|
||||
offsetExpression: 'vec2(3.0, a_attr3)',
|
||||
texCoordExpression: 'vec4(0.5, 0.5, 0.5, 1.0)',
|
||||
rotateWithView: false
|
||||
});
|
||||
expect(result.attributes.length).to.eql(3);
|
||||
expect(result.attributes[0].name).to.eql('attr1');
|
||||
expect(result.attributes[1].name).to.eql('attr3');
|
||||
expect(result.attributes[2].name).to.eql('attr2');
|
||||
expect(result.uniforms).to.eql({});
|
||||
});
|
||||
|
||||
it('parses a style with a uniform (texture)', function() {
|
||||
const result = parseSymbolStyle({
|
||||
symbolType: 'image',
|
||||
src: '../data/image.png',
|
||||
size: 6,
|
||||
color: '#336699',
|
||||
opacity: 0.5
|
||||
});
|
||||
expect(result.params).to.eql({
|
||||
uniforms: ['sampler2D u_texture'],
|
||||
attributes: [],
|
||||
varyings: [],
|
||||
colorExpression: 'vec4(0.2, 0.4, 0.6, 1.0) * vec4(1.0, 1.0, 1.0, 0.5 * 1.0) * texture2D(u_texture, v_texCoord)',
|
||||
sizeExpression: 'vec2(6.0, 6.0)',
|
||||
offsetExpression: 'vec2(0.0, 0.0)',
|
||||
texCoordExpression: 'vec4(0.0, 0.0, 1.0, 1.0)',
|
||||
rotateWithView: false
|
||||
});
|
||||
expect(result.attributes).to.eql([]);
|
||||
expect(result.uniforms).to.have.property('u_texture');
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user