ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Rename WebGL variables to match CSS shaders specification

Browse Source 
See https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.htm
This commit is contained in:
Tom Payne
2013-03-04 19:45:42 +01:00
parent ad17c2ba90
commit 08dbeed23f
5 changed files with 57 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/ol/renderer/webgl/webglimagelayerrenderer.js
View File

@@ -45,7 +45,7 @@ ol.renderer.webgl.ImageLayer = function(mapRenderer, imageLayer) {
* @private * @private
* @type {!goog.vec.Mat4.Number} * @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); goog.inherits(ol.renderer.webgl.ImageLayer, ol.renderer.webgl.Layer);
@@ -118,8 +118,8 @@ ol.renderer.webgl.ImageLayer.prototype.getTexture = function() {
/** /**
* @inheritDoc * @inheritDoc
*/ */
ol.renderer.webgl.ImageLayer.prototype.getVertexCoordMatrix = function() { ol.renderer.webgl.ImageLayer.prototype.getProjectionMatrix = function() {
return this.vertexCoordMatrix_; return this.projectionMatrix_;
}; };
@@ -187,7 +187,7 @@ ol.renderer.webgl.ImageLayer.prototype.renderFrame =
var canvas = this.getMapRenderer().getCanvas(); var canvas = this.getMapRenderer().getCanvas();
this.updateVertexCoordMatrix_(canvas.width, canvas.height, this.updateProjectionMatrix_(canvas.width, canvas.height,
viewCenter, viewResolution, viewRotation, image.getExtent()); viewCenter, viewResolution, viewRotation, image.getExtent());
// Translate and scale to flip the Y coord. // Translate and scale to flip the Y coord.
@@ -213,24 +213,24 @@ ol.renderer.webgl.ImageLayer.prototype.renderFrame =
* @param {number} viewRotation View rotation. * @param {number} viewRotation View rotation.
* @param {ol.Extent} imageExtent Image extent. * @param {ol.Extent} imageExtent Image extent.
*/ */
ol.renderer.webgl.ImageLayer.prototype.updateVertexCoordMatrix_ = ol.renderer.webgl.ImageLayer.prototype.updateProjectionMatrix_ =
function(canvasWidth, canvasHeight, viewCenter, function(canvasWidth, canvasHeight, viewCenter,
viewResolution, viewRotation, imageExtent) { viewResolution, viewRotation, imageExtent) {
var canvasExtentWidth = canvasWidth * viewResolution; var canvasExtentWidth = canvasWidth * viewResolution;
var canvasExtentHeight = canvasHeight * viewResolution; var canvasExtentHeight = canvasHeight * viewResolution;
var vertexCoordMatrix = this.vertexCoordMatrix_; var projectionMatrix = this.projectionMatrix_;
goog.vec.Mat4.makeIdentity(vertexCoordMatrix); goog.vec.Mat4.makeIdentity(projectionMatrix);
goog.vec.Mat4.scale(vertexCoordMatrix, goog.vec.Mat4.scale(projectionMatrix,
2 / canvasExtentWidth, 2 / canvasExtentHeight, 1); 2 / canvasExtentWidth, 2 / canvasExtentHeight, 1);
goog.vec.Mat4.rotateZ(vertexCoordMatrix, -viewRotation); goog.vec.Mat4.rotateZ(projectionMatrix, -viewRotation);
goog.vec.Mat4.translate(vertexCoordMatrix, goog.vec.Mat4.translate(projectionMatrix,
imageExtent.minX - viewCenter.x, imageExtent.minX - viewCenter.x,
imageExtent.minY - viewCenter.y, imageExtent.minY - viewCenter.y,
0); 0);
goog.vec.Mat4.scale(vertexCoordMatrix, goog.vec.Mat4.scale(projectionMatrix,
imageExtent.getWidth() / 2, imageExtent.getHeight() / 2, 1); imageExtent.getWidth() / 2, imageExtent.getHeight() / 2, 1);
goog.vec.Mat4.translate(vertexCoordMatrix, 1, 1, 0); goog.vec.Mat4.translate(projectionMatrix, 1, 1, 0);
}; };

2
src/ol/renderer/webgl/webgllayerrenderer.js
View File

@@ -100,7 +100,7 @@ ol.renderer.webgl.Layer.prototype.getTexture = goog.abstractMethod;
/** /**
* @return {!goog.vec.Mat4.Number} Matrix. * @return {!goog.vec.Mat4.Number} Matrix.
*/ */
ol.renderer.webgl.Layer.prototype.getVertexCoordMatrix = goog.abstractMethod; ol.renderer.webgl.Layer.prototype.getProjectionMatrix = goog.abstractMethod;
/** /**

76
src/ol/renderer/webgl/webglmaprenderer.js
View File

@@ -48,17 +48,17 @@ ol.renderer.webgl.map.shader.Fragment = function() {
goog.base(this, [ goog.base(this, [
'precision mediump float;', 'precision mediump float;',
'', '',
'uniform mat4 uColorMatrix;', 'uniform mat4 u_colorMatrix;',
'uniform float uOpacity;', 'uniform float u_opacity;',
'uniform sampler2D uTexture;', 'uniform sampler2D u_texture;',
'', '',
'varying vec2 vTexCoord;', 'varying vec2 v_texCoord;',
'', '',
'void main(void) {', 'void main(void) {',
'', '',
' vec4 texColor = texture2D(uTexture, vTexCoord);', ' vec4 texColor = texture2D(u_texture, v_texCoord);',
' vec4 color = uColorMatrix * vec4(texColor.rgb, 1.);', ' vec4 color = u_colorMatrix * vec4(texColor.rgb, 1.);',
' color.a = texColor.a * uOpacity;', ' color.a = texColor.a * u_opacity;',
'', '',
' gl_FragColor = color;', ' gl_FragColor = color;',
'', '',
@@ -77,17 +77,17 @@ goog.addSingletonGetter(ol.renderer.webgl.map.shader.Fragment);
*/ */
ol.renderer.webgl.map.shader.Vertex = function() { ol.renderer.webgl.map.shader.Vertex = function() {
goog.base(this, [ goog.base(this, [
'attribute vec2 aPosition;', 'attribute vec2 a_position;',
'attribute vec2 aTexCoord;', 'attribute vec2 a_texCoord;',
'', '',
'uniform mat4 uTexCoordMatrix;', 'uniform mat4 u_texCoordMatrix;',
'uniform mat4 uVertexCoordMatrix;', 'uniform mat4 u_projectionMatrix;',
'', '',
'varying vec2 vTexCoord;', 'varying vec2 v_texCoord;',
'', '',
'void main(void) {', 'void main(void) {',
' gl_Position = uVertexCoordMatrix * vec4(aPosition, 0., 1.);', ' gl_Position = u_projectionMatrix * vec4(a_position, 0., 1.);',
' vTexCoord = (uTexCoordMatrix * vec4(aTexCoord, 0., 1.)).st;', ' v_texCoord = (u_texCoordMatrix * vec4(a_texCoord, 0., 1.)).st;',
'}' '}'
].join('\n')); ].join('\n'));
}; };
@@ -157,13 +157,13 @@ ol.renderer.webgl.Map = function(container, map) {
/** /**
* @private * @private
* @type {{aPosition: number, * @type {{a_position: number,
* aTexCoord: number, * a_texCoord: number,
* uColorMatrix: WebGLUniformLocation, * u_colorMatrix: WebGLUniformLocation,
* uOpacity: WebGLUniformLocation, * u_opacity: WebGLUniformLocation,
* uTexture: WebGLUniformLocation, * u_texture: WebGLUniformLocation,
* uTexCoordMatrix: WebGLUniformLocation, * u_texCoordMatrix: WebGLUniformLocation,
* uVertexCoordMatrix: WebGLUniformLocation}|null} * u_projectionMatrix: WebGLUniformLocation}|null}
*/ */
this.locations_ = null; this.locations_ = null;
@@ -522,13 +522,13 @@ ol.renderer.webgl.Map.prototype.renderFrame = function(frameState) {
gl.useProgram(program); gl.useProgram(program);
if (goog.isNull(this.locations_)) { if (goog.isNull(this.locations_)) {
this.locations_ = { this.locations_ = {
aPosition: gl.getAttribLocation(program, 'aPosition'), a_position: gl.getAttribLocation(program, 'a_position'),
aTexCoord: gl.getAttribLocation(program, 'aTexCoord'), a_texCoord: gl.getAttribLocation(program, 'a_texCoord'),
uColorMatrix: gl.getUniformLocation(program, 'uColorMatrix'), u_colorMatrix: gl.getUniformLocation(program, 'u_colorMatrix'),
uTexCoordMatrix: gl.getUniformLocation(program, 'uTexCoordMatrix'), u_texCoordMatrix: gl.getUniformLocation(program, 'u_texCoordMatrix'),
uVertexCoordMatrix: gl.getUniformLocation(program, 'uVertexCoordMatrix'), u_projectionMatrix: gl.getUniformLocation(program, 'u_projectionMatrix'),
uOpacity: gl.getUniformLocation(program, 'uOpacity'), u_opacity: gl.getUniformLocation(program, 'u_opacity'),
uTexture: gl.getUniformLocation(program, 'uTexture') 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.bindBuffer(goog.webgl.ARRAY_BUFFER, this.arrayBuffer_);
} }
gl.enableVertexAttribArray(this.locations_.aPosition); gl.enableVertexAttribArray(this.locations_.a_position);
gl.vertexAttribPointer( gl.vertexAttribPointer(
this.locations_.aPosition, 2, goog.webgl.FLOAT, false, 16, 0); this.locations_.a_position, 2, goog.webgl.FLOAT, false, 16, 0);
gl.enableVertexAttribArray(this.locations_.aTexCoord); gl.enableVertexAttribArray(this.locations_.a_texCoord);
gl.vertexAttribPointer( gl.vertexAttribPointer(
this.locations_.aTexCoord, 2, goog.webgl.FLOAT, false, 16, 8); this.locations_.a_texCoord, 2, goog.webgl.FLOAT, false, 16, 8);
gl.uniform1i(this.locations_.uTexture, 0); gl.uniform1i(this.locations_.u_texture, 0);
goog.array.forEach(frameState.layersArray, function(layer) { goog.array.forEach(frameState.layersArray, function(layer) {
var layerState = frameState.layerStates[goog.getUid(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); var layerRenderer = this.getLayerRenderer(layer);
gl.uniformMatrix4fv( gl.uniformMatrix4fv(
this.locations_.uTexCoordMatrix, false, this.locations_.u_texCoordMatrix, false,
layerRenderer.getTexCoordMatrix()); layerRenderer.getTexCoordMatrix());
gl.uniformMatrix4fv( gl.uniformMatrix4fv(
this.locations_.uVertexCoordMatrix, false, this.locations_.u_projectionMatrix, false,
layerRenderer.getVertexCoordMatrix()); layerRenderer.getProjectionMatrix());
gl.uniformMatrix4fv( gl.uniformMatrix4fv(
this.locations_.uColorMatrix, false, layerRenderer.getColorMatrix()); this.locations_.u_colorMatrix, false, layerRenderer.getColorMatrix());
gl.uniform1f(this.locations_.uOpacity, layer.getOpacity()); gl.uniform1f(this.locations_.u_opacity, layer.getOpacity());
gl.bindTexture(goog.webgl.TEXTURE_2D, layerRenderer.getTexture()); gl.bindTexture(goog.webgl.TEXTURE_2D, layerRenderer.getTexture());
gl.drawArrays(goog.webgl.TRIANGLE_STRIP, 0, 4); gl.drawArrays(goog.webgl.TRIANGLE_STRIP, 0, 4);
}, this); }, this);

6
src/ol/renderer/webgl/webgltilelayerrenderer.js
View File

@@ -145,7 +145,7 @@ ol.renderer.webgl.TileLayer = function(mapRenderer, tileLayer) {
* @private * @private
* @type {!goog.vec.Mat4.Number} * @type {!goog.vec.Mat4.Number}
*/ */
this.vertexCoordMatrix_ = goog.vec.Mat4.createNumberIdentity(); this.projectionMatrix_ = goog.vec.Mat4.createNumberIdentity();
/** /**
* @private * @private
@@ -246,8 +246,8 @@ ol.renderer.webgl.TileLayer.prototype.getTexture = function() {
/** /**
* @inheritDoc * @inheritDoc
*/ */
ol.renderer.webgl.TileLayer.prototype.getVertexCoordMatrix = function() { ol.renderer.webgl.TileLayer.prototype.getProjectionMatrix = function() {
return this.vertexCoordMatrix_; return this.projectionMatrix_;
}; };

6
test/spec/ol/renderer/webgl/imagelayer.test.js
View File

@@ -1,7 +1,7 @@
goog.provide('ol.test.renderer.webgl.ImageLayer'); goog.provide('ol.test.renderer.webgl.ImageLayer');
describe('ol.renderer.webgl.ImageLayer', function() { describe('ol.renderer.webgl.ImageLayer', function() {
describe('updateVertexCoordMatrix_', function() { describe('updateProjectionMatrix_', function() {
var map; var map;
var renderer; var renderer;
var canvasWidth; var canvasWidth;
@@ -41,9 +41,9 @@ describe('ol.renderer.webgl.ImageLayer', function() {
it('produces a correct matrix', function() { it('produces a correct matrix', function() {
renderer.updateVertexCoordMatrix_(canvasWidth, canvasHeight, renderer.updateProjectionMatrix_(canvasWidth, canvasHeight,
viewCenter, viewResolution, viewRotation, imageExtent); viewCenter, viewResolution, viewRotation, imageExtent);
var matrix = renderer.getVertexCoordMatrix(); var matrix = renderer.getProjectionMatrix();
var input; var input;
var output = goog.vec.Vec4.createNumber(); var output = goog.vec.Vec4.createNumber();