Merge pull request #10 from elemoine/icon-sprite

[webgl-point] Make WebGL image replay support icon sprites
2014-10-31 14:52:24 +01:00
parent bbea205a9c f332cdacf1
commit ed1be0d4e7
4 changed files with 247 additions and 52 deletions
--- a/examples/data/Butterfly.png
+++ b/examples/data/Butterfly.png
--- a/examples/icon-sprite-webgl.html
+++ b/examples/icon-sprite-webgl.html
@@ -0,0 +1,52 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
+    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
+    <title>Icon sprites with WebGL example</title>
+  </head>
+  <body>
+
+    <div class="navbar navbar-inverse navbar-fixed-top">
+      <div class="navbar-inner">
+        <div class="container">
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
+        </div>
+      </div>
+    </div>
+
+    <div class="container-fluid">
+
+      <div class="row-fluid">
+        <div class="span12">
+          <div id="map" class="map"></div>
+        </div>
+      </div>
+
+      <div class="row-fluid">
+
+        <div class="span12">
+          <h4 id="title">Icon sprite with WebGL example</h4>
+          <p id="shortdesc">Icon sprite with WebGL.</p>
+          <div id="docs">
+            <p>See the <a href="icon-sprite-webgl.js" target="_blank">icon-sprite-webgl.js source</a> to see how this is done.</p>
+          </div>
+          <div id="tags">webgl, icon, sprite, vector, point</div>
+        </div>
+
+      </div>
+
+    </div>
+
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
+    <script src="loader.js?id=icon-sprite-webgl" type="text/javascript"></script>
+
+  </body>
+</html>
--- a/examples/icon-sprite-webgl.js
+++ b/examples/icon-sprite-webgl.js
@@ -0,0 +1,60 @@
+goog.require('ol.Feature');
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.geom.Point');
+goog.require('ol.layer.Vector');
+goog.require('ol.source.Vector');
+goog.require('ol.style.Icon');
+goog.require('ol.style.Style');
+
+
+var iconInfo = [
+  {size: [55, 55], offset: [0, 0]},
+  {size: [55, 55], offset: [110, 86]},
+  {size: [55, 86], offset: [55, 0]}
+];
+
+var i;
+
+var iconCount = iconInfo.length;
+var icons = new Array(iconCount);
+for (i = 0; i < iconCount; ++i) {
+  icons[i] = new ol.style.Icon({
+    src: 'data/Butterfly.png',
+    size: iconInfo[i].size,
+    offset: iconInfo[i].offset
+  });
+}
+
+var featureCount = 10000;
+var features = new Array(featureCount);
+var feature, geometry;
+var e = 25000000;
+for (i = 0; i < featureCount; ++i) {
+  geometry = new ol.geom.Point(
+      [2 * e * Math.random() - e, 2 * e * Math.random() - e]);
+  feature = new ol.Feature(geometry);
+  feature.setStyle(
+      new ol.style.Style({
+        image: icons[i % iconCount]
+      })
+  );
+  features[i] = feature;
+}
+
+var vectorSource = new ol.source.Vector({
+  features: features
+});
+var vector = new ol.layer.Vector({
+  source: vectorSource
+});
+
+var map = new ol.Map({
+  renderer: 'webgl',
+  layers: [vector],
+  target: document.getElementById('map'),
+  view: new ol.View({
+    center: [0, 0],
+    zoom: 5
+  })
+});
--- a/src/ol/render/webgl/webglreplay.js
+++ b/src/ol/render/webgl/webglreplay.js
@@ -41,18 +41,18 @@ ol.render.webgl.Replay = function(tolerance) {
   */
  this.indicesBuffer = null;

-  /**
-   * @protected
-   * @type {WebGLTexture}
-   */
-  this.texture = null;
-
  /**
   * @private
   * @type {ol.Extent}
   */
  this.extent_ = ol.extent.createEmpty();

+  /**
+   * @protected
+   * @type {Array.<Array.<*>>}
+   */
+  this.textures = [];
+
 };


@@ -96,15 +96,23 @@ ol.render.webgl.Replay.prototype.replay = function(context,
  gl.vertexAttribPointer(texCoordAttribLocation, 2, goog.webgl.FLOAT,
      false, 24, 16);

-  gl.bindTexture(goog.webgl.TEXTURE_2D, this.texture);

  gl.uniformMatrix4fv(projectionMatrixLocation, false, transform);
  gl.uniformMatrix2fv(sizeMatrixLocation, false,
      new Float32Array([1 / size[0], 0.0, 0.0, 1 / size[1]]));

  gl.bindBuffer(goog.webgl.ELEMENT_ARRAY_BUFFER, this.indicesBuffer);
-  gl.drawElements(goog.webgl.TRIANGLES, this.indices.length,
-      goog.webgl.UNSIGNED_SHORT, 0);
+
+  var i;
+  var ii = this.textures.length;
+  var texture;
+  for (i = 0; i < ii; ++i) {
+    texture = this.textures[i];
+    gl.bindTexture(goog.webgl.TEXTURE_2D,
+        /** @type {WebGLTexture} */ (texture[0]));
+    gl.drawElements(goog.webgl.TRIANGLES, /** @type {number} */ (texture[1]),
+        goog.webgl.UNSIGNED_SHORT, 0);
+  }
 };


