Merge pull request #18 from elemoine/webgl-point-misc

[webgl-point] Misc changes

examples/icon-sprite-webgl.js

@@ -9,9 +9,9 @@ goog.require('ol.style.Style');
 
 
 var iconInfo = [
-  {size: [55, 55], offset: [0, 0], opacity: 1.0},
+  {size: [55, 55], offset: [0, 0], opacity: 1.0, scale: 1.0},
-  {size: [55, 55], offset: [110, 86], opacity: 0.75},
+  {size: [55, 55], offset: [110, 86], opacity: 0.75, scale: 1.25},
-  {size: [55, 86], offset: [55, 0], opacity: 0.5}
+  {size: [55, 86], offset: [55, 0], opacity: 0.5, scale: 1.5}
 ];
 
 var i;
@@ -19,11 +19,13 @@ var i;
 var iconCount = iconInfo.length;
 var icons = new Array(iconCount);
 for (i = 0; i < iconCount; ++i) {
+  var info = iconInfo[i];
   icons[i] = new ol.style.Icon({
     src: 'data/Butterfly.png',
-    size: iconInfo[i].size,
+    size: info.size,
-    offset: iconInfo[i].offset,
+    offset: info.offset,
-    opacity: iconInfo[i].opacity
+    opacity: info.opacity,
+    scale: info.scale
   });
 }
 

src/ol/render/webgl/webglreplay.js

