Use triangles to draw points with WebGL

src/ol/render/webgl/webglreplay.js

@@ -21,13 +21,25 @@ ol.render.webgl.Replay = function(tolerance) {
    * @protected
    * @type {Array.<number>}
    */
-  this.coordinates = [];
+  this.vertices = [];
+
+  /**
+   * @protected
+   * @type {Array.<number>}
+   */
+  this.indices = [];
 
   /**
    * @protected
    * @type {WebGLBuffer}
    */
-  this.buffer = null;
+  this.verticesBuffer = null;
+
+  /**
+   * @protected
+   * @type {WebGLBuffer}
+   */
+  this.indicesBuffer = null;
 
   /**
    * @private
@@ -44,22 +56,57 @@ ol.render.webgl.Replay = function(tolerance) {
  * @param {number} end End.
  * @param {number} stride Stride.
  * @param {boolean} close Close.
- * @protected
  * @return {number} My end.
+ * @protected
  */
 ol.render.webgl.Replay.prototype.appendFlatCoordinates =
     function(flatCoordinates, offset, end, stride, close) {
-  var myEnd = this.coordinates.length;
+  var numIndices = this.indices.length;
-  var i;
+  var numVertices = this.vertices.length;
+  var i, x, y, n;
+  var oy = 0.05;
+  var ox = 0.01;
   for (i = offset; i < end; i += stride) {
-    this.coordinates[myEnd++] = flatCoordinates[i];
+    x = flatCoordinates[i];
-    this.coordinates[myEnd++] = flatCoordinates[i + 1];
+    y = flatCoordinates[i + 1];
+
+    n = numVertices / 4;
+
+    // create 4 vertices per coordinate
+
+    this.vertices[numVertices++] = x;
+    this.vertices[numVertices++] = y;
+    this.vertices[numVertices++] = -ox;
+    this.vertices[numVertices++] = -oy;
+
+    this.vertices[numVertices++] = x;
+    this.vertices[numVertices++] = y;
+    this.vertices[numVertices++] = ox;
+    this.vertices[numVertices++] = -oy;
+
+    this.vertices[numVertices++] = x;
+    this.vertices[numVertices++] = y;
+    this.vertices[numVertices++] = ox;
+    this.vertices[numVertices++] = oy;
+
+    this.vertices[numVertices++] = x;
+    this.vertices[numVertices++] = y;
+    this.vertices[numVertices++] = -ox;
+    this.vertices[numVertices++] = oy;
+
+    this.indices[numIndices++] = n;
+    this.indices[numIndices++] = n + 1;
+    this.indices[numIndices++] = n + 2;
+    this.indices[numIndices++] = n;
+    this.indices[numIndices++] = n + 2;
+    this.indices[numIndices++] = n + 3;
   }
+
   if (close) {
-    this.coordinates[myEnd++] = flatCoordinates[offset];
+    // FIXME
-    this.coordinates[myEnd++] = flatCoordinates[offset + 1];
+    goog.asserts.fail();
   }
-  return myEnd;
+  return numVertices;
 };
 
 
@@ -71,7 +118,8 @@ ol.render.webgl.Replay.prototype.finish = goog.nullFunction;
 
 /**
  * @param {ol.webgl.Context} context Context.
- * @param {number} attribLocation Attribute location.
+ * @param {number} positionAttribLocation Attribute location for positions.
+ * @param {number} offsetsAttribLocation Attribute location for offsets.
  * @param {WebGLUniformLocation} projectionMatrixLocation Projection
  *     matrix location.
  * @param {number} pixelRatio Pixel ratio.
@@ -81,16 +129,23 @@ ol.render.webgl.Replay.prototype.finish = goog.nullFunction;
  * @template T
  */
 ol.render.webgl.Replay.prototype.replay =
-    function(context, attribLocation, projectionMatrixLocation,
+    function(context, positionAttribLocation, offsetsAttribLocation,
-        pixelRatio, transform, skippedFeaturesHash) {
+        projectionMatrixLocation, pixelRatio, transform,
+        skippedFeaturesHash) {
   var gl = context.getGL();
-  gl.bindBuffer(goog.webgl.ARRAY_BUFFER, this.buffer);
+
-  gl.uniformMatrix4fv(projectionMatrixLocation, false,
+  gl.bindBuffer(goog.webgl.ARRAY_BUFFER, this.verticesBuffer);
-      transform);
+  gl.enableVertexAttribArray(positionAttribLocation);
-  gl.enableVertexAttribArray(attribLocation);
+  gl.vertexAttribPointer(positionAttribLocation, 2, goog.webgl.FLOAT,
-  gl.vertexAttribPointer(attribLocation, 2, goog.webgl.FLOAT,
+      false, 16, 0);
-      false, 0, 0);
+  gl.enableVertexAttribArray(offsetsAttribLocation);
-  gl.drawArrays(goog.webgl.POINTS, 0, this.coordinates.length / 2);
+  gl.vertexAttribPointer(offsetsAttribLocation, 2, goog.webgl.FLOAT,
+      false, 16, 8);
+
+  gl.bindBuffer(goog.webgl.ELEMENT_ARRAY_BUFFER, this.indicesBuffer);
+  gl.uniformMatrix4fv(projectionMatrixLocation, false, transform);
+  gl.drawElements(goog.webgl.TRIANGLES, this.indices.length,
+      goog.webgl.UNSIGNED_SHORT, 0);
 };
 
 
@@ -243,10 +298,14 @@ ol.render.webgl.ImageReplay.prototype.drawMultiPointGeometry =
  */
 ol.render.webgl.ImageReplay.prototype.finish = function(context) {
   var gl = context.getGL();
-  this.buffer = gl.createBuffer();
+  this.verticesBuffer = gl.createBuffer();
-  gl.bindBuffer(goog.webgl.ARRAY_BUFFER, this.buffer);
+  gl.bindBuffer(goog.webgl.ARRAY_BUFFER, this.verticesBuffer);
   gl.bufferData(goog.webgl.ARRAY_BUFFER,
-      new Float32Array(this.coordinates), goog.webgl.STATIC_DRAW);
+      new Float32Array(this.vertices), goog.webgl.STATIC_DRAW);
+  this.indicesBuffer = gl.createBuffer();
+  gl.bindBuffer(goog.webgl.ELEMENT_ARRAY_BUFFER, this.indicesBuffer);
+  gl.bufferData(goog.webgl.ELEMENT_ARRAY_BUFFER,
+      new Uint16Array(this.indices), goog.webgl.STATIC_DRAW);
 };
 
 
@@ -326,7 +385,8 @@ ol.render.webgl.ReplayGroup.prototype.isEmpty = function() {
 
 /**
  * @param {ol.webgl.Context} context Context.
- * @param {number} attribLocation Attribute location.
+ * @param {number} positionAttribLocation Attribute location for positions.
+ * @param {number} offsetsAttribLocation Attribute location for offsets.
  * @param {WebGLUniformLocation} projectionMatrixLocation Projection
  *        matrix location.
  * @param {ol.Extent} extent Extent.
@@ -337,16 +397,18 @@ ol.render.webgl.ReplayGroup.prototype.isEmpty = function() {
  * @template T
  */
 ol.render.webgl.ReplayGroup.prototype.replay = function(
-    context, attribLocation, projectionMatrixLocation, extent,
+    context, positionAttribLocation, offsetsAttribLocation,
-    pixelRatio, transform, skippedFeaturesHash) {
+    projectionMatrixLocation, extent, pixelRatio, transform,
+    skippedFeaturesHash) {
   var i, ii, replay, result;
   for (i = 0, ii = ol.render.REPLAY_ORDER.length; i < ii; ++i) {
     replay = this.replays_[ol.render.REPLAY_ORDER[i]];
     if (goog.isDef(replay) &&
         ol.extent.intersects(extent, replay.getExtent())) {
       result = replay.replay(
-          context, attribLocation, projectionMatrixLocation,
+          context, positionAttribLocation, offsetsAttribLocation,
-          pixelRatio, transform, skippedFeaturesHash);
+          projectionMatrixLocation, pixelRatio, transform,
+          skippedFeaturesHash);
       if (result) {
         return result;
       }

src/ol/renderer/webgl/webglvectorlayer.glsl

@@ -4,20 +4,19 @@
 
 //! COMMON
 
-
 //! VERTEX
 attribute vec2 a_position;
+attribute vec2 a_offsets;
 
 uniform mat4 u_projectionMatrix;
 
 void main(void) {
-  gl_PointSize = 10.0;
+  gl_Position = u_projectionMatrix * vec4(a_position, 0., 1.) + vec4(a_offsets, 0., 0.);
-  gl_Position = u_projectionMatrix * vec4(a_position, 0., 1.);
 }
 
 
 //! FRAGMENT
 
 void main(void) {
-  gl_FragColor = vec4(1.0, 1.0, 0.0, 0.7);
+  gl_FragColor = vec4(1.0, 1.0, 0.0, 1);
 }

src/ol/renderer/webgl/webglvectorlayerrenderer.js

@@ -114,6 +114,7 @@ ol.renderer.webgl.VectorLayer.prototype.composeFrame =
   if (!goog.isNull(replayGroup) && !replayGroup.isEmpty()) {
     replayGroup.replay(context,
         this.locations_.a_position,
+        this.locations_.a_offsets,
         this.locations_.u_projectionMatrix,
         frameState.extent, frameState.pixelRatio,
         this.projectionMatrix,

src/ol/renderer/webgl/webglvectorlayershader.js

@@ -21,14 +21,14 @@ goog.addSingletonGetter(ol.renderer.webgl.vectorlayer.shader.Fragment);
  * @const
  * @type {string}
  */
-ol.renderer.webgl.vectorlayer.shader.Fragment.DEBUG_SOURCE = 'precision mediump float;\n\n\n\nvoid main(void) {\n  gl_FragColor = vec4(1.0, 1.0, 0.0, 0.7);\n}\n';
+ol.renderer.webgl.vectorlayer.shader.Fragment.DEBUG_SOURCE = 'precision mediump float;\n\n\nvoid main(void) {\n  gl_FragColor = vec4(1.0, 1.0, 0.0, 1);\n}\n';
 
 
 /**
  * @const
  * @type {string}
  */
-ol.renderer.webgl.vectorlayer.shader.Fragment.OPTIMIZED_SOURCE = 'precision mediump float;void main(void){gl_FragColor=vec4(1.0,1.0,0.0,0.7);}';
+ol.renderer.webgl.vectorlayer.shader.Fragment.OPTIMIZED_SOURCE = 'precision mediump float;void main(void){gl_FragColor=vec4(1.0,1.0,0.0,1);}';
 
 
 /**
@@ -57,14 +57,14 @@ goog.addSingletonGetter(ol.renderer.webgl.vectorlayer.shader.Vertex);
  * @const
  * @type {string}
  */
-ol.renderer.webgl.vectorlayer.shader.Vertex.DEBUG_SOURCE = '\n\nattribute vec2 a_position;\n\nuniform mat4 u_projectionMatrix;\n\nvoid main(void) {\n  gl_PointSize = 10.0;\n  gl_Position = u_projectionMatrix * vec4(a_position, 0., 1.);\n}\n\n\n';
+ol.renderer.webgl.vectorlayer.shader.Vertex.DEBUG_SOURCE = '\nattribute vec2 a_position;\nattribute vec2 a_offsets;\n\nuniform mat4 u_projectionMatrix;\n\nvoid main(void) {\n  gl_Position = u_projectionMatrix * vec4(a_position, 0., 1.) + vec4(a_offsets, 0., 0.);\n}\n\n\n';
 
 
 /**
  * @const
  * @type {string}
  */
-ol.renderer.webgl.vectorlayer.shader.Vertex.OPTIMIZED_SOURCE = 'attribute vec2 a;uniform mat4 b;void main(void){gl_PointSize=10.0;gl_Position=b*vec4(a,0.,1.);}';
+ol.renderer.webgl.vectorlayer.shader.Vertex.OPTIMIZED_SOURCE = 'attribute vec2 a;attribute vec2 b;uniform mat4 c;void main(void){gl_Position=c*vec4(a,0.,1.)+vec4(b,0.,0.);}';
 
 
 /**
@@ -89,7 +89,13 @@ ol.renderer.webgl.vectorlayer.shader.Locations = function(gl, program) {
    * @type {WebGLUniformLocation}
    */
   this.u_projectionMatrix = gl.getUniformLocation(
-      program, goog.DEBUG ? 'u_projectionMatrix' : 'b');
+      program, goog.DEBUG ? 'u_projectionMatrix' : 'c');
+
+  /**
+   * @type {number}
+   */
+  this.a_offsets = gl.getAttribLocation(
+      program, goog.DEBUG ? 'a_offsets' : 'b');
 
   /**
    * @type {number}