Merge pull request #6793 from GaborFarkas/webgl_text

Webgl text

test/spec/ol/render/webgl/imagereplay.test.js

@@ -2,7 +2,6 @@ goog.provide('ol.test.render.webgl.ImageReplay');
 
 goog.require('ol.geom.MultiPoint');
 goog.require('ol.geom.Point');
-goog.require('ol.render.webgl.imagereplay.defaultshader');
 goog.require('ol.render.webgl.ImageReplay');
 goog.require('ol.style.Image');
 
@@ -57,34 +56,34 @@ describe('ol.render.webgl.ImageReplay', function() {
 
     it('set expected states', function() {
       replay.setImageStyle(imageStyle1);
-      expect(replay.anchorX_).to.be(0.5);
-      expect(replay.anchorY_).to.be(1);
-      expect(replay.height_).to.be(256);
-      expect(replay.imageHeight_).to.be(512);
-      expect(replay.imageWidth_).to.be(512);
-      expect(replay.opacity_).to.be(0.1);
-      expect(replay.originX_).to.be(200);
-      expect(replay.originY_).to.be(200);
-      expect(replay.rotation_).to.be(1.5);
-      expect(replay.rotateWithView_).to.be(true);
-      expect(replay.scale_).to.be(2.0);
-      expect(replay.width_).to.be(256);
+      expect(replay.anchorX).to.be(0.5);
+      expect(replay.anchorY).to.be(1);
+      expect(replay.height).to.be(256);
+      expect(replay.imageHeight).to.be(512);
+      expect(replay.imageWidth).to.be(512);
+      expect(replay.opacity).to.be(0.1);
+      expect(replay.originX).to.be(200);
+      expect(replay.originY).to.be(200);
+      expect(replay.rotation).to.be(1.5);
+      expect(replay.rotateWithView).to.be(true);
+      expect(replay.scale).to.be(2.0);
+      expect(replay.width).to.be(256);
       expect(replay.images_).to.have.length(1);
-      expect(replay.groupIndices_).to.have.length(0);
+      expect(replay.groupIndices).to.have.length(0);
       expect(replay.hitDetectionImages_).to.have.length(1);
-      expect(replay.hitDetectionGroupIndices_).to.have.length(0);
+      expect(replay.hitDetectionGroupIndices).to.have.length(0);
 
       replay.setImageStyle(imageStyle1);
       expect(replay.images_).to.have.length(1);
-      expect(replay.groupIndices_).to.have.length(0);
+      expect(replay.groupIndices).to.have.length(0);
       expect(replay.hitDetectionImages_).to.have.length(1);
-      expect(replay.hitDetectionGroupIndices_).to.have.length(0);
+      expect(replay.hitDetectionGroupIndices).to.have.length(0);
 
       replay.setImageStyle(imageStyle2);
       expect(replay.images_).to.have.length(2);
-      expect(replay.groupIndices_).to.have.length(1);
+      expect(replay.groupIndices).to.have.length(1);
       expect(replay.hitDetectionImages_).to.have.length(2);
-      expect(replay.hitDetectionGroupIndices_).to.have.length(1);
+      expect(replay.hitDetectionGroupIndices).to.have.length(1);
     });
   });
 
@@ -168,78 +167,43 @@ describe('ol.render.webgl.ImageReplay', function() {
     });
   });
 
