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

Support image opacity

Browse Source
This commit is contained in:
Éric Lemoine
2014-11-03 16:16:57 +01:00
parent d7a992ba83
commit 209d39a460
4 changed files with 52 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
examples/icon-sprite-webgl.js
View File

@@ -9,9 +9,9 @@ goog.require('ol.style.Style');
var iconInfo = [
{size: [55, 55], offset: [0, 0]},
{size: [55, 55], offset: [110, 86]},
{size: [55, 86], offset: [55, 0]}
{size: [55, 55], offset: [0, 0], opacity: 1.0},
{size: [55, 55], offset: [110, 86], opacity: 0.75},
{size: [55, 86], offset: [55, 0], opacity: 0.5}
];
var i;
@@ -22,7 +22,8 @@ for (i = 0; i < iconCount; ++i) {
icons[i] = new ol.style.Icon({
src: 'data/Butterfly.png',
size: iconInfo[i].size,
offset: iconInfo[i].offset
offset: iconInfo[i].offset,
opacity: iconInfo[i].opacity
});
}

7
src/ol/render/webgl/webglimage.glsl
View File

@@ -4,11 +4,13 @@
//! COMMON
varying vec2 v_texCoord;
varying float v_opacity;
//! VERTEX
attribute vec2 a_position;
attribute vec2 a_texCoord;
attribute vec2 a_offsets;
attribute float a_opacity;
uniform mat4 u_projectionMatrix;
uniform mat2 u_sizeMatrix;
@@ -17,6 +19,7 @@ void main(void) {
vec2 offsets = u_sizeMatrix * a_offsets;
gl_Position = u_projectionMatrix * vec4(a_position, 0., 1.) + vec4(offsets, 0., 0.);
v_texCoord = a_texCoord;
v_opacity = a_opacity;
}
@@ -24,5 +27,7 @@ void main(void) {
uniform sampler2D u_image;
void main(void) {
gl_FragColor = texture2D(u_image, v_texCoord);
vec4 texColor = texture2D(u_image, v_texCoord);
gl_FragColor.rgb = texColor.rgb;
gl_FragColor.a = texColor.a * v_opacity;
}

26
src/ol/render/webgl/webglimageshader.js
View File

@@ -21,14 +21,14 @@ goog.addSingletonGetter(ol.render.webgl.imagereplay.shader.Fragment);
* @const
* @type {string}
*/
ol.render.webgl.imagereplay.shader.Fragment.DEBUG_SOURCE = 'precision mediump float;\nvarying vec2 v_texCoord;\n\nuniform sampler2D u_image;\n\nvoid main(void) {\n gl_FragColor = texture2D(u_image, v_texCoord);\n}\n';
ol.render.webgl.imagereplay.shader.Fragment.DEBUG_SOURCE = 'precision mediump float;\nvarying vec2 v_texCoord;\nvarying float v_opacity;\n\nuniform sampler2D u_image;\n\nvoid main(void) {\n vec4 texColor = texture2D(u_image, v_texCoord);\n gl_FragColor.rgb = texColor.rgb;\n gl_FragColor.a = texColor.a * v_opacity;\n}\n';
/**
* @const
* @type {string}
*/
ol.render.webgl.imagereplay.shader.Fragment.OPTIMIZED_SOURCE = 'precision mediump float;varying vec2 a;uniform sampler2D g;void main(void){gl_FragColor=texture2D(g,a);}';
ol.render.webgl.imagereplay.shader.Fragment.OPTIMIZED_SOURCE = 'precision mediump float;varying vec2 a;varying float b;uniform sampler2D i;void main(void){vec4 texColor=texture2D(i,a);gl_FragColor.rgb=texColor.rgb;gl_FragColor.a=texColor.a*b;}';
/**
@@ -57,14 +57,14 @@ goog.addSingletonGetter(ol.render.webgl.imagereplay.shader.Vertex);
* @const
* @type {string}
*/
ol.render.webgl.imagereplay.shader.Vertex.DEBUG_SOURCE = 'varying vec2 v_texCoord;\n\nattribute vec2 a_position;\nattribute vec2 a_texCoord;\nattribute vec2 a_offsets;\n\nuniform mat4 u_projectionMatrix;\nuniform mat2 u_sizeMatrix;\n\nvoid main(void) {\n vec2 offsets = u_sizeMatrix * a_offsets;\n gl_Position = u_projectionMatrix * vec4(a_position, 0., 1.) + vec4(offsets, 0., 0.);\n v_texCoord = a_texCoord;\n}\n\n\n';
ol.render.webgl.imagereplay.shader.Vertex.DEBUG_SOURCE = 'varying vec2 v_texCoord;\nvarying float v_opacity;\n\nattribute vec2 a_position;\nattribute vec2 a_texCoord;\nattribute vec2 a_offsets;\nattribute float a_opacity;\n\nuniform mat4 u_projectionMatrix;\nuniform mat2 u_sizeMatrix;\n\nvoid main(void) {\n vec2 offsets = u_sizeMatrix * a_offsets;\n gl_Position = u_projectionMatrix * vec4(a_position, 0., 1.) + vec4(offsets, 0., 0.);\n v_texCoord = a_texCoord;\n v_opacity = a_opacity;\n}\n\n\n';
/**
* @const
* @type {string}
*/
ol.render.webgl.imagereplay.shader.Vertex.OPTIMIZED_SOURCE = 'varying vec2 a;attribute vec2 b;attribute vec2 c;attribute vec2 d;uniform mat4 e;uniform mat2 f;void main(void){vec2 offsets=f*d;gl_Position=e*vec4(b,0.,1.)+vec4(offsets,0.,0.);a=c;}';
ol.render.webgl.imagereplay.shader.Vertex.OPTIMIZED_SOURCE = 'varying vec2 a;varying float b;attribute vec2 c;attribute vec2 d;attribute vec2 e;attribute float f;uniform mat4 g;uniform mat2 h;void main(void){vec2 offsets=h*e;gl_Position=g*vec4(c,0.,1.)+vec4(offsets,0.,0.);a=d;b=f;}';
/**
@@ -89,35 +89,41 @@ ol.render.webgl.imagereplay.shader.Locations = function(gl, program) {
* @type {WebGLUniformLocation}
*/
this.u_image = gl.getUniformLocation(
program, goog.DEBUG ? 'u_image' : 'g');
program, goog.DEBUG ? 'u_image' : 'i');
/**
* @type {WebGLUniformLocation}
*/
this.u_projectionMatrix = gl.getUniformLocation(
program, goog.DEBUG ? 'u_projectionMatrix' : 'e');
program, goog.DEBUG ? 'u_projectionMatrix' : 'g');
/**
* @type {WebGLUniformLocation}
*/
this.u_sizeMatrix = gl.getUniformLocation(
program, goog.DEBUG ? 'u_sizeMatrix' : 'f');
program, goog.DEBUG ? 'u_sizeMatrix' : 'h');
/**
* @type {number}
*/
this.a_offsets = gl.getAttribLocation(
program, goog.DEBUG ? 'a_offsets' : 'd');
program, goog.DEBUG ? 'a_offsets' : 'e');
/**
* @type {number}
*/
this.a_opacity = gl.getAttribLocation(
program, goog.DEBUG ? 'a_opacity' : 'f');
/**
* @type {number}
*/
this.a_position = gl.getAttribLocation(
program, goog.DEBUG ? 'a_position' : 'b');
program, goog.DEBUG ? 'a_position' : 'c');
/**
* @type {number}
*/
this.a_texCoord = gl.getAttribLocation(
program, goog.DEBUG ? 'a_texCoord' : 'c');
program, goog.DEBUG ? 'a_texCoord' : 'd');
};

30
src/ol/render/webgl/webglreplay.js
View File

@@ -91,6 +91,12 @@ ol.render.webgl.ImageReplay = function(tolerance) {
*/
this.locations_ = null;
/**
* @private
* @type {number|undefined}
*/
this.opacity_ = undefined;
/**
* @type {number|undefined}
* @private
@@ -182,6 +188,7 @@ ol.render.webgl.ImageReplay.prototype.drawCoordinates_ =
goog.asserts.assert(goog.isDef(this.height_));
goog.asserts.assert(goog.isDef(this.imageHeight_));
goog.asserts.assert(goog.isDef(this.imageWidth_));
goog.asserts.assert(goog.isDef(this.opacity_));
goog.asserts.assert(goog.isDef(this.originX_));
goog.asserts.assert(goog.isDef(this.originY_));
goog.asserts.assert(goog.isDef(this.width_));
@@ -190,6 +197,7 @@ ol.render.webgl.ImageReplay.prototype.drawCoordinates_ =
var height = this.height_;
var imageHeight = this.imageHeight_;
var imageWidth = this.imageWidth_;
var opacity = this.opacity_;
var originX = this.originX_;
var originY = this.originY_;
var width = this.width_;
@@ -200,9 +208,9 @@ ol.render.webgl.ImageReplay.prototype.drawCoordinates_ =
x = flatCoordinates[i];
y = flatCoordinates[i + 1];
n = numVertices / 6;
n = numVertices / 7;
// 4 vertices per coordinate, with 6 values per vertex
// 4 vertices per coordinate, with 7 values per vertex
this.vertices_[numVertices++] = x;
this.vertices_[numVertices++] = y;
@@ -210,6 +218,7 @@ ol.render.webgl.ImageReplay.prototype.drawCoordinates_ =
this.vertices_[numVertices++] = -2 * (height - anchorY);
this.vertices_[numVertices++] = (originX + width) / imageWidth;
this.vertices_[numVertices++] = (originY + height) / imageHeight;
this.vertices_[numVertices++] = opacity;
this.vertices_[numVertices++] = x;
this.vertices_[numVertices++] = y;
@@ -217,6 +226,7 @@ ol.render.webgl.ImageReplay.prototype.drawCoordinates_ =
this.vertices_[numVertices++] = -2 * (height - anchorY);
this.vertices_[numVertices++] = originX / imageWidth;
this.vertices_[numVertices++] = (originY + height) / imageHeight;
this.vertices_[numVertices++] = opacity;
this.vertices_[numVertices++] = x;
this.vertices_[numVertices++] = y;
@@ -224,6 +234,7 @@ ol.render.webgl.ImageReplay.prototype.drawCoordinates_ =
this.vertices_[numVertices++] = 2 * anchorY;
this.vertices_[numVertices++] = originX / imageWidth;
this.vertices_[numVertices++] = originY / imageHeight;
this.vertices_[numVertices++] = opacity;
this.vertices_[numVertices++] = x;
this.vertices_[numVertices++] = y;
@@ -231,6 +242,7 @@ ol.render.webgl.ImageReplay.prototype.drawCoordinates_ =
this.vertices_[numVertices++] = 2 * anchorY;
this.vertices_[numVertices++] = (originX + width) / imageWidth;
this.vertices_[numVertices++] = originY / imageHeight;
this.vertices_[numVertices++] = opacity;
this.indices_[numIndices++] = n;
this.indices_[numIndices++] = n + 1;
@@ -371,6 +383,7 @@ ol.render.webgl.ImageReplay.prototype.finish = function(context) {
this.imageHeight_ = undefined;
this.imageWidth_ = undefined;
this.indices_ = null;
this.opacity_ = undefined;
this.originX_ = undefined;
this.originY_ = undefined;
this.vertices_ = null;
@@ -415,15 +428,19 @@ ol.render.webgl.ImageReplay.prototype.replay = function(context,
gl.enableVertexAttribArray(locations.a_position);
gl.vertexAttribPointer(locations.a_position, 2, goog.webgl.FLOAT,
false, 24, 0);
false, 28, 0);
gl.enableVertexAttribArray(locations.a_offsets);
gl.vertexAttribPointer(locations.a_offsets, 2, goog.webgl.FLOAT,
false, 24, 8);
false, 28, 8);
gl.enableVertexAttribArray(locations.a_texCoord);
gl.vertexAttribPointer(locations.a_texCoord, 2, goog.webgl.FLOAT,
false, 24, 16);
false, 28, 16);
gl.enableVertexAttribArray(locations.a_opacity);
gl.vertexAttribPointer(locations.a_opacity, 1, goog.webgl.FLOAT,
false, 28, 24);
gl.uniformMatrix4fv(locations.u_projectionMatrix, false, transform);
gl.uniformMatrix2fv(locations.u_sizeMatrix, false,
@@ -461,6 +478,8 @@ ol.render.webgl.ImageReplay.prototype.setImageStyle = function(imageStyle) {
// FIXME getImageSize does not exist for circles
var imageSize = imageStyle.getImageSize();
goog.asserts.assert(!goog.isNull(imageSize));
var opacity = imageStyle.getOpacity();
goog.asserts.assert(goog.isDef(opacity));
var origin = imageStyle.getOrigin();
goog.asserts.assert(!goog.isNull(origin));
var size = imageStyle.getSize();
@@ -482,6 +501,7 @@ ol.render.webgl.ImageReplay.prototype.setImageStyle = function(imageStyle) {
this.height_ = size[1];
this.imageHeight_ = imageSize[1];
this.imageWidth_ = imageSize[0];
this.opacity_ = opacity;
this.originX_ = origin[0];
this.originY_ = origin[1];
this.width_ = size[0];