Merge pull request #20 from gberaudo/webgl_feature_overlay

[webgl-point] Add feature overlay support to webgl map renderer.

examples/draw-features.html

@@ -32,7 +32,7 @@
 
         <div class="span12">
           <h4 id="title">Draw features example</h4>
-          <p id="shortdesc">Example of using the ol.interaction.Draw interaction.</p>
+          <p id="shortdesc">Example of using the ol.interaction.Draw interaction. Webgl renderering is experimental and limited to points.</p>
           <form class="form-inline">
             <label>Geometry type &nbsp;</label>
               <select id="type">

examples/draw-features.js

@@ -38,6 +38,7 @@ var vector = new ol.layer.Vector({
 
 var map = new ol.Map({
   layers: [raster, vector],
+  renderer: exampleNS.getRendererFromQueryString(),
   target: 'map',
   view: new ol.View({
     center: [-11000000, 4600000],

examples/icon-sprite-webgl.js

@@ -1,4 +1,5 @@
 goog.require('ol.Feature');
+goog.require('ol.FeatureOverlay');
 goog.require('ol.Map');
 goog.require('ol.View');
 goog.require('ol.geom.Point');
@@ -29,6 +30,13 @@ var iconInfo = [{
   rotation: Math.PI / 3.0,
   scale: 1.5,
   size: [55, 86]
+}, {
+  offset: [212, 0],
+  opacity: 1.0,
+  rotateWithView: true,
+  rotation: 0.0,
+  scale: 1.0,
+  size: [44, 44]
 }];
 
 var i;
@@ -58,7 +66,7 @@ for (i = 0; i < featureCount; ++i) {
   feature = new ol.Feature(geometry);
   feature.setStyle(
       new ol.style.Style({
-        image: icons[i % iconCount]
+        image: icons[i % (iconCount - 1)]
       })
   );
   features[i] = feature;
@@ -86,3 +94,18 @@ var map = new ol.Map({
     zoom: 5
   })
 });
+
+var overlayFeatures = [];
+for (i = 0; i < featureCount; i += 30) {
+  var clone = features[i].clone();
+  clone.setStyle(null);
+  overlayFeatures.push(clone);
+}
+
+var featureOverlay = new ol.FeatureOverlay({
+  map: map,
+  style: new ol.style.Style({
+    image: icons[iconCount - 1]
+  }),
+  features: overlayFeatures
+});

src/ol/renderer/webgl/webglmaprenderer.js

@@ -24,7 +24,9 @@ goog.require('ol.layer.Vector');
 goog.require('ol.render.Event');
 goog.require('ol.render.EventType');
 goog.require('ol.render.webgl.Immediate');
+goog.require('ol.render.webgl.ReplayGroup');
 goog.require('ol.renderer.Map');
+goog.require('ol.renderer.vector');
 goog.require('ol.renderer.webgl.ImageLayer');
 goog.require('ol.renderer.webgl.Layer');
 goog.require('ol.renderer.webgl.TileLayer');
@@ -270,11 +272,29 @@ ol.renderer.webgl.Map.prototype.dispatchComposeEvent_ =
     function(type, frameState) {
   var map = this.getMap();
   if (map.hasListener(type)) {
-    var context = this.getContext();
-    var render = new ol.render.webgl.Immediate(context, frameState.pixelRatio);
-    var composeEvent = new ol.render.Event(
-        type, map, render, null, frameState, null, context);
+    var context = this.context_;
+    var extent = frameState.extent;
+
+    var viewState = frameState.viewState;
+    var resolution = viewState.resolution;
+    var pixelRatio = frameState.pixelRatio;
+    var tolerance = ol.renderer.vector.getTolerance(resolution, pixelRatio);
+
+    var vectorContext = new ol.render.webgl.Immediate(context, pixelRatio);
+    var replayGroup = new ol.render.webgl.ReplayGroup(tolerance, extent);
+    var composeEvent = new ol.render.Event(type, map, vectorContext,
+        replayGroup, frameState, null, context);
     map.dispatchEvent(composeEvent);
+
+    replayGroup.finish(context);
+    if (!replayGroup.isEmpty()) {
+      var center = viewState.center;
+      var rotation = viewState.rotation;
+      var size = frameState.size;
+      replayGroup.replay(context, center, resolution, rotation, size, extent,
+          pixelRatio, {});
+    }
+    this.replayGroup = replayGroup;
   }
 };