@@ -215,9 +223,33 @@ ol.render.webgl.ImageReplay = function(tolerance) {

  /**
   * @private
-   * @type {HTMLCanvasElement|HTMLVideoElement|Image}
+   * @type {Array.<Array.<*>>}
   */
-  this.image_ = null;
+  this.images_ = [];
+
+  /**
+   * @private
+   * @type {number|undefined}
+   */
+  this.imageHeight_ = undefined;
+
+  /**
+   * @private
+   * @type {number|undefined}
+   */
+  this.imageWidth_ = undefined;
+
+  /**
+   * @private
+   * @type {number|undefined}
+   */
+  this.originX_ = undefined;
+
+  /**
+   * @private
+   * @type {number|undefined}
+   */
+  this.originY_ = undefined;

  /**
   * @private
@@ -239,13 +271,21 @@ goog.inherits(ol.render.webgl.ImageReplay, ol.render.webgl.Replay);
 */
 ol.render.webgl.ImageReplay.prototype.drawCoordinates_ =
    function(flatCoordinates, offset, end, stride) {
-  goog.asserts.assert(goog.isDef(this.width_));
  goog.asserts.assert(goog.isDef(this.height_));
+  goog.asserts.assert(goog.isDef(this.imageHeight_));
+  goog.asserts.assert(goog.isDef(this.imageWidth_));
+  goog.asserts.assert(goog.isDef(this.originX_));
+  goog.asserts.assert(goog.isDef(this.originY_));
+  goog.asserts.assert(goog.isDef(this.width_));
+  var height = this.height_;
+  var imageHeight = this.imageHeight_;
+  var imageWidth = this.imageWidth_;
+  var originX = this.originX_;
+  var originY = this.originY_;
+  var width = this.width_;
  var numIndices = this.indices.length;
  var numVertices = this.vertices.length;
  var i, x, y, n;
-  var ox = this.width_;
-  var oy = this.height_;
  for (i = offset; i < end; i += stride) {
    x = flatCoordinates[i];
    y = flatCoordinates[i + 1];
@@ -256,31 +296,31 @@ ol.render.webgl.ImageReplay.prototype.drawCoordinates_ =

    this.vertices[numVertices++] = x;
    this.vertices[numVertices++] = y;
-    this.vertices[numVertices++] = -ox;
-    this.vertices[numVertices++] = -oy;
-    this.vertices[numVertices++] = 1;
-    this.vertices[numVertices++] = 1;
+    this.vertices[numVertices++] = -width;
+    this.vertices[numVertices++] = -height;
+    this.vertices[numVertices++] = (originX + width) / imageWidth;
+    this.vertices[numVertices++] = (originY + height) / imageHeight;

    this.vertices[numVertices++] = x;
    this.vertices[numVertices++] = y;
-    this.vertices[numVertices++] = ox;
-    this.vertices[numVertices++] = -oy;
-    this.vertices[numVertices++] = 0;
-    this.vertices[numVertices++] = 1;
+    this.vertices[numVertices++] = width;
+    this.vertices[numVertices++] = -height;
+    this.vertices[numVertices++] = originX / imageWidth;
+    this.vertices[numVertices++] = (originY + height) / imageHeight;

    this.vertices[numVertices++] = x;
    this.vertices[numVertices++] = y;
-    this.vertices[numVertices++] = ox;
-    this.vertices[numVertices++] = oy;
-    this.vertices[numVertices++] = 0;
-    this.vertices[numVertices++] = 0;
+    this.vertices[numVertices++] = width;
+    this.vertices[numVertices++] = height;
+    this.vertices[numVertices++] = originX / imageWidth;
+    this.vertices[numVertices++] = originY / imageHeight;

    this.vertices[numVertices++] = x;
    this.vertices[numVertices++] = y;
-    this.vertices[numVertices++] = -ox;
-    this.vertices[numVertices++] = oy;
-    this.vertices[numVertices++] = 1;
-    this.vertices[numVertices++] = 0;
+    this.vertices[numVertices++] = -width;
+    this.vertices[numVertices++] = height;
+    this.vertices[numVertices++] = (originX + width) / imageWidth;
+    this.vertices[numVertices++] = originY / imageHeight;

    this.indices[numIndices++] = n;
    this.indices[numIndices++] = n + 1;
@@ -325,6 +365,12 @@ ol.render.webgl.ImageReplay.prototype.drawMultiPointGeometry =
 */
 ol.render.webgl.ImageReplay.prototype.finish = function(context) {
  var gl = context.getGL();
+
+  goog.asserts.assert(this.images_.length > 0);
+  var current = this.images_[this.images_.length - 1];
+  goog.asserts.assert(!goog.isDef(current[1]));
+  current[1] = this.indices.length;
+
  this.verticesBuffer = gl.createBuffer();
  gl.bindBuffer(goog.webgl.ARRAY_BUFFER, this.verticesBuffer);
  gl.bufferData(goog.webgl.ARRAY_BUFFER,
@@ -334,22 +380,38 @@ ol.render.webgl.ImageReplay.prototype.finish = function(context) {
  gl.bufferData(goog.webgl.ELEMENT_ARRAY_BUFFER,
      new Uint16Array(this.indices), goog.webgl.STATIC_DRAW);

-  this.texture = gl.createTexture();
-  gl.bindTexture(goog.webgl.TEXTURE_2D, this.texture);
-  gl.texParameteri(goog.webgl.TEXTURE_2D,
-      goog.webgl.TEXTURE_WRAP_S, goog.webgl.CLAMP_TO_EDGE);
-  gl.texParameteri(goog.webgl.TEXTURE_2D,
-      goog.webgl.TEXTURE_WRAP_T, goog.webgl.CLAMP_TO_EDGE);
-  gl.texParameteri(goog.webgl.TEXTURE_2D,
-      goog.webgl.TEXTURE_MIN_FILTER, goog.webgl.NEAREST);
-  gl.texParameteri(goog.webgl.TEXTURE_2D,
-      goog.webgl.TEXTURE_MAG_FILTER, goog.webgl.NEAREST);
-  gl.texImage2D(goog.webgl.TEXTURE_2D, 0, goog.webgl.RGBA, goog.webgl.RGBA,
-      goog.webgl.UNSIGNED_BYTE, this.image_);
+  goog.asserts.assert(this.textures.length === 0);
+
+  var i;
+  var ii = this.images_.length;
+  var texture;
+  for (i = 0; i < ii; ++i) {
+    var image =
+        /** @type {HTMLCanvasElement|HTMLImageElement|HTMLVideoElement} */
+        (this.images_[i][0]);
+    current = this.images_[i];
+    texture = gl.createTexture();
+    gl.bindTexture(goog.webgl.TEXTURE_2D, texture);
+    gl.texParameteri(goog.webgl.TEXTURE_2D,
+        goog.webgl.TEXTURE_WRAP_S, goog.webgl.CLAMP_TO_EDGE);
+    gl.texParameteri(goog.webgl.TEXTURE_2D,
+        goog.webgl.TEXTURE_WRAP_T, goog.webgl.CLAMP_TO_EDGE);
+    gl.texParameteri(goog.webgl.TEXTURE_2D,
+        goog.webgl.TEXTURE_MIN_FILTER, goog.webgl.NEAREST);
+    gl.texParameteri(goog.webgl.TEXTURE_2D,
+        goog.webgl.TEXTURE_MAG_FILTER, goog.webgl.NEAREST);
+    gl.texImage2D(goog.webgl.TEXTURE_2D, 0, goog.webgl.RGBA, goog.webgl.RGBA,
+        goog.webgl.UNSIGNED_BYTE, image);
+    this.textures[i] = [texture, this.images_[i][1]];
+  }

-  this.image_ = null;
-  this.width_ = undefined;
  this.height_ = undefined;
+  this.images_.length = 0;
+  this.imageHeight_ = undefined;
+  this.imageWidth_ = undefined;
+  this.originX_ = undefined;
+  this.originY_ = undefined;
+  this.width_ = undefined;
 };


@@ -365,15 +427,36 @@ ol.render.webgl.Replay.prototype.getExtent = function() {
 * @inheritDoc
 */
 ol.render.webgl.ImageReplay.prototype.setImageStyle = function(imageStyle) {
-  if (goog.isNull(this.image_)) {
-    var image = imageStyle.getImage(1);
-    goog.asserts.assert(!goog.isNull(image));
-    var size = imageStyle.getSize();
-    goog.asserts.assert(!goog.isNull(size));
-    this.image_ = image;
-    this.width_ = size[0];
-    this.height_ = size[1];
+  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 origin = imageStyle.getOrigin();
+  goog.asserts.assert(!goog.isNull(origin));
+  var size = imageStyle.getSize();
+  goog.asserts.assert(!goog.isNull(size));
+
+  if (this.images_.length === 0) {
+    this.images_.push([image, undefined]);
+  } else {
+    var current = this.images_[this.images_.length - 1];
+    var currentImage =
+        /** @type {HTMLCanvasElement|HTMLImageElement|HTMLVideoElement} */
+        (current[0]);
+    goog.asserts.assert(!goog.isDef(current[1]));
+    if (goog.getUid(currentImage) != goog.getUid(image)) {
+      current[1] = this.indices.length;
+      this.images_.push([image, undefined]);
+    }
  }
+
+  this.height_ = size[1];
+  this.imageHeight_ = imageSize[1];
+  this.imageWidth_ = imageSize[0];
+  this.originX_ = origin[0];
+  this.originY_ = origin[1];
+  this.width_ = size[0];
 };