Webgl immediate implementation for points

Internally uses a replay group to share code.

Modifies the dynamic data example to use PointGeometry
and Feature in addition to MultiPoint.

examples/dynamic-data.js

@@ -1,11 +1,14 @@
+goog.require('ol.Feature');
 goog.require('ol.Map');
 goog.require('ol.View');
 goog.require('ol.geom.MultiPoint');
+goog.require('ol.geom.Point');
 goog.require('ol.layer.Tile');
 goog.require('ol.source.MapQuest');
 goog.require('ol.style.Circle');
 goog.require('ol.style.Fill');
 goog.require('ol.style.Stroke');
+goog.require('ol.style.Style');
 
 
 var map = new ol.Map({
@@ -14,6 +17,7 @@ var map = new ol.Map({
       source: new ol.source.MapQuest({layer: 'sat'})
     })
   ],
+  renderer: exampleNS.getRendererFromQueryString(),
   target: 'map',
   view: new ol.View({
     center: [0, 0],
@@ -28,6 +32,20 @@ var imageStyle = new ol.style.Circle({
   stroke: new ol.style.Stroke({color: 'red', width: 1})
 });
 
+var headInnerImageStyle = new ol.style.Style({
+  image: new ol.style.Circle({
+    radius: 2,
+    snapToPixel: false,
+    fill: new ol.style.Fill({color: 'blue'})
+  })
+});
+
+var headOuterImageStyle = new ol.style.Circle({
+  radius: 5,
+  snapToPixel: false,
+  fill: new ol.style.Fill({color: 'black'})
+});
+
 var n = 200;
 var omegaTheta = 30000; // Rotation period in ms
 var R = 7e6;
@@ -48,6 +66,16 @@ map.on('postcompose', function(event) {
   vectorContext.setImageStyle(imageStyle);
   vectorContext.drawMultiPointGeometry(
       new ol.geom.MultiPoint(coordinates), null);
+
+  var headPoint = new ol.geom.Point(coordinates[coordinates.length - 1]);
+  var headFeature = new ol.Feature(headPoint);
+  vectorContext.drawFeature(headFeature, headInnerImageStyle);
+
+  vectorContext.setImageStyle(headOuterImageStyle);
+  vectorContext.drawMultiPointGeometry(headPoint, null);
+
+  vectorContext.flush();
+
   map.render();
 });
 map.render();