Merge pull request #193 from elemoine/shaders

Apply transform matrix to text coords

src/ol/renderer/webgl/webgllayerrenderer.js

@@ -88,7 +88,7 @@ ol.renderer.webgl.Layer.prototype.getMapRenderer = function() {
 /**
  * @return {!goog.vec.Mat4.Number} Matrix.
  */
-ol.renderer.webgl.Layer.prototype.getMatrix = goog.abstractMethod;
+ol.renderer.webgl.Layer.prototype.getTexCoordMatrix = goog.abstractMethod;
 
 
 /**

src/ol/renderer/webgl/webglmaprenderer.js

@@ -48,15 +48,13 @@ ol.renderer.webgl.map.shader.Fragment = function() {
     '',
     'uniform mat4 uColorMatrix;',
     'uniform float uOpacity;',
-    'uniform mat4 uMatrix;',
     'uniform sampler2D uTexture;',
     '',
     'varying vec2 vTexCoord;',
     '',
     'void main(void) {',
     '',
-    '  vec4 texCoord = uMatrix * vec4(vTexCoord, 0., 1.);',
+    '  vec4 texColor = texture2D(uTexture, vTexCoord);',
-    '  vec4 texColor = texture2D(uTexture, texCoord.st);',
     '  vec4 color = uColorMatrix * vec4(texColor.rgb, 1.);',
     '  color.a = texColor.a * uOpacity;',
     '',
@@ -80,11 +78,13 @@ ol.renderer.webgl.map.shader.Vertex = function() {
     'attribute vec2 aPosition;',
     'attribute vec2 aTexCoord;',
     '',
+    'uniform mat4 uTexCoordMatrix;',
+    '',
     'varying vec2 vTexCoord;',
     '',
     'void main(void) {',
     '  gl_Position = vec4(aPosition, 0., 1.);',
-    '  vTexCoord = aTexCoord;',
+    '  vTexCoord = (uTexCoordMatrix * vec4(aTexCoord, 0., 1.)).st;',
     '}'
   ].join('\n'));
 };
@@ -157,9 +157,9 @@ ol.renderer.webgl.Map = function(container, map) {
    * @type {{aPosition: number,
    *         aTexCoord: number,
    *         uColorMatrix: WebGLUniformLocation,
-   *         uMatrix: WebGLUniformLocation,
    *         uOpacity: WebGLUniformLocation,
-   *         uTexture: WebGLUniformLocation}|null}
+   *         uTexture: WebGLUniformLocation,
+   *         uTexCoordMatrix: WebGLUniformLocation}|null}
    */
   this.locations_ = null;
 
@@ -518,7 +518,7 @@ ol.renderer.webgl.Map.prototype.renderFrame = function(frameState) {
       aPosition: gl.getAttribLocation(program, 'aPosition'),
       aTexCoord: gl.getAttribLocation(program, 'aTexCoord'),
       uColorMatrix: gl.getUniformLocation(program, 'uColorMatrix'),
-      uMatrix: gl.getUniformLocation(program, 'uMatrix'),
+      uTexCoordMatrix: gl.getUniformLocation(program, 'uTexCoordMatrix'),
       uOpacity: gl.getUniformLocation(program, 'uOpacity'),
       uTexture: gl.getUniformLocation(program, 'uTexture')
     };
@@ -553,7 +553,8 @@ ol.renderer.webgl.Map.prototype.renderFrame = function(frameState) {
     }
     var layerRenderer = this.getLayerRenderer(layer);
     gl.uniformMatrix4fv(
-        this.locations_.uMatrix, false, layerRenderer.getMatrix());
+        this.locations_.uTexCoordMatrix, false,
+        layerRenderer.getTexCoordMatrix());
     gl.uniformMatrix4fv(
         this.locations_.uColorMatrix, false, layerRenderer.getColorMatrix());
     gl.uniform1f(this.locations_.uOpacity, layer.getOpacity());

src/ol/renderer/webgl/webgltilelayerrenderer.js

@@ -139,7 +139,7 @@ ol.renderer.webgl.TileLayer = function(mapRenderer, tileLayer) {
    * @private
    * @type {!goog.vec.Mat4.Number}
    */
-  this.matrix_ = goog.vec.Mat4.createNumber();
+  this.texCoordMatrix_ = goog.vec.Mat4.createNumber();
 
   /**
    * @private
@@ -224,8 +224,8 @@ ol.renderer.webgl.TileLayer.prototype.disposeInternal = function() {
 /**
  * @inheritDoc
  */
-ol.renderer.webgl.TileLayer.prototype.getMatrix = function() {
+ol.renderer.webgl.TileLayer.prototype.getTexCoordMatrix = function() {
-  return this.matrix_;
+  return this.texCoordMatrix_;
 };
 
 
@@ -467,21 +467,21 @@ ol.renderer.webgl.TileLayer.prototype.renderFrame =
   this.updateUsedTiles(frameState.usedTiles, tileSource, z, tileRange);
   this.scheduleExpireCache(frameState, tileSource);
 
-  goog.vec.Mat4.makeIdentity(this.matrix_);
+  goog.vec.Mat4.makeIdentity(this.texCoordMatrix_);
-  goog.vec.Mat4.translate(this.matrix_,
+  goog.vec.Mat4.translate(this.texCoordMatrix_,
       (view2DState.center.x - framebufferExtent.minX) /
           (framebufferExtent.maxX - framebufferExtent.minX),
       (view2DState.center.y - framebufferExtent.minY) /
           (framebufferExtent.maxY - framebufferExtent.minY),
       0);
-  goog.vec.Mat4.rotateZ(this.matrix_, view2DState.rotation);
+  goog.vec.Mat4.rotateZ(this.texCoordMatrix_, view2DState.rotation);
-  goog.vec.Mat4.scale(this.matrix_,
+  goog.vec.Mat4.scale(this.texCoordMatrix_,
       frameState.size.width * view2DState.resolution /
           (framebufferExtent.maxX - framebufferExtent.minX),
       frameState.size.height * view2DState.resolution /
           (framebufferExtent.maxY - framebufferExtent.minY),
       1);
-  goog.vec.Mat4.translate(this.matrix_,
+  goog.vec.Mat4.translate(this.texCoordMatrix_,
       -0.5,
       -0.5,
       0);