@@ -34,10 +34,14 @@ ol.render.webgl.ImageReplay = function(tolerance, maxExtent) {
   this.anchorY_ = undefined;
 
   /**
+   * The origin of the coordinate system for the point coordinates sent to
+   * the GPU. To eliminate jitter caused by precision problems in the GPU
+   * we use the "Rendering Relative to Eye" technique described in the "3D
+   * Engine Design for Virtual Globes" book.
    * @private
    * @type {ol.Coordinate}
    */
-  this.origin_ = ol.extent.getBottomLeft(maxExtent);
+  this.origin_ = ol.extent.getCenter(maxExtent);
 
   /**
    * @type {ol.Extent}
@@ -124,6 +128,12 @@ ol.render.webgl.ImageReplay = function(tolerance, maxExtent) {
    */
   this.projectionMatrix_ = goog.vec.Mat4.createNumberIdentity();
 
+  /**
+   * @private
+   * @type {number|undefined}
+   */
+  this.scale_ = undefined;
+
   /**
    * @type {Array.<WebGLTexture>}
    * @private
@@ -206,6 +216,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.scale_));
   goog.asserts.assert(goog.isDef(this.width_));
   var anchorX = this.anchorX_;
   var anchorY = this.anchorY_;
@@ -215,6 +226,7 @@ ol.render.webgl.ImageReplay.prototype.drawCoordinates_ =
   var opacity = this.opacity_;
   var originX = this.originX_;
   var originY = this.originY_;
+  var scale = this.scale_;
   var width = this.width_;
   var numIndices = this.indices_.length;
   var numVertices = this.vertices_.length;
@@ -229,32 +241,32 @@ ol.render.webgl.ImageReplay.prototype.drawCoordinates_ =
 
     this.vertices_[numVertices++] = x;
     this.vertices_[numVertices++] = y;
-    this.vertices_[numVertices++] = -2 * anchorX;
+    this.vertices_[numVertices++] = -2 * scale * anchorX;
-    this.vertices_[numVertices++] = -2 * (height - anchorY);
+    this.vertices_[numVertices++] = -2 * scale * (height - anchorY);
     this.vertices_[numVertices++] = (originX + width) / imageWidth;
     this.vertices_[numVertices++] = (originY + height) / imageHeight;
     this.vertices_[numVertices++] = opacity;
 
     this.vertices_[numVertices++] = x;
     this.vertices_[numVertices++] = y;
-    this.vertices_[numVertices++] = 2 * (width - anchorX);
+    this.vertices_[numVertices++] = 2 * scale * (width - anchorX);
-    this.vertices_[numVertices++] = -2 * (height - anchorY);
+    this.vertices_[numVertices++] = -2 * scale * (height - anchorY);
     this.vertices_[numVertices++] = originX / imageWidth;
     this.vertices_[numVertices++] = (originY + height) / imageHeight;
     this.vertices_[numVertices++] = opacity;
 
     this.vertices_[numVertices++] = x;
     this.vertices_[numVertices++] = y;
-    this.vertices_[numVertices++] = 2 * (width - anchorX);
+    this.vertices_[numVertices++] = 2 * scale * (width - anchorX);
-    this.vertices_[numVertices++] = 2 * anchorY;
+    this.vertices_[numVertices++] = 2 * scale * anchorY;
     this.vertices_[numVertices++] = originX / imageWidth;
     this.vertices_[numVertices++] = originY / imageHeight;
     this.vertices_[numVertices++] = opacity;
 
     this.vertices_[numVertices++] = x;
     this.vertices_[numVertices++] = y;
-    this.vertices_[numVertices++] = -2 * anchorX;
+    this.vertices_[numVertices++] = -2 * scale * anchorX;
-    this.vertices_[numVertices++] = 2 * anchorY;
+    this.vertices_[numVertices++] = 2 * scale * anchorY;
     this.vertices_[numVertices++] = (originX + width) / imageWidth;
     this.vertices_[numVertices++] = originY / imageHeight;
     this.vertices_[numVertices++] = opacity;
@@ -401,6 +413,7 @@ ol.render.webgl.ImageReplay.prototype.finish = function(context) {
   this.opacity_ = undefined;
   this.originX_ = undefined;
   this.originY_ = undefined;
+  this.scale_ = undefined;
   this.vertices_ = null;
   this.width_ = undefined;
 };
@@ -502,7 +515,6 @@ ol.render.webgl.ImageReplay.prototype.setImageStyle = function(imageStyle) {
   goog.asserts.assert(!goog.isNull(anchor));
   var image = imageStyle.getImage(1);
   goog.asserts.assert(!goog.isNull(image));
-  // FIXME getImageSize does not exist for circles
   var imageSize = imageStyle.getImageSize();
   goog.asserts.assert(!goog.isNull(imageSize));
   var opacity = imageStyle.getOpacity();
@@ -511,6 +523,8 @@ ol.render.webgl.ImageReplay.prototype.setImageStyle = function(imageStyle) {
   goog.asserts.assert(!goog.isNull(origin));
   var size = imageStyle.getSize();
   goog.asserts.assert(!goog.isNull(size));
+  var scale = imageStyle.getScale();
+  goog.asserts.assert(goog.isDef(scale));
 
   if (this.images_.length === 0) {
     this.images_.push(image);
@@ -531,6 +545,7 @@ ol.render.webgl.ImageReplay.prototype.setImageStyle = function(imageStyle) {
   this.opacity_ = opacity;
   this.originX_ = origin[0];
   this.originY_ = origin[1];
+  this.scale_ = scale;
   this.width_ = size[0];
 };
 

src/ol/style/circlestyle.js

@@ -137,6 +137,14 @@ ol.style.Circle.prototype.getImageState = function() {
 };
 
 
+/**
+ * @inheritDoc
+ */
+ol.style.Circle.prototype.getImageSize = function() {
+  return this.size_;
+};
+
+
 /**
  * @inheritDoc
  * @api

src/ol/style/imagestyle.js

@@ -132,6 +132,12 @@ ol.style.Image.prototype.getImage = goog.abstractMethod;
 ol.style.Image.prototype.getImageState = goog.abstractMethod;
 
 
+/**
+ * @return {ol.Size} Image size.
+ */
+ol.style.Image.prototype.getImageSize = goog.abstractMethod;
+
+
 /**
  * @param {number} pixelRatio Pixel ratio.
  * @return {HTMLCanvasElement|HTMLVideoElement|Image} Image element.

src/ol/style/regularshapestyle.js

@@ -147,6 +147,14 @@ ol.style.RegularShape.prototype.getImage = function(pixelRatio) {
 };
 
 
+/**
+ * @inheritDoc
+ */
+ol.style.RegularShape.prototype.getImageSize = function() {
+  return this.size_;
+};
+
+
 /**
  * @inheritDoc
  */