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

Use texture to draw points with WebGL

Browse Source
This commit is contained in:
Éric Lemoine
2014-10-24 16:57:21 +02:00
parent 2ecd2eadf7
commit bbea205a9c
5 changed files with 174 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -41,6 +41,12 @@ ol.render.webgl.Replay = function(tolerance) {
*/
this.indicesBuffer = null;
/**
* @protected
* @type {WebGLTexture}
*/
this.texture = null;
/**
* @private
* @type {ol.Extent}
@@ -50,66 +56,6 @@ ol.render.webgl.Replay = function(tolerance) {
};
/**
* @param {Array.<number>} flatCoordinates Flat coordinates.
* @param {number} offset Offset.
* @param {number} end End.
* @param {number} stride Stride.
* @param {boolean} close Close.
* @return {number} My end.
* @protected
*/
ol.render.webgl.Replay.prototype.appendFlatCoordinates =
function(flatCoordinates, offset, end, stride, close) {
var numIndices = this.indices.length;
var numVertices = this.vertices.length;
var i, x, y, n;
var oy = 0.05;
var ox = 0.01;
for (i = offset; i < end; i += stride) {
x = flatCoordinates[i];
y = flatCoordinates[i + 1];
n = numVertices / 4;
// create 4 vertices per coordinate
this.vertices[numVertices++] = x;
this.vertices[numVertices++] = y;
this.vertices[numVertices++] = -ox;
this.vertices[numVertices++] = -oy;
this.vertices[numVertices++] = x;
this.vertices[numVertices++] = y;
this.vertices[numVertices++] = ox;
this.vertices[numVertices++] = -oy;
this.vertices[numVertices++] = x;
this.vertices[numVertices++] = y;
this.vertices[numVertices++] = ox;
this.vertices[numVertices++] = oy;
this.vertices[numVertices++] = x;
this.vertices[numVertices++] = y;
this.vertices[numVertices++] = -ox;
this.vertices[numVertices++] = oy;
this.indices[numIndices++] = n;
this.indices[numIndices++] = n + 1;
this.indices[numIndices++] = n + 2;
this.indices[numIndices++] = n;
this.indices[numIndices++] = n + 2;
this.indices[numIndices++] = n + 3;
}
if (close) {
// FIXME
goog.asserts.fail();
}
return numVertices;
};
/**
* @param {ol.webgl.Context} context Context.
*/
@@ -120,30 +66,43 @@ ol.render.webgl.Replay.prototype.finish = goog.nullFunction;
* @param {ol.webgl.Context} context Context.
* @param {number} positionAttribLocation Attribute location for positions.
* @param {number} offsetsAttribLocation Attribute location for offsets.
* @param {WebGLUniformLocation} projectionMatrixLocation Projection
* matrix location.
* @param {number} texCoordAttribLocation Attribute location for texCoord.
* @param {WebGLUniformLocation} projectionMatrixLocation Proj matrix location.
* @param {WebGLUniformLocation} sizeMatrixLocation Size matrix location.
* @param {number} pixelRatio Pixel ratio.
* @param {Array.<number>} size Size.
* @param {goog.vec.Mat4.Number} transform Transform.
* @param {Object} skippedFeaturesHash Ids of features to skip.
* @return {T|undefined} Callback result.
* @template T
*/
ol.render.webgl.Replay.prototype.replay =
function(context, positionAttribLocation, offsetsAttribLocation,
projectionMatrixLocation, pixelRatio, transform,
skippedFeaturesHash) {
ol.render.webgl.Replay.prototype.replay = function(context,
positionAttribLocation, offsetsAttribLocation, texCoordAttribLocation,
projectionMatrixLocation, sizeMatrixLocation,
pixelRatio, size, transform, skippedFeaturesHash) {
var gl = context.getGL();
gl.bindBuffer(goog.webgl.ARRAY_BUFFER, this.verticesBuffer);
gl.enableVertexAttribArray(positionAttribLocation);
gl.vertexAttribPointer(positionAttribLocation, 2, goog.webgl.FLOAT,
false, 16, 0);
false, 24, 0);
gl.enableVertexAttribArray(offsetsAttribLocation);
gl.vertexAttribPointer(offsetsAttribLocation, 2, goog.webgl.FLOAT,
false, 16, 8);
false, 24, 8);
gl.enableVertexAttribArray(texCoordAttribLocation);
gl.vertexAttribPointer(texCoordAttribLocation, 2, goog.webgl.FLOAT,
false, 24, 16);
gl.bindTexture(goog.webgl.TEXTURE_2D, this.texture);
gl.uniformMatrix4fv(projectionMatrixLocation, false, transform);
gl.uniformMatrix2fv(sizeMatrixLocation, false,
new Float32Array([1 / size[0], 0.0, 0.0, 1 / size[1]]));
gl.bindBuffer(goog.webgl.ELEMENT_ARRAY_BUFFER, this.indicesBuffer);
gl.uniformMatrix4fv(projectionMatrixLocation, false, transform);
gl.drawElements(goog.webgl.TRIANGLES, this.indices.length,
goog.webgl.UNSIGNED_SHORT, 0);
};
@@ -248,6 +207,24 @@ ol.render.webgl.ImageReplay = function(tolerance) {
goog.base(this, tolerance);
/**
* @private
* @type {number|undefined}
*/
this.height_ = undefined;
/**
* @private
* @type {HTMLCanvasElement|HTMLVideoElement|Image}
*/
this.image_ = null;
/**
* @private
* @type {number|undefined}
*/
this.width_ = undefined;
};
goog.inherits(ol.render.webgl.ImageReplay, ol.render.webgl.Replay);
@@ -257,13 +234,63 @@ goog.inherits(ol.render.webgl.ImageReplay, ol.render.webgl.Replay);
* @param {number} offset Offset.
* @param {number} end End.
* @param {number} stride Stride.
* @private
* @return {number} My end.
* @private
*/
ol.render.webgl.ImageReplay.prototype.drawCoordinates_ =
function(flatCoordinates, offset, end, stride) {
return this.appendFlatCoordinates(
flatCoordinates, offset, end, stride, false);
goog.asserts.assert(goog.isDef(this.width_));
goog.asserts.assert(goog.isDef(this.height_));
var numIndices = this.indices.length;
var numVertices = this.vertices.length;
var i, x, y, n;
var ox = this.width_;
var oy = this.height_;
for (i = offset; i < end; i += stride) {
x = flatCoordinates[i];
y = flatCoordinates[i + 1];
n = numVertices / 6;
// create 4 vertices per coordinate
this.vertices[numVertices++] = x;
this.vertices[numVertices++] = y;
this.vertices[numVertices++] = -ox;
this.vertices[numVertices++] = -oy;
this.vertices[numVertices++] = 1;
this.vertices[numVertices++] = 1;
this.vertices[numVertices++] = x;
this.vertices[numVertices++] = y;
this.vertices[numVertices++] = ox;
this.vertices[numVertices++] = -oy;
this.vertices[numVertices++] = 0;
this.vertices[numVertices++] = 1;
this.vertices[numVertices++] = x;
this.vertices[numVertices++] = y;
this.vertices[numVertices++] = ox;
this.vertices[numVertices++] = oy;
this.vertices[numVertices++] = 0;
this.vertices[numVertices++] = 0;
this.vertices[numVertices++] = x;
this.vertices[numVertices++] = y;
this.vertices[numVertices++] = -ox;
this.vertices[numVertices++] = oy;
this.vertices[numVertices++] = 1;
this.vertices[numVertices++] = 0;
this.indices[numIndices++] = n;
this.indices[numIndices++] = n + 1;
this.indices[numIndices++] = n + 2;
this.indices[numIndices++] = n;
this.indices[numIndices++] = n + 2;
this.indices[numIndices++] = n + 3;
}
return numVertices;
};
@@ -306,6 +333,23 @@ ol.render.webgl.ImageReplay.prototype.finish = function(context) {
gl.bindBuffer(goog.webgl.ELEMENT_ARRAY_BUFFER, this.indicesBuffer);
gl.bufferData(goog.webgl.ELEMENT_ARRAY_BUFFER,
new Uint16Array(this.indices), goog.webgl.STATIC_DRAW);
this.texture = gl.createTexture();
gl.bindTexture(goog.webgl.TEXTURE_2D, this.texture);
gl.texParameteri(goog.webgl.TEXTURE_2D,
goog.webgl.TEXTURE_WRAP_S, goog.webgl.CLAMP_TO_EDGE);
gl.texParameteri(goog.webgl.TEXTURE_2D,
goog.webgl.TEXTURE_WRAP_T, goog.webgl.CLAMP_TO_EDGE);
gl.texParameteri(goog.webgl.TEXTURE_2D,
goog.webgl.TEXTURE_MIN_FILTER, goog.webgl.NEAREST);
gl.texParameteri(goog.webgl.TEXTURE_2D,
goog.webgl.TEXTURE_MAG_FILTER, goog.webgl.NEAREST);
gl.texImage2D(goog.webgl.TEXTURE_2D, 0, goog.webgl.RGBA, goog.webgl.RGBA,
goog.webgl.UNSIGNED_BYTE, this.image_);
this.image_ = null;
this.width_ = undefined;
this.height_ = undefined;
};
@@ -321,6 +365,15 @@ ol.render.webgl.Replay.prototype.getExtent = function() {
* @inheritDoc
*/
ol.render.webgl.ImageReplay.prototype.setImageStyle = function(imageStyle) {
if (goog.isNull(this.image_)) {
var image = imageStyle.getImage(1);
goog.asserts.assert(!goog.isNull(image));
var size = imageStyle.getSize();
goog.asserts.assert(!goog.isNull(size));
this.image_ = image;
this.width_ = size[0];
this.height_ = size[1];
}
};
@@ -387,28 +440,30 @@ ol.render.webgl.ReplayGroup.prototype.isEmpty = function() {
* @param {ol.webgl.Context} context Context.
* @param {number} positionAttribLocation Attribute location for positions.
* @param {number} offsetsAttribLocation Attribute location for offsets.
* @param {WebGLUniformLocation} projectionMatrixLocation Projection
* matrix location.
* @param {number} texCoordAttribLocation Attribute location for texCoord.
* @param {WebGLUniformLocation} projectionMatrixLocation Proj matrix location.
* @param {WebGLUniformLocation} sizeMatrixLocation Size matrix location.
* @param {ol.Extent} extent Extent.
* @param {number} pixelRatio Pixel ratio.
* @param {Array.<number>} size Size.
* @param {goog.vec.Mat4.Number} transform Transform.
* @param {Object} skippedFeaturesHash Ids of features to skip.
* @return {T|undefined} Callback result.
* @template T
*/
ol.render.webgl.ReplayGroup.prototype.replay = function(
context, positionAttribLocation, offsetsAttribLocation,
projectionMatrixLocation, extent, pixelRatio, transform,
skippedFeaturesHash) {
ol.render.webgl.ReplayGroup.prototype.replay = function(context,
positionAttribLocation, offsetsAttribLocation, texCoordAttribLocation,
projectionMatrixLocation, sizeMatrixLocation,
extent, pixelRatio, size, transform, skippedFeaturesHash) {
var i, ii, replay, result;
for (i = 0, ii = ol.render.REPLAY_ORDER.length; i < ii; ++i) {
replay = this.replays_[ol.render.REPLAY_ORDER[i]];
if (goog.isDef(replay) &&
ol.extent.intersects(extent, replay.getExtent())) {
result = replay.replay(
context, positionAttribLocation, offsetsAttribLocation,
projectionMatrixLocation, pixelRatio, transform,
skippedFeaturesHash);
result = replay.replay(context,
positionAttribLocation, offsetsAttribLocation, texCoordAttribLocation,
projectionMatrixLocation, sizeMatrixLocation,
pixelRatio, size, transform, skippedFeaturesHash);
if (result) {
return result;
}