Add basic polygon renderer.

2016-07-07 16:07:27 +02:00
parent 269c3eb943
commit 18cf6c30bd
4 changed files with 175 additions and 218 deletions
--- a/package.json
+++ b/package.json
@@ -34,7 +34,7 @@
    "browserify": "13.1.1",
    "closure-util": "1.15.1",
    "derequire": "2.0.3",
-    "earcut": "^1.4.2",
+    "earcut": "2.1.1",
    "fs-extra": "1.0.0",
    "glob": "7.1.1",
    "handlebars": "4.0.6",
--- a/src/ol/render/webgl/imagereplay/index.js
+++ b/src/ol/render/webgl/imagereplay/index.js
@@ -23,8 +23,8 @@ goog.require('ol.render.webgl.linestringreplay.shader.DefaultFragment');
 goog.require('ol.render.webgl.linestringreplay.shader.DefaultVertex');
 goog.require('ol.render.webgl.polygonreplay.shader.Default');
 goog.require('ol.render.webgl.polygonreplay.shader.Default.Locations');
-//goog.require('ol.render.webgl.polygonreplay.shader.DefaultFragment');
-//goog.require('ol.render.webgl.polygonreplay.shader.DefaultVertex');
+goog.require('ol.render.webgl.polygonreplay.shader.DefaultFragment');
+goog.require('ol.render.webgl.polygonreplay.shader.DefaultVertex');
 goog.require('ol.vec.Mat4');
 goog.require('ol.webgl');
 goog.require('ol.webgl.Buffer');
@@ -132,6 +132,13 @@ ol.render.webgl.Replay = function(tolerance, maxExtent) {
   */
  this.verticesBuffer_ = null;

+  /**
+   * Optional parameter for PolygonReplay instances.
+   * @type {ol.render.webgl.LineStringReplay|undefined}
+   * @private
+   */
+  this.lineStringReplay_ = undefined;
+
 };
 ol.inherits(ol.render.webgl.Replay, ol.render.VectorContext);

@@ -273,6 +280,12 @@ ol.render.webgl.Replay.prototype.replay = function(context,
    }
  }

+  if (this.lineStringReplay_) {
+    this.lineStringReplay_.replay(context,
+        center, resolution, rotation, size, pixelRatio,
+        opacity, skippedFeaturesHash,
+        featureCallback, oneByOne, opt_hitExtent);
+  }

  return result;
 };
@@ -1072,8 +1085,6 @@ ol.render.webgl.LineStringReplay = function(tolerance, maxExtent) {
    changed: false
  };

-  this.startIndices_ = [];
-
 };
 ol.inherits(ol.render.webgl.LineStringReplay, ol.render.webgl.Replay);

@@ -1652,44 +1663,9 @@ ol.render.webgl.LineStringReplay.prototype.setFillStrokeStyle = function(fillSty
 ol.render.webgl.PolygonReplay = function(tolerance, maxExtent) {
  ol.render.webgl.Replay.call(this, tolerance, maxExtent);

-  /**
-   * @private
-   * @type {ol.Color|undefined}
-   */
-  this.fillColor_ = undefined;
-
-  /**
-   * @private
-   * @type {ol.Color|undefined}
-   */
-  this.strokeColor_ = undefined;
-
-  /**
-   * @private
-   */
  this.lineStringReplay_ = new ol.render.webgl.LineStringReplay(
      tolerance, maxExtent);

-  /**
-   * The origin of the coordinate system for the point coordinates sent to
-   * the GPU.
-   * @private
-   * @type {ol.Coordinate}
-   */
-  this.origin_ = ol.extent.getCenter(maxExtent);
-
-  /**
-   * @type {Array.<number>}
-   * @private
-   */
-  this.indices_ = [];
-
-  /**
-   * @type {ol.webgl.Buffer}
-   * @private
-   */
-  this.indicesBuffer_ = null;
-
  /**
   * @private
   * @type {ol.render.webgl.polygonreplay.shader.Default.Locations}
@@ -1697,67 +1673,55 @@ ol.render.webgl.PolygonReplay = function(tolerance, maxExtent) {
  this.defaultLocations_ = null;

  /**
-   * @type {ol.Transform}
   * @private
+   * @type {Array.<Array.<number>>}
   */
-  this.projectionMatrix_ = ol.transform.create();
+  this.styles_ = [];

  /**
+   * @private
   * @type {Array.<number>}
-   * @private
   */
-  this.vertices_ = [];
+  this.styleIndices_ = [];

  /**
-   * @type {ol.webgl.Buffer}
   * @private
+   * @type {{fillColor: (Array.<number>|null),
+   *         changed: boolean}|null}
   */
-  this.verticesBuffer_ = null;
+  this.state_ = {
+    fillColor: null,
+    changed: false
+  };

-  /**
-   * Start index per feature (the index).
-   * @type {Array.<number>}
-   * @private
-   */
-  this.startIndices_ = [];
-
-  /**
-   * Start index per feature (the feature).
-   * @type {Array.<ol.Feature>|Array.<ol.render.Feature>}
-   * @private
-   */
-  this.startIndicesFeature_ = [];
 };
 ol.inherits(ol.render.webgl.PolygonReplay, ol.render.webgl.Replay);


 /**
 * Draw one polygon.
- * @param {Array.<Array.<ol.Coordinate>>} coordinates Coordinates.
+ * @param {Array.<number>} flatCoordinates Flat coordinates.
+ * @param {Array.<number>|null} holeIndices Hole indices.
+ * @param {number} stride Stride.
 * @private
 */
-ol.render.webgl.PolygonReplay.prototype.drawCoordinates_ = function(coordinates) {
-  // Triangulate the polgon
-  var triangulation = ol.ext.earcut(coordinates, true);
-  var i, ii;
-  var indices = triangulation.indices;
+ol.render.webgl.PolygonReplay.prototype.drawCoordinates_ = function(flatCoordinates, holeIndices, stride) {
+  // Triangulate the polygon
+  var nextIndex = this.vertices_.length / 2 + 1;
+  flatCoordinates = flatCoordinates.map(function(curr, index) {
+    if (index % 2 === 0) {
+      return curr - this.origin_[0];
+    } else {
+      return curr - this.origin_[1];
+    }
+  }, this);
+  var triangulation = ol.ext.earcut(flatCoordinates, holeIndices, stride).map(function(curr) {
+    return curr + nextIndex;
+  });

-  // Shift the indices to take into account previously handled polygons
-  var offset = this.vertices_.length / 6;
-  for (i = 0, ii = indices.length; i < ii; ++i) {
-    this.indices_.push(indices[i] + offset);
-  }
-
-  // Add the color property to each vertex
-  // TODO performance: make it more efficient
-  var vertices = triangulation.vertices;
-  for (i = 0, ii = vertices.length / 2; i < ii; ++i) {
-    this.vertices_.push(vertices[2 * i]);
-    this.vertices_.push(vertices[2 * i + 1]);
-    this.vertices_.push(this.fillColor_[0]);
-    this.vertices_.push(this.fillColor_[1]);
-    this.vertices_.push(this.fillColor_[2]);
-    this.vertices_.push(this.fillColor_[3]);
+  if (triangulation.length > 2) {
+    ol.array.extend(this.vertices_, flatCoordinates);
+    ol.array.extend(this.indices_, triangulation);
  }
 };

@@ -1765,16 +1729,44 @@ ol.render.webgl.PolygonReplay.prototype.drawCoordinates_ = function(coordinates)
 /**
 * @inheritDoc
 */
-ol.render.webgl.PolygonReplay.prototype.drawMultiPolygon = function(geometry, feature) {
-  if (goog.isNull(this.fillColor_)) {
-    return;
+ol.render.webgl.PolygonReplay.prototype.drawMultiPolygon = function(multiPolygonGeometry, feature) {
+  var polygons = multiPolygonGeometry.getPolygons();
+  var stride = multiPolygonGeometry.getStride();
+  var currIndex = this.indices_.length;
+  var currLineIndex = this.lineStringReplay_.indices_.length;
+  var i, ii, j, jj;
+  for (i = 0, ii = polygons.length; i < ii; ++i) {
+    var linearRings = polygons[i].getLinearRings();
+    if (linearRings.length > 0) {
+      var flatCoordinates = linearRings[0].getFlatCoordinates();
+      this.lineStringReplay_.drawCoordinates_(flatCoordinates, 0, flatCoordinates.length, stride);
+      var holeIndices = [];
+      var holeFlatCoords;
+      for (j = 1, jj = linearRings.length; j < jj; ++j) {
+        holeIndices.push(flatCoordinates.length / 2);
+        holeFlatCoords = linearRings[i].getFlatCoordinates();
+        ol.array.extend(flatCoordinates, holeFlatCoords);
+        this.lineStringReplay_.drawCoordinates_(holeFlatCoords, 0, holeFlatCoords.length, stride);
+      }
+      holeIndices = holeIndices.length === 0 ? null : holeIndices;
+      this.drawCoordinates_(flatCoordinates, holeIndices, stride);
+    }
  }
-  var coordinatess = geometry.getCoordinates();
-  this.startIndices_.push(this.indices_.length);
-  this.startIndicesFeature_.push(feature);
-  var i, ii;
-  for (i = 0, ii = coordinatess.length; i < ii; i++) {
-    this.drawCoordinates_(coordinatess[i]);
+  if (this.indices_.length > currIndex) {
+    this.startIndices_.push(currIndex);
+    this.startIndicesFeature_.push(feature);
+    if (this.state_.changed) {
+      this.styleIndices_.push(currIndex);
+      this.state_.changed = false;
+    }
+  }
+  if (this.lineStringReplay_.indices_.length > currLineIndex) {
+    this.lineStringReplay_.startIndices_.push(currLineIndex);
+    this.lineStringReplay_.startIndicesFeature_.push(feature);
+    if (this.lineStringReplay_.state_.changed) {
+      this.lineStringReplay_.styleIndices_.push(currLineIndex);
+      this.lineStringReplay_.state_.changed = false;
+    }
  }
 };

@@ -1783,21 +1775,35 @@ ol.render.webgl.PolygonReplay.prototype.drawMultiPolygon = function(geometry, fe
 * @inheritDoc
 */
 ol.render.webgl.PolygonReplay.prototype.drawPolygon = function(polygonGeometry, feature) {
-  if (goog.isNull(this.fillColor_)) {
-    return;
-  }
-  var coordinates = polygonGeometry.getCoordinates();
-  this.startIndices_.push(this.indices_.length);
-  this.startIndicesFeature_.push(feature);
-  this.drawCoordinates_(coordinates);
-
-  if (!goog.isNull(this.lineStringReplay_.state_.strokeColor)) {
-    var linearRings = polygonGeometry.getLinearRings();
-    var i, ii;
-    for (i = 0, ii = linearRings.length; i < ii; i++) {
-      //FIXME: Substitute zeros with appropriate values when implementing.
-      this.lineStringReplay_.drawCoordinates_(linearRings[i].getFlatCoordinates(), 0, 0, 0);
+  var linearRings = polygonGeometry.getLinearRings();
+  var stride = polygonGeometry.getStride();
+  if (linearRings.length > 0) {
+    this.startIndices_.push(this.indices_.length);
+    this.startIndicesFeature_.push(feature);
+    if (this.state_.changed) {
+      this.styleIndices_.push(this.indices_.length);
+      this.state_.changed = false;
    }
+
+    this.lineStringReplay_.startIndices_.push(this.lineStringReplay_.indices_.length);
+    this.lineStringReplay_.startIndicesFeature_.push(feature);
+    if (this.lineStringReplay_.state_.changed) {
+      this.lineStringReplay_.styleIndices_.push(this.lineStringReplay_.indices_.length);
+      this.lineStringReplay_.state_.changed = false;
+    }
+
+    var flatCoordinates = linearRings[0].getFlatCoordinates();
+    this.lineStringReplay_.drawCoordinates_(flatCoordinates, 0, flatCoordinates.length, stride);
+    var holeIndices = [];
+    var i, ii, holeFlatCoords;
+    for (i = 1, ii = linearRings.length; i < ii; ++i) {
+      holeIndices.push(flatCoordinates.length / 2);
+      holeFlatCoords = linearRings[i].getFlatCoordinates();
+      ol.array.extend(flatCoordinates, holeFlatCoords);
+      this.lineStringReplay_.drawCoordinates_(holeFlatCoords, 0, holeFlatCoords.length, stride);
+    }
+    holeIndices = holeIndices.length === 0 ? null : holeIndices;
+    this.drawCoordinates_(flatCoordinates, holeIndices, stride);
  }
 };

@@ -1848,41 +1854,14 @@ ol.render.webgl.PolygonReplay.prototype.getDeleteResourcesFunction = function(co


 /**
+ * @private
+ * @param {WebGLRenderingContext} gl gl.
 * @param {ol.webgl.Context} context Context.
- * @param {ol.Coordinate} center Center.
- * @param {number} resolution Resolution.
- * @param {number} rotation Rotation.
 * @param {ol.Size} size Size.
 * @param {number} pixelRatio Pixel ratio.
- * @param {number} opacity Global opacity.
- * @param {number} brightness Global brightness.
- * @param {number} contrast Global contrast.
- * @param {number} hue Global hue.
- * @param {number} saturation Global saturation.
- * @param {Object} skippedFeaturesHash Ids of features to skip.
- * @param {function((ol.Feature|ol.render.Feature)): T|undefined} featureCallback Feature callback.
- * @param {boolean} oneByOne Draw features one-by-one for the hit-detecion.
- * @param {ol.Extent=} opt_hitExtent Hit extent: Only features intersecting
- *  this extent are checked.
- * @return {T|undefined} Callback result.
- * @template T
+ * @return {ol.render.webgl.polygonreplay.shader.Default.Locations} Locations.
 */
-/*ol.render.webgl.PolygonReplay.prototype.replay = function(context,
-    center, resolution, rotation, size, pixelRatio,
-    opacity, brightness, contrast, hue, saturation, skippedFeaturesHash,
-    featureCallback, oneByOne, opt_hitExtent) {
-  var gl = context.getGL();
-
-  // bind the vertices buffer
-  goog.asserts.assert(!goog.isNull(this.verticesBuffer_),
-      'verticesBuffer must not be null');
-  context.bindBuffer(ol.webgl.ARRAY_BUFFER, this.verticesBuffer_);
-
-  // bind the indices buffer
-  goog.asserts.assert(!goog.isNull(this.indicesBuffer_),
-      'indicesBuffer must not be null');
-  context.bindBuffer(ol.webgl.ELEMENT_ARRAY_BUFFER, this.indicesBuffer_);
-
+ol.render.webgl.PolygonReplay.prototype.setUpProgram_ = function(gl, context, size, pixelRatio) {
  // get the program
  var fragmentShader, vertexShader;
  fragmentShader =
@@ -1893,7 +1872,7 @@ ol.render.webgl.PolygonReplay.prototype.getDeleteResourcesFunction = function(co

  // get the locations
  var locations;
-  if (goog.isNull(this.defaultLocations_)) {
+  if (!this.defaultLocations_) {
    locations = new ol.render.webgl.polygonreplay.shader.Default
      .Locations(gl, program);
    this.defaultLocations_ = locations;
@@ -1906,43 +1885,10 @@ ol.render.webgl.PolygonReplay.prototype.getDeleteResourcesFunction = function(co
  // enable the vertex attrib arrays
  gl.enableVertexAttribArray(locations.a_position);
  gl.vertexAttribPointer(locations.a_position, 2, ol.webgl.FLOAT,
-      false, 24, 0);
+      false, 8, 0);

-  gl.enableVertexAttribArray(locations.a_color);
-  gl.vertexAttribPointer(locations.a_color, 4, ol.webgl.FLOAT,
-      false, 24, 8);
-
-  // set the "uniform" values
-  // TODO: use RTE to avoid jitter
-  var projectionMatrix = this.projectionMatrix_;
-  ol.vec.Mat4.makeTransform2D(projectionMatrix,
-      0.0, 0.0,
-      pixelRatio * 2 / (resolution * size[0]),
-      pixelRatio * 2 / (resolution * size[1]),
-      -rotation,
-      -center[0], -center[1]);
-
-  gl.uniformMatrix4fv(locations.u_projectionMatrix, false, projectionMatrix);
-
-  // draw!
-  var result;
-  if (!goog.isDef(featureCallback)) {
-    this.drawReplay_(gl, context, skippedFeaturesHash);
-  } else {
-    // TODO: draw feature by feature for the hit-detection
-  }
-
-  // disable the vertex attrib arrays
-  gl.disableVertexAttribArray(locations.a_position);
-  gl.disableVertexAttribArray(locations.a_color);
-
-  this.lineStringReplay_.replay(context,
-      center, resolution, rotation, size, pixelRatio,
-      opacity, skippedFeaturesHash,
-      featureCallback, oneByOne, opt_hitExtent);
-  // FIXME get result
-  return result;
-};*/
+  return locations;
+};


 /**
@@ -1952,44 +1898,58 @@ ol.render.webgl.PolygonReplay.prototype.getDeleteResourcesFunction = function(co
 * @param {Object} skippedFeaturesHash Ids of features to skip.
 */
 ol.render.webgl.PolygonReplay.prototype.drawReplay_ = function(gl, context, skippedFeaturesHash) {
-  var elementType = context.hasOESElementIndexUint ?
-      ol.webgl.UNSIGNED_INT : ol.webgl.UNSIGNED_SHORT;
-  //  var elementSize = context.hasOESElementIndexUint ? 4 : 2;

  if (!ol.object.isEmpty(skippedFeaturesHash)) {
    // TODO: draw by blocks to skip features
  } else {
-    var numItems = this.indices_.length;
-    gl.drawElements(ol.webgl.TRIANGLES, numItems, elementType, 0);
+    goog.asserts.assert(this.styles_.length === this.styleIndices_.length,
+        'number of styles and styleIndices match');
+
+    //Draw by style groups to minimize drawElements() calls.
+    var i, start, end, nextStyle;
+    end = this.startIndices_[this.startIndices_.length - 1];
+    for (i = this.styleIndices_.length - 1; i >= 0; --i) {
+      start = this.styleIndices_[i];
+      nextStyle = this.styles_[i];
+      this.setFillStyle_(gl, nextStyle);
+      this.drawElements_(gl, context, start, end);
+      end = start;
+    }
  }
 };


+/**
+ * @private
+ * @param {WebGLRenderingContext} gl gl.
+ * @param {Array.<number>} color Color.
+ */
+ol.render.webgl.PolygonReplay.prototype.setFillStyle_ = function(gl, color) {
+  gl.uniform4fv(this.defaultLocations_.u_color, color);
+};
+
+
 /**
 * @inheritDoc
 */

 ol.render.webgl.PolygonReplay.prototype.setFillStrokeStyle = function(fillStyle, strokeStyle) {
-  // TODO implement
-  if (fillStyle) {
-    var fillStyleColor = fillStyle.getColor();
-    this.fillColor_ = !goog.isNull(fillStyleColor) && Array.isArray(fillStyleColor) ?
-        ol.color.asArray(fillStyleColor).map(function(c, i) {
-          return i != 3 ? c / 255.0 : c;
-        }) : ol.render.webgl.defaultFillStyle;
+  goog.asserts.assert(this.state_, 'this.state_ should not be null');
+  goog.asserts.assert(fillStyle, 'fillStyle should not be null');
+  var fillStyleColor = ol.color.asArray(fillStyle.getColor());
+  if (Array.isArray(fillStyleColor)) {
+    fillStyleColor = fillStyleColor.map(function(c, i) {
+      return i != 3 ? c / 255 : c;
+    }) || ol.render.webgl.defaultFillStyle;
  } else {
-    this.fillColor_ = undefined;
+    fillStyleColor = ol.render.webgl.defaultFillStyle;
  }
-  if (strokeStyle) {
-    var strokeStyleColor = strokeStyle.getColor();
-    this.strokeColor_ = !goog.isNull(strokeStyleColor) ?
-        ol.color.asArray(strokeStyleColor).map(function(c, i) {
-          return i != 3 ? c / 255 : c;
-        }) : ol.render.webgl.defaultStrokeStyle;
-  } else {
-    this.strokeColor_ = undefined;
+  if (!this.state_.fillColor || !ol.array.equals(fillStyleColor, this.state_.fillColor)) {
+    this.state_.fillColor = fillStyleColor;
+    this.state_.changed = true;
+    this.styles_.push(fillStyleColor);
  }
-  this.lineStringReplay_.setFillStrokeStyle(fillStyle, strokeStyle);
+  this.lineStringReplay_.setFillStrokeStyle(null, strokeStyle);
 };


@@ -2255,8 +2215,8 @@ ol.render.webgl.ReplayGroup.prototype.hasFeatureAtCoordinate = function(
 */
 ol.render.webgl.BATCH_CONSTRUCTORS_ = {
  'Image': ol.render.webgl.ImageReplay,
-  'LineString': ol.render.webgl.LineStringReplay//,
-  //'Polygon': ol.render.webgl.PolygonReplay
+  'LineString': ol.render.webgl.LineStringReplay,
+  'Polygon': ol.render.webgl.PolygonReplay
 };


--- a/src/ol/render/webgl/webglpolygondefault.glsl
+++ b/src/ol/render/webgl/webglpolygondefault.glsl
@@ -3,32 +3,29 @@


 //! COMMON
-varying vec4 v_color;


 //! VERTEX
 attribute vec2 a_position;
-attribute vec4 a_color;

 uniform mat4 u_projectionMatrix;
 uniform mat4 u_offsetScaleMatrix;
 uniform mat4 u_offsetRotateMatrix;

 void main(void) {
-  v_color = a_color;
-  mat4 offsetMatrix = u_offsetScaleMatrix;
-  vec4 offsets = offsetMatrix * vec4(0., 0., 0., 0.);
+  vec4 offsets = u_offsetScaleMatrix * vec4(0., 0., 0., 0.);
  gl_Position = u_projectionMatrix * vec4(a_position, 0., 1.) + offsets;
 }


 //! FRAGMENT

+uniform vec4 u_color;
 uniform float u_opacity;

 void main(void) {
-  gl_FragColor = v_color;
-  float alpha = v_color.a * u_opacity;
+  gl_FragColor = u_color;
+  float alpha = u_color.a * u_opacity;
  if (alpha == 0.0) {
    discard;
  }
--- a/src/ol/render/webgl/webglpolygondefaultshader.js
+++ b/src/ol/render/webgl/webglpolygondefaultshader.js
@@ -23,14 +23,14 @@ goog.addSingletonGetter(ol.render.webgl.polygonreplay.shader.DefaultFragment);
 * @const
 * @type {string}
 */
-ol.render.webgl.polygonreplay.shader.DefaultFragment.DEBUG_SOURCE = 'precision mediump float;\nvarying vec4 v_color;\n\n\n\nuniform float u_opacity;\n\nvoid main(void) {\n  gl_FragColor = v_color;\n  float alpha = v_color.a * u_opacity;\n  if (alpha == 0.0) {\n    discard;\n  }\n  gl_FragColor.a = alpha;\n}\n';
+ol.render.webgl.polygonreplay.shader.DefaultFragment.DEBUG_SOURCE = 'precision mediump float;\n\n\n\nuniform vec4 u_color;\nuniform float u_opacity;\n\nvoid main(void) {\n  gl_FragColor = u_color;\n  float alpha = u_color.a * u_opacity;\n  if (alpha == 0.0) {\n    discard;\n  }\n  gl_FragColor.a = alpha;\n}\n';


 /**
 * @const
 * @type {string}
 */
-ol.render.webgl.polygonreplay.shader.DefaultFragment.OPTIMIZED_SOURCE = 'precision mediump float;varying vec4 a;uniform float g;void main(void){gl_FragColor=a;float alpha=a.a*g;if(alpha==0.0){discard;}gl_FragColor.a=alpha;}';
+ol.render.webgl.polygonreplay.shader.DefaultFragment.OPTIMIZED_SOURCE = 'precision mediump float;uniform vec4 e;uniform float f;void main(void){gl_FragColor=e;float alpha=e.a*f;if(alpha==0.0){discard;}gl_FragColor.a=alpha;}';


 /**
@@ -58,14 +58,14 @@ goog.addSingletonGetter(ol.render.webgl.polygonreplay.shader.DefaultVertex);
 * @const
 * @type {string}
 */
-ol.render.webgl.polygonreplay.shader.DefaultVertex.DEBUG_SOURCE = 'varying vec4 v_color;\n\n\nattribute vec2 a_position;\nattribute vec4 a_color;\n\nuniform mat4 u_projectionMatrix;\nuniform mat4 u_offsetScaleMatrix;\nuniform mat4 u_offsetRotateMatrix;\n\nvoid main(void) {\n  v_color = a_color;\n  mat4 offsetMatrix = u_offsetScaleMatrix;\n  vec4 offsets = offsetMatrix * vec4(0., 0., 0., 0.);\n  gl_Position = u_projectionMatrix * vec4(a_position, 0., 1.) + offsets;\n}\n\n\n';
+ol.render.webgl.polygonreplay.shader.DefaultVertex.DEBUG_SOURCE = '\n\nattribute vec2 a_position;\n\nuniform mat4 u_projectionMatrix;\nuniform mat4 u_offsetScaleMatrix;\nuniform mat4 u_offsetRotateMatrix;\n\nvoid main(void) {\n  vec4 offsets = u_offsetScaleMatrix * vec4(0., 0., 0., 0.);\n  gl_Position = u_projectionMatrix * vec4(a_position, 0., 1.) + offsets;\n}\n\n\n';


 /**
 * @const
 * @type {string}
 */
-ol.render.webgl.polygonreplay.shader.DefaultVertex.OPTIMIZED_SOURCE = 'varying vec4 a;attribute vec2 b;attribute vec4 c;uniform mat4 d;uniform mat4 e;uniform mat4 f;void main(void){a=c;mat4 offsetMatrix=e;vec4 offsets=offsetMatrix*vec4(0.,0.,0.,0.);gl_Position=d*vec4(b,0.,1.)+offsets;}';
+ol.render.webgl.polygonreplay.shader.DefaultVertex.OPTIMIZED_SOURCE = 'attribute vec2 a;uniform mat4 b;uniform mat4 c;uniform mat4 d;void main(void){vec4 offsets=c*vec4(0.,0.,0.,0.);gl_Position=b*vec4(a,0.,1.)+offsets;}';


 /**
@@ -85,39 +85,39 @@ ol.render.webgl.polygonreplay.shader.DefaultVertex.SOURCE = goog.DEBUG ?
 */
 ol.render.webgl.polygonreplay.shader.Default.Locations = function(gl, program) {

+  /**
+   * @type {WebGLUniformLocation}
+   */
+  this.u_color = gl.getUniformLocation(
+      program, goog.DEBUG ? 'u_color' : 'e');
+
  /**
   * @type {WebGLUniformLocation}
   */
  this.u_offsetRotateMatrix = gl.getUniformLocation(
-      program, goog.DEBUG ? 'u_offsetRotateMatrix' : 'f');
+      program, goog.DEBUG ? 'u_offsetRotateMatrix' : 'd');

  /**
   * @type {WebGLUniformLocation}
   */
  this.u_offsetScaleMatrix = gl.getUniformLocation(
-      program, goog.DEBUG ? 'u_offsetScaleMatrix' : 'e');
+      program, goog.DEBUG ? 'u_offsetScaleMatrix' : 'c');

  /**
   * @type {WebGLUniformLocation}
   */
  this.u_opacity = gl.getUniformLocation(
-      program, goog.DEBUG ? 'u_opacity' : 'g');
+      program, goog.DEBUG ? 'u_opacity' : 'f');

  /**
   * @type {WebGLUniformLocation}
   */
  this.u_projectionMatrix = gl.getUniformLocation(
-      program, goog.DEBUG ? 'u_projectionMatrix' : 'd');
-
-  /**
-   * @type {number}
-   */
-  this.a_color = gl.getAttribLocation(
-      program, goog.DEBUG ? 'a_color' : 'c');
+      program, goog.DEBUG ? 'u_projectionMatrix' : 'b');

  /**
   * @type {number}
   */
  this.a_position = gl.getAttribLocation(
-      program, goog.DEBUG ? 'a_position' : 'b');
+      program, goog.DEBUG ? 'a_position' : 'a');
 };