-  describe('#setUpProgram', function() {
-    var context, gl;
+  describe('#getTextures', function() {
     beforeEach(function() {
-      context = {
-        getProgram: function() {},
-        useProgram: function() {}
-      };
-      gl = {
-        enableVertexAttribArray: function() {},
-        vertexAttribPointer: function() {},
-        uniform1f: function() {},
-        uniform2fv: function() {},
-        getUniformLocation: function() {},
-        getAttribLocation: function() {}
-      };
+      replay.textures_ = [1, 2];
+      replay.hitDetectionTextures_ = [3, 4];
     });
 
-    it('returns the locations used by the shaders', function() {
-      var locations = replay.setUpProgram(gl, context, [2, 2], 1);
-      expect(locations).to.be.a(
-          ol.render.webgl.imagereplay.defaultshader.Locations);
+    it('returns the textures', function() {
+      var textures = replay.getTextures();
+
+      expect(textures).to.have.length(2);
+      expect(textures[0]).to.be(1);
+      expect(textures[1]).to.be(2);
     });
 
-    it('gets and compiles the shaders', function() {
-      sinon.spy(context, 'getProgram');
-      sinon.spy(context, 'useProgram');
+    it('can additionally return the hit detection textures', function() {
+      var textures = replay.getTextures(true);
 
-      replay.setUpProgram(gl, context, [2, 2], 1);
-      expect(context.getProgram.calledWithExactly(
-          ol.render.webgl.imagereplay.defaultshader.fragment,
-          ol.render.webgl.imagereplay.defaultshader.vertex)).to.be(true);
-      expect(context.useProgram.calledOnce).to.be(true);
-    });
-
-    it('initializes the attrib pointers', function() {
-      sinon.spy(gl, 'getAttribLocation');
-      sinon.spy(gl, 'vertexAttribPointer');
-      sinon.spy(gl, 'enableVertexAttribArray');
-
-      replay.setUpProgram(gl, context, [2, 2], 1);
-      expect(gl.vertexAttribPointer.callCount).to.be(gl.getAttribLocation.callCount);
-      expect(gl.enableVertexAttribArray.callCount).to.be(
-          gl.getAttribLocation.callCount);
+      expect(textures).to.have.length(4);
+      expect(textures[0]).to.be(1);
+      expect(textures[1]).to.be(2);
+      expect(textures[2]).to.be(3);
+      expect(textures[3]).to.be(4);
     });
   });
 
-  describe('#shutDownProgram', function() {
-    var context, gl;
+  describe('#getHitDetectionTextures', function() {
     beforeEach(function() {
-      context = {
-        getProgram: function() {},
-        useProgram: function() {}
-      };
-      gl = {
-        enableVertexAttribArray: function() {},
-        disableVertexAttribArray: function() {},
-        vertexAttribPointer: function() {},
-        uniform1f: function() {},
-        uniform2fv: function() {},
-        getUniformLocation: function() {},
-        getAttribLocation: function() {}
-      };
+      replay.textures_ = [1, 2];
+      replay.hitDetectionTextures_ = [3, 4];
     });
 
-    it('disables the attrib pointers', function() {
-      sinon.spy(gl, 'getAttribLocation');
-      sinon.spy(gl, 'disableVertexAttribArray');
+    it('returns the hit detection textures', function() {
+      var textures = replay.getHitDetectionTextures();
 
-      var locations = replay.setUpProgram(gl, context, [2, 2], 1);
-      replay.shutDownProgram(gl, locations);
-      expect(gl.disableVertexAttribArray.callCount).to.be(
-          gl.getAttribLocation.callCount);
+      expect(textures).to.have.length(2);
+      expect(textures[0]).to.be(3);
+      expect(textures[1]).to.be(4);
     });
   });
 });

test/spec/ol/render/webgl/textreplay.test.js

@@ -0,0 +1,320 @@
+goog.provide('ol.test.render.webgl.TextReplay');
+
+goog.require('ol.dom');
+goog.require('ol.render.webgl.TextReplay');
+goog.require('ol.style.Fill');
+goog.require('ol.style.Stroke');
+goog.require('ol.style.Text');
+
+describe('ol.render.webgl.TextReplay', function() {
+  var replay;
+
+  var createTextStyle = function(fillStyle, strokeStyle, text) {
+    var textStyle = new ol.style.Text({
+      rotateWithView: true,
+      rotation: 1.5,
+      scale: 2,
+      textAlign: 'left',
+      textBaseline: 'top',
+      font: '12px Arial',
+      offsetX: 10,
+      offsetY: 10,
+      text: text,
+      fill: fillStyle,
+      stroke: strokeStyle
+    });
+    return textStyle;
+  };
+
+  beforeEach(function() {
+    var tolerance = 0.1;
+    var maxExtent = [-10000, -20000, 10000, 20000];
+    replay = new ol.render.webgl.TextReplay(tolerance, maxExtent);
+  });
+
+  describe('#setTextStyle', function() {
+
+    var textStyle1, textStyle2, textStyle3, textStyle4;
+
+    beforeEach(function() {
+      textStyle1 = createTextStyle(
+          new ol.style.Fill({
+            color: [0, 0, 0, 1]
+          }),
+          new ol.style.Stroke({
+            width: 1,
+            color: [0, 0, 0, 1],
+            lineCap: 'butt',
+            lineJoin: 'bevel',
+            lineDash: [5, 5],
+            lineDashOffset: 15,
+            miterLimit: 2
+          }),
+          'someText');
+      textStyle2 = createTextStyle(
+          new ol.style.Fill({
+            color: [255, 255, 255, 1]
+          }),
+          new ol.style.Stroke({
+            width: 1,
+            color: [255, 255, 255, 1]
+          }),
+          'someText'
+      );
+      textStyle3 = createTextStyle(null, null, 'someText');
+      textStyle4 = createTextStyle(
+          new ol.style.Fill({
+            color: [0, 0, 0, 1]
+          }),
+          new ol.style.Stroke({
+            width: 1,
+            color: [0, 0, 0, 1]
+          }),
+          ''
+      );
+    });
+
+    it('set expected states', function() {
+      replay.setTextStyle(textStyle1);
+      expect(replay.opacity).to.be(1);
+      expect(replay.rotation).to.be(1.5);
+      expect(replay.rotateWithView).to.be(true);
+      expect(replay.scale).to.be(1);
+      expect(replay.offsetX_).to.be(10);
+      expect(replay.offsetY_).to.be(10);
+      expect(replay.text_).to.be('someText');
+      expect(Object.keys(replay.atlases_)).to.have.length(1);
+
+      expect(replay.state_.fillColor).to.be('rgba(0,0,0,1)');
+      expect(replay.state_.strokeColor).to.be('rgba(0,0,0,1)');
+      expect(replay.state_.scale).to.be(2);
+      expect(replay.state_.lineWidth).to.be(1);
+      expect(replay.state_.lineJoin).to.be('bevel');
+      expect(replay.state_.lineCap).to.be('butt');
+      expect(replay.state_.lineDash).to.eql([5, 5]);
+      expect(replay.state_.lineDashOffset).to.be(15);
+      expect(replay.state_.miterLimit).to.be(2);
+      expect(replay.state_.font).to.be('12px Arial');
+
+      replay.setTextStyle(textStyle2);
+      expect(Object.keys(replay.atlases_)).to.have.length(2);
+    });
+
+    it('does not create an atlas, if an empty text is supplied', function() {
+      replay.setTextStyle(textStyle4);
+      expect(replay.text_).to.be('');
+      expect(Object.keys(replay.atlases_)).to.have.length(0);
+    });
+
+    it('does not create an atlas, if both fill and stroke styles are missing', function() {
+      replay.setTextStyle(textStyle3);
+      expect(replay.text_).to.be('');
+      expect(Object.keys(replay.atlases_)).to.have.length(0);
+    });
+  });
+
+  describe('#drawText', function() {
+    beforeEach(function() {
+      var textStyle = createTextStyle(
+          new ol.style.Fill({
+            color: [0, 0, 0, 1]
+          }),
+          null, 'someText');
+      replay.setTextStyle(textStyle);
+    });
+
+    it('sets the buffer data', function() {
+      var point;
+
+      point = [1000, 2000];
+      replay.drawText(point, 0, 2, 2, null, null);
+      expect(replay.vertices).to.have.length(256);
+      expect(replay.indices).to.have.length(48);
+
+      point = [2000, 3000];
+      replay.drawText(point, 0, 2, 2, null, null);
+      expect(replay.vertices).to.have.length(512);
+      expect(replay.indices).to.have.length(96);
+    });
+
+    it('sets part of its state during drawing', function() {
+      var point = [1000, 2000];
+      replay.drawText(point, 0, 2, 2, null, null);
+
+      var height = replay.currAtlas_.height;
+      var widths = replay.currAtlas_.width;
+      var width = widths.t;
+      var widthX = widths.s + widths.o + widths.m + widths.e + widths.T +
+          widths.e + widths.x;
+      var charInfo = replay.currAtlas_.atlas.getInfo('t');
+
+      expect(replay.height).to.be(height);
+      expect(replay.width).to.be(width);
+      expect(replay.originX).to.be(charInfo.offsetX);
+      expect(replay.originY).to.be(charInfo.offsetY);
+      expect(replay.imageHeight).to.be(charInfo.image.height);
+      expect(replay.imageWidth).to.be(charInfo.image.width);
+      expect(replay.anchorX).to.be(-widthX + 10);
+      expect(replay.anchorY).to.be(10);
+    });
+
+    it('does not draw if text is empty', function() {
+      replay.text_ = '';
+      var point;
+
+      point = [1000, 2000];
+      replay.drawText(point, 0, 2, 2, null, null);
+      expect(replay.vertices).to.have.length(0);
+      expect(replay.indices).to.have.length(0);
+    });
+  });
+
+  describe('#addCharToAtlas_', function() {
+    beforeEach(function() {
+      var textStyle = createTextStyle(
+          new ol.style.Fill({
+            color: [0, 0, 0, 1]
+          }),
+          null, 'someText');
+      replay.setTextStyle(textStyle);
+    });
+
+    it('adds a single character to the current atlas', function() {
+      var glyphAtlas = replay.currAtlas_.atlas;
+      var info;
+
+      replay.addCharToAtlas_('someText');
+      info = glyphAtlas.getInfo('someText');
+      expect(info).to.be(null);
+
+      replay.addCharToAtlas_('e');
+      replay.addCharToAtlas_('x');
+      info = glyphAtlas.getInfo('e');
+      expect(info).not.to.be(null);
+      info = glyphAtlas.getInfo('x');
+      expect(info).not.to.be(null);
+    });
+
+    it('keeps the atlas and the width dictionary synced', function() {
+      var glyphAtlas = replay.currAtlas_;
+
+      replay.addCharToAtlas_('e');
+      replay.addCharToAtlas_('x');
+      expect(Object.keys(glyphAtlas.width)).to.have.length(2);
+
+      replay.addCharToAtlas_('someText');
+      expect(Object.keys(glyphAtlas.width)).to.have.length(2);
+    });
+  });
+
+  describe('#getTextSize_', function() {
+    beforeEach(function() {
+      var textStyle = createTextStyle(
+          new ol.style.Fill({
+            color: [0, 0, 0, 1]
+          }),
+          null, 'someText');
+      textStyle.setScale(1);
+      replay.setTextStyle(textStyle);
+    });
+
+    it('adds missing characters to the current atlas', function() {
+      var glyphAtlas = replay.currAtlas_;
+      var info;
+
+      expect(Object.keys(glyphAtlas.width)).to.have.length(0);
+      replay.getTextSize_(['someText']);
+      expect(Object.keys(glyphAtlas.width)).to.have.length(7);
+      info = glyphAtlas.atlas.getInfo('s');
+      expect(info).not.to.be(null);
+      info = glyphAtlas.atlas.getInfo('o');
+      expect(info).not.to.be(null);
+      info = glyphAtlas.atlas.getInfo('m');
+      expect(info).not.to.be(null);
+      info = glyphAtlas.atlas.getInfo('e');
+      expect(info).not.to.be(null);
+      info = glyphAtlas.atlas.getInfo('T');
+      expect(info).not.to.be(null);
+      info = glyphAtlas.atlas.getInfo('x');
+      expect(info).not.to.be(null);
+      info = glyphAtlas.atlas.getInfo('t');
+      expect(info).not.to.be(null);
+    });
+
+    it('returns the size of the label\'s bounding box in pixels', function() {
+      var size;
+      var mCtx = ol.dom.createCanvasContext2D(0, 0);
+      mCtx.font = '12px Arial';
+      var width = mCtx.measureText('someText').width;
+      var width2 = mCtx.measureText('anEvenLongerLine').width;
+      var height = Math.ceil(mCtx.measureText('M').width * 1.5);
+
+      size = replay.getTextSize_(['someText']);
+      expect(size[0]).to.be.within(width, width + 8);
+      expect(size[1]).to.be(height);
+
+      size = replay.getTextSize_(['someText', 'anEvenLongerLine']);
+      expect(size[0]).to.be.within(width2, width2 + 16);
+      expect(size[1]).to.be(height * 2);
+    });
+  });
+
+  describe('#getAtlas_', function() {
+    beforeEach(function() {
+      var textStyle = createTextStyle(
+          new ol.style.Fill({
+            color: [0, 0, 0, 1]
+          }),
+          null, 'someText');
+      replay.setTextStyle(textStyle);
+    });
+
+    it('returns the appropriate atlas for the current state', function() {
+      var atlas = replay.currAtlas_;
+      var state = replay.state_;
+
+      expect(Object.keys(replay.atlases_)).to.have.length(1);
+      expect(replay.getAtlas_(state)).to.be(atlas);
+      expect(Object.keys(replay.atlases_)).to.have.length(1);
+    });
+
+    it('creates a new atlas if it cannot find the one for the current state', function() {
+      var atlas = replay.currAtlas_;
+      var state = replay.state_;
+      state.lineWidth = 50;
+
+      expect(Object.keys(replay.atlases_)).to.have.length(1);
+      expect(replay.getAtlas_(state)).not.to.be(atlas);
+      expect(Object.keys(replay.atlases_)).to.have.length(2);
+    });
+  });
+
+  describe('#getTextures', function() {
+    beforeEach(function() {
+      replay.textures_ = [1, 2];
+    });
+
+    it('returns the textures', function() {
+      var textures = replay.getTextures();
+
+      expect(textures).to.have.length(2);
+      expect(textures[0]).to.be(1);
+      expect(textures[1]).to.be(2);
+      expect(textures).to.eql(replay.getTextures(true));
+    });
+  });
+
+  describe('#getHitDetectionTextures', function() {
+    beforeEach(function() {
+      replay.textures_ = [1, 2];
+    });
+
+    it('returns the textures', function() {
+      var textures = replay.getHitDetectionTextures();
+
+      expect(textures).to.have.length(2);
+      expect(textures[0]).to.be(1);
+      expect(textures[1]).to.be(2);
+    });
+  });
+});

test/spec/ol/render/webgl/texturereplay.test.js

@@ -0,0 +1,89 @@
+goog.provide('ol.test.render.webgl.TextureReplay');
+
+goog.require('ol.render.webgl.TextureReplay');
+goog.require('ol.render.webgl.texturereplay.defaultshader');
+
+describe('ol.render.webgl.TextureReplay', function() {
+  var replay;
+
+  beforeEach(function() {
+    var tolerance = 0.1;
+    var maxExtent = [-10000, -20000, 10000, 20000];
+    replay = new ol.render.webgl.TextureReplay(tolerance, maxExtent);
+  });
+
+  describe('#setUpProgram', function() {
+    var context, gl;
+    beforeEach(function() {
+      context = {
+        getProgram: function() {},
+        useProgram: function() {}
+      };
+      gl = {
+        enableVertexAttribArray: function() {},
+        vertexAttribPointer: function() {},
+        uniform1f: function() {},
+        uniform2fv: function() {},
+        getUniformLocation: function() {},
+        getAttribLocation: function() {}
+      };
+    });
+
+    it('returns the locations used by the shaders', function() {
+      var locations = replay.setUpProgram(gl, context, [2, 2], 1);
+      expect(locations).to.be.a(
+          ol.render.webgl.texturereplay.defaultshader.Locations);
+    });
+
+    it('gets and compiles the shaders', function() {
+      sinon.spy(context, 'getProgram');
+      sinon.spy(context, 'useProgram');
+
+      replay.setUpProgram(gl, context, [2, 2], 1);
+      expect(context.getProgram.calledWithExactly(
+          ol.render.webgl.texturereplay.defaultshader.fragment,
+          ol.render.webgl.texturereplay.defaultshader.vertex)).to.be(true);
+      expect(context.useProgram.calledOnce).to.be(true);
+    });
+
+    it('initializes the attrib pointers', function() {
+      sinon.spy(gl, 'getAttribLocation');
+      sinon.spy(gl, 'vertexAttribPointer');
+      sinon.spy(gl, 'enableVertexAttribArray');
+
+      replay.setUpProgram(gl, context, [2, 2], 1);
+      expect(gl.vertexAttribPointer.callCount).to.be(gl.getAttribLocation.callCount);
+      expect(gl.enableVertexAttribArray.callCount).to.be(
+          gl.getAttribLocation.callCount);
+    });
+  });
+
+  describe('#shutDownProgram', function() {
+    var context, gl;
+    beforeEach(function() {
+      context = {
+        getProgram: function() {},
+        useProgram: function() {}
+      };
+      gl = {
+        enableVertexAttribArray: function() {},
+        disableVertexAttribArray: function() {},
+        vertexAttribPointer: function() {},
+        uniform1f: function() {},
+        uniform2fv: function() {},
+        getUniformLocation: function() {},
+        getAttribLocation: function() {}
+      };
+    });
+
+    it('disables the attrib pointers', function() {
+      sinon.spy(gl, 'getAttribLocation');
+      sinon.spy(gl, 'disableVertexAttribArray');
+
+      var locations = replay.setUpProgram(gl, context, [2, 2], 1);
+      replay.shutDownProgram(gl, locations);
+      expect(gl.disableVertexAttribArray.callCount).to.be(
+          gl.getAttribLocation.callCount);
+    });
+  });
+});