Support image rotateWithView

src/ol/render/webgl/webglreplay.js

@@ -110,6 +110,18 @@ ol.render.webgl.ImageReplay = function(tolerance, maxExtent) {
    */
   this.opacity_ = undefined;
 
+  /**
+   * @type {!goog.vec.Mat4.Number}
+   * @private
+   */
+  this.offsetRotateMatrix_ = goog.vec.Mat4.createNumberIdentity();
+
+  /**
+   * @type {!goog.vec.Mat4.Number}
+   * @private
+   */
+  this.offsetScaleMatrix_ = goog.vec.Mat4.createNumberIdentity();
+
   /**
    * @type {number|undefined}
    * @private
@@ -128,6 +140,12 @@ ol.render.webgl.ImageReplay = function(tolerance, maxExtent) {
    */
   this.projectionMatrix_ = goog.vec.Mat4.createNumberIdentity();
 
+  /**
+   * @private
+   * @type {boolean|undefined}
+   */
+  this.rotateWithView_ = undefined;
+
   /**
    * @private
    * @type {number|undefined}
@@ -222,6 +240,7 @@ ol.render.webgl.ImageReplay.prototype.drawCoordinates_ =
   goog.asserts.assert(goog.isDef(this.opacity_));
   goog.asserts.assert(goog.isDef(this.originX_));
   goog.asserts.assert(goog.isDef(this.originY_));
+  goog.asserts.assert(goog.isDef(this.rotateWithView_));
   goog.asserts.assert(goog.isDef(this.rotation_));
   goog.asserts.assert(goog.isDef(this.scale_));
   goog.asserts.assert(goog.isDef(this.width_));
@@ -233,6 +252,7 @@ ol.render.webgl.ImageReplay.prototype.drawCoordinates_ =
   var opacity = this.opacity_;
   var originX = this.originX_;
   var originY = this.originY_;
+  var rotateWithView = this.rotateWithView_ ? 1.0 : 0.0;
   var rotation = this.rotation_;
   var scale = this.scale_;
   var width = this.width_;
@@ -245,9 +265,9 @@ ol.render.webgl.ImageReplay.prototype.drawCoordinates_ =
     x = flatCoordinates[i] - this.origin_[0];
     y = flatCoordinates[i + 1] - this.origin_[1];
 
-    n = numVertices / 7;
+    n = numVertices / 8;
 
-    // 4 vertices per coordinate, with 7 values per vertex
+    // 4 vertices per coordinate, with 8 values per vertex
 
     offsetX = -scale * anchorX;
     offsetY = -scale * (height - anchorY);
@@ -258,6 +278,7 @@ ol.render.webgl.ImageReplay.prototype.drawCoordinates_ =
     this.vertices_[numVertices++] = (originX + width) / imageWidth;
     this.vertices_[numVertices++] = (originY + height) / imageHeight;
     this.vertices_[numVertices++] = opacity;
+    this.vertices_[numVertices++] = rotateWithView;
 
     offsetX = scale * (width - anchorX);
     offsetY = -scale * (height - anchorY);
@@ -268,6 +289,7 @@ ol.render.webgl.ImageReplay.prototype.drawCoordinates_ =
     this.vertices_[numVertices++] = originX / imageWidth;
     this.vertices_[numVertices++] = (originY + height) / imageHeight;
     this.vertices_[numVertices++] = opacity;
+    this.vertices_[numVertices++] = rotateWithView;
 
     offsetX = scale * (width - anchorX);
     offsetY = scale * anchorY;
@@ -278,6 +300,7 @@ ol.render.webgl.ImageReplay.prototype.drawCoordinates_ =
     this.vertices_[numVertices++] = originX / imageWidth;
     this.vertices_[numVertices++] = originY / imageHeight;
     this.vertices_[numVertices++] = opacity;
+    this.vertices_[numVertices++] = rotateWithView;
 
     offsetX = -scale * anchorX;
     offsetY = scale * anchorY;
@@ -288,6 +311,7 @@ ol.render.webgl.ImageReplay.prototype.drawCoordinates_ =
     this.vertices_[numVertices++] = (originX + width) / imageWidth;
     this.vertices_[numVertices++] = originY / imageHeight;
     this.vertices_[numVertices++] = opacity;
+    this.vertices_[numVertices++] = rotateWithView;
 
     this.indices_[numIndices++] = n;
     this.indices_[numIndices++] = n + 1;
@@ -431,6 +455,7 @@ ol.render.webgl.ImageReplay.prototype.finish = function(context) {
   this.opacity_ = undefined;
   this.originX_ = undefined;
   this.originY_ = undefined;
+  this.rotateWithView_ = undefined;
   this.rotation_ = undefined;
   this.scale_ = undefined;
   this.vertices_ = null;
@@ -481,29 +506,43 @@ ol.render.webgl.ImageReplay.prototype.replay = function(context,
       -rotation,
       -(center[0] - this.origin_[0]), -(center[1] - this.origin_[1]));
 
+  var offsetScaleMatrix = this.offsetScaleMatrix_;
+  goog.vec.Mat4.makeScale(offsetScaleMatrix, 2 / size[0], 2 / size[1], 1);
+
+  var offsetRotateMatrix = this.offsetRotateMatrix_;
+  goog.vec.Mat4.makeIdentity(offsetRotateMatrix);
+  if (rotation !== 0) {
+    goog.vec.Mat4.rotateZ(offsetRotateMatrix, -rotation);
+  }
+
   var locations = this.locations_;
 
   gl.bindBuffer(goog.webgl.ARRAY_BUFFER, this.verticesBuffer_);
 
   gl.enableVertexAttribArray(locations.a_position);
   gl.vertexAttribPointer(locations.a_position, 2, goog.webgl.FLOAT,
-      false, 28, 0);
+      false, 32, 0);
 
   gl.enableVertexAttribArray(locations.a_offsets);
   gl.vertexAttribPointer(locations.a_offsets, 2, goog.webgl.FLOAT,
-      false, 28, 8);
+      false, 32, 8);
 
   gl.enableVertexAttribArray(locations.a_texCoord);
   gl.vertexAttribPointer(locations.a_texCoord, 2, goog.webgl.FLOAT,
-      false, 28, 16);
+      false, 32, 16);
 
   gl.enableVertexAttribArray(locations.a_opacity);
   gl.vertexAttribPointer(locations.a_opacity, 1, goog.webgl.FLOAT,
-      false, 28, 24);
+      false, 32, 24);
+
+  gl.enableVertexAttribArray(locations.a_rotateWithView);
+  gl.vertexAttribPointer(locations.a_rotateWithView, 1, goog.webgl.FLOAT,
+      false, 32, 28);
 
   gl.uniformMatrix4fv(locations.u_projectionMatrix, false, projectionMatrix);
-  gl.uniformMatrix2fv(locations.u_sizeMatrix, false,
-      new Float32Array([2 / size[0], 0.0, 0.0, 2 / size[1]]));
+  gl.uniformMatrix4fv(locations.u_offsetScaleMatrix, false, offsetScaleMatrix);
+  gl.uniformMatrix4fv(locations.u_offsetRotateMatrix, false,
+      offsetRotateMatrix);
 
   gl.bindBuffer(goog.webgl.ELEMENT_ARRAY_BUFFER, this.indicesBuffer_);
 
@@ -540,6 +579,8 @@ ol.render.webgl.ImageReplay.prototype.setImageStyle = function(imageStyle) {
   goog.asserts.assert(goog.isDef(opacity));
   var origin = imageStyle.getOrigin();
   goog.asserts.assert(!goog.isNull(origin));
+  var rotateWithView = imageStyle.getRotateWithView();
+  goog.asserts.assert(goog.isDef(rotateWithView));
   var rotation = imageStyle.getRotation();
   goog.asserts.assert(goog.isDef(rotation));
   var size = imageStyle.getSize();
@@ -567,6 +608,7 @@ ol.render.webgl.ImageReplay.prototype.setImageStyle = function(imageStyle) {
   this.originX_ = origin[0];
   this.originY_ = origin[1];
   this.rotation_ = rotation;
+  this.rotateWithView_ = rotateWithView;
   this.scale_ = scale;
   this.width_ = size[0];
 };