Webgl / add support for a time operator in literal styles

This required adding `u_time` as one of the default uniforms provided by the
webgl helper.

src/ol/webgl/Helper.js

@@ -42,7 +42,8 @@ export const ShaderType = {
 export const DefaultUniform = {
   PROJECTION_MATRIX: 'u_projectionMatrix',
   OFFSET_SCALE_MATRIX: 'u_offsetScaleMatrix',
-  OFFSET_ROTATION_MATRIX: 'u_offsetRotateMatrix'
+  OFFSET_ROTATION_MATRIX: 'u_offsetRotateMatrix',
+  TIME: 'u_time'
 };
 
 /**
@@ -355,6 +356,12 @@ class WebGLHelper extends Disposable {
      * @private
      */
     this.shaderCompileErrors_ = null;
+
+    /**
+     * @type {number}
+     * @private
+     */
+    this.startTime_ = Date.now();
   }
 
   /**
@@ -548,6 +555,8 @@ class WebGLHelper extends Disposable {
 
     this.setUniformMatrixValue(DefaultUniform.OFFSET_SCALE_MATRIX, fromTransform(this.tmpMat4_, offsetScaleMatrix));
     this.setUniformMatrixValue(DefaultUniform.OFFSET_ROTATION_MATRIX, fromTransform(this.tmpMat4_, offsetRotateMatrix));
+
+    this.setUniformFloatValue(DefaultUniform.TIME, (Date.now() - this.startTime_) * 0.001);
   }
 
   /**

src/ol/webgl/ShaderBuilder.js

@@ -66,6 +66,8 @@ export function parse(value, attributes, attributePrefix) {
           attributes.push(v[1]);
         }
         return attributePrefix + v[1];
+      case 'time':
+        return 'u_time';
 
       // math operators
       case '*': return `(${p(v[1])} * ${p(v[2])})`;
@@ -328,8 +330,8 @@ export class ShaderBuilder {
    * Generates a symbol vertex shader from the builder parameters,
    * intended to be used on point geometries.
    *
-   * Three uniforms are hardcoded in all shaders: `u_projectionMatrix`, `u_offsetScaleMatrix` and
-   * `u_offsetRotateMatrix`.
+   * Three uniforms are hardcoded in all shaders: `u_projectionMatrix`, `u_offsetScaleMatrix`,
+   * `u_offsetRotateMatrix`, `u_time`.
    *
    * 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).
@@ -348,6 +350,7 @@ export class ShaderBuilder {
 uniform mat4 u_projectionMatrix;
 uniform mat4 u_offsetScaleMatrix;
 uniform mat4 u_offsetRotateMatrix;
+uniform float u_time;
 ${this.uniforms.map(function(uniform) {
     return 'uniform ' + uniform + ';';
   }).join('\n')}
@@ -393,6 +396,7 @@ ${this.varyings.map(function(varying) {
    */
   getSymbolFragmentShader() {
     return `precision mediump float;
+uniform float u_time;
 ${this.uniforms.map(function(uniform) {
     return 'uniform ' + uniform + ';';
   }).join('\n')}