From 08dbeed23f3feb66f2b95ffba1f2369e0271ac3b Mon Sep 17 00:00:00 2001 From: Tom Payne Date: Mon, 4 Mar 2013 19:45:42 +0100 Subject: [PATCH] Rename WebGL variables to match CSS shaders specification See https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.htm --- .../renderer/webgl/webglimagelayerrenderer.js | 24 +++--- src/ol/renderer/webgl/webgllayerrenderer.js | 2 +- src/ol/renderer/webgl/webglmaprenderer.js | 76 +++++++++---------- .../renderer/webgl/webgltilelayerrenderer.js | 6 +- .../spec/ol/renderer/webgl/imagelayer.test.js | 6 +- 5 files changed, 57 insertions(+), 57 deletions(-) diff --git a/src/ol/renderer/webgl/webglimagelayerrenderer.js b/src/ol/renderer/webgl/webglimagelayerrenderer.js index 545547d198..b0edbca02c 100644 --- a/src/ol/renderer/webgl/webglimagelayerrenderer.js +++ b/src/ol/renderer/webgl/webglimagelayerrenderer.js @@ -45,7 +45,7 @@ ol.renderer.webgl.ImageLayer = function(mapRenderer, imageLayer) { * @private * @type {!goog.vec.Mat4.Number} */ - this.vertexCoordMatrix_ = goog.vec.Mat4.createNumber(); + this.projectionMatrix_ = goog.vec.Mat4.createNumber(); }; goog.inherits(ol.renderer.webgl.ImageLayer, ol.renderer.webgl.Layer); @@ -118,8 +118,8 @@ ol.renderer.webgl.ImageLayer.prototype.getTexture = function() { /** * @inheritDoc */ -ol.renderer.webgl.ImageLayer.prototype.getVertexCoordMatrix = function() { - return this.vertexCoordMatrix_; +ol.renderer.webgl.ImageLayer.prototype.getProjectionMatrix = function() { + return this.projectionMatrix_; }; @@ -187,7 +187,7 @@ ol.renderer.webgl.ImageLayer.prototype.renderFrame = var canvas = this.getMapRenderer().getCanvas(); - this.updateVertexCoordMatrix_(canvas.width, canvas.height, + this.updateProjectionMatrix_(canvas.width, canvas.height, viewCenter, viewResolution, viewRotation, image.getExtent()); // Translate and scale to flip the Y coord. @@ -213,24 +213,24 @@ ol.renderer.webgl.ImageLayer.prototype.renderFrame = * @param {number} viewRotation View rotation. * @param {ol.Extent} imageExtent Image extent. */ -ol.renderer.webgl.ImageLayer.prototype.updateVertexCoordMatrix_ = +ol.renderer.webgl.ImageLayer.prototype.updateProjectionMatrix_ = function(canvasWidth, canvasHeight, viewCenter, viewResolution, viewRotation, imageExtent) { var canvasExtentWidth = canvasWidth * viewResolution; var canvasExtentHeight = canvasHeight * viewResolution; - var vertexCoordMatrix = this.vertexCoordMatrix_; - goog.vec.Mat4.makeIdentity(vertexCoordMatrix); - goog.vec.Mat4.scale(vertexCoordMatrix, + var projectionMatrix = this.projectionMatrix_; + goog.vec.Mat4.makeIdentity(projectionMatrix); + goog.vec.Mat4.scale(projectionMatrix, 2 / canvasExtentWidth, 2 / canvasExtentHeight, 1); - goog.vec.Mat4.rotateZ(vertexCoordMatrix, -viewRotation); - goog.vec.Mat4.translate(vertexCoordMatrix, + goog.vec.Mat4.rotateZ(projectionMatrix, -viewRotation); + goog.vec.Mat4.translate(projectionMatrix, imageExtent.minX - viewCenter.x, imageExtent.minY - viewCenter.y, 0); - goog.vec.Mat4.scale(vertexCoordMatrix, + goog.vec.Mat4.scale(projectionMatrix, imageExtent.getWidth() / 2, imageExtent.getHeight() / 2, 1); - goog.vec.Mat4.translate(vertexCoordMatrix, 1, 1, 0); + goog.vec.Mat4.translate(projectionMatrix, 1, 1, 0); }; diff --git a/src/ol/renderer/webgl/webgllayerrenderer.js b/src/ol/renderer/webgl/webgllayerrenderer.js index 067a4e054c..7199246d4b 100644 --- a/src/ol/renderer/webgl/webgllayerrenderer.js +++ b/src/ol/renderer/webgl/webgllayerrenderer.js @@ -100,7 +100,7 @@ ol.renderer.webgl.Layer.prototype.getTexture = goog.abstractMethod; /** * @return {!goog.vec.Mat4.Number} Matrix. */ -ol.renderer.webgl.Layer.prototype.getVertexCoordMatrix = goog.abstractMethod; +ol.renderer.webgl.Layer.prototype.getProjectionMatrix = goog.abstractMethod; /** diff --git a/src/ol/renderer/webgl/webglmaprenderer.js b/src/ol/renderer/webgl/webglmaprenderer.js index 62b03fc489..0870c376db 100644 --- a/src/ol/renderer/webgl/webglmaprenderer.js +++ b/src/ol/renderer/webgl/webglmaprenderer.js @@ -48,17 +48,17 @@ ol.renderer.webgl.map.shader.Fragment = function() { goog.base(this, [ 'precision mediump float;', '', - 'uniform mat4 uColorMatrix;', - 'uniform float uOpacity;', - 'uniform sampler2D uTexture;', + 'uniform mat4 u_colorMatrix;', + 'uniform float u_opacity;', + 'uniform sampler2D u_texture;', '', - 'varying vec2 vTexCoord;', + 'varying vec2 v_texCoord;', '', 'void main(void) {', '', - ' vec4 texColor = texture2D(uTexture, vTexCoord);', - ' vec4 color = uColorMatrix * vec4(texColor.rgb, 1.);', - ' color.a = texColor.a * uOpacity;', + ' vec4 texColor = texture2D(u_texture, v_texCoord);', + ' vec4 color = u_colorMatrix * vec4(texColor.rgb, 1.);', + ' color.a = texColor.a * u_opacity;', '', ' gl_FragColor = color;', '', @@ -77,17 +77,17 @@ goog.addSingletonGetter(ol.renderer.webgl.map.shader.Fragment); */ ol.renderer.webgl.map.shader.Vertex = function() { goog.base(this, [ - 'attribute vec2 aPosition;', - 'attribute vec2 aTexCoord;', + 'attribute vec2 a_position;', + 'attribute vec2 a_texCoord;', '', - 'uniform mat4 uTexCoordMatrix;', - 'uniform mat4 uVertexCoordMatrix;', + 'uniform mat4 u_texCoordMatrix;', + 'uniform mat4 u_projectionMatrix;', '', - 'varying vec2 vTexCoord;', + 'varying vec2 v_texCoord;', '', 'void main(void) {', - ' gl_Position = uVertexCoordMatrix * vec4(aPosition, 0., 1.);', - ' vTexCoord = (uTexCoordMatrix * vec4(aTexCoord, 0., 1.)).st;', + ' gl_Position = u_projectionMatrix * vec4(a_position, 0., 1.);', + ' v_texCoord = (u_texCoordMatrix * vec4(a_texCoord, 0., 1.)).st;', '}' ].join('\n')); }; @@ -157,13 +157,13 @@ ol.renderer.webgl.Map = function(container, map) { /** * @private - * @type {{aPosition: number, - * aTexCoord: number, - * uColorMatrix: WebGLUniformLocation, - * uOpacity: WebGLUniformLocation, - * uTexture: WebGLUniformLocation, - * uTexCoordMatrix: WebGLUniformLocation, - * uVertexCoordMatrix: WebGLUniformLocation}|null} + * @type {{a_position: number, + * a_texCoord: number, + * u_colorMatrix: WebGLUniformLocation, + * u_opacity: WebGLUniformLocation, + * u_texture: WebGLUniformLocation, + * u_texCoordMatrix: WebGLUniformLocation, + * u_projectionMatrix: WebGLUniformLocation}|null} */ this.locations_ = null; @@ -522,13 +522,13 @@ ol.renderer.webgl.Map.prototype.renderFrame = function(frameState) { gl.useProgram(program); if (goog.isNull(this.locations_)) { this.locations_ = { - aPosition: gl.getAttribLocation(program, 'aPosition'), - aTexCoord: gl.getAttribLocation(program, 'aTexCoord'), - uColorMatrix: gl.getUniformLocation(program, 'uColorMatrix'), - uTexCoordMatrix: gl.getUniformLocation(program, 'uTexCoordMatrix'), - uVertexCoordMatrix: gl.getUniformLocation(program, 'uVertexCoordMatrix'), - uOpacity: gl.getUniformLocation(program, 'uOpacity'), - uTexture: gl.getUniformLocation(program, 'uTexture') + a_position: gl.getAttribLocation(program, 'a_position'), + a_texCoord: gl.getAttribLocation(program, 'a_texCoord'), + u_colorMatrix: gl.getUniformLocation(program, 'u_colorMatrix'), + u_texCoordMatrix: gl.getUniformLocation(program, 'u_texCoordMatrix'), + u_projectionMatrix: gl.getUniformLocation(program, 'u_projectionMatrix'), + u_opacity: gl.getUniformLocation(program, 'u_opacity'), + u_texture: gl.getUniformLocation(program, 'u_texture') }; } @@ -546,13 +546,13 @@ ol.renderer.webgl.Map.prototype.renderFrame = function(frameState) { gl.bindBuffer(goog.webgl.ARRAY_BUFFER, this.arrayBuffer_); } - gl.enableVertexAttribArray(this.locations_.aPosition); + gl.enableVertexAttribArray(this.locations_.a_position); gl.vertexAttribPointer( - this.locations_.aPosition, 2, goog.webgl.FLOAT, false, 16, 0); - gl.enableVertexAttribArray(this.locations_.aTexCoord); + this.locations_.a_position, 2, goog.webgl.FLOAT, false, 16, 0); + gl.enableVertexAttribArray(this.locations_.a_texCoord); gl.vertexAttribPointer( - this.locations_.aTexCoord, 2, goog.webgl.FLOAT, false, 16, 8); - gl.uniform1i(this.locations_.uTexture, 0); + this.locations_.a_texCoord, 2, goog.webgl.FLOAT, false, 16, 8); + gl.uniform1i(this.locations_.u_texture, 0); goog.array.forEach(frameState.layersArray, function(layer) { var layerState = frameState.layerStates[goog.getUid(layer)]; @@ -561,14 +561,14 @@ ol.renderer.webgl.Map.prototype.renderFrame = function(frameState) { } var layerRenderer = this.getLayerRenderer(layer); gl.uniformMatrix4fv( - this.locations_.uTexCoordMatrix, false, + this.locations_.u_texCoordMatrix, false, layerRenderer.getTexCoordMatrix()); gl.uniformMatrix4fv( - this.locations_.uVertexCoordMatrix, false, - layerRenderer.getVertexCoordMatrix()); + this.locations_.u_projectionMatrix, false, + layerRenderer.getProjectionMatrix()); gl.uniformMatrix4fv( - this.locations_.uColorMatrix, false, layerRenderer.getColorMatrix()); - gl.uniform1f(this.locations_.uOpacity, layer.getOpacity()); + this.locations_.u_colorMatrix, false, layerRenderer.getColorMatrix()); + gl.uniform1f(this.locations_.u_opacity, layer.getOpacity()); gl.bindTexture(goog.webgl.TEXTURE_2D, layerRenderer.getTexture()); gl.drawArrays(goog.webgl.TRIANGLE_STRIP, 0, 4); }, this); diff --git a/src/ol/renderer/webgl/webgltilelayerrenderer.js b/src/ol/renderer/webgl/webgltilelayerrenderer.js index f2a0219586..39d736c435 100644 --- a/src/ol/renderer/webgl/webgltilelayerrenderer.js +++ b/src/ol/renderer/webgl/webgltilelayerrenderer.js @@ -145,7 +145,7 @@ ol.renderer.webgl.TileLayer = function(mapRenderer, tileLayer) { * @private * @type {!goog.vec.Mat4.Number} */ - this.vertexCoordMatrix_ = goog.vec.Mat4.createNumberIdentity(); + this.projectionMatrix_ = goog.vec.Mat4.createNumberIdentity(); /** * @private @@ -246,8 +246,8 @@ ol.renderer.webgl.TileLayer.prototype.getTexture = function() { /** * @inheritDoc */ -ol.renderer.webgl.TileLayer.prototype.getVertexCoordMatrix = function() { - return this.vertexCoordMatrix_; +ol.renderer.webgl.TileLayer.prototype.getProjectionMatrix = function() { + return this.projectionMatrix_; }; diff --git a/test/spec/ol/renderer/webgl/imagelayer.test.js b/test/spec/ol/renderer/webgl/imagelayer.test.js index 62f3038827..82b869b6e7 100644 --- a/test/spec/ol/renderer/webgl/imagelayer.test.js +++ b/test/spec/ol/renderer/webgl/imagelayer.test.js @@ -1,7 +1,7 @@ goog.provide('ol.test.renderer.webgl.ImageLayer'); describe('ol.renderer.webgl.ImageLayer', function() { - describe('updateVertexCoordMatrix_', function() { + describe('updateProjectionMatrix_', function() { var map; var renderer; var canvasWidth; @@ -41,9 +41,9 @@ describe('ol.renderer.webgl.ImageLayer', function() { it('produces a correct matrix', function() { - renderer.updateVertexCoordMatrix_(canvasWidth, canvasHeight, + renderer.updateProjectionMatrix_(canvasWidth, canvasHeight, viewCenter, viewResolution, viewRotation, imageExtent); - var matrix = renderer.getVertexCoordMatrix(); + var matrix = renderer.getProjectionMatrix(); var input; var output = goog.vec.Vec4.createNumber();