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

Merge pull request #10 from elemoine/icon-sprite

Browse Source 
[webgl-point] Make WebGL image replay support icon sprites
This commit is contained in:
Éric Lemoine
2014-10-31 14:52:24 +01:00
parent bbea205a9c f332cdacf1
commit ed1be0d4e7
4 changed files with 247 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/data/Butterfly.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 63 KiB

examples/icon-sprite-webgl.html
+52
View File
@@ -0,0 +1,52 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<link rel="stylesheet" href="../css/ol.css" type="text/css">
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
<title>Icon sprites with WebGL example</title>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<h4 id="title">Icon sprite with WebGL example</h4>
<p id="shortdesc">Icon sprite with WebGL.</p>
<div id="docs">
<p>See the <a href="icon-sprite-webgl.js" target="_blank">icon-sprite-webgl.js source</a> to see how this is done.</p>
</div>
<div id="tags">webgl, icon, sprite, vector, point</div>
</div>
</div>
</div>
<script src="../resources/jquery.min.js" type="text/javascript"></script>
<script src="../resources/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
<script src="loader.js?id=icon-sprite-webgl" type="text/javascript"></script>
</body>
</html>
examples/icon-sprite-webgl.js
+60
View File
@@ -0,0 +1,60 @@
goog.require('ol.Feature');
goog.require('ol.Map');
goog.require('ol.View');
goog.require('ol.geom.Point');
goog.require('ol.layer.Vector');
goog.require('ol.source.Vector');
goog.require('ol.style.Icon');
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]}
];
var i;
var iconCount = iconInfo.length;
var icons = new Array(iconCount);
for (i = 0; i < iconCount; ++i) {
icons[i] = new ol.style.Icon({
src: 'data/Butterfly.png',
size: iconInfo[i].size,
offset: iconInfo[i].offset
});
}
var featureCount = 10000;
var features = new Array(featureCount);
var feature, geometry;
var e = 25000000;
for (i = 0; i < featureCount; ++i) {
geometry = new ol.geom.Point(
[2 * e * Math.random() - e, 2 * e * Math.random() - e]);
feature = new ol.Feature(geometry);
feature.setStyle(
new ol.style.Style({
image: icons[i % iconCount]
})
);
features[i] = feature;
}
var vectorSource = new ol.source.Vector({
features: features
});
var vector = new ol.layer.Vector({
source: vectorSource
});
var map = new ol.Map({
renderer: 'webgl',
layers: [vector],
target: document.getElementById('map'),
view: new ol.View({
center: [0, 0],
zoom: 5
})
});
src/ol/render/webgl/webglreplay.js
+135 -52
View File
@@ -41,18 +41,18 @@ ol.render.webgl.Replay = function(tolerance) {
*/ */
this.indicesBuffer = null; this.indicesBuffer = null;
/**
* @protected
* @type {WebGLTexture}
*/
this.texture = null;
/** /**
* @private * @private
* @type {ol.Extent} * @type {ol.Extent}
*/ */
this.extent_ = ol.extent.createEmpty(); this.extent_ = ol.extent.createEmpty();
/**
* @protected
* @type {Array.<Array.<*>>}
*/
this.textures = [];
}; };
@@ -96,15 +96,23 @@ ol.render.webgl.Replay.prototype.replay = function(context,
gl.vertexAttribPointer(texCoordAttribLocation, 2, goog.webgl.FLOAT, gl.vertexAttribPointer(texCoordAttribLocation, 2, goog.webgl.FLOAT,
false, 24, 16); false, 24, 16);
gl.bindTexture(goog.webgl.TEXTURE_2D, this.texture);
gl.uniformMatrix4fv(projectionMatrixLocation, false, transform); gl.uniformMatrix4fv(projectionMatrixLocation, false, transform);
gl.uniformMatrix2fv(sizeMatrixLocation, false, gl.uniformMatrix2fv(sizeMatrixLocation, false,
new Float32Array([1 / size[0], 0.0, 0.0, 1 / size[1]])); new Float32Array([1 / size[0], 0.0, 0.0, 1 / size[1]]));
gl.bindBuffer(goog.webgl.ELEMENT_ARRAY_BUFFER, this.indicesBuffer); gl.bindBuffer(goog.webgl.ELEMENT_ARRAY_BUFFER, this.indicesBuffer);
gl.drawElements(goog.webgl.TRIANGLES, this.indices.length,
goog.webgl.UNSIGNED_SHORT, 0); var i;
var ii = this.textures.length;
var texture;
for (i = 0; i < ii; ++i) {
texture = this.textures[i];
gl.bindTexture(goog.webgl.TEXTURE_2D,
/** @type {WebGLTexture} */ (texture[0]));
gl.drawElements(goog.webgl.TRIANGLES, /** @type {number} */ (texture[1]),
goog.webgl.UNSIGNED_SHORT, 0);
}
}; };
@@ -215,9 +223,33 @@ ol.render.webgl.ImageReplay = function(tolerance) {
/** /**
* @private * @private
* @type {HTMLCanvasElement|HTMLVideoElement|Image} * @type {Array.<Array.<*>>}
*/ */
this.image_ = null; this.images_ = [];
/**
* @private
* @type {number|undefined}
*/
this.imageHeight_ = undefined;
/**
* @private
* @type {number|undefined}
*/
this.imageWidth_ = undefined;
/**
* @private
* @type {number|undefined}
*/
this.originX_ = undefined;
/**
* @private
* @type {number|undefined}
*/
this.originY_ = undefined;
/** /**
* @private * @private
@@ -239,13 +271,21 @@ goog.inherits(ol.render.webgl.ImageReplay, ol.render.webgl.Replay);
*/ */
ol.render.webgl.ImageReplay.prototype.drawCoordinates_ = ol.render.webgl.ImageReplay.prototype.drawCoordinates_ =
function(flatCoordinates, offset, end, stride) { function(flatCoordinates, offset, end, stride) {
goog.asserts.assert(goog.isDef(this.width_));
goog.asserts.assert(goog.isDef(this.height_)); 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.originX_));
goog.asserts.assert(goog.isDef(this.originY_));
goog.asserts.assert(goog.isDef(this.width_));
var height = this.height_;
var imageHeight = this.imageHeight_;
var imageWidth = this.imageWidth_;
var originX = this.originX_;
var originY = this.originY_;
var width = this.width_;
var numIndices = this.indices.length; var numIndices = this.indices.length;
var numVertices = this.vertices.length; var numVertices = this.vertices.length;
var i, x, y, n; var i, x, y, n;
var ox = this.width_;
var oy = this.height_;
for (i = offset; i < end; i += stride) { for (i = offset; i < end; i += stride) {
x = flatCoordinates[i]; x = flatCoordinates[i];
y = flatCoordinates[i + 1]; y = flatCoordinates[i + 1];
@@ -256,31 +296,31 @@ ol.render.webgl.ImageReplay.prototype.drawCoordinates_ =
this.vertices[numVertices++] = x; this.vertices[numVertices++] = x;
this.vertices[numVertices++] = y; this.vertices[numVertices++] = y;
this.vertices[numVertices++] = -ox; this.vertices[numVertices++] = -width;
this.vertices[numVertices++] = -oy; this.vertices[numVertices++] = -height;
this.vertices[numVertices++] = 1; this.vertices[numVertices++] = (originX + width) / imageWidth;
this.vertices[numVertices++] = 1; this.vertices[numVertices++] = (originY + height) / imageHeight;
this.vertices[numVertices++] = x; this.vertices[numVertices++] = x;
this.vertices[numVertices++] = y; this.vertices[numVertices++] = y;
this.vertices[numVertices++] = ox; this.vertices[numVertices++] = width;
this.vertices[numVertices++] = -oy; this.vertices[numVertices++] = -height;
this.vertices[numVertices++] = 0; this.vertices[numVertices++] = originX / imageWidth;
this.vertices[numVertices++] = 1; this.vertices[numVertices++] = (originY + height) / imageHeight;
this.vertices[numVertices++] = x; this.vertices[numVertices++] = x;
this.vertices[numVertices++] = y; this.vertices[numVertices++] = y;
this.vertices[numVertices++] = ox; this.vertices[numVertices++] = width;
this.vertices[numVertices++] = oy; this.vertices[numVertices++] = height;
this.vertices[numVertices++] = 0; this.vertices[numVertices++] = originX / imageWidth;
this.vertices[numVertices++] = 0; this.vertices[numVertices++] = originY / imageHeight;
this.vertices[numVertices++] = x; this.vertices[numVertices++] = x;
this.vertices[numVertices++] = y; this.vertices[numVertices++] = y;
this.vertices[numVertices++] = -ox; this.vertices[numVertices++] = -width;
this.vertices[numVertices++] = oy; this.vertices[numVertices++] = height;
this.vertices[numVertices++] = 1; this.vertices[numVertices++] = (originX + width) / imageWidth;
this.vertices[numVertices++] = 0; this.vertices[numVertices++] = originY / imageHeight;
this.indices[numIndices++] = n; this.indices[numIndices++] = n;
this.indices[numIndices++] = n + 1; this.indices[numIndices++] = n + 1;
@@ -325,6 +365,12 @@ ol.render.webgl.ImageReplay.prototype.drawMultiPointGeometry =
*/ */
ol.render.webgl.ImageReplay.prototype.finish = function(context) { ol.render.webgl.ImageReplay.prototype.finish = function(context) {
var gl = context.getGL(); var gl = context.getGL();
goog.asserts.assert(this.images_.length > 0);
var current = this.images_[this.images_.length - 1];
goog.asserts.assert(!goog.isDef(current[1]));
current[1] = this.indices.length;
this.verticesBuffer = gl.createBuffer(); this.verticesBuffer = gl.createBuffer();
gl.bindBuffer(goog.webgl.ARRAY_BUFFER, this.verticesBuffer); gl.bindBuffer(goog.webgl.ARRAY_BUFFER, this.verticesBuffer);
gl.bufferData(goog.webgl.ARRAY_BUFFER, gl.bufferData(goog.webgl.ARRAY_BUFFER,
@@ -334,22 +380,38 @@ ol.render.webgl.ImageReplay.prototype.finish = function(context) {
gl.bufferData(goog.webgl.ELEMENT_ARRAY_BUFFER, gl.bufferData(goog.webgl.ELEMENT_ARRAY_BUFFER,
new Uint16Array(this.indices), goog.webgl.STATIC_DRAW); new Uint16Array(this.indices), goog.webgl.STATIC_DRAW);
this.texture = gl.createTexture(); goog.asserts.assert(this.textures.length === 0);
gl.bindTexture(goog.webgl.TEXTURE_2D, this.texture);
gl.texParameteri(goog.webgl.TEXTURE_2D, var i;
goog.webgl.TEXTURE_WRAP_S, goog.webgl.CLAMP_TO_EDGE); var ii = this.images_.length;
gl.texParameteri(goog.webgl.TEXTURE_2D, var texture;
goog.webgl.TEXTURE_WRAP_T, goog.webgl.CLAMP_TO_EDGE); for (i = 0; i < ii; ++i) {
gl.texParameteri(goog.webgl.TEXTURE_2D, var image =
goog.webgl.TEXTURE_MIN_FILTER, goog.webgl.NEAREST); /** @type {HTMLCanvasElement|HTMLImageElement|HTMLVideoElement} */
gl.texParameteri(goog.webgl.TEXTURE_2D, (this.images_[i][0]);
goog.webgl.TEXTURE_MAG_FILTER, goog.webgl.NEAREST); current = this.images_[i];
gl.texImage2D(goog.webgl.TEXTURE_2D, 0, goog.webgl.RGBA, goog.webgl.RGBA, texture = gl.createTexture();
goog.webgl.UNSIGNED_BYTE, this.image_); gl.bindTexture(goog.webgl.TEXTURE_2D, 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, image);
this.textures[i] = [texture, this.images_[i][1]];
}
this.image_ = null;
this.width_ = undefined;
this.height_ = undefined; this.height_ = undefined;
this.images_.length = 0;
this.imageHeight_ = undefined;
this.imageWidth_ = undefined;
this.originX_ = undefined;
this.originY_ = undefined;
this.width_ = undefined;
}; };
@@ -365,15 +427,36 @@ ol.render.webgl.Replay.prototype.getExtent = function() {
* @inheritDoc * @inheritDoc
*/ */
ol.render.webgl.ImageReplay.prototype.setImageStyle = function(imageStyle) { ol.render.webgl.ImageReplay.prototype.setImageStyle = function(imageStyle) {
if (goog.isNull(this.image_)) { var image = imageStyle.getImage(1);
var image = imageStyle.getImage(1); goog.asserts.assert(!goog.isNull(image));
goog.asserts.assert(!goog.isNull(image)); // FIXME getImageSize does not exist for circles
var size = imageStyle.getSize(); var imageSize = imageStyle.getImageSize();
goog.asserts.assert(!goog.isNull(size)); goog.asserts.assert(!goog.isNull(imageSize));
this.image_ = image; var origin = imageStyle.getOrigin();
this.width_ = size[0]; goog.asserts.assert(!goog.isNull(origin));
this.height_ = size[1]; var size = imageStyle.getSize();
goog.asserts.assert(!goog.isNull(size));
if (this.images_.length === 0) {
this.images_.push([image, undefined]);
} else {
var current = this.images_[this.images_.length - 1];
var currentImage =
/** @type {HTMLCanvasElement|HTMLImageElement|HTMLVideoElement} */
(current[0]);
goog.asserts.assert(!goog.isDef(current[1]));
if (goog.getUid(currentImage) != goog.getUid(image)) {
current[1] = this.indices.length;
this.images_.push([image, undefined]);
}
} }
this.height_ = size[1];
this.imageHeight_ = imageSize[1];
this.imageWidth_ = imageSize[0];
this.originX_ = origin[0];
this.originY_ = origin[1];
this.width_ = size[0];
}; };