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

Remove Atlas and AtlasManager

Browse Source
This commit is contained in:
Frederic Junod
2018-12-14 11:35:46 +01:00
parent f948577a1a
commit 1bb1e3c542
10 changed files with 18 additions and 883 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/ol/style.js
-3
View File
@@ -2,9 +2,6 @@
* @module ol/style
*/
export {default as Atlas} from './style/Atlas.js';
export {default as AtlasManager} from './style/AtlasManager.js';
export {default as Circle} from './style/Circle.js';
export {default as Fill} from './style/Fill.js';
export {default as Icon} from './style/Icon.js';
src/ol/style/Atlas.js
-206
View File
@@ -1,206 +0,0 @@
/**
* @module ol/style/Atlas
*/
import {createCanvasContext2D} from '../dom.js';
/**
* @typedef {Object} AtlasBlock
* @property {number} x
* @property {number} y
* @property {number} width
* @property {number} height
*/
/**
* Provides information for an image inside an atlas.
* `offsetX` and `offsetY` are the position of the image inside the atlas image `image`.
* @typedef {Object} AtlasInfo
* @property {number} offsetX
* @property {number} offsetY
* @property {HTMLCanvasElement} image
*/
/**
* @classesc
* This class facilitates the creation of image atlases.
*
* Images added to an atlas will be rendered onto a single
* atlas canvas. The distribution of images on the canvas is
* managed with the bin packing algorithm described in:
* http://www.blackpawn.com/texts/lightmaps/
*
* @param {number} size The size in pixels of the sprite image.
* @param {number} space The space in pixels between images.
* Because texture coordinates are float values, the edges of
* images might not be completely correct (in a way that the
* edges overlap when being rendered). To avoid this we add a
* padding around each image.
*/
class Atlas {
/**
* @param {number} size The size in pixels of the sprite image.
* @param {number} space The space in pixels between images.
* Because texture coordinates are float values, the edges of
* images might not be completely correct (in a way that the
* edges overlap when being rendered). To avoid this we add a
* padding around each image.
*/
constructor(size, space) {
/**
* @private
* @type {number}
*/
this.space_ = space;
/**
* @private
* @type {Array<AtlasBlock>}
*/
this.emptyBlocks_ = [{x: 0, y: 0, width: size, height: size}];
/**
* @private
* @type {Object<string, AtlasInfo>}
*/
this.entries_ = {};
/**
* @private
* @type {CanvasRenderingContext2D}
*/
this.context_ = createCanvasContext2D(size, size);
/**
* @private
* @type {HTMLCanvasElement}
*/
this.canvas_ = this.context_.canvas;
}
/**
* @param {string} id The identifier of the entry to check.
* @return {?AtlasInfo} The atlas info.
*/
get(id) {
return this.entries_[id] || null;
}
/**
* @param {string} id The identifier of the entry to add.
* @param {number} width The width.
* @param {number} height The height.
* @param {function(CanvasRenderingContext2D, number, number): void} renderCallback
* Called to render the new image onto an atlas image.
* @param {Object=} opt_this Value to use as `this` when executing
* `renderCallback`.
* @return {?AtlasInfo} The position and atlas image for the entry.
*/
add(id, width, height, renderCallback, opt_this) {
for (let i = 0, ii = this.emptyBlocks_.length; i < ii; ++i) {
const block = this.emptyBlocks_[i];
if (block.width >= width + this.space_ &&
block.height >= height + this.space_) {
// we found a block that is big enough for our entry
const entry = {
offsetX: block.x + this.space_,
offsetY: block.y + this.space_,
image: this.canvas_
};
this.entries_[id] = entry;
// render the image on the atlas image
renderCallback.call(opt_this, this.context_,
block.x + this.space_, block.y + this.space_);
// split the block after the insertion, either horizontally or vertically
this.split_(i, block, width + this.space_, height + this.space_);
return entry;
}
}
// there is no space for the new entry in this atlas
return null;
}
/**
* @private
* @param {number} index The index of the block.
* @param {AtlasBlock} block The block to split.
* @param {number} width The width of the entry to insert.
* @param {number} height The height of the entry to insert.
*/
split_(index, block, width, height) {
const deltaWidth = block.width - width;
const deltaHeight = block.height - height;
/** @type {AtlasBlock} */
let newBlock1;
/** @type {AtlasBlock} */
let newBlock2;
if (deltaWidth > deltaHeight) {
// split vertically
// block right of the inserted entry
newBlock1 = {
x: block.x + width,
y: block.y,
width: block.width - width,
height: block.height
};
// block below the inserted entry
newBlock2 = {
x: block.x,
y: block.y + height,
width: width,
height: block.height - height
};
this.updateBlocks_(index, newBlock1, newBlock2);
} else {
// split horizontally
// block right of the inserted entry
newBlock1 = {
x: block.x + width,
y: block.y,
width: block.width - width,
height: height
};
// block below the inserted entry
newBlock2 = {
x: block.x,
y: block.y + height,
width: block.width,
height: block.height - height
};
this.updateBlocks_(index, newBlock1, newBlock2);
}
}
/**
* Remove the old block and insert new blocks at the same array position.
* The new blocks are inserted at the same position, so that splitted
* blocks (that are potentially smaller) are filled first.
* @private
* @param {number} index The index of the block to remove.
* @param {AtlasBlock} newBlock1 The 1st block to add.
* @param {AtlasBlock} newBlock2 The 2nd block to add.
*/
updateBlocks_(index, newBlock1, newBlock2) {
const args = /** @type {Array<*>} */ ([index, 1]);
if (newBlock1.width > 0 && newBlock1.height > 0) {
args.push(newBlock1);
}
if (newBlock2.width > 0 && newBlock2.height > 0) {
args.push(newBlock2);
}
this.emptyBlocks_.splice.apply(this.emptyBlocks_, args);
}
}
export default Atlas;
src/ol/style/AtlasManager.js
-250
View File
@@ -1,250 +0,0 @@
/**
* @module ol/style/AtlasManager
*/
import {MAX_TEXTURE_SIZE as WEBGL_MAX_TEXTURE_SIZE} from '../webgl.js';
import {VOID} from '../functions.js';
import Atlas from './Atlas.js';
/**
* @typedef {Object} Options
* @property {number} [initialSize=256] The size in pixels of the first atlas image.
* @property {number} [maxSize] The maximum size in pixels of atlas images. Default is
* `webgl/MAX_TEXTURE_SIZE` or 2048 if WebGL is not supported.
* @property {number} [space=1] The space in pixels between images.
*/
/**
* Provides information for an image inside an atlas manager.
* `offsetX` and `offsetY` is the position of the image inside
* the atlas image `image` and the position of the hit-detection image
* inside the hit-detection atlas image `hitImage`.
* @typedef {Object} AtlasManagerInfo
* @property {number} offsetX
* @property {number} offsetY
* @property {HTMLCanvasElement} image
* @property {HTMLCanvasElement} hitImage
*/
/**
* The size in pixels of the first atlas image.
* @type {number}
*/
const INITIAL_ATLAS_SIZE = 256;
/**
* The maximum size in pixels of atlas images.
* @type {number}
*/
const MAX_ATLAS_SIZE = -1;
/**
* @classdesc
* Manages the creation of image atlases.
*
* Images added to this manager will be inserted into an atlas, which
* will be used for rendering.
* The `size` given in the constructor is the size for the first
* atlas. After that, when new atlases are created, they will have
* twice the size as the latest atlas (until `maxSize` is reached).
*
* If an application uses many images or very large images, it is recommended
* to set a higher `size` value to avoid the creation of too many atlases.
* @api
*/
class AtlasManager {
/**
* @param {Options=} opt_options Options.
*/
constructor(opt_options) {
const options = opt_options || {};
/**
* The size in pixels of the latest atlas image.
* @private
* @type {number}
*/
this.currentSize_ = options.initialSize !== undefined ?
options.initialSize : INITIAL_ATLAS_SIZE;
/**
* The maximum size in pixels of atlas images.
* @private
* @type {number}
*/
this.maxSize_ = options.maxSize !== undefined ?
options.maxSize : MAX_ATLAS_SIZE != -1 ?
MAX_ATLAS_SIZE : WEBGL_MAX_TEXTURE_SIZE !== undefined ?
WEBGL_MAX_TEXTURE_SIZE : 2048;
/**
* The size in pixels between images.
* @private
* @type {number}
*/
this.space_ = options.space !== undefined ? options.space : 1;
/**
* @private
* @type {Array<import("./Atlas.js").default>}
*/
this.atlases_ = [new Atlas(this.currentSize_, this.space_)];
/**
* The size in pixels of the latest atlas image for hit-detection images.
* @private
* @type {number}
*/
this.currentHitSize_ = this.currentSize_;
/**
* @private
* @type {Array<import("./Atlas.js").default>}
*/
this.hitAtlases_ = [new Atlas(this.currentHitSize_, this.space_)];
}
/**
* @param {string} id The identifier of the entry to check.
* @return {?AtlasManagerInfo} The position and atlas image for the
* entry, or `null` if the entry is not part of the atlas manager.
*/
getInfo(id) {
/** @type {?import("./Atlas.js").AtlasInfo} */
const info = this.getInfo_(this.atlases_, id);
if (!info) {
return null;
}
const hitInfo = /** @type {import("./Atlas.js").AtlasInfo} */ (this.getInfo_(this.hitAtlases_, id));
return this.mergeInfos_(info, hitInfo);
}
/**
* @private
* @param {Array<import("./Atlas.js").default>} atlases The atlases to search.
* @param {string} id The identifier of the entry to check.
* @return {?import("./Atlas.js").AtlasInfo} The position and atlas image for the entry,
* or `null` if the entry is not part of the atlases.
*/
getInfo_(atlases, id) {
for (let i = 0, ii = atlases.length; i < ii; ++i) {
const atlas = atlases[i];
const info = atlas.get(id);
if (info) {
return info;
}
}
return null;
}
/**
* @private
* @param {import("./Atlas.js").AtlasInfo} info The info for the real image.
* @param {import("./Atlas.js").AtlasInfo} hitInfo The info for the hit-detection
* image.
* @return {?AtlasManagerInfo} The position and atlas image for the
* entry, or `null` if the entry is not part of the atlases.
*/
mergeInfos_(info, hitInfo) {
return {
offsetX: info.offsetX,
offsetY: info.offsetY,
image: info.image,
hitImage: hitInfo.image
};
}
/**
* Add an image to the atlas manager.
*
* If an entry for the given id already exists, the entry will
* be overridden (but the space on the atlas graphic will not be freed).
*
* If `renderHitCallback` is provided, the image (or the hit-detection version
* of the image) will be rendered into a separate hit-detection atlas image.
*
* @param {string} id The identifier of the entry to add.
* @param {number} width The width.
* @param {number} height The height.
* @param {function(CanvasRenderingContext2D, number, number): void} renderCallback
* Called to render the new image onto an atlas image.
* @param {function(CanvasRenderingContext2D, number, number)=} opt_renderHitCallback Called to render a hit-detection image onto a hit
* detection atlas image.
* @param {Object=} opt_this Value to use as `this` when executing
* `renderCallback` and `renderHitCallback`.
* @return {?AtlasManagerInfo} The position and atlas image for the
* entry, or `null` if the image is too big.
*/
add(id, width, height, renderCallback, opt_renderHitCallback, opt_this) {
if (width + this.space_ > this.maxSize_ ||
height + this.space_ > this.maxSize_) {
return null;
}
/** @type {?import("./Atlas.js").AtlasInfo} */
const info = this.add_(false, id, width, height, renderCallback, opt_this);
if (!info) {
return null;
}
// even if no hit-detection entry is requested, we insert a fake entry into
// the hit-detection atlas, to make sure that the offset is the same for
// the original image and the hit-detection image.
const renderHitCallback = opt_renderHitCallback !== undefined ?
opt_renderHitCallback : VOID;
const hitInfo = /** @type {import("./Atlas.js").AtlasInfo} */ (this.add_(true,
id, width, height, renderHitCallback, opt_this));
return this.mergeInfos_(info, hitInfo);
}
/**
* @private
* @param {boolean} isHitAtlas If the hit-detection atlases are used.
* @param {string} id The identifier of the entry to add.
* @param {number} width The width.
* @param {number} height The height.
* @param {function(CanvasRenderingContext2D, number, number): void} renderCallback
* Called to render the new image onto an atlas image.
* @param {Object=} opt_this Value to use as `this` when executing
* `renderCallback` and `renderHitCallback`.
* @return {?import("./Atlas.js").AtlasInfo} The position and atlas image for the entry,
* or `null` if the image is too big.
*/
add_(isHitAtlas, id, width, height, renderCallback, opt_this) {
const atlases = (isHitAtlas) ? this.hitAtlases_ : this.atlases_;
let atlas, info, i, ii;
for (i = 0, ii = atlases.length; i < ii; ++i) {
atlas = atlases[i];
info = atlas.add(id, width, height, renderCallback, opt_this);
if (info) {
return info;
} else if (!info && i === ii - 1) {
// the entry could not be added to one of the existing atlases,
// create a new atlas that is twice as big and try to add to this one.
let size;
if (isHitAtlas) {
size = Math.min(this.currentHitSize_ * 2, this.maxSize_);
this.currentHitSize_ = size;
} else {
size = Math.min(this.currentSize_ * 2, this.maxSize_);
this.currentSize_ = size;
}
atlas = new Atlas(size, this.space_);
atlases.push(atlas);
// run the loop another time
++ii;
}
}
return null;
}
}
export default AtlasManager;
src/ol/style/Circle.js
+3 -9
View File
@@ -10,9 +10,6 @@ import RegularShape from './RegularShape.js';
* @property {import("./Fill.js").default} [fill] Fill style.
* @property {number} radius Circle radius.
* @property {import("./Stroke.js").default} [stroke] Stroke style.
* @property {import("./AtlasManager.js").default} [atlasManager] The atlas manager to use for this circle.
* When using WebGL it is recommended to use an atlas manager to avoid texture switching. If an atlas manager is given,
* the circle is added to an atlas. By default no atlas manager is used.
*/
@@ -33,14 +30,13 @@ class CircleStyle extends RegularShape {
points: Infinity,
fill: options.fill,
radius: options.radius,
stroke: options.stroke,
atlasManager: options.atlasManager
stroke: options.stroke
});
}
/**
* Clones the style. If an atlasmanager was provided to the original style it will be used in the cloned style, too.
* Clones the style.
* @return {CircleStyle} The cloned style.
* @override
* @api
@@ -49,8 +45,7 @@ class CircleStyle extends RegularShape {
const style = new CircleStyle({
fill: this.getFill() ? this.getFill().clone() : undefined,
stroke: this.getStroke() ? this.getStroke().clone() : undefined,
radius: this.getRadius(),
atlasManager: this.atlasManager_
radius: this.getRadius()
});
style.setOpacity(this.getOpacity());
style.setScale(this.getScale());
@@ -65,7 +60,6 @@ class CircleStyle extends RegularShape {
*/
setRadius(radius) {
this.radius_ = radius;
this.render_(this.atlasManager_);
}
}
src/ol/style/Fill.js
-2
View File
@@ -1,8 +1,6 @@
/**
* @module ol/style/Fill
*/
import {getUid} from '../util.js';
import {asString} from '../color.js';
/**
src/ol/style/RegularShape.js
+11 -55
View File
@@ -23,9 +23,6 @@ import ImageStyle from './Image.js';
* @property {import("./Stroke.js").default} [stroke] Stroke style.
* @property {number} [rotation=0] Rotation in radians (positive rotation clockwise).
* @property {boolean} [rotateWithView=false] Whether to rotate the shape with the view.
* @property {import("./AtlasManager.js").default} [atlasManager] The atlas manager to use for this symbol. When
* using WebGL it is recommended to use an atlas manager to avoid texture switching. If an atlas manager is given, the
* symbol is added to an atlas. By default no atlas manager is used.
*/
@@ -152,18 +149,12 @@ class RegularShape extends ImageStyle {
*/
this.hitDetectionImageSize_ = null;
/**
* @protected
* @type {import("./AtlasManager.js").default|undefined}
*/
this.atlasManager_ = options.atlasManager;
this.render_(this.atlasManager_);
this.render_();
}
/**
* Clones the style. If an atlasmanager was provided to the original style it will be used in the cloned style, too.
* Clones the style.
* @return {RegularShape} The cloned style.
* @api
*/
@@ -176,8 +167,7 @@ class RegularShape extends ImageStyle {
angle: this.getAngle(),
stroke: this.getStroke() ? this.getStroke().clone() : undefined,
rotation: this.getRotation(),
rotateWithView: this.getRotateWithView(),
atlasManager: this.atlasManager_
rotateWithView: this.getRotateWithView()
});
style.setOpacity(this.getOpacity());
style.setScale(this.getScale());
@@ -317,10 +307,8 @@ class RegularShape extends ImageStyle {
/**
* @protected
* @param {import("./AtlasManager.js").default|undefined} atlasManager An atlas manager.
*/
render_(atlasManager) {
let imageSize;
render_() {
let lineCap = '';
let lineJoin = '';
let miterLimit = 0;
@@ -369,48 +357,16 @@ class RegularShape extends ImageStyle {
miterLimit: miterLimit
};
if (atlasManager === undefined) {
// no atlas manager is used, create a new canvas
const context = createCanvasContext2D(size, size);
this.canvas_ = context.canvas;
const context = createCanvasContext2D(size, size);
this.canvas_ = context.canvas;
// canvas.width and height are rounded to the closest integer
size = this.canvas_.width;
imageSize = size;
// canvas.width and height are rounded to the closest integer
size = this.canvas_.width;
const imageSize = size;
this.draw_(renderOptions, context, 0, 0);
this.draw_(renderOptions, context, 0, 0);
this.createHitDetectionCanvas_(renderOptions);
} else {
// an atlas manager is used, add the symbol to an atlas
size = Math.round(size);
const hasCustomHitDetectionImage = !this.fill_;
let renderHitDetectionCallback;
if (hasCustomHitDetectionImage) {
// render the hit-detection image into a separate atlas image
renderHitDetectionCallback =
this.drawHitDetectionCanvas_.bind(this, renderOptions);
}
const id = this.getChecksum();
const info = atlasManager.add(
id, size, size, this.draw_.bind(this, renderOptions),
renderHitDetectionCallback);
this.canvas_ = info.image;
this.origin_ = [info.offsetX, info.offsetY];
imageSize = info.image.width;
if (hasCustomHitDetectionImage) {
this.hitDetectionCanvas_ = info.hitImage;
this.hitDetectionImageSize_ =
[info.hitImage.width, info.hitImage.height];
} else {
this.hitDetectionCanvas_ = this.canvas_;
this.hitDetectionImageSize_ = [imageSize, imageSize];
}
}
this.createHitDetectionCanvas_(renderOptions);
this.anchor_ = [size / 2, size / 2];
this.size_ = [size, size];
src/ol/style/Stroke.js
-1
View File
@@ -1,7 +1,6 @@
/**
* @module ol/style/Stroke
*/
import {getUid} from '../util.js';
/**