ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Webgl shader builder / expanded functionality

Browse Source 
Now takes in a custom object with attributes, uniforms etc.
The WebGLPointsLayer uses this to handle image icons.
This commit is contained in:
Olivier Guyot
2019-09-25 14:49:14 +02:00
parent b8564d503a
commit 34572da17b
3 changed files with 258 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
src/ol/webgl/ShaderBuilder.js
View File

@@ -1,5 +1,3 @@
import {asArray} from '../color.js';
/**
* Utilities for generating shaders from literal style objects
* @module ol/webgl/ShaderBuilder
@@ -15,6 +13,15 @@ export function formatNumber(v) {
return s.indexOf('.') === -1 ? s + '.0' : s;
}
/**
* Will return the number array as a float with a dot separator, concatenated with ', '.
* @param {Array<number>} array Numerical values array.
* @returns {string} The array as string, e. g.: `1.0, 2.0, 3.0`.
*/
export function formatArray(array) {
return array.map(formatNumber).join(', ');
}
/**
* Will normalize and converts to string a color array compatible with GLSL.
* @param {Array<number>} colorArray Color in [r, g, b, a] array form, with RGB components in the
@@ -29,54 +36,78 @@ export function formatColor(colorArray) {
}
/**
* Generates a symbol vertex shader from a literal style,
* @typedef {Object} VaryingDescription
* @property {string} name Varying name, as will be declared in the header.
* @property {string} type Varying type, either `float`, `vec2`, `vec4`...
* @property {string} expression Expression which will be assigned to the varying in the vertex shader, and
* passed on to the fragment shader.
*/
/**
* @typedef {Object} ShaderParameters
* @property {Array<string>} [uniforms] Uniforms; these will be declared in the header (should include the type).
* @property {Array<string>} [attributes] Attributes; these will be declared in the header (should include the type).
* @property {Array<VaryingDescription>} [varyings] Varyings with a name, a type and an expression.
* @property {string} sizeExpression This will be assigned to a `vec2 size` variable.
* @property {string} offsetExpression This will be assigned to a `vec2 offset` variable.
* @property {string} colorExpression This will be the value assigned to gl_FragColor
* @property {string} texCoordExpression This will be the value assigned to the `vec4 v_texCoord` varying.
* @property {boolean} [rotateWithView=false] Whether symbols should rotate with view
*/
/**
* Generates a symbol vertex shader from a set of parameters,
* intended to be used on point geometries.
*
* Expected the following attributes to be present in the attribute array:
* Three uniforms are hardcoded in all shaders: `u_projectionMatrix`, `u_offsetScaleMatrix` and
* `u_offsetRotateMatrix`.
*
* The following attributes are hardcoded and expected to be present in the vertex buffers:
* `vec2 a_position`, `float a_index` (being the index of the vertex in the quad, 0 to 3).
*
* Transmits the following varyings to the fragment shader:
* `vec2 v_texCoord`, `float v_opacity`, `vec4 v_color`
*
* @param {import('../style/LiteralStyle.js').LiteralSymbolStyle} parameters Parameters for the shader.
* @param {ShaderParameters} parameters Parameters for the shader.
* @returns {string} The full shader as a string.
*/
export function getSymbolVertexShader(parameters) {
const offsetMatrix = parameters.rotateWithView ?
'mat4 offsetMatrix = u_offsetScaleMatrix * u_offsetRotateMatrix;' :
'mat4 offsetMatrix = u_offsetScaleMatrix;';
'u_offsetScaleMatrix * u_offsetRotateMatrix' :
'u_offsetScaleMatrix';
const offset = parameters.offset || [0, 0];
const size = Array.isArray(parameters.size) ? parameters.size : [parameters.size, parameters.size];
const texCoord = parameters.textureCoord || [0, 0, 1, 1];
const opacity = parameters.opacity !== undefined ? parameters.opacity : 1;
const color = parameters.color !== undefined ?
(typeof parameters.color === 'string' ? asArray(parameters.color) : parameters.color) :
[255, 255, 255, 1];
const f = formatNumber;
const uniforms = parameters.uniforms || [];
const attributes = parameters.attributes || [];
const varyings = parameters.varyings || [];
const body = `precision mediump float;
uniform mat4 u_projectionMatrix;
uniform mat4 u_offsetScaleMatrix;
uniform mat4 u_offsetRotateMatrix;
${uniforms.map(function(uniform) {
return 'uniform ' + uniform + ';';
}).join('\n')}
attribute vec2 a_position;
attribute float a_index;
${attributes.map(function(attribute) {
return 'attribute ' + attribute + ';';
}).join('\n')}
varying vec2 v_texCoord;
varying float v_opacity;
varying vec4 v_color;
${varyings.map(function(varying) {
return 'varying ' + varying.type + ' ' + varying.name + ';';
}).join('\n')}
void main(void) {
${offsetMatrix}
float offsetX = a_index == 0.0 || a_index == 3.0 ? ${f(offset[0] - size[0] / 2)} : ${f(offset[0] + size[0] / 2)};
float offsetY = a_index == 0.0 || a_index == 1.0 ? ${f(offset[1] - size[1] / 2)} : ${f(offset[1] + size[1] / 2)};
mat4 offsetMatrix = ${offsetMatrix};
vec2 size = ${parameters.sizeExpression};
vec2 offset = ${parameters.offsetExpression};
float offsetX = a_index == 0.0 || a_index == 3.0 ? offset.x - size.x / 2.0 : offset.x + size.x / 2.0;
float offsetY = a_index == 0.0 || a_index == 1.0 ? offset.y - size.y / 2.0 : offset.y + size.y / 2.0;
vec4 offsets = offsetMatrix * vec4(offsetX, offsetY, 0.0, 0.0);
gl_Position = u_projectionMatrix * vec4(a_position, 0.0, 1.0) + offsets;
float u = a_index == 0.0 || a_index == 3.0 ? ${f(texCoord[0])} : ${f(texCoord[2])};
float v = a_index == 0.0 || a_index == 1.0 ? ${f(texCoord[1])} : ${f(texCoord[3])};
vec4 texCoord = ${parameters.texCoordExpression};
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);
v_opacity = ${f(opacity)};
v_color = vec4(${formatColor(color)});
${varyings.map(function(varying) {
return ' ' + varying.name + ' = ' + varying.expression + ';';
}).join('\n')}
}`;
return body;
@@ -86,24 +117,25 @@ void main(void) {
* Generates a symbol fragment shader intended to be used on point geometries.
*
* Expected the following varyings to be transmitted by the vertex shader:
* `vec2 v_texCoord`, `float v_opacity`, `vec4 v_color`
* `vec2 v_texCoord`
*
* @param {ShaderParameters} parameters Parameters for the shader.
* @returns {string} The full shader as a string.
*/
export function getSymbolFragmentShader() {
const body = `precision mediump float;
uniform sampler2D u_texture;
varying vec2 v_texCoord;
varying float v_opacity;
varying vec4 v_color;
export function getSymbolFragmentShader(parameters) {
const uniforms = parameters.uniforms || [];
const varyings = parameters.varyings || [];
const body = `precision mediump float;
${uniforms.map(function(uniform) {
return 'uniform ' + uniform + ';';
}).join('\n')}
varying vec2 v_texCoord;
${varyings.map(function(varying) {
return 'varying ' + varying.type + ' ' + varying.name + ';';
}).join('\n')}
void main(void) {
if (v_opacity == 0.0) {
discard;
}
vec4 textureColor = texture2D(u_texture, v_texCoord);
gl_FragColor = v_color * textureColor;
gl_FragColor.a *= v_opacity;
gl_FragColor = ${parameters.colorExpression};
gl_FragColor.rgb *= gl_FragColor.a;
}`;