Remove the bulk of the WebGL legacy code.
Things left to do: * redo an icon layer example * redo a clipping layer example * update docs where WebGL renderers are mentioned
This commit is contained in:
Olivier Guyot
@@ -1,85 +0,0 @@
|
||||
/**
|
||||
* @module ol/WebGLMap
|
||||
*/
|
||||
import PluggableMap from './PluggableMap.js';
|
||||
import {defaults as defaultControls} from './control.js';
|
||||
import {defaults as defaultInteractions} from './interaction.js';
|
||||
import {assign} from './obj.js';
|
||||
import WebGLMapRenderer from './renderer/webgl/Map.js';
|
||||
|
||||
|
||||
/**
|
||||
* @classdesc
|
||||
* The WebGLMap uses WebGL for rendering map layers. This renderer has limited
|
||||
* support for vector data and no support for vector tiles.
|
||||
*
|
||||
* import WebGLMap from 'ol/WebGLMap';
|
||||
* import TileLayer from 'ol/layer/Tile';
|
||||
* import OSM from 'ol/source/OSM';
|
||||
* import View from 'ol/View';
|
||||
*
|
||||
* var map = new WebGLMap({
|
||||
* view: new View({
|
||||
* center: [0, 0],
|
||||
* zoom: 1
|
||||
* }),
|
||||
* layers: [
|
||||
* new TileLayer({
|
||||
* source: new OSM()
|
||||
* })
|
||||
* ],
|
||||
* target: 'map'
|
||||
* });
|
||||
*
|
||||
* The above snippet creates a map using a {@link module:ol/layer/Tile~Tile} to
|
||||
* display {@link module:ol/source/OSM~OSM} OSM data and render it to a DOM
|
||||
* element with the id `map`.
|
||||
*
|
||||
* The constructor places a viewport container (with CSS class name
|
||||
* `ol-viewport`) in the target element (see `getViewport()`), and then two
|
||||
* further elements within the viewport: one with CSS class name
|
||||
* `ol-overlaycontainer-stopevent` for controls and some overlays, and one with
|
||||
* CSS class name `ol-overlaycontainer` for other overlays (see the `stopEvent`
|
||||
* option of {@link module:ol/Overlay~Overlay} for the difference). The map
|
||||
* itself is placed in a further element within the viewport.
|
||||
*
|
||||
* Layers are stored as a {@link module:ol/Collection~Collection} in
|
||||
* layerGroups. A top-level group is provided by the library. This is what is
|
||||
* accessed by `getLayerGroup` and `setLayerGroup`. Layers entered in the
|
||||
* options are added to this group, and `addLayer` and `removeLayer` change the
|
||||
* layer collection in the group. `getLayers` is a convenience function for
|
||||
* `getLayerGroup().getLayers()`.
|
||||
* Note that {@link module:ol/layer/Group~Group} is a subclass of
|
||||
* {@link module:ol/layer/Base}, so layers entered in the options or added
|
||||
* with `addLayer` can be groups, which can contain further groups, and so on.
|
||||
*
|
||||
* @fires import("./MapBrowserEvent.js").MapBrowserEvent
|
||||
* @fires import("./MapEvent.js").MapEvent
|
||||
* @fires module:ol/render/Event~RenderEvent#postcompose
|
||||
* @fires module:ol/render/Event~RenderEvent#precompose
|
||||
* @api
|
||||
*/
|
||||
class WebGLMap extends PluggableMap {
|
||||
|
||||
/**
|
||||
* @param {import("./PluggableMap.js").MapOptions} options Map options.
|
||||
*/
|
||||
constructor(options) {
|
||||
options = assign({}, options);
|
||||
if (!options.controls) {
|
||||
options.controls = defaultControls();
|
||||
}
|
||||
if (!options.interactions) {
|
||||
options.interactions = defaultInteractions();
|
||||
}
|
||||
|
||||
super(options);
|
||||
}
|
||||
|
||||
createRenderer() {
|
||||
return new WebGLMapRenderer(this);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export default WebGLMap;
|
||||
@@ -29,7 +29,6 @@ export {default as TileRange} from './TileRange.js';
|
||||
export {default as VectorImageTile} from './VectorImageTile.js';
|
||||
export {default as VectorTile} from './VectorTile.js';
|
||||
export {default as View} from './View.js';
|
||||
export {default as WebGLMap} from './WebGLMap.js';
|
||||
|
||||
export {getUid, inherits, VERSION} from './util.js';
|
||||
|
||||
|
||||
@@ -1,45 +0,0 @@
|
||||
/**
|
||||
* @module ol/layer/WebGLImage
|
||||
*/
|
||||
import BaseImageLayer from './BaseImage.js';
|
||||
import WebGLImageLayerRenderer from '../renderer/webgl/ImageLayer.js';
|
||||
|
||||
|
||||
/**
|
||||
* @typedef {import("./BaseImage.js").Options} Options
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* @classdesc
|
||||
* Server-rendered images that are available for arbitrary extents and
|
||||
* resolutions.
|
||||
* Note that any property set in the options is set as a {@link module:ol/Object~BaseObject}
|
||||
* property on the layer object; for example, setting `title: 'My Title'` in the
|
||||
* options means that `title` is observable, and has get/set accessors.
|
||||
*
|
||||
* @fires import("../render/Event.js").RenderEvent
|
||||
* @api
|
||||
*/
|
||||
class WebGLImageLayer extends BaseImageLayer {
|
||||
|
||||
/**
|
||||
* @param {Options=} opt_options Layer options.
|
||||
*/
|
||||
constructor(opt_options) {
|
||||
super(opt_options);
|
||||
}
|
||||
|
||||
/**
|
||||
* Create a renderer for this layer.
|
||||
* @param {import("../renderer/webgl/Map.js").default} mapRenderer The map renderer.
|
||||
* @return {import("../renderer/Layer.js").default} A layer renderer.
|
||||
* @protected
|
||||
*/
|
||||
createRenderer(mapRenderer) {
|
||||
return new WebGLImageLayerRenderer(mapRenderer, this);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default WebGLImageLayer;
|
||||
@@ -1,43 +0,0 @@
|
||||
/**
|
||||
* @module ol/layer/WebGLTile
|
||||
*/
|
||||
import BaseTileLayer from './BaseTile.js';
|
||||
import WebGLTileLayerRenderer from '../renderer/webgl/TileLayer.js';
|
||||
|
||||
/**
|
||||
* @typedef {import("./BaseTile.js").Options} Options
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* @classdesc
|
||||
* For layer sources that provide pre-rendered, tiled images in grids that are
|
||||
* organized by zoom levels for specific resolutions.
|
||||
* Note that any property set in the options is set as a {@link module:ol/Object~BaseObject}
|
||||
* property on the layer object; for example, setting `title: 'My Title'` in the
|
||||
* options means that `title` is observable, and has get/set accessors.
|
||||
*
|
||||
* @api
|
||||
*/
|
||||
class WebGLTileLayer extends BaseTileLayer {
|
||||
|
||||
/**
|
||||
* @param {Options=} opt_options Tile layer options.
|
||||
*/
|
||||
constructor(opt_options) {
|
||||
super(opt_options);
|
||||
}
|
||||
|
||||
/**
|
||||
* Create a renderer for this layer.
|
||||
* @param {import("../renderer/webgl/Map.js").default} mapRenderer The map renderer.
|
||||
* @return {import("../renderer/Layer.js").default} A layer renderer.
|
||||
* @protected
|
||||
*/
|
||||
createRenderer(mapRenderer) {
|
||||
return new WebGLTileLayerRenderer(mapRenderer, this);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default WebGLTileLayer;
|
||||
@@ -1,42 +0,0 @@
|
||||
/**
|
||||
* @module ol/layer/WebGLVector
|
||||
*/
|
||||
import BaseVectorLayer from './BaseVector.js';
|
||||
import WebGLVectorLayerRenderer from '../renderer/webgl/VectorLayer.js';
|
||||
|
||||
|
||||
/**
|
||||
* @typedef {import("./BaseVector.js").Options} Options
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* @classdesc
|
||||
* Vector data that is rendered client-side.
|
||||
* Note that any property set in the options is set as a {@link module:ol/Object~BaseObject}
|
||||
* property on the layer object; for example, setting `title: 'My Title'` in the
|
||||
* options means that `title` is observable, and has get/set accessors.
|
||||
*
|
||||
* @api
|
||||
*/
|
||||
class WebGLVectorLayer extends BaseVectorLayer {
|
||||
/**
|
||||
* @param {Options=} opt_options Options.
|
||||
*/
|
||||
constructor(opt_options) {
|
||||
super(opt_options);
|
||||
}
|
||||
|
||||
/**
|
||||
* Create a renderer for this layer.
|
||||
* @param {import("../renderer/webgl/Map.js").default} mapRenderer The map renderer.
|
||||
* @return {import("../renderer/Layer.js").default} A layer renderer.
|
||||
* @protected
|
||||
*/
|
||||
createRenderer(mapRenderer) {
|
||||
return new WebGLVectorLayerRenderer(mapRenderer, this);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export default WebGLVectorLayer;
|
||||
@@ -1,403 +0,0 @@
|
||||
/**
|
||||
* @module ol/render/webgl/CircleReplay
|
||||
*/
|
||||
import {getUid} from '../../util.js';
|
||||
import {equals} from '../../array.js';
|
||||
import {asArray} from '../../color.js';
|
||||
import {intersects} from '../../extent.js';
|
||||
import {isEmpty} from '../../obj.js';
|
||||
import {translate} from '../../geom/flat/transform.js';
|
||||
import {fragment, vertex} from './circlereplay/defaultshader.js';
|
||||
import Locations from './circlereplay/defaultshader/Locations.js';
|
||||
import WebGLReplay from './Replay.js';
|
||||
import {DEFAULT_LINEDASH, DEFAULT_LINEDASHOFFSET, DEFAULT_STROKESTYLE,
|
||||
DEFAULT_FILLSTYLE, DEFAULT_LINEWIDTH} from '../webgl.js';
|
||||
import {FLOAT} from '../../webgl.js';
|
||||
import WebGLBuffer from '../../webgl/Buffer.js';
|
||||
|
||||
class WebGLCircleReplay extends WebGLReplay {
|
||||
/**
|
||||
* @param {number} tolerance Tolerance.
|
||||
* @param {import("../../extent.js").Extent} maxExtent Max extent.
|
||||
*/
|
||||
constructor(tolerance, maxExtent) {
|
||||
super(tolerance, maxExtent);
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {import("./circlereplay/defaultshader/Locations.js").default}
|
||||
*/
|
||||
this.defaultLocations_ = null;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {Array<Array<Array<number>|number>>}
|
||||
*/
|
||||
this.styles_ = [];
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {Array<number>}
|
||||
*/
|
||||
this.styleIndices_ = [];
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {number}
|
||||
*/
|
||||
this.radius_ = 0;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {{fillColor: (Array<number>|null),
|
||||
* strokeColor: (Array<number>|null),
|
||||
* lineDash: Array<number>,
|
||||
* lineDashOffset: (number|undefined),
|
||||
* lineWidth: (number|undefined),
|
||||
* changed: boolean}|null}
|
||||
*/
|
||||
this.state_ = {
|
||||
fillColor: null,
|
||||
strokeColor: null,
|
||||
lineDash: null,
|
||||
lineDashOffset: undefined,
|
||||
lineWidth: undefined,
|
||||
changed: false
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @param {Array<number>} flatCoordinates Flat coordinates.
|
||||
* @param {number} offset Offset.
|
||||
* @param {number} end End.
|
||||
* @param {number} stride Stride.
|
||||
*/
|
||||
drawCoordinates_(flatCoordinates, offset, end, stride) {
|
||||
let numVertices = this.vertices.length;
|
||||
let numIndices = this.indices.length;
|
||||
let n = numVertices / 4;
|
||||
let i, ii;
|
||||
for (i = offset, ii = end; i < ii; i += stride) {
|
||||
this.vertices[numVertices++] = flatCoordinates[i];
|
||||
this.vertices[numVertices++] = flatCoordinates[i + 1];
|
||||
this.vertices[numVertices++] = 0;
|
||||
this.vertices[numVertices++] = this.radius_;
|
||||
|
||||
this.vertices[numVertices++] = flatCoordinates[i];
|
||||
this.vertices[numVertices++] = flatCoordinates[i + 1];
|
||||
this.vertices[numVertices++] = 1;
|
||||
this.vertices[numVertices++] = this.radius_;
|
||||
|
||||
this.vertices[numVertices++] = flatCoordinates[i];
|
||||
this.vertices[numVertices++] = flatCoordinates[i + 1];
|
||||
this.vertices[numVertices++] = 2;
|
||||
this.vertices[numVertices++] = this.radius_;
|
||||
|
||||
this.vertices[numVertices++] = flatCoordinates[i];
|
||||
this.vertices[numVertices++] = flatCoordinates[i + 1];
|
||||
this.vertices[numVertices++] = 3;
|
||||
this.vertices[numVertices++] = this.radius_;
|
||||
|
||||
this.indices[numIndices++] = n;
|
||||
this.indices[numIndices++] = n + 1;
|
||||
this.indices[numIndices++] = n + 2;
|
||||
|
||||
this.indices[numIndices++] = n + 2;
|
||||
this.indices[numIndices++] = n + 3;
|
||||
this.indices[numIndices++] = n;
|
||||
|
||||
n += 4;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
drawCircle(circleGeometry, feature) {
|
||||
const radius = circleGeometry.getRadius();
|
||||
const stride = circleGeometry.getStride();
|
||||
if (radius) {
|
||||
this.startIndices.push(this.indices.length);
|
||||
this.startIndicesFeature.push(feature);
|
||||
if (this.state_.changed) {
|
||||
this.styleIndices_.push(this.indices.length);
|
||||
this.state_.changed = false;
|
||||
}
|
||||
|
||||
this.radius_ = radius;
|
||||
let flatCoordinates = circleGeometry.getFlatCoordinates();
|
||||
flatCoordinates = translate(flatCoordinates, 0, 2,
|
||||
stride, -this.origin[0], -this.origin[1]);
|
||||
this.drawCoordinates_(flatCoordinates, 0, 2, stride);
|
||||
} else {
|
||||
if (this.state_.changed) {
|
||||
this.styles_.pop();
|
||||
if (this.styles_.length) {
|
||||
const lastState = this.styles_[this.styles_.length - 1];
|
||||
this.state_.fillColor = /** @type {Array<number>} */ (lastState[0]);
|
||||
this.state_.strokeColor = /** @type {Array<number>} */ (lastState[1]);
|
||||
this.state_.lineWidth = /** @type {number} */ (lastState[2]);
|
||||
this.state_.changed = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
**/
|
||||
finish(context) {
|
||||
// create, bind, and populate the vertices buffer
|
||||
this.verticesBuffer = new WebGLBuffer(this.vertices);
|
||||
|
||||
// create, bind, and populate the indices buffer
|
||||
this.indicesBuffer = new WebGLBuffer(this.indices);
|
||||
|
||||
this.startIndices.push(this.indices.length);
|
||||
|
||||
//Clean up, if there is nothing to draw
|
||||
if (this.styleIndices_.length === 0 && this.styles_.length > 0) {
|
||||
this.styles_ = [];
|
||||
}
|
||||
|
||||
this.vertices = null;
|
||||
this.indices = null;
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
getDeleteResourcesFunction(context) {
|
||||
// We only delete our stuff here. The shaders and the program may
|
||||
// be used by other CircleReplay instances (for other layers). And
|
||||
// they will be deleted when disposing of the import("../../webgl/Context.js").WebGLContext
|
||||
// object.
|
||||
const verticesBuffer = this.verticesBuffer;
|
||||
const indicesBuffer = this.indicesBuffer;
|
||||
return function() {
|
||||
context.deleteBuffer(verticesBuffer);
|
||||
context.deleteBuffer(indicesBuffer);
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
setUpProgram(gl, context, size, pixelRatio) {
|
||||
// get the program
|
||||
const program = context.getProgram(fragment, vertex);
|
||||
|
||||
// get the locations
|
||||
let locations;
|
||||
if (!this.defaultLocations_) {
|
||||
locations = new Locations(gl, program);
|
||||
this.defaultLocations_ = locations;
|
||||
} else {
|
||||
locations = this.defaultLocations_;
|
||||
}
|
||||
|
||||
context.useProgram(program);
|
||||
|
||||
// enable the vertex attrib arrays
|
||||
gl.enableVertexAttribArray(locations.a_position);
|
||||
gl.vertexAttribPointer(locations.a_position, 2, FLOAT,
|
||||
false, 16, 0);
|
||||
|
||||
gl.enableVertexAttribArray(locations.a_instruction);
|
||||
gl.vertexAttribPointer(locations.a_instruction, 1, FLOAT,
|
||||
false, 16, 8);
|
||||
|
||||
gl.enableVertexAttribArray(locations.a_radius);
|
||||
gl.vertexAttribPointer(locations.a_radius, 1, FLOAT,
|
||||
false, 16, 12);
|
||||
|
||||
// Enable renderer specific uniforms.
|
||||
gl.uniform2fv(locations.u_size, size);
|
||||
gl.uniform1f(locations.u_pixelRatio, pixelRatio);
|
||||
|
||||
return locations;
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
shutDownProgram(gl, locations) {
|
||||
gl.disableVertexAttribArray(locations.a_position);
|
||||
gl.disableVertexAttribArray(locations.a_instruction);
|
||||
gl.disableVertexAttribArray(locations.a_radius);
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
drawReplay(gl, context, skippedFeaturesHash, hitDetection) {
|
||||
if (!isEmpty(skippedFeaturesHash)) {
|
||||
this.drawReplaySkipping_(gl, context, skippedFeaturesHash);
|
||||
} else {
|
||||
//Draw by style groups to minimize drawElements() calls.
|
||||
let i, start, end, nextStyle;
|
||||
end = this.startIndices[this.startIndices.length - 1];
|
||||
for (i = this.styleIndices_.length - 1; i >= 0; --i) {
|
||||
start = this.styleIndices_[i];
|
||||
nextStyle = this.styles_[i];
|
||||
this.setFillStyle_(gl, /** @type {Array<number>} */ (nextStyle[0]));
|
||||
this.setStrokeStyle_(gl, /** @type {Array<number>} */ (nextStyle[1]),
|
||||
/** @type {number} */ (nextStyle[2]));
|
||||
this.drawElements(gl, context, start, end);
|
||||
end = start;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
drawHitDetectionReplayOneByOne(gl, context, skippedFeaturesHash, featureCallback, opt_hitExtent) {
|
||||
let i, start, end, nextStyle, groupStart, feature, featureIndex;
|
||||
featureIndex = this.startIndices.length - 2;
|
||||
end = this.startIndices[featureIndex + 1];
|
||||
for (i = this.styleIndices_.length - 1; i >= 0; --i) {
|
||||
nextStyle = this.styles_[i];
|
||||
this.setFillStyle_(gl, /** @type {Array<number>} */ (nextStyle[0]));
|
||||
this.setStrokeStyle_(gl, /** @type {Array<number>} */ (nextStyle[1]),
|
||||
/** @type {number} */ (nextStyle[2]));
|
||||
groupStart = this.styleIndices_[i];
|
||||
|
||||
while (featureIndex >= 0 &&
|
||||
this.startIndices[featureIndex] >= groupStart) {
|
||||
start = this.startIndices[featureIndex];
|
||||
feature = this.startIndicesFeature[featureIndex];
|
||||
|
||||
if (skippedFeaturesHash[getUid(feature)] === undefined &&
|
||||
feature.getGeometry() &&
|
||||
(opt_hitExtent === undefined || intersects(
|
||||
/** @type {Array<number>} */ (opt_hitExtent),
|
||||
feature.getGeometry().getExtent()))) {
|
||||
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
|
||||
this.drawElements(gl, context, start, end);
|
||||
|
||||
const result = featureCallback(feature);
|
||||
|
||||
if (result) {
|
||||
return result;
|
||||
}
|
||||
|
||||
}
|
||||
featureIndex--;
|
||||
end = start;
|
||||
}
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @param {WebGLRenderingContext} gl gl.
|
||||
* @param {import("../../webgl/Context.js").default} context Context.
|
||||
* @param {Object} skippedFeaturesHash Ids of features to skip.
|
||||
*/
|
||||
drawReplaySkipping_(gl, context, skippedFeaturesHash) {
|
||||
let i, start, end, nextStyle, groupStart, feature, featureIndex, featureStart;
|
||||
featureIndex = this.startIndices.length - 2;
|
||||
end = start = this.startIndices[featureIndex + 1];
|
||||
for (i = this.styleIndices_.length - 1; i >= 0; --i) {
|
||||
nextStyle = this.styles_[i];
|
||||
this.setFillStyle_(gl, /** @type {Array<number>} */ (nextStyle[0]));
|
||||
this.setStrokeStyle_(gl, /** @type {Array<number>} */ (nextStyle[1]),
|
||||
/** @type {number} */ (nextStyle[2]));
|
||||
groupStart = this.styleIndices_[i];
|
||||
|
||||
while (featureIndex >= 0 &&
|
||||
this.startIndices[featureIndex] >= groupStart) {
|
||||
featureStart = this.startIndices[featureIndex];
|
||||
feature = this.startIndicesFeature[featureIndex];
|
||||
|
||||
if (skippedFeaturesHash[getUid(feature)]) {
|
||||
if (start !== end) {
|
||||
this.drawElements(gl, context, start, end);
|
||||
}
|
||||
end = featureStart;
|
||||
}
|
||||
featureIndex--;
|
||||
start = featureStart;
|
||||
}
|
||||
if (start !== end) {
|
||||
this.drawElements(gl, context, start, end);
|
||||
}
|
||||
start = end = groupStart;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @param {WebGLRenderingContext} gl gl.
|
||||
* @param {Array<number>} color Color.
|
||||
*/
|
||||
setFillStyle_(gl, color) {
|
||||
gl.uniform4fv(this.defaultLocations_.u_fillColor, color);
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @param {WebGLRenderingContext} gl gl.
|
||||
* @param {Array<number>} color Color.
|
||||
* @param {number} lineWidth Line width.
|
||||
*/
|
||||
setStrokeStyle_(gl, color, lineWidth) {
|
||||
gl.uniform4fv(this.defaultLocations_.u_strokeColor, color);
|
||||
gl.uniform1f(this.defaultLocations_.u_lineWidth, lineWidth);
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
setFillStrokeStyle(fillStyle, strokeStyle) {
|
||||
let strokeStyleColor, strokeStyleWidth;
|
||||
if (strokeStyle) {
|
||||
const strokeStyleLineDash = strokeStyle.getLineDash();
|
||||
this.state_.lineDash = strokeStyleLineDash ?
|
||||
strokeStyleLineDash : DEFAULT_LINEDASH;
|
||||
const strokeStyleLineDashOffset = strokeStyle.getLineDashOffset();
|
||||
this.state_.lineDashOffset = strokeStyleLineDashOffset ?
|
||||
strokeStyleLineDashOffset : DEFAULT_LINEDASHOFFSET;
|
||||
strokeStyleColor = strokeStyle.getColor();
|
||||
if (!(strokeStyleColor instanceof CanvasGradient) &&
|
||||
!(strokeStyleColor instanceof CanvasPattern)) {
|
||||
strokeStyleColor = asArray(strokeStyleColor).map(function(c, i) {
|
||||
return i != 3 ? c / 255 : c;
|
||||
}) || DEFAULT_STROKESTYLE;
|
||||
} else {
|
||||
strokeStyleColor = DEFAULT_STROKESTYLE;
|
||||
}
|
||||
strokeStyleWidth = strokeStyle.getWidth();
|
||||
strokeStyleWidth = strokeStyleWidth !== undefined ?
|
||||
strokeStyleWidth : DEFAULT_LINEWIDTH;
|
||||
} else {
|
||||
strokeStyleColor = [0, 0, 0, 0];
|
||||
strokeStyleWidth = 0;
|
||||
}
|
||||
let fillStyleColor = fillStyle ? fillStyle.getColor() : [0, 0, 0, 0];
|
||||
if (!(fillStyleColor instanceof CanvasGradient) &&
|
||||
!(fillStyleColor instanceof CanvasPattern)) {
|
||||
fillStyleColor = asArray(fillStyleColor).map(function(c, i) {
|
||||
return i != 3 ? c / 255 : c;
|
||||
}) || DEFAULT_FILLSTYLE;
|
||||
} else {
|
||||
fillStyleColor = DEFAULT_FILLSTYLE;
|
||||
}
|
||||
if (!this.state_.strokeColor || !equals(this.state_.strokeColor, strokeStyleColor) ||
|
||||
!this.state_.fillColor || !equals(this.state_.fillColor, fillStyleColor) ||
|
||||
this.state_.lineWidth !== strokeStyleWidth) {
|
||||
this.state_.changed = true;
|
||||
this.state_.fillColor = fillStyleColor;
|
||||
this.state_.strokeColor = strokeStyleColor;
|
||||
this.state_.lineWidth = strokeStyleWidth;
|
||||
this.styles_.push([fillStyleColor, strokeStyleColor, strokeStyleWidth]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export default WebGLCircleReplay;
|
||||
@@ -1,164 +0,0 @@
|
||||
/**
|
||||
* @module ol/render/webgl/ImageReplay
|
||||
*/
|
||||
import {getUid} from '../../util.js';
|
||||
import WebGLTextureReplay from './TextureReplay.js';
|
||||
import WebGLBuffer from '../../webgl/Buffer.js';
|
||||
|
||||
class WebGLImageReplay extends WebGLTextureReplay {
|
||||
/**
|
||||
* @param {number} tolerance Tolerance.
|
||||
* @param {import("../../extent.js").Extent} maxExtent Max extent.
|
||||
*/
|
||||
constructor(tolerance, maxExtent) {
|
||||
super(tolerance, maxExtent);
|
||||
|
||||
/**
|
||||
* @type {Array<HTMLCanvasElement|HTMLImageElement|HTMLVideoElement>}
|
||||
* @protected
|
||||
*/
|
||||
this.images_ = [];
|
||||
|
||||
/**
|
||||
* @type {Array<HTMLCanvasElement|HTMLImageElement|HTMLVideoElement>}
|
||||
* @protected
|
||||
*/
|
||||
this.hitDetectionImages_ = [];
|
||||
|
||||
/**
|
||||
* @type {Array<WebGLTexture>}
|
||||
* @private
|
||||
*/
|
||||
this.textures_ = [];
|
||||
|
||||
/**
|
||||
* @type {Array<WebGLTexture>}
|
||||
* @private
|
||||
*/
|
||||
this.hitDetectionTextures_ = [];
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
drawMultiPoint(multiPointGeometry, feature) {
|
||||
this.startIndices.push(this.indices.length);
|
||||
this.startIndicesFeature.push(feature);
|
||||
const flatCoordinates = multiPointGeometry.getFlatCoordinates();
|
||||
const stride = multiPointGeometry.getStride();
|
||||
this.drawCoordinates(
|
||||
flatCoordinates, 0, flatCoordinates.length, stride);
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
drawPoint(pointGeometry, feature) {
|
||||
this.startIndices.push(this.indices.length);
|
||||
this.startIndicesFeature.push(feature);
|
||||
const flatCoordinates = pointGeometry.getFlatCoordinates();
|
||||
const stride = pointGeometry.getStride();
|
||||
this.drawCoordinates(
|
||||
flatCoordinates, 0, flatCoordinates.length, stride);
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
finish(context) {
|
||||
const gl = context.getGL();
|
||||
|
||||
this.groupIndices.push(this.indices.length);
|
||||
this.hitDetectionGroupIndices.push(this.indices.length);
|
||||
|
||||
// create, bind, and populate the vertices buffer
|
||||
this.verticesBuffer = new WebGLBuffer(this.vertices);
|
||||
|
||||
const indices = this.indices;
|
||||
|
||||
// create, bind, and populate the indices buffer
|
||||
this.indicesBuffer = new WebGLBuffer(indices);
|
||||
|
||||
// create textures
|
||||
/** @type {Object<string, WebGLTexture>} */
|
||||
const texturePerImage = {};
|
||||
|
||||
this.createTextures(this.textures_, this.images_, texturePerImage, gl);
|
||||
|
||||
this.createTextures(this.hitDetectionTextures_, this.hitDetectionImages_,
|
||||
texturePerImage, gl);
|
||||
|
||||
this.images_ = null;
|
||||
this.hitDetectionImages_ = null;
|
||||
super.finish(context);
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
setImageStyle(imageStyle) {
|
||||
const anchor = imageStyle.getAnchor();
|
||||
const image = imageStyle.getImage(1);
|
||||
const imageSize = imageStyle.getImageSize();
|
||||
const hitDetectionImage = imageStyle.getHitDetectionImage(1);
|
||||
const opacity = imageStyle.getOpacity();
|
||||
const origin = imageStyle.getOrigin();
|
||||
const rotateWithView = imageStyle.getRotateWithView();
|
||||
const rotation = imageStyle.getRotation();
|
||||
const size = imageStyle.getSize();
|
||||
const scale = imageStyle.getScale();
|
||||
|
||||
let currentImage;
|
||||
if (this.images_.length === 0) {
|
||||
this.images_.push(image);
|
||||
} else {
|
||||
currentImage = this.images_[this.images_.length - 1];
|
||||
if (getUid(currentImage) != getUid(image)) {
|
||||
this.groupIndices.push(this.indices.length);
|
||||
this.images_.push(image);
|
||||
}
|
||||
}
|
||||
|
||||
if (this.hitDetectionImages_.length === 0) {
|
||||
this.hitDetectionImages_.push(hitDetectionImage);
|
||||
} else {
|
||||
currentImage =
|
||||
this.hitDetectionImages_[this.hitDetectionImages_.length - 1];
|
||||
if (getUid(currentImage) != getUid(hitDetectionImage)) {
|
||||
this.hitDetectionGroupIndices.push(this.indices.length);
|
||||
this.hitDetectionImages_.push(hitDetectionImage);
|
||||
}
|
||||
}
|
||||
|
||||
this.anchorX = anchor[0];
|
||||
this.anchorY = anchor[1];
|
||||
this.height = size[1];
|
||||
this.imageHeight = imageSize[1];
|
||||
this.imageWidth = imageSize[0];
|
||||
this.opacity = opacity;
|
||||
this.originX = origin[0];
|
||||
this.originY = origin[1];
|
||||
this.rotation = rotation;
|
||||
this.rotateWithView = rotateWithView;
|
||||
this.scale = scale;
|
||||
this.width = size[0];
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
getTextures(opt_all) {
|
||||
return opt_all ? this.textures_.concat(this.hitDetectionTextures_) : this.textures_;
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
getHitDetectionTextures() {
|
||||
return this.hitDetectionTextures_;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export default WebGLImageReplay;
|
||||
@@ -1,394 +0,0 @@
|
||||
/**
|
||||
* @module ol/render/webgl/Immediate
|
||||
*/
|
||||
|
||||
import {intersects} from '../../extent.js';
|
||||
import GeometryType from '../../geom/GeometryType.js';
|
||||
import ReplayType from '../ReplayType.js';
|
||||
import VectorContext from '../VectorContext.js';
|
||||
import WebGLReplayGroup from './ReplayGroup.js';
|
||||
|
||||
class WebGLImmediateRenderer extends VectorContext {
|
||||
/**
|
||||
* @param {import("../../webgl/Context.js").default} context Context.
|
||||
* @param {import("../../coordinate.js").Coordinate} center Center.
|
||||
* @param {number} resolution Resolution.
|
||||
* @param {number} rotation Rotation.
|
||||
* @param {import("../../size.js").Size} size Size.
|
||||
* @param {import("../../extent.js").Extent} extent Extent.
|
||||
* @param {number} pixelRatio Pixel ratio.
|
||||
*/
|
||||
constructor(context, center, resolution, rotation, size, extent, pixelRatio) {
|
||||
super();
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
this.context_ = context;
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
this.center_ = center;
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
this.extent_ = extent;
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
this.pixelRatio_ = pixelRatio;
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
this.size_ = size;
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
this.rotation_ = rotation;
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
this.resolution_ = resolution;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {import("../../style/Image.js").default}
|
||||
*/
|
||||
this.imageStyle_ = null;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {import("../../style/Fill.js").default}
|
||||
*/
|
||||
this.fillStyle_ = null;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {import("../../style/Stroke.js").default}
|
||||
*/
|
||||
this.strokeStyle_ = null;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {import("../../style/Text.js").default}
|
||||
*/
|
||||
this.textStyle_ = null;
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {import("./ReplayGroup.js").default} replayGroup Replay group.
|
||||
* @param {import("../../geom/Geometry.js").default|import("../Feature.js").default} geometry Geometry.
|
||||
* @private
|
||||
*/
|
||||
drawText_(replayGroup, geometry) {
|
||||
const context = this.context_;
|
||||
const replay = /** @type {import("./TextReplay.js").default} */ (
|
||||
replayGroup.getBuilder(0, ReplayType.TEXT));
|
||||
replay.setTextStyle(this.textStyle_);
|
||||
replay.drawText(geometry, null);
|
||||
replay.finish(context);
|
||||
// default colors
|
||||
const opacity = 1;
|
||||
/** @type {Object<string, boolean>} */
|
||||
const skippedFeatures = {};
|
||||
let featureCallback;
|
||||
const oneByOne = false;
|
||||
replay.replay(this.context_, this.center_, this.resolution_, this.rotation_,
|
||||
this.size_, this.pixelRatio_, opacity, skippedFeatures, featureCallback,
|
||||
oneByOne);
|
||||
replay.getDeleteResourcesFunction(context)();
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the rendering style. Note that since this is an immediate rendering API,
|
||||
* any `zIndex` on the provided style will be ignored.
|
||||
*
|
||||
* @param {import("../../style/Style.js").default} style The rendering style.
|
||||
* @override
|
||||
* @api
|
||||
*/
|
||||
setStyle(style) {
|
||||
this.setFillStrokeStyle(style.getFill(), style.getStroke());
|
||||
this.setImageStyle(style.getImage());
|
||||
this.setTextStyle(style.getText());
|
||||
}
|
||||
|
||||
/**
|
||||
* Render a geometry into the canvas. Call
|
||||
* {@link ol/render/webgl/Immediate#setStyle} first to set the rendering style.
|
||||
*
|
||||
* @param {import("../../geom/Geometry.js").default|import("../Feature.js").default} geometry The geometry to render.
|
||||
* @override
|
||||
* @api
|
||||
*/
|
||||
drawGeometry(geometry) {
|
||||
const type = geometry.getType();
|
||||
switch (type) {
|
||||
case GeometryType.POINT:
|
||||
this.drawPoint(/** @type {import("../../geom/Point.js").default} */ (geometry), null);
|
||||
break;
|
||||
case GeometryType.LINE_STRING:
|
||||
this.drawLineString(/** @type {import("../../geom/LineString.js").default} */ (geometry), null);
|
||||
break;
|
||||
case GeometryType.POLYGON:
|
||||
this.drawPolygon(/** @type {import("../../geom/Polygon.js").default} */ (geometry), null);
|
||||
break;
|
||||
case GeometryType.MULTI_POINT:
|
||||
this.drawMultiPoint(/** @type {import("../../geom/MultiPoint.js").default} */ (geometry), null);
|
||||
break;
|
||||
case GeometryType.MULTI_LINE_STRING:
|
||||
this.drawMultiLineString(/** @type {import("../../geom/MultiLineString.js").default} */ (geometry), null);
|
||||
break;
|
||||
case GeometryType.MULTI_POLYGON:
|
||||
this.drawMultiPolygon(/** @type {import("../../geom/MultiPolygon.js").default} */ (geometry), null);
|
||||
break;
|
||||
case GeometryType.GEOMETRY_COLLECTION:
|
||||
this.drawGeometryCollection(/** @type {import("../../geom/GeometryCollection.js").default} */ (geometry), null);
|
||||
break;
|
||||
case GeometryType.CIRCLE:
|
||||
this.drawCircle(/** @type {import("../../geom/Circle.js").default} */ (geometry), null);
|
||||
break;
|
||||
default:
|
||||
// pass
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
* @api
|
||||
*/
|
||||
drawFeature(feature, style) {
|
||||
const geometry = style.getGeometryFunction()(feature);
|
||||
if (!geometry || !intersects(this.extent_, geometry.getExtent())) {
|
||||
return;
|
||||
}
|
||||
this.setStyle(style);
|
||||
this.drawGeometry(geometry);
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
drawGeometryCollection(geometry, data) {
|
||||
const geometries = geometry.getGeometriesArray();
|
||||
let i, ii;
|
||||
for (i = 0, ii = geometries.length; i < ii; ++i) {
|
||||
this.drawGeometry(geometries[i]);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
drawPoint(geometry, data) {
|
||||
const context = this.context_;
|
||||
const replayGroup = new WebGLReplayGroup(1, this.extent_);
|
||||
const replay = /** @type {import("./ImageReplay.js").default} */ (
|
||||
replayGroup.getBuilder(0, ReplayType.IMAGE));
|
||||
replay.setImageStyle(this.imageStyle_);
|
||||
replay.drawPoint(geometry, data);
|
||||
replay.finish(context);
|
||||
// default colors
|
||||
const opacity = 1;
|
||||
/** @type {Object<string, boolean>} */
|
||||
const skippedFeatures = {};
|
||||
let featureCallback;
|
||||
const oneByOne = false;
|
||||
replay.replay(this.context_, this.center_, this.resolution_, this.rotation_,
|
||||
this.size_, this.pixelRatio_, opacity, skippedFeatures, featureCallback,
|
||||
oneByOne);
|
||||
replay.getDeleteResourcesFunction(context)();
|
||||
|
||||
if (this.textStyle_) {
|
||||
this.drawText_(replayGroup, geometry);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
drawMultiPoint(geometry, data) {
|
||||
const context = this.context_;
|
||||
const replayGroup = new WebGLReplayGroup(1, this.extent_);
|
||||
const replay = /** @type {import("./ImageReplay.js").default} */ (
|
||||
replayGroup.getBuilder(0, ReplayType.IMAGE));
|
||||
replay.setImageStyle(this.imageStyle_);
|
||||
replay.drawMultiPoint(geometry, data);
|
||||
replay.finish(context);
|
||||
const opacity = 1;
|
||||
/** @type {Object<string, boolean>} */
|
||||
const skippedFeatures = {};
|
||||
let featureCallback;
|
||||
const oneByOne = false;
|
||||
replay.replay(this.context_, this.center_, this.resolution_, this.rotation_,
|
||||
this.size_, this.pixelRatio_, opacity, skippedFeatures, featureCallback,
|
||||
oneByOne);
|
||||
replay.getDeleteResourcesFunction(context)();
|
||||
|
||||
if (this.textStyle_) {
|
||||
this.drawText_(replayGroup, geometry);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
drawLineString(geometry, data) {
|
||||
const context = this.context_;
|
||||
const replayGroup = new WebGLReplayGroup(1, this.extent_);
|
||||
const replay = /** @type {import("./LineStringReplay.js").default} */ (
|
||||
replayGroup.getBuilder(0, ReplayType.LINE_STRING));
|
||||
replay.setFillStrokeStyle(null, this.strokeStyle_);
|
||||
replay.drawLineString(geometry, data);
|
||||
replay.finish(context);
|
||||
const opacity = 1;
|
||||
/** @type {Object<string, boolean>} */
|
||||
const skippedFeatures = {};
|
||||
let featureCallback;
|
||||
const oneByOne = false;
|
||||
replay.replay(this.context_, this.center_, this.resolution_, this.rotation_,
|
||||
this.size_, this.pixelRatio_, opacity, skippedFeatures, featureCallback,
|
||||
oneByOne);
|
||||
replay.getDeleteResourcesFunction(context)();
|
||||
|
||||
if (this.textStyle_) {
|
||||
this.drawText_(replayGroup, geometry);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
drawMultiLineString(geometry, data) {
|
||||
const context = this.context_;
|
||||
const replayGroup = new WebGLReplayGroup(1, this.extent_);
|
||||
const replay = /** @type {import("./LineStringReplay.js").default} */ (
|
||||
replayGroup.getBuilder(0, ReplayType.LINE_STRING));
|
||||
replay.setFillStrokeStyle(null, this.strokeStyle_);
|
||||
replay.drawMultiLineString(geometry, data);
|
||||
replay.finish(context);
|
||||
const opacity = 1;
|
||||
/** @type {Object<string, boolean>} */
|
||||
const skippedFeatures = {};
|
||||
let featureCallback;
|
||||
const oneByOne = false;
|
||||
replay.replay(this.context_, this.center_, this.resolution_, this.rotation_,
|
||||
this.size_, this.pixelRatio_, opacity, skippedFeatures, featureCallback,
|
||||
oneByOne);
|
||||
replay.getDeleteResourcesFunction(context)();
|
||||
|
||||
if (this.textStyle_) {
|
||||
this.drawText_(replayGroup, geometry);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
drawPolygon(geometry, data) {
|
||||
const context = this.context_;
|
||||
const replayGroup = new WebGLReplayGroup(1, this.extent_);
|
||||
const replay = /** @type {import("./PolygonReplay.js").default} */ (
|
||||
replayGroup.getBuilder(0, ReplayType.POLYGON));
|
||||
replay.setFillStrokeStyle(this.fillStyle_, this.strokeStyle_);
|
||||
replay.drawPolygon(geometry, data);
|
||||
replay.finish(context);
|
||||
const opacity = 1;
|
||||
/** @type {Object<string, boolean>} */
|
||||
const skippedFeatures = {};
|
||||
let featureCallback;
|
||||
const oneByOne = false;
|
||||
replay.replay(this.context_, this.center_, this.resolution_, this.rotation_,
|
||||
this.size_, this.pixelRatio_, opacity, skippedFeatures, featureCallback,
|
||||
oneByOne);
|
||||
replay.getDeleteResourcesFunction(context)();
|
||||
|
||||
if (this.textStyle_) {
|
||||
this.drawText_(replayGroup, geometry);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
drawMultiPolygon(geometry, data) {
|
||||
const context = this.context_;
|
||||
const replayGroup = new WebGLReplayGroup(1, this.extent_);
|
||||
const replay = /** @type {import("./PolygonReplay.js").default} */ (
|
||||
replayGroup.getBuilder(0, ReplayType.POLYGON));
|
||||
replay.setFillStrokeStyle(this.fillStyle_, this.strokeStyle_);
|
||||
replay.drawMultiPolygon(geometry, data);
|
||||
replay.finish(context);
|
||||
const opacity = 1;
|
||||
/** @type {Object<string, boolean>} */
|
||||
const skippedFeatures = {};
|
||||
let featureCallback;
|
||||
const oneByOne = false;
|
||||
replay.replay(this.context_, this.center_, this.resolution_, this.rotation_,
|
||||
this.size_, this.pixelRatio_, opacity, skippedFeatures, featureCallback,
|
||||
oneByOne);
|
||||
replay.getDeleteResourcesFunction(context)();
|
||||
|
||||
if (this.textStyle_) {
|
||||
this.drawText_(replayGroup, geometry);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
drawCircle(geometry, data) {
|
||||
const context = this.context_;
|
||||
const replayGroup = new WebGLReplayGroup(1, this.extent_);
|
||||
const replay = /** @type {import("./CircleReplay.js").default} */ (
|
||||
replayGroup.getBuilder(0, ReplayType.CIRCLE));
|
||||
replay.setFillStrokeStyle(this.fillStyle_, this.strokeStyle_);
|
||||
replay.drawCircle(geometry, data);
|
||||
replay.finish(context);
|
||||
const opacity = 1;
|
||||
/** @type {Object<string, boolean>} */
|
||||
const skippedFeatures = {};
|
||||
let featureCallback;
|
||||
const oneByOne = false;
|
||||
replay.replay(this.context_, this.center_, this.resolution_, this.rotation_,
|
||||
this.size_, this.pixelRatio_, opacity, skippedFeatures, featureCallback,
|
||||
oneByOne);
|
||||
replay.getDeleteResourcesFunction(context)();
|
||||
|
||||
if (this.textStyle_) {
|
||||
this.drawText_(replayGroup, geometry);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
setImageStyle(imageStyle) {
|
||||
this.imageStyle_ = imageStyle;
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
setFillStrokeStyle(fillStyle, strokeStyle) {
|
||||
this.fillStyle_ = fillStyle;
|
||||
this.strokeStyle_ = strokeStyle;
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
setTextStyle(textStyle) {
|
||||
this.textStyle_ = textStyle;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export default WebGLImmediateRenderer;
|
||||
@@ -1,665 +0,0 @@
|
||||
/**
|
||||
* @module ol/render/webgl/LineStringReplay
|
||||
*/
|
||||
import {getUid} from '../../util.js';
|
||||
import {equals} from '../../array.js';
|
||||
import {asArray} from '../../color.js';
|
||||
import {intersects} from '../../extent.js';
|
||||
import {linearRingIsClockwise} from '../../geom/flat/orient.js';
|
||||
import {translate} from '../../geom/flat/transform.js';
|
||||
import {lineStringIsClosed} from '../../geom/flat/topology.js';
|
||||
import {isEmpty} from '../../obj.js';
|
||||
import {DEFAULT_LINECAP, DEFAULT_LINEDASH, DEFAULT_LINEDASHOFFSET,
|
||||
DEFAULT_LINEJOIN, DEFAULT_LINEWIDTH, DEFAULT_MITERLIMIT, DEFAULT_STROKESTYLE,
|
||||
triangleIsCounterClockwise} from '../webgl.js';
|
||||
import WebGLReplay from './Replay.js';
|
||||
import {fragment, vertex} from './linestringreplay/defaultshader.js';
|
||||
import Locations from './linestringreplay/defaultshader/Locations.js';
|
||||
import {FLOAT} from '../../webgl.js';
|
||||
import WebGLBuffer from '../../webgl/Buffer.js';
|
||||
|
||||
|
||||
/**
|
||||
* @enum {number}
|
||||
*/
|
||||
const Instruction = {
|
||||
ROUND: 2,
|
||||
BEGIN_LINE: 3,
|
||||
END_LINE: 5,
|
||||
BEGIN_LINE_CAP: 7,
|
||||
END_LINE_CAP: 11,
|
||||
BEVEL_FIRST: 13,
|
||||
BEVEL_SECOND: 17,
|
||||
MITER_BOTTOM: 19,
|
||||
MITER_TOP: 23
|
||||
};
|
||||
|
||||
|
||||
class WebGLLineStringReplay extends WebGLReplay {
|
||||
/**
|
||||
* @param {number} tolerance Tolerance.
|
||||
* @param {import("../../extent.js").Extent} maxExtent Max extent.
|
||||
*/
|
||||
constructor(tolerance, maxExtent) {
|
||||
super(tolerance, maxExtent);
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {import("./linestringreplay/defaultshader/Locations.js").default}
|
||||
*/
|
||||
this.defaultLocations_ = null;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {Array<Array<?>>}
|
||||
*/
|
||||
this.styles_ = [];
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {Array<number>}
|
||||
*/
|
||||
this.styleIndices_ = [];
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {{strokeColor: (Array<number>|null),
|
||||
* lineCap: (string|undefined),
|
||||
* lineDash: Array<number>,
|
||||
* lineDashOffset: (number|undefined),
|
||||
* lineJoin: (string|undefined),
|
||||
* lineWidth: (number|undefined),
|
||||
* miterLimit: (number|undefined),
|
||||
* changed: boolean}|null}
|
||||
*/
|
||||
this.state_ = {
|
||||
strokeColor: null,
|
||||
lineCap: undefined,
|
||||
lineDash: null,
|
||||
lineDashOffset: undefined,
|
||||
lineJoin: undefined,
|
||||
lineWidth: undefined,
|
||||
miterLimit: undefined,
|
||||
changed: false
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Draw one segment.
|
||||
* @private
|
||||
* @param {Array<number>} flatCoordinates Flat coordinates.
|
||||
* @param {number} offset Offset.
|
||||
* @param {number} end End.
|
||||
* @param {number} stride Stride.
|
||||
*/
|
||||
drawCoordinates_(flatCoordinates, offset, end, stride) {
|
||||
|
||||
let i, ii;
|
||||
let numVertices = this.vertices.length;
|
||||
let numIndices = this.indices.length;
|
||||
//To save a vertex, the direction of a point is a product of the sign (1 or -1), a prime from
|
||||
//Instruction, and a rounding factor (1 or 2). If the product is even,
|
||||
//we round it. If it is odd, we don't.
|
||||
const lineJoin = this.state_.lineJoin === 'bevel' ? 0 :
|
||||
this.state_.lineJoin === 'miter' ? 1 : 2;
|
||||
const lineCap = this.state_.lineCap === 'butt' ? 0 :
|
||||
this.state_.lineCap === 'square' ? 1 : 2;
|
||||
const closed = lineStringIsClosed(flatCoordinates, offset, end, stride);
|
||||
let startCoords, sign, n;
|
||||
let lastIndex = numIndices;
|
||||
let lastSign = 1;
|
||||
//We need the adjacent vertices to define normals in joins. p0 = last, p1 = current, p2 = next.
|
||||
let p0, p1, p2;
|
||||
|
||||
for (i = offset, ii = end; i < ii; i += stride) {
|
||||
|
||||
n = numVertices / 7;
|
||||
|
||||
p0 = p1;
|
||||
p1 = p2 || [flatCoordinates[i], flatCoordinates[i + 1]];
|
||||
//First vertex.
|
||||
if (i === offset) {
|
||||
p2 = [flatCoordinates[i + stride], flatCoordinates[i + stride + 1]];
|
||||
if (end - offset === stride * 2 && equals(p1, p2)) {
|
||||
break;
|
||||
}
|
||||
if (closed) {
|
||||
//A closed line! Complete the circle.
|
||||
p0 = [flatCoordinates[end - stride * 2],
|
||||
flatCoordinates[end - stride * 2 + 1]];
|
||||
|
||||
startCoords = p2;
|
||||
} else {
|
||||
//Add the first two/four vertices.
|
||||
|
||||
if (lineCap) {
|
||||
numVertices = this.addVertices_([0, 0], p1, p2,
|
||||
lastSign * Instruction.BEGIN_LINE_CAP * lineCap, numVertices);
|
||||
|
||||
numVertices = this.addVertices_([0, 0], p1, p2,
|
||||
-lastSign * Instruction.BEGIN_LINE_CAP * lineCap, numVertices);
|
||||
|
||||
this.indices[numIndices++] = n + 2;
|
||||
this.indices[numIndices++] = n;
|
||||
this.indices[numIndices++] = n + 1;
|
||||
|
||||
this.indices[numIndices++] = n + 1;
|
||||
this.indices[numIndices++] = n + 3;
|
||||
this.indices[numIndices++] = n + 2;
|
||||
|
||||
}
|
||||
|
||||
numVertices = this.addVertices_([0, 0], p1, p2,
|
||||
lastSign * Instruction.BEGIN_LINE * (lineCap || 1), numVertices);
|
||||
|
||||
numVertices = this.addVertices_([0, 0], p1, p2,
|
||||
-lastSign * Instruction.BEGIN_LINE * (lineCap || 1), numVertices);
|
||||
|
||||
lastIndex = numVertices / 7 - 1;
|
||||
|
||||
continue;
|
||||
}
|
||||
} else if (i === end - stride) {
|
||||
//Last vertex.
|
||||
if (closed) {
|
||||
//Same as the first vertex.
|
||||
p2 = startCoords;
|
||||
break;
|
||||
} else {
|
||||
p0 = p0 || [0, 0];
|
||||
|
||||
numVertices = this.addVertices_(p0, p1, [0, 0],
|
||||
lastSign * Instruction.END_LINE * (lineCap || 1), numVertices);
|
||||
|
||||
numVertices = this.addVertices_(p0, p1, [0, 0],
|
||||
-lastSign * Instruction.END_LINE * (lineCap || 1), numVertices);
|
||||
|
||||
this.indices[numIndices++] = n;
|
||||
this.indices[numIndices++] = lastIndex - 1;
|
||||
this.indices[numIndices++] = lastIndex;
|
||||
|
||||
this.indices[numIndices++] = lastIndex;
|
||||
this.indices[numIndices++] = n + 1;
|
||||
this.indices[numIndices++] = n;
|
||||
|
||||
if (lineCap) {
|
||||
numVertices = this.addVertices_(p0, p1, [0, 0],
|
||||
lastSign * Instruction.END_LINE_CAP * lineCap, numVertices);
|
||||
|
||||
numVertices = this.addVertices_(p0, p1, [0, 0],
|
||||
-lastSign * Instruction.END_LINE_CAP * lineCap, numVertices);
|
||||
|
||||
this.indices[numIndices++] = n + 2;
|
||||
this.indices[numIndices++] = n;
|
||||
this.indices[numIndices++] = n + 1;
|
||||
|
||||
this.indices[numIndices++] = n + 1;
|
||||
this.indices[numIndices++] = n + 3;
|
||||
this.indices[numIndices++] = n + 2;
|
||||
|
||||
}
|
||||
|
||||
break;
|
||||
}
|
||||
} else {
|
||||
p2 = [flatCoordinates[i + stride], flatCoordinates[i + stride + 1]];
|
||||
}
|
||||
|
||||
// We group CW and straight lines, thus the not so inituitive CCW checking function.
|
||||
sign = triangleIsCounterClockwise(p0[0], p0[1], p1[0], p1[1], p2[0], p2[1])
|
||||
? -1 : 1;
|
||||
|
||||
numVertices = this.addVertices_(p0, p1, p2,
|
||||
sign * Instruction.BEVEL_FIRST * (lineJoin || 1), numVertices);
|
||||
|
||||
numVertices = this.addVertices_(p0, p1, p2,
|
||||
sign * Instruction.BEVEL_SECOND * (lineJoin || 1), numVertices);
|
||||
|
||||
numVertices = this.addVertices_(p0, p1, p2,
|
||||
-sign * Instruction.MITER_BOTTOM * (lineJoin || 1), numVertices);
|
||||
|
||||
if (i > offset) {
|
||||
this.indices[numIndices++] = n;
|
||||
this.indices[numIndices++] = lastIndex - 1;
|
||||
this.indices[numIndices++] = lastIndex;
|
||||
|
||||
this.indices[numIndices++] = n + 2;
|
||||
this.indices[numIndices++] = n;
|
||||
this.indices[numIndices++] = lastSign * sign > 0 ? lastIndex : lastIndex - 1;
|
||||
}
|
||||
|
||||
this.indices[numIndices++] = n;
|
||||
this.indices[numIndices++] = n + 2;
|
||||
this.indices[numIndices++] = n + 1;
|
||||
|
||||
lastIndex = n + 2;
|
||||
lastSign = sign;
|
||||
|
||||
//Add miter
|
||||
if (lineJoin) {
|
||||
numVertices = this.addVertices_(p0, p1, p2,
|
||||
sign * Instruction.MITER_TOP * lineJoin, numVertices);
|
||||
|
||||
this.indices[numIndices++] = n + 1;
|
||||
this.indices[numIndices++] = n + 3;
|
||||
this.indices[numIndices++] = n;
|
||||
}
|
||||
}
|
||||
|
||||
if (closed) {
|
||||
n = n || numVertices / 7;
|
||||
sign = linearRingIsClockwise([p0[0], p0[1], p1[0], p1[1], p2[0], p2[1]], 0, 6, 2)
|
||||
? 1 : -1;
|
||||
|
||||
numVertices = this.addVertices_(p0, p1, p2,
|
||||
sign * Instruction.BEVEL_FIRST * (lineJoin || 1), numVertices);
|
||||
|
||||
numVertices = this.addVertices_(p0, p1, p2,
|
||||
-sign * Instruction.MITER_BOTTOM * (lineJoin || 1), numVertices);
|
||||
|
||||
this.indices[numIndices++] = n;
|
||||
this.indices[numIndices++] = lastIndex - 1;
|
||||
this.indices[numIndices++] = lastIndex;
|
||||
|
||||
this.indices[numIndices++] = n + 1;
|
||||
this.indices[numIndices++] = n;
|
||||
this.indices[numIndices++] = lastSign * sign > 0 ? lastIndex : lastIndex - 1;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Array<number>} p0 Last coordinates.
|
||||
* @param {Array<number>} p1 Current coordinates.
|
||||
* @param {Array<number>} p2 Next coordinates.
|
||||
* @param {number} product Sign, instruction, and rounding product.
|
||||
* @param {number} numVertices Vertex counter.
|
||||
* @return {number} Vertex counter.
|
||||
* @private
|
||||
*/
|
||||
addVertices_(p0, p1, p2, product, numVertices) {
|
||||
this.vertices[numVertices++] = p0[0];
|
||||
this.vertices[numVertices++] = p0[1];
|
||||
this.vertices[numVertices++] = p1[0];
|
||||
this.vertices[numVertices++] = p1[1];
|
||||
this.vertices[numVertices++] = p2[0];
|
||||
this.vertices[numVertices++] = p2[1];
|
||||
this.vertices[numVertices++] = product;
|
||||
|
||||
return numVertices;
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if the linestring can be drawn (i. e. valid).
|
||||
* @param {Array<number>} flatCoordinates Flat coordinates.
|
||||
* @param {number} offset Offset.
|
||||
* @param {number} end End.
|
||||
* @param {number} stride Stride.
|
||||
* @return {boolean} The linestring can be drawn.
|
||||
* @private
|
||||
*/
|
||||
isValid_(flatCoordinates, offset, end, stride) {
|
||||
const range = end - offset;
|
||||
if (range < stride * 2) {
|
||||
return false;
|
||||
} else if (range === stride * 2) {
|
||||
const firstP = [flatCoordinates[offset], flatCoordinates[offset + 1]];
|
||||
const lastP = [flatCoordinates[offset + stride], flatCoordinates[offset + stride + 1]];
|
||||
return !equals(firstP, lastP);
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
drawLineString(lineStringGeometry, feature) {
|
||||
let flatCoordinates = lineStringGeometry.getFlatCoordinates();
|
||||
const stride = lineStringGeometry.getStride();
|
||||
if (this.isValid_(flatCoordinates, 0, flatCoordinates.length, stride)) {
|
||||
flatCoordinates = translate(flatCoordinates, 0, flatCoordinates.length,
|
||||
stride, -this.origin[0], -this.origin[1]);
|
||||
if (this.state_.changed) {
|
||||
this.styleIndices_.push(this.indices.length);
|
||||
this.state_.changed = false;
|
||||
}
|
||||
this.startIndices.push(this.indices.length);
|
||||
this.startIndicesFeature.push(feature);
|
||||
this.drawCoordinates_(
|
||||
flatCoordinates, 0, flatCoordinates.length, stride);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
drawMultiLineString(multiLineStringGeometry, feature) {
|
||||
const indexCount = this.indices.length;
|
||||
const ends = multiLineStringGeometry.getEnds();
|
||||
ends.unshift(0);
|
||||
const flatCoordinates = multiLineStringGeometry.getFlatCoordinates();
|
||||
const stride = multiLineStringGeometry.getStride();
|
||||
let i, ii;
|
||||
if (ends.length > 1) {
|
||||
for (i = 1, ii = ends.length; i < ii; ++i) {
|
||||
if (this.isValid_(flatCoordinates, ends[i - 1], ends[i], stride)) {
|
||||
const lineString = translate(flatCoordinates, ends[i - 1], ends[i],
|
||||
stride, -this.origin[0], -this.origin[1]);
|
||||
this.drawCoordinates_(
|
||||
lineString, 0, lineString.length, stride);
|
||||
}
|
||||
}
|
||||
}
|
||||
if (this.indices.length > indexCount) {
|
||||
this.startIndices.push(indexCount);
|
||||
this.startIndicesFeature.push(feature);
|
||||
if (this.state_.changed) {
|
||||
this.styleIndices_.push(indexCount);
|
||||
this.state_.changed = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Array<number>} flatCoordinates Flat coordinates.
|
||||
* @param {Array<Array<number>>} holeFlatCoordinates Hole flat coordinates.
|
||||
* @param {number} stride Stride.
|
||||
*/
|
||||
drawPolygonCoordinates(flatCoordinates, holeFlatCoordinates, stride) {
|
||||
if (!lineStringIsClosed(flatCoordinates, 0, flatCoordinates.length, stride)) {
|
||||
flatCoordinates.push(flatCoordinates[0]);
|
||||
flatCoordinates.push(flatCoordinates[1]);
|
||||
}
|
||||
this.drawCoordinates_(flatCoordinates, 0, flatCoordinates.length, stride);
|
||||
if (holeFlatCoordinates.length) {
|
||||
let i, ii;
|
||||
for (i = 0, ii = holeFlatCoordinates.length; i < ii; ++i) {
|
||||
if (!lineStringIsClosed(holeFlatCoordinates[i], 0, holeFlatCoordinates[i].length, stride)) {
|
||||
holeFlatCoordinates[i].push(holeFlatCoordinates[i][0]);
|
||||
holeFlatCoordinates[i].push(holeFlatCoordinates[i][1]);
|
||||
}
|
||||
this.drawCoordinates_(holeFlatCoordinates[i], 0,
|
||||
holeFlatCoordinates[i].length, stride);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {import("../../Feature.js").default|import("../Feature.js").default} feature Feature.
|
||||
* @param {number=} opt_index Index count.
|
||||
*/
|
||||
setPolygonStyle(feature, opt_index) {
|
||||
const index = opt_index === undefined ? this.indices.length : opt_index;
|
||||
this.startIndices.push(index);
|
||||
this.startIndicesFeature.push(feature);
|
||||
if (this.state_.changed) {
|
||||
this.styleIndices_.push(index);
|
||||
this.state_.changed = false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @return {number} Current index.
|
||||
*/
|
||||
getCurrentIndex() {
|
||||
return this.indices.length;
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
**/
|
||||
finish(context) {
|
||||
// create, bind, and populate the vertices buffer
|
||||
this.verticesBuffer = new WebGLBuffer(this.vertices);
|
||||
|
||||
// create, bind, and populate the indices buffer
|
||||
this.indicesBuffer = new WebGLBuffer(this.indices);
|
||||
|
||||
this.startIndices.push(this.indices.length);
|
||||
|
||||
//Clean up, if there is nothing to draw
|
||||
if (this.styleIndices_.length === 0 && this.styles_.length > 0) {
|
||||
this.styles_ = [];
|
||||
}
|
||||
|
||||
this.vertices = null;
|
||||
this.indices = null;
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
getDeleteResourcesFunction(context) {
|
||||
const verticesBuffer = this.verticesBuffer;
|
||||
const indicesBuffer = this.indicesBuffer;
|
||||
return function() {
|
||||
context.deleteBuffer(verticesBuffer);
|
||||
context.deleteBuffer(indicesBuffer);
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
setUpProgram(gl, context, size, pixelRatio) {
|
||||
// get the program
|
||||
const program = context.getProgram(fragment, vertex);
|
||||
|
||||
// get the locations
|
||||
let locations;
|
||||
if (!this.defaultLocations_) {
|
||||
locations = new Locations(gl, program);
|
||||
this.defaultLocations_ = locations;
|
||||
} else {
|
||||
locations = this.defaultLocations_;
|
||||
}
|
||||
|
||||
context.useProgram(program);
|
||||
|
||||
// enable the vertex attrib arrays
|
||||
gl.enableVertexAttribArray(locations.a_lastPos);
|
||||
gl.vertexAttribPointer(locations.a_lastPos, 2, FLOAT,
|
||||
false, 28, 0);
|
||||
|
||||
gl.enableVertexAttribArray(locations.a_position);
|
||||
gl.vertexAttribPointer(locations.a_position, 2, FLOAT,
|
||||
false, 28, 8);
|
||||
|
||||
gl.enableVertexAttribArray(locations.a_nextPos);
|
||||
gl.vertexAttribPointer(locations.a_nextPos, 2, FLOAT,
|
||||
false, 28, 16);
|
||||
|
||||
gl.enableVertexAttribArray(locations.a_direction);
|
||||
gl.vertexAttribPointer(locations.a_direction, 1, FLOAT,
|
||||
false, 28, 24);
|
||||
|
||||
// Enable renderer specific uniforms.
|
||||
gl.uniform2fv(locations.u_size, size);
|
||||
gl.uniform1f(locations.u_pixelRatio, pixelRatio);
|
||||
|
||||
return locations;
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
shutDownProgram(gl, locations) {
|
||||
gl.disableVertexAttribArray(locations.a_lastPos);
|
||||
gl.disableVertexAttribArray(locations.a_position);
|
||||
gl.disableVertexAttribArray(locations.a_nextPos);
|
||||
gl.disableVertexAttribArray(locations.a_direction);
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
drawReplay(gl, context, skippedFeaturesHash, hitDetection) {
|
||||
//Save GL parameters.
|
||||
const tmpDepthFunc = /** @type {number} */ (gl.getParameter(gl.DEPTH_FUNC));
|
||||
const tmpDepthMask = /** @type {boolean} */ (gl.getParameter(gl.DEPTH_WRITEMASK));
|
||||
|
||||
if (!hitDetection) {
|
||||
gl.enable(gl.DEPTH_TEST);
|
||||
gl.depthMask(true);
|
||||
gl.depthFunc(gl.NOTEQUAL);
|
||||
}
|
||||
|
||||
if (!isEmpty(skippedFeaturesHash)) {
|
||||
this.drawReplaySkipping_(gl, context, skippedFeaturesHash);
|
||||
} else {
|
||||
//Draw by style groups to minimize drawElements() calls.
|
||||
let i, start, end, nextStyle;
|
||||
end = this.startIndices[this.startIndices.length - 1];
|
||||
for (i = this.styleIndices_.length - 1; i >= 0; --i) {
|
||||
start = this.styleIndices_[i];
|
||||
nextStyle = this.styles_[i];
|
||||
this.setStrokeStyle_(gl, nextStyle[0], nextStyle[1], nextStyle[2]);
|
||||
this.drawElements(gl, context, start, end);
|
||||
gl.clear(gl.DEPTH_BUFFER_BIT);
|
||||
end = start;
|
||||
}
|
||||
}
|
||||
if (!hitDetection) {
|
||||
gl.disable(gl.DEPTH_TEST);
|
||||
gl.clear(gl.DEPTH_BUFFER_BIT);
|
||||
//Restore GL parameters.
|
||||
gl.depthMask(tmpDepthMask);
|
||||
gl.depthFunc(tmpDepthFunc);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @param {WebGLRenderingContext} gl gl.
|
||||
* @param {import("../../webgl/Context.js").default} context Context.
|
||||
* @param {Object} skippedFeaturesHash Ids of features to skip.
|
||||
*/
|
||||
drawReplaySkipping_(gl, context, skippedFeaturesHash) {
|
||||
let i, start, end, nextStyle, groupStart, feature, featureIndex, featureStart;
|
||||
featureIndex = this.startIndices.length - 2;
|
||||
end = start = this.startIndices[featureIndex + 1];
|
||||
for (i = this.styleIndices_.length - 1; i >= 0; --i) {
|
||||
nextStyle = this.styles_[i];
|
||||
this.setStrokeStyle_(gl, nextStyle[0], nextStyle[1], nextStyle[2]);
|
||||
groupStart = this.styleIndices_[i];
|
||||
|
||||
while (featureIndex >= 0 &&
|
||||
this.startIndices[featureIndex] >= groupStart) {
|
||||
featureStart = this.startIndices[featureIndex];
|
||||
feature = this.startIndicesFeature[featureIndex];
|
||||
|
||||
if (skippedFeaturesHash[getUid(feature)]) {
|
||||
if (start !== end) {
|
||||
this.drawElements(gl, context, start, end);
|
||||
gl.clear(gl.DEPTH_BUFFER_BIT);
|
||||
}
|
||||
end = featureStart;
|
||||
}
|
||||
featureIndex--;
|
||||
start = featureStart;
|
||||
}
|
||||
if (start !== end) {
|
||||
this.drawElements(gl, context, start, end);
|
||||
gl.clear(gl.DEPTH_BUFFER_BIT);
|
||||
}
|
||||
start = end = groupStart;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
drawHitDetectionReplayOneByOne(gl, context, skippedFeaturesHash, featureCallback, opt_hitExtent) {
|
||||
let i, start, end, nextStyle, groupStart, feature, featureIndex;
|
||||
featureIndex = this.startIndices.length - 2;
|
||||
end = this.startIndices[featureIndex + 1];
|
||||
for (i = this.styleIndices_.length - 1; i >= 0; --i) {
|
||||
nextStyle = this.styles_[i];
|
||||
this.setStrokeStyle_(gl, nextStyle[0], nextStyle[1], nextStyle[2]);
|
||||
groupStart = this.styleIndices_[i];
|
||||
|
||||
while (featureIndex >= 0 &&
|
||||
this.startIndices[featureIndex] >= groupStart) {
|
||||
start = this.startIndices[featureIndex];
|
||||
feature = this.startIndicesFeature[featureIndex];
|
||||
|
||||
if (skippedFeaturesHash[getUid(feature)] === undefined &&
|
||||
feature.getGeometry() &&
|
||||
(opt_hitExtent === undefined || intersects(
|
||||
/** @type {Array<number>} */ (opt_hitExtent),
|
||||
feature.getGeometry().getExtent()))) {
|
||||
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
|
||||
this.drawElements(gl, context, start, end);
|
||||
|
||||
const result = featureCallback(feature);
|
||||
|
||||
if (result) {
|
||||
return result;
|
||||
}
|
||||
|
||||
}
|
||||
featureIndex--;
|
||||
end = start;
|
||||
}
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @param {WebGLRenderingContext} gl gl.
|
||||
* @param {Array<number>} color Color.
|
||||
* @param {number} lineWidth Line width.
|
||||
* @param {number} miterLimit Miter limit.
|
||||
*/
|
||||
setStrokeStyle_(gl, color, lineWidth, miterLimit) {
|
||||
gl.uniform4fv(this.defaultLocations_.u_color, color);
|
||||
gl.uniform1f(this.defaultLocations_.u_lineWidth, lineWidth);
|
||||
gl.uniform1f(this.defaultLocations_.u_miterLimit, miterLimit);
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
setFillStrokeStyle(fillStyle, strokeStyle) {
|
||||
const strokeStyleLineCap = strokeStyle.getLineCap();
|
||||
this.state_.lineCap = strokeStyleLineCap !== undefined ?
|
||||
strokeStyleLineCap : DEFAULT_LINECAP;
|
||||
const strokeStyleLineDash = strokeStyle.getLineDash();
|
||||
this.state_.lineDash = strokeStyleLineDash ?
|
||||
strokeStyleLineDash : DEFAULT_LINEDASH;
|
||||
const strokeStyleLineDashOffset = strokeStyle.getLineDashOffset();
|
||||
this.state_.lineDashOffset = strokeStyleLineDashOffset ?
|
||||
strokeStyleLineDashOffset : DEFAULT_LINEDASHOFFSET;
|
||||
const strokeStyleLineJoin = strokeStyle.getLineJoin();
|
||||
this.state_.lineJoin = strokeStyleLineJoin !== undefined ?
|
||||
strokeStyleLineJoin : DEFAULT_LINEJOIN;
|
||||
let strokeStyleColor = strokeStyle.getColor();
|
||||
if (!(strokeStyleColor instanceof CanvasGradient) &&
|
||||
!(strokeStyleColor instanceof CanvasPattern)) {
|
||||
strokeStyleColor = asArray(strokeStyleColor).map(function(c, i) {
|
||||
return i != 3 ? c / 255 : c;
|
||||
}) || DEFAULT_STROKESTYLE;
|
||||
} else {
|
||||
strokeStyleColor = DEFAULT_STROKESTYLE;
|
||||
}
|
||||
let strokeStyleWidth = strokeStyle.getWidth();
|
||||
strokeStyleWidth = strokeStyleWidth !== undefined ?
|
||||
strokeStyleWidth : DEFAULT_LINEWIDTH;
|
||||
let strokeStyleMiterLimit = strokeStyle.getMiterLimit();
|
||||
strokeStyleMiterLimit = strokeStyleMiterLimit !== undefined ?
|
||||
strokeStyleMiterLimit : DEFAULT_MITERLIMIT;
|
||||
if (!this.state_.strokeColor || !equals(this.state_.strokeColor, strokeStyleColor) ||
|
||||
this.state_.lineWidth !== strokeStyleWidth || this.state_.miterLimit !== strokeStyleMiterLimit) {
|
||||
this.state_.changed = true;
|
||||
this.state_.strokeColor = strokeStyleColor;
|
||||
this.state_.lineWidth = strokeStyleWidth;
|
||||
this.state_.miterLimit = strokeStyleMiterLimit;
|
||||
this.styles_.push([strokeStyleColor, strokeStyleWidth, strokeStyleMiterLimit]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export default WebGLLineStringReplay;
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,369 +0,0 @@
|
||||
/**
|
||||
* @module ol/render/webgl/Replay
|
||||
*/
|
||||
import {abstract} from '../../util.js';
|
||||
import {getCenter} from '../../extent.js';
|
||||
import VectorContext from '../VectorContext.js';
|
||||
import {
|
||||
create as createTransform,
|
||||
reset as resetTransform,
|
||||
rotate as rotateTransform,
|
||||
scale as scaleTransform,
|
||||
translate as translateTransform
|
||||
} from '../../transform.js';
|
||||
import {create, fromTransform} from '../../vec/mat4.js';
|
||||
import {ARRAY_BUFFER, ELEMENT_ARRAY_BUFFER, TRIANGLES,
|
||||
UNSIGNED_INT, UNSIGNED_SHORT} from '../../webgl.js';
|
||||
|
||||
class WebGLReplay extends VectorContext {
|
||||
/**
|
||||
* @param {number} tolerance Tolerance.
|
||||
* @param {import("../../extent.js").Extent} maxExtent Max extent.
|
||||
*/
|
||||
constructor(tolerance, maxExtent) {
|
||||
super();
|
||||
|
||||
/**
|
||||
* @protected
|
||||
* @type {number}
|
||||
*/
|
||||
this.tolerance = tolerance;
|
||||
|
||||
/**
|
||||
* @protected
|
||||
* @const
|
||||
* @type {import("../../extent.js").Extent}
|
||||
*/
|
||||
this.maxExtent = maxExtent;
|
||||
|
||||
/**
|
||||
* The origin of the coordinate system for the point coordinates sent to
|
||||
* the GPU. To eliminate jitter caused by precision problems in the GPU
|
||||
* we use the "Rendering Relative to Eye" technique described in the "3D
|
||||
* Engine Design for Virtual Globes" book.
|
||||
* @protected
|
||||
* @type {import("../../coordinate.js").Coordinate}
|
||||
*/
|
||||
this.origin = getCenter(maxExtent);
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {import("../../transform.js").Transform}
|
||||
*/
|
||||
this.projectionMatrix_ = createTransform();
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {import("../../transform.js").Transform}
|
||||
*/
|
||||
this.offsetRotateMatrix_ = createTransform();
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {import("../../transform.js").Transform}
|
||||
*/
|
||||
this.offsetScaleMatrix_ = createTransform();
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {Array<number>}
|
||||
*/
|
||||
this.tmpMat4_ = create();
|
||||
|
||||
/**
|
||||
* @protected
|
||||
* @type {Array<number>}
|
||||
*/
|
||||
this.indices = [];
|
||||
|
||||
/**
|
||||
* @protected
|
||||
* @type {?import("../../webgl/Buffer.js").default}
|
||||
*/
|
||||
this.indicesBuffer = null;
|
||||
|
||||
/**
|
||||
* Start index per feature (the index).
|
||||
* @protected
|
||||
* @type {Array<number>}
|
||||
*/
|
||||
this.startIndices = [];
|
||||
|
||||
/**
|
||||
* Start index per feature (the feature).
|
||||
* @protected
|
||||
* @type {Array<import("../../Feature.js").default|import("../Feature.js").default>}
|
||||
*/
|
||||
this.startIndicesFeature = [];
|
||||
|
||||
/**
|
||||
* @protected
|
||||
* @type {Array<number>}
|
||||
*/
|
||||
this.vertices = [];
|
||||
|
||||
/**
|
||||
* @protected
|
||||
* @type {?import("../../webgl/Buffer.js").default}
|
||||
*/
|
||||
this.verticesBuffer = null;
|
||||
|
||||
/**
|
||||
* Optional parameter for PolygonReplay instances.
|
||||
* @protected
|
||||
* @type {import("./LineStringReplay.js").default|undefined}
|
||||
*/
|
||||
this.lineStringReplay = undefined;
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* @abstract
|
||||
* @param {import("../../webgl/Context.js").default} context WebGL context.
|
||||
* @return {function()} Delete resources function.
|
||||
*/
|
||||
getDeleteResourcesFunction(context) {
|
||||
return abstract();
|
||||
}
|
||||
|
||||
/**
|
||||
* @abstract
|
||||
* @param {import("../../webgl/Context.js").default} context Context.
|
||||
*/
|
||||
finish(context) {
|
||||
abstract();
|
||||
}
|
||||
|
||||
/**
|
||||
* @abstract
|
||||
* @protected
|
||||
* @param {WebGLRenderingContext} gl gl.
|
||||
* @param {import("../../webgl/Context.js").default} context Context.
|
||||
* @param {import("../../size.js").Size} size Size.
|
||||
* @param {number} pixelRatio Pixel ratio.
|
||||
* @return {import("./circlereplay/defaultshader/Locations.js").default|
|
||||
import("./linestringreplay/defaultshader/Locations.js").default|
|
||||
import("./polygonreplay/defaultshader/Locations.js").default|
|
||||
import("./texturereplay/defaultshader/Locations.js").default} Locations.
|
||||
*/
|
||||
setUpProgram(gl, context, size, pixelRatio) {
|
||||
return abstract();
|
||||
}
|
||||
|
||||
/**
|
||||
* @abstract
|
||||
* @protected
|
||||
* @param {WebGLRenderingContext} gl gl.
|
||||
* @param {import("./circlereplay/defaultshader/Locations.js").default|
|
||||
import("./linestringreplay/defaultshader/Locations.js").default|
|
||||
import("./polygonreplay/defaultshader/Locations.js").default|
|
||||
import("./texturereplay/defaultshader/Locations.js").default} locations Locations.
|
||||
*/
|
||||
shutDownProgram(gl, locations) {
|
||||
abstract();
|
||||
}
|
||||
|
||||
/**
|
||||
* @abstract
|
||||
* @protected
|
||||
* @param {WebGLRenderingContext} gl gl.
|
||||
* @param {import("../../webgl/Context.js").default} context Context.
|
||||
* @param {Object<string, boolean>} skippedFeaturesHash Ids of features to skip.
|
||||
* @param {boolean} hitDetection Hit detection mode.
|
||||
*/
|
||||
drawReplay(gl, context, skippedFeaturesHash, hitDetection) {
|
||||
abstract();
|
||||
}
|
||||
|
||||
/**
|
||||
* @abstract
|
||||
* @protected
|
||||
* @param {WebGLRenderingContext} gl gl.
|
||||
* @param {import("../../webgl/Context.js").default} context Context.
|
||||
* @param {Object<string, boolean>} skippedFeaturesHash Ids of features to skip.
|
||||
* @param {function((import("../../Feature.js").default|import("../Feature.js").default)): T|undefined} featureCallback Feature callback.
|
||||
* @param {import("../../extent.js").Extent=} opt_hitExtent Hit extent: Only features intersecting this extent are checked.
|
||||
* @return {T|undefined} Callback result.
|
||||
* @template T
|
||||
*/
|
||||
drawHitDetectionReplayOneByOne(gl, context, skippedFeaturesHash, featureCallback, opt_hitExtent) {
|
||||
return abstract();
|
||||
}
|
||||
|
||||
/**
|
||||
* @protected
|
||||
* @param {WebGLRenderingContext} gl gl.
|
||||
* @param {import("../../webgl/Context.js").default} context Context.
|
||||
* @param {Object<string, boolean>} skippedFeaturesHash Ids of features to skip.
|
||||
* @param {function((import("../../Feature.js").default|import("../Feature.js").default)): T|undefined} featureCallback Feature callback.
|
||||
* @param {boolean} oneByOne Draw features one-by-one for the hit-detecion.
|
||||
* @param {import("../../extent.js").Extent=} opt_hitExtent Hit extent: Only features intersecting this extent are checked.
|
||||
* @return {T|undefined} Callback result.
|
||||
* @template T
|
||||
*/
|
||||
drawHitDetectionReplay(gl, context, skippedFeaturesHash, featureCallback, oneByOne, opt_hitExtent) {
|
||||
if (!oneByOne) {
|
||||
// draw all hit-detection features in "once" (by texture group)
|
||||
return this.drawHitDetectionReplayAll(gl, context,
|
||||
skippedFeaturesHash, featureCallback);
|
||||
} else {
|
||||
// draw hit-detection features one by one
|
||||
return this.drawHitDetectionReplayOneByOne(gl, context,
|
||||
skippedFeaturesHash, featureCallback, opt_hitExtent);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @protected
|
||||
* @param {WebGLRenderingContext} gl gl.
|
||||
* @param {import("../../webgl/Context.js").default} context Context.
|
||||
* @param {Object<string, boolean>} skippedFeaturesHash Ids of features to skip.
|
||||
* @param {function((import("../../Feature.js").default|import("../Feature.js").default)): T|undefined} featureCallback Feature callback.
|
||||
* @return {T|undefined} Callback result.
|
||||
* @template T
|
||||
*/
|
||||
drawHitDetectionReplayAll(gl, context, skippedFeaturesHash, featureCallback) {
|
||||
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
|
||||
this.drawReplay(gl, context, skippedFeaturesHash, true);
|
||||
|
||||
const result = featureCallback(null);
|
||||
if (result) {
|
||||
return result;
|
||||
} else {
|
||||
return undefined;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {import("../../webgl/Context.js").default} context Context.
|
||||
* @param {import("../../coordinate.js").Coordinate} center Center.
|
||||
* @param {number} resolution Resolution.
|
||||
* @param {number} rotation Rotation.
|
||||
* @param {import("../../size.js").Size} size Size.
|
||||
* @param {number} pixelRatio Pixel ratio.
|
||||
* @param {number} opacity Global opacity.
|
||||
* @param {Object<string, boolean>} skippedFeaturesHash Ids of features to skip.
|
||||
* @param {function((import("../../Feature.js").default|import("../Feature.js").default)): T|undefined} featureCallback Feature callback.
|
||||
* @param {boolean} oneByOne Draw features one-by-one for the hit-detecion.
|
||||
* @param {import("../../extent.js").Extent=} opt_hitExtent Hit extent: Only features intersecting this extent are checked.
|
||||
* @return {T|undefined} Callback result.
|
||||
* @template T
|
||||
*/
|
||||
replay(
|
||||
context,
|
||||
center,
|
||||
resolution,
|
||||
rotation,
|
||||
size,
|
||||
pixelRatio,
|
||||
opacity,
|
||||
skippedFeaturesHash,
|
||||
featureCallback,
|
||||
oneByOne,
|
||||
opt_hitExtent
|
||||
) {
|
||||
const gl = context.getGL();
|
||||
let tmpStencil, tmpStencilFunc, tmpStencilMaskVal, tmpStencilRef, tmpStencilMask,
|
||||
tmpStencilOpFail, tmpStencilOpPass, tmpStencilOpZFail;
|
||||
|
||||
if (this.lineStringReplay) {
|
||||
tmpStencil = gl.isEnabled(gl.STENCIL_TEST);
|
||||
tmpStencilFunc = gl.getParameter(gl.STENCIL_FUNC);
|
||||
tmpStencilMaskVal = gl.getParameter(gl.STENCIL_VALUE_MASK);
|
||||
tmpStencilRef = gl.getParameter(gl.STENCIL_REF);
|
||||
tmpStencilMask = gl.getParameter(gl.STENCIL_WRITEMASK);
|
||||
tmpStencilOpFail = gl.getParameter(gl.STENCIL_FAIL);
|
||||
tmpStencilOpPass = gl.getParameter(gl.STENCIL_PASS_DEPTH_PASS);
|
||||
tmpStencilOpZFail = gl.getParameter(gl.STENCIL_PASS_DEPTH_FAIL);
|
||||
|
||||
gl.enable(gl.STENCIL_TEST);
|
||||
gl.clear(gl.STENCIL_BUFFER_BIT);
|
||||
gl.stencilMask(255);
|
||||
gl.stencilFunc(gl.ALWAYS, 1, 255);
|
||||
gl.stencilOp(gl.KEEP, gl.KEEP, gl.REPLACE);
|
||||
|
||||
this.lineStringReplay.replay(context,
|
||||
center, resolution, rotation, size, pixelRatio,
|
||||
opacity, skippedFeaturesHash,
|
||||
featureCallback, oneByOne, opt_hitExtent);
|
||||
|
||||
gl.stencilMask(0);
|
||||
gl.stencilFunc(gl.NOTEQUAL, 1, 255);
|
||||
}
|
||||
|
||||
context.bindBuffer(ARRAY_BUFFER, this.verticesBuffer);
|
||||
|
||||
context.bindBuffer(ELEMENT_ARRAY_BUFFER, this.indicesBuffer);
|
||||
|
||||
const locations = this.setUpProgram(gl, context, size, pixelRatio);
|
||||
|
||||
// set the "uniform" values
|
||||
const projectionMatrix = resetTransform(this.projectionMatrix_);
|
||||
scaleTransform(projectionMatrix, 2 / (resolution * size[0]), 2 / (resolution * size[1]));
|
||||
rotateTransform(projectionMatrix, -rotation);
|
||||
translateTransform(projectionMatrix, -(center[0] - this.origin[0]), -(center[1] - this.origin[1]));
|
||||
|
||||
const offsetScaleMatrix = resetTransform(this.offsetScaleMatrix_);
|
||||
scaleTransform(offsetScaleMatrix, 2 / size[0], 2 / size[1]);
|
||||
|
||||
const offsetRotateMatrix = resetTransform(this.offsetRotateMatrix_);
|
||||
if (rotation !== 0) {
|
||||
rotateTransform(offsetRotateMatrix, -rotation);
|
||||
}
|
||||
|
||||
gl.uniformMatrix4fv(locations.u_projectionMatrix, false,
|
||||
fromTransform(this.tmpMat4_, projectionMatrix));
|
||||
gl.uniformMatrix4fv(locations.u_offsetScaleMatrix, false,
|
||||
fromTransform(this.tmpMat4_, offsetScaleMatrix));
|
||||
gl.uniformMatrix4fv(locations.u_offsetRotateMatrix, false,
|
||||
fromTransform(this.tmpMat4_, offsetRotateMatrix));
|
||||
gl.uniform1f(locations.u_opacity, opacity);
|
||||
|
||||
// draw!
|
||||
let result;
|
||||
if (featureCallback === undefined) {
|
||||
this.drawReplay(gl, context, skippedFeaturesHash, false);
|
||||
} else {
|
||||
// draw feature by feature for the hit-detection
|
||||
result = this.drawHitDetectionReplay(gl, context, skippedFeaturesHash,
|
||||
featureCallback, oneByOne, opt_hitExtent);
|
||||
}
|
||||
|
||||
// disable the vertex attrib arrays
|
||||
this.shutDownProgram(gl, locations);
|
||||
|
||||
if (this.lineStringReplay) {
|
||||
if (!tmpStencil) {
|
||||
gl.disable(gl.STENCIL_TEST);
|
||||
}
|
||||
gl.clear(gl.STENCIL_BUFFER_BIT);
|
||||
gl.stencilFunc(/** @type {number} */ (tmpStencilFunc),
|
||||
/** @type {number} */ (tmpStencilRef), /** @type {number} */ (tmpStencilMaskVal));
|
||||
gl.stencilMask(/** @type {number} */ (tmpStencilMask));
|
||||
gl.stencilOp(/** @type {number} */ (tmpStencilOpFail),
|
||||
/** @type {number} */ (tmpStencilOpZFail), /** @type {number} */ (tmpStencilOpPass));
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
/**
|
||||
* @protected
|
||||
* @param {WebGLRenderingContext} gl gl.
|
||||
* @param {import("../../webgl/Context.js").default} context Context.
|
||||
* @param {number} start Start index.
|
||||
* @param {number} end End index.
|
||||
*/
|
||||
drawElements(gl, context, start, end) {
|
||||
const elementType = context.hasOESElementIndexUint ?
|
||||
UNSIGNED_INT : UNSIGNED_SHORT;
|
||||
const elementSize = context.hasOESElementIndexUint ? 4 : 2;
|
||||
|
||||
const numItems = end - start;
|
||||
const offsetInBytes = start * elementSize;
|
||||
gl.drawElements(TRIANGLES, numItems, elementType, offsetInBytes);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export default WebGLReplay;
|
||||
@@ -1,338 +0,0 @@
|
||||
/**
|
||||
* @module ol/render/webgl/ReplayGroup
|
||||
*/
|
||||
|
||||
import {numberSafeCompareFunction} from '../../array.js';
|
||||
import {buffer, createOrUpdateFromCoordinate} from '../../extent.js';
|
||||
import {isEmpty} from '../../obj.js';
|
||||
import {ORDER} from '../replay.js';
|
||||
import ReplayGroup from '../BuilderGroup.js';
|
||||
import WebGLCircleReplay from './CircleReplay.js';
|
||||
import WebGLImageReplay from './ImageReplay.js';
|
||||
import WebGLLineStringReplay from './LineStringReplay.js';
|
||||
import WebGLPolygonReplay from './PolygonReplay.js';
|
||||
import WebGLTextReplay from './TextReplay.js';
|
||||
|
||||
/**
|
||||
* @type {Array<number>}
|
||||
*/
|
||||
const HIT_DETECTION_SIZE = [1, 1];
|
||||
|
||||
/**
|
||||
* @type {Object<import("../ReplayType.js").default, typeof import("./Replay.js").default>}
|
||||
*/
|
||||
const BATCH_CONSTRUCTORS = {
|
||||
'Circle': WebGLCircleReplay,
|
||||
'Image': WebGLImageReplay,
|
||||
'LineString': WebGLLineStringReplay,
|
||||
'Polygon': WebGLPolygonReplay,
|
||||
'Text': WebGLTextReplay
|
||||
};
|
||||
|
||||
|
||||
class WebGLReplayGroup extends ReplayGroup {
|
||||
/**
|
||||
* @param {number} tolerance Tolerance.
|
||||
* @param {import("../../extent.js").Extent} maxExtent Max extent.
|
||||
* @param {number=} opt_renderBuffer Render buffer.
|
||||
*/
|
||||
constructor(tolerance, maxExtent, opt_renderBuffer) {
|
||||
super();
|
||||
|
||||
/**
|
||||
* @type {import("../../extent.js").Extent}
|
||||
* @private
|
||||
*/
|
||||
this.maxExtent_ = maxExtent;
|
||||
|
||||
/**
|
||||
* @type {number}
|
||||
* @private
|
||||
*/
|
||||
this.tolerance_ = tolerance;
|
||||
|
||||
/**
|
||||
* @type {number|undefined}
|
||||
* @private
|
||||
*/
|
||||
this.renderBuffer_ = opt_renderBuffer;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {!Object<string,
|
||||
* Object<import("../ReplayType.js").default, import("./Replay.js").default>>}
|
||||
*/
|
||||
this.replaysByZIndex_ = {};
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
addDeclutter(group) {
|
||||
return [];
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {import("../../webgl/Context.js").default} context WebGL context.
|
||||
* @return {function()} Delete resources function.
|
||||
*/
|
||||
getDeleteResourcesFunction(context) {
|
||||
const functions = [];
|
||||
let zKey;
|
||||
for (zKey in this.replaysByZIndex_) {
|
||||
const replays = this.replaysByZIndex_[zKey];
|
||||
for (const replayKey in replays) {
|
||||
functions.push(
|
||||
replays[replayKey].getDeleteResourcesFunction(context));
|
||||
}
|
||||
}
|
||||
return function() {
|
||||
const length = functions.length;
|
||||
let result;
|
||||
for (let i = 0; i < length; i++) {
|
||||
result = functions[i].apply(this, arguments);
|
||||
}
|
||||
return result;
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {import("../../webgl/Context.js").default} context Context.
|
||||
*/
|
||||
finish(context) {
|
||||
let zKey;
|
||||
for (zKey in this.replaysByZIndex_) {
|
||||
const replays = this.replaysByZIndex_[zKey];
|
||||
for (const replayKey in replays) {
|
||||
replays[replayKey].finish(context);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
getBuilder(zIndex, replayType) {
|
||||
const zIndexKey = zIndex !== undefined ? zIndex.toString() : '0';
|
||||
let replays = this.replaysByZIndex_[zIndexKey];
|
||||
if (replays === undefined) {
|
||||
replays = {};
|
||||
this.replaysByZIndex_[zIndexKey] = replays;
|
||||
}
|
||||
let replay = replays[replayType];
|
||||
if (replay === undefined) {
|
||||
const Constructor = BATCH_CONSTRUCTORS[replayType];
|
||||
replay = new Constructor(this.tolerance_, this.maxExtent_);
|
||||
replays[replayType] = replay;
|
||||
}
|
||||
return replay;
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
isEmpty() {
|
||||
return isEmpty(this.replaysByZIndex_);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {import("../../webgl/Context.js").default} context Context.
|
||||
* @param {import("../../coordinate.js").Coordinate} center Center.
|
||||
* @param {number} resolution Resolution.
|
||||
* @param {number} rotation Rotation.
|
||||
* @param {import("../../size.js").Size} size Size.
|
||||
* @param {number} pixelRatio Pixel ratio.
|
||||
* @param {number} opacity Global opacity.
|
||||
* @param {Object<string, boolean>} skippedFeaturesHash Ids of features to skip.
|
||||
*/
|
||||
replay(
|
||||
context,
|
||||
center,
|
||||
resolution,
|
||||
rotation,
|
||||
size,
|
||||
pixelRatio,
|
||||
opacity,
|
||||
skippedFeaturesHash
|
||||
) {
|
||||
/** @type {Array<number>} */
|
||||
const zs = Object.keys(this.replaysByZIndex_).map(Number);
|
||||
zs.sort(numberSafeCompareFunction);
|
||||
|
||||
let i, ii, j, jj, replays, replay;
|
||||
for (i = 0, ii = zs.length; i < ii; ++i) {
|
||||
replays = this.replaysByZIndex_[zs[i].toString()];
|
||||
for (j = 0, jj = ORDER.length; j < jj; ++j) {
|
||||
replay = replays[ORDER[j]];
|
||||
if (replay !== undefined) {
|
||||
replay.replay(context,
|
||||
center, resolution, rotation, size, pixelRatio,
|
||||
opacity, skippedFeaturesHash,
|
||||
undefined, false);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @param {import("../../webgl/Context.js").default} context Context.
|
||||
* @param {import("../../coordinate.js").Coordinate} center Center.
|
||||
* @param {number} resolution Resolution.
|
||||
* @param {number} rotation Rotation.
|
||||
* @param {import("../../size.js").Size} size Size.
|
||||
* @param {number} pixelRatio Pixel ratio.
|
||||
* @param {number} opacity Global opacity.
|
||||
* @param {Object<string, boolean>} skippedFeaturesHash Ids of features to skip.
|
||||
* @param {function((import("../../Feature.js").default|import("../Feature.js").default)): T|undefined} featureCallback Feature callback.
|
||||
* @param {boolean} oneByOne Draw features one-by-one for the hit-detecion.
|
||||
* @param {import("../../extent.js").Extent=} opt_hitExtent Hit extent: Only features intersecting
|
||||
* this extent are checked.
|
||||
* @return {T|undefined} Callback result.
|
||||
* @template T
|
||||
*/
|
||||
replayHitDetection_(
|
||||
context,
|
||||
center,
|
||||
resolution,
|
||||
rotation,
|
||||
size,
|
||||
pixelRatio,
|
||||
opacity,
|
||||
skippedFeaturesHash,
|
||||
featureCallback,
|
||||
oneByOne,
|
||||
opt_hitExtent
|
||||
) {
|
||||
/** @type {Array<number>} */
|
||||
const zs = Object.keys(this.replaysByZIndex_).map(Number);
|
||||
zs.sort(function(a, b) {
|
||||
return b - a;
|
||||
});
|
||||
|
||||
let i, ii, j, replays, replay, result;
|
||||
for (i = 0, ii = zs.length; i < ii; ++i) {
|
||||
replays = this.replaysByZIndex_[zs[i].toString()];
|
||||
for (j = ORDER.length - 1; j >= 0; --j) {
|
||||
replay = replays[ORDER[j]];
|
||||
if (replay !== undefined) {
|
||||
result = replay.replay(context,
|
||||
center, resolution, rotation, size, pixelRatio, opacity,
|
||||
skippedFeaturesHash, featureCallback, oneByOne, opt_hitExtent);
|
||||
if (result) {
|
||||
return result;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {import("../../coordinate.js").Coordinate} coordinate Coordinate.
|
||||
* @param {import("../../webgl/Context.js").default} context Context.
|
||||
* @param {import("../../coordinate.js").Coordinate} center Center.
|
||||
* @param {number} resolution Resolution.
|
||||
* @param {number} rotation Rotation.
|
||||
* @param {import("../../size.js").Size} size Size.
|
||||
* @param {number} pixelRatio Pixel ratio.
|
||||
* @param {number} opacity Global opacity.
|
||||
* @param {Object<string, boolean>} skippedFeaturesHash Ids of features to skip.
|
||||
* @param {function((import("../../Feature.js").default|import("../Feature.js").default)): T|undefined} callback Feature callback.
|
||||
* @return {T|undefined} Callback result.
|
||||
* @template T
|
||||
*/
|
||||
forEachFeatureAtCoordinate(
|
||||
coordinate,
|
||||
context,
|
||||
center,
|
||||
resolution,
|
||||
rotation,
|
||||
size,
|
||||
pixelRatio,
|
||||
opacity,
|
||||
skippedFeaturesHash,
|
||||
callback
|
||||
) {
|
||||
const gl = context.getGL();
|
||||
gl.bindFramebuffer(
|
||||
gl.FRAMEBUFFER, context.getHitDetectionFramebuffer());
|
||||
|
||||
|
||||
/**
|
||||
* @type {import("../../extent.js").Extent}
|
||||
*/
|
||||
let hitExtent;
|
||||
if (this.renderBuffer_ !== undefined) {
|
||||
// build an extent around the coordinate, so that only features that
|
||||
// intersect this extent are checked
|
||||
hitExtent = buffer(createOrUpdateFromCoordinate(coordinate), resolution * this.renderBuffer_);
|
||||
}
|
||||
|
||||
return this.replayHitDetection_(context,
|
||||
coordinate, resolution, rotation, HIT_DETECTION_SIZE,
|
||||
pixelRatio, opacity, skippedFeaturesHash,
|
||||
/**
|
||||
* @param {import("../../Feature.js").default|import("../Feature.js").default} feature Feature.
|
||||
* @return {?} Callback result.
|
||||
*/
|
||||
function(feature) {
|
||||
const imageData = new Uint8Array(4);
|
||||
gl.readPixels(0, 0, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, imageData);
|
||||
|
||||
if (imageData[3] > 0) {
|
||||
const result = callback(feature);
|
||||
if (result) {
|
||||
return result;
|
||||
}
|
||||
}
|
||||
}, true, hitExtent);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {import("../../coordinate.js").Coordinate} coordinate Coordinate.
|
||||
* @param {import("../../webgl/Context.js").default} context Context.
|
||||
* @param {import("../../coordinate.js").Coordinate} center Center.
|
||||
* @param {number} resolution Resolution.
|
||||
* @param {number} rotation Rotation.
|
||||
* @param {import("../../size.js").Size} size Size.
|
||||
* @param {number} pixelRatio Pixel ratio.
|
||||
* @param {number} opacity Global opacity.
|
||||
* @param {Object<string, boolean>} skippedFeaturesHash Ids of features to skip.
|
||||
* @return {boolean} Is there a feature at the given coordinate?
|
||||
*/
|
||||
hasFeatureAtCoordinate(
|
||||
coordinate,
|
||||
context,
|
||||
center,
|
||||
resolution,
|
||||
rotation,
|
||||
size,
|
||||
pixelRatio,
|
||||
opacity,
|
||||
skippedFeaturesHash
|
||||
) {
|
||||
const gl = context.getGL();
|
||||
gl.bindFramebuffer(
|
||||
gl.FRAMEBUFFER, context.getHitDetectionFramebuffer());
|
||||
|
||||
const hasFeature = this.replayHitDetection_(context,
|
||||
coordinate, resolution, rotation, HIT_DETECTION_SIZE,
|
||||
pixelRatio, opacity, skippedFeaturesHash,
|
||||
/**
|
||||
* @param {import("../../Feature.js").default|import("../Feature.js").default} feature Feature.
|
||||
* @return {boolean} Is there a feature?
|
||||
*/
|
||||
function(feature) {
|
||||
const imageData = new Uint8Array(4);
|
||||
gl.readPixels(0, 0, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, imageData);
|
||||
return imageData[3] > 0;
|
||||
}, false);
|
||||
|
||||
return hasFeature !== undefined;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export default WebGLReplayGroup;
|
||||
@@ -1,458 +0,0 @@
|
||||
/**
|
||||
* @module ol/render/webgl/TextReplay
|
||||
*/
|
||||
import {getUid} from '../../util.js';
|
||||
import {asColorLike} from '../../colorlike.js';
|
||||
import {createCanvasContext2D} from '../../dom.js';
|
||||
import GeometryType from '../../geom/GeometryType.js';
|
||||
import {CANVAS_LINE_DASH} from '../../has.js';
|
||||
import {TEXT_ALIGN} from '../replay.js';
|
||||
import {DEFAULT_FILLSTYLE, DEFAULT_FONT, DEFAULT_LINECAP, DEFAULT_LINEDASH,
|
||||
DEFAULT_LINEDASHOFFSET, DEFAULT_LINEJOIN, DEFAULT_LINEWIDTH, DEFAULT_MITERLIMIT,
|
||||
DEFAULT_STROKESTYLE, DEFAULT_TEXTALIGN, DEFAULT_TEXTBASELINE} from '../webgl.js';
|
||||
import WebGLTextureReplay from './TextureReplay.js';
|
||||
import AtlasManager from '../../style/AtlasManager.js';
|
||||
import WebGLBuffer from '../../webgl/Buffer.js';
|
||||
|
||||
/**
|
||||
* @typedef {Object} GlyphAtlas
|
||||
* @property {import("../../style/AtlasManager.js").default} atlas
|
||||
* @property {Object<string, number>} width
|
||||
* @property {number} height
|
||||
*/
|
||||
|
||||
|
||||
class WebGLTextReplay extends WebGLTextureReplay {
|
||||
/**
|
||||
* @param {number} tolerance Tolerance.
|
||||
* @param {import("../../extent.js").Extent} maxExtent Max extent.
|
||||
*/
|
||||
constructor(tolerance, maxExtent) {
|
||||
super(tolerance, maxExtent);
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {Array<HTMLCanvasElement>}
|
||||
*/
|
||||
this.images_ = [];
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {Array<WebGLTexture>}
|
||||
*/
|
||||
this.textures_ = [];
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {HTMLCanvasElement}
|
||||
*/
|
||||
this.measureCanvas_ = createCanvasContext2D(0, 0).canvas;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {{strokeColor: (import("../../colorlike.js").ColorLike|null),
|
||||
* lineCap: (string|undefined),
|
||||
* lineDash: Array<number>,
|
||||
* lineDashOffset: (number|undefined),
|
||||
* lineJoin: (string|undefined),
|
||||
* lineWidth: number,
|
||||
* miterLimit: (number|undefined),
|
||||
* fillColor: (import("../../colorlike.js").ColorLike|null),
|
||||
* font: (string|undefined),
|
||||
* scale: (number|undefined)}}
|
||||
*/
|
||||
this.state_ = {
|
||||
strokeColor: null,
|
||||
lineCap: undefined,
|
||||
lineDash: null,
|
||||
lineDashOffset: undefined,
|
||||
lineJoin: undefined,
|
||||
lineWidth: 0,
|
||||
miterLimit: undefined,
|
||||
fillColor: null,
|
||||
font: undefined,
|
||||
scale: undefined
|
||||
};
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {string}
|
||||
*/
|
||||
this.text_ = '';
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {number|undefined}
|
||||
*/
|
||||
this.textAlign_ = undefined;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {number|undefined}
|
||||
*/
|
||||
this.textBaseline_ = undefined;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {number|undefined}
|
||||
*/
|
||||
this.offsetX_ = undefined;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {number|undefined}
|
||||
*/
|
||||
this.offsetY_ = undefined;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {Object<string, GlyphAtlas>}
|
||||
*/
|
||||
this.atlases_ = {};
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {GlyphAtlas|undefined}
|
||||
*/
|
||||
this.currAtlas_ = undefined;
|
||||
|
||||
this.scale = 1;
|
||||
|
||||
this.opacity = 1;
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
drawText(geometry, feature) {
|
||||
if (this.text_) {
|
||||
let flatCoordinates = null;
|
||||
const offset = 0;
|
||||
let end = 2;
|
||||
let stride = 2;
|
||||
switch (geometry.getType()) {
|
||||
case GeometryType.POINT:
|
||||
case GeometryType.MULTI_POINT:
|
||||
flatCoordinates = geometry.getFlatCoordinates();
|
||||
end = flatCoordinates.length;
|
||||
stride = geometry.getStride();
|
||||
break;
|
||||
case GeometryType.CIRCLE:
|
||||
flatCoordinates = /** @type {import("../../geom/Circle.js").default} */ (geometry).getCenter();
|
||||
break;
|
||||
case GeometryType.LINE_STRING:
|
||||
flatCoordinates = /** @type {import("../../geom/LineString.js").default} */ (geometry).getFlatMidpoint();
|
||||
break;
|
||||
case GeometryType.MULTI_LINE_STRING:
|
||||
flatCoordinates = /** @type {import("../../geom/MultiLineString.js").default} */ (geometry).getFlatMidpoints();
|
||||
end = flatCoordinates.length;
|
||||
break;
|
||||
case GeometryType.POLYGON:
|
||||
flatCoordinates = /** @type {import("../../geom/Polygon.js").default} */ (geometry).getFlatInteriorPoint();
|
||||
break;
|
||||
case GeometryType.MULTI_POLYGON:
|
||||
flatCoordinates = /** @type {import("../../geom/MultiPolygon.js").default} */ (geometry).getFlatInteriorPoints();
|
||||
end = flatCoordinates.length;
|
||||
break;
|
||||
default:
|
||||
}
|
||||
this.startIndices.push(this.indices.length);
|
||||
this.startIndicesFeature.push(feature);
|
||||
|
||||
const glyphAtlas = this.currAtlas_;
|
||||
const lines = this.text_.split('\n');
|
||||
const textSize = this.getTextSize_(lines);
|
||||
let i, ii, j, jj, currX, currY, charArr, charInfo;
|
||||
const anchorX = Math.round(textSize[0] * this.textAlign_ - this.offsetX_);
|
||||
const anchorY = Math.round(textSize[1] * this.textBaseline_ - this.offsetY_);
|
||||
const lineWidth = (this.state_.lineWidth / 2) * this.state_.scale;
|
||||
|
||||
for (i = 0, ii = lines.length; i < ii; ++i) {
|
||||
currX = 0;
|
||||
currY = glyphAtlas.height * i;
|
||||
charArr = lines[i].split('');
|
||||
|
||||
for (j = 0, jj = charArr.length; j < jj; ++j) {
|
||||
charInfo = glyphAtlas.atlas.getInfo(charArr[j]);
|
||||
|
||||
if (charInfo) {
|
||||
const image = charInfo.image;
|
||||
|
||||
this.anchorX = anchorX - currX;
|
||||
this.anchorY = anchorY - currY;
|
||||
this.originX = j === 0 ? charInfo.offsetX - lineWidth : charInfo.offsetX;
|
||||
this.originY = charInfo.offsetY;
|
||||
this.height = glyphAtlas.height;
|
||||
this.width = j === 0 || j === charArr.length - 1 ?
|
||||
glyphAtlas.width[charArr[j]] + lineWidth : glyphAtlas.width[charArr[j]];
|
||||
this.imageHeight = image.height;
|
||||
this.imageWidth = image.width;
|
||||
|
||||
if (this.images_.length === 0) {
|
||||
this.images_.push(image);
|
||||
} else {
|
||||
const currentImage = this.images_[this.images_.length - 1];
|
||||
if (getUid(currentImage) != getUid(image)) {
|
||||
this.groupIndices.push(this.indices.length);
|
||||
this.images_.push(image);
|
||||
}
|
||||
}
|
||||
|
||||
this.drawText_(flatCoordinates, offset, end, stride);
|
||||
}
|
||||
currX += this.width;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @param {Array<string>} lines Label to draw split to lines.
|
||||
* @return {Array<number>} Size of the label in pixels.
|
||||
*/
|
||||
getTextSize_(lines) {
|
||||
const self = this;
|
||||
const glyphAtlas = this.currAtlas_;
|
||||
const textHeight = lines.length * glyphAtlas.height;
|
||||
//Split every line to an array of chars, sum up their width, and select the longest.
|
||||
const textWidth = lines.map(function(str) {
|
||||
let sum = 0;
|
||||
for (let i = 0, ii = str.length; i < ii; ++i) {
|
||||
const curr = str[i];
|
||||
if (!glyphAtlas.width[curr]) {
|
||||
self.addCharToAtlas_(curr);
|
||||
}
|
||||
sum += glyphAtlas.width[curr] ? glyphAtlas.width[curr] : 0;
|
||||
}
|
||||
return sum;
|
||||
}).reduce(function(max, curr) {
|
||||
return Math.max(max, curr);
|
||||
});
|
||||
|
||||
return [textWidth, textHeight];
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @param {Array<number>} flatCoordinates Flat coordinates.
|
||||
* @param {number} offset Offset.
|
||||
* @param {number} end End.
|
||||
* @param {number} stride Stride.
|
||||
*/
|
||||
drawText_(flatCoordinates, offset, end, stride) {
|
||||
for (let i = offset, ii = end; i < ii; i += stride) {
|
||||
this.drawCoordinates(flatCoordinates, offset, end, stride);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @param {string} char Character.
|
||||
*/
|
||||
addCharToAtlas_(char) {
|
||||
if (char.length === 1) {
|
||||
const glyphAtlas = this.currAtlas_;
|
||||
const state = this.state_;
|
||||
const mCtx = this.measureCanvas_.getContext('2d');
|
||||
mCtx.font = state.font;
|
||||
const width = Math.ceil(mCtx.measureText(char).width * state.scale);
|
||||
|
||||
const info = glyphAtlas.atlas.add(char, width, glyphAtlas.height,
|
||||
function(ctx, x, y) {
|
||||
//Parameterize the canvas
|
||||
ctx.font = /** @type {string} */ (state.font);
|
||||
ctx.fillStyle = state.fillColor;
|
||||
ctx.strokeStyle = state.strokeColor;
|
||||
ctx.lineWidth = state.lineWidth;
|
||||
ctx.lineCap = /** @type {CanvasLineCap} */ (state.lineCap);
|
||||
ctx.lineJoin = /** @type {CanvasLineJoin} */ (state.lineJoin);
|
||||
ctx.miterLimit = /** @type {number} */ (state.miterLimit);
|
||||
ctx.textAlign = 'left';
|
||||
ctx.textBaseline = 'top';
|
||||
if (CANVAS_LINE_DASH && state.lineDash) {
|
||||
//FIXME: use pixelRatio
|
||||
ctx.setLineDash(state.lineDash);
|
||||
ctx.lineDashOffset = /** @type {number} */ (state.lineDashOffset);
|
||||
}
|
||||
if (state.scale !== 1) {
|
||||
//FIXME: use pixelRatio
|
||||
ctx.setTransform(/** @type {number} */ (state.scale), 0, 0,
|
||||
/** @type {number} */ (state.scale), 0, 0);
|
||||
}
|
||||
|
||||
//Draw the character on the canvas
|
||||
if (state.strokeColor) {
|
||||
ctx.strokeText(char, x, y);
|
||||
}
|
||||
if (state.fillColor) {
|
||||
ctx.fillText(char, x, y);
|
||||
}
|
||||
});
|
||||
|
||||
if (info) {
|
||||
glyphAtlas.width[char] = width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
finish(context) {
|
||||
const gl = context.getGL();
|
||||
|
||||
this.groupIndices.push(this.indices.length);
|
||||
this.hitDetectionGroupIndices = this.groupIndices;
|
||||
|
||||
// create, bind, and populate the vertices buffer
|
||||
this.verticesBuffer = new WebGLBuffer(this.vertices);
|
||||
|
||||
// create, bind, and populate the indices buffer
|
||||
this.indicesBuffer = new WebGLBuffer(this.indices);
|
||||
|
||||
// create textures
|
||||
/** @type {Object<string, WebGLTexture>} */
|
||||
const texturePerImage = {};
|
||||
|
||||
this.createTextures(this.textures_, this.images_, texturePerImage, gl);
|
||||
|
||||
this.state_ = {
|
||||
strokeColor: null,
|
||||
lineCap: undefined,
|
||||
lineDash: null,
|
||||
lineDashOffset: undefined,
|
||||
lineJoin: undefined,
|
||||
lineWidth: 0,
|
||||
miterLimit: undefined,
|
||||
fillColor: null,
|
||||
font: undefined,
|
||||
scale: undefined
|
||||
};
|
||||
this.text_ = '';
|
||||
this.textAlign_ = undefined;
|
||||
this.textBaseline_ = undefined;
|
||||
this.offsetX_ = undefined;
|
||||
this.offsetY_ = undefined;
|
||||
this.images_ = null;
|
||||
this.atlases_ = {};
|
||||
this.currAtlas_ = undefined;
|
||||
super.finish(context);
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
setTextStyle(textStyle) {
|
||||
const state = this.state_;
|
||||
const textFillStyle = textStyle.getFill();
|
||||
const textStrokeStyle = textStyle.getStroke();
|
||||
if (!textStyle || !textStyle.getText() || (!textFillStyle && !textStrokeStyle)) {
|
||||
this.text_ = '';
|
||||
} else {
|
||||
if (!textFillStyle) {
|
||||
state.fillColor = null;
|
||||
} else {
|
||||
const textFillStyleColor = textFillStyle.getColor();
|
||||
state.fillColor = asColorLike(textFillStyleColor ?
|
||||
textFillStyleColor : DEFAULT_FILLSTYLE);
|
||||
}
|
||||
if (!textStrokeStyle) {
|
||||
state.strokeColor = null;
|
||||
state.lineWidth = 0;
|
||||
} else {
|
||||
const textStrokeStyleColor = textStrokeStyle.getColor();
|
||||
state.strokeColor = asColorLike(textStrokeStyleColor ?
|
||||
textStrokeStyleColor : DEFAULT_STROKESTYLE);
|
||||
state.lineWidth = textStrokeStyle.getWidth() || DEFAULT_LINEWIDTH;
|
||||
state.lineCap = textStrokeStyle.getLineCap() || DEFAULT_LINECAP;
|
||||
state.lineDashOffset = textStrokeStyle.getLineDashOffset() || DEFAULT_LINEDASHOFFSET;
|
||||
state.lineJoin = textStrokeStyle.getLineJoin() || DEFAULT_LINEJOIN;
|
||||
state.miterLimit = textStrokeStyle.getMiterLimit() || DEFAULT_MITERLIMIT;
|
||||
const lineDash = textStrokeStyle.getLineDash();
|
||||
state.lineDash = lineDash ? lineDash.slice() : DEFAULT_LINEDASH;
|
||||
}
|
||||
state.font = textStyle.getFont() || DEFAULT_FONT;
|
||||
state.scale = textStyle.getScale() || 1;
|
||||
this.text_ = /** @type {string} */ (textStyle.getText());
|
||||
const textAlign = TEXT_ALIGN[textStyle.getTextAlign()];
|
||||
const textBaseline = TEXT_ALIGN[textStyle.getTextBaseline()];
|
||||
this.textAlign_ = textAlign === undefined ?
|
||||
DEFAULT_TEXTALIGN : textAlign;
|
||||
this.textBaseline_ = textBaseline === undefined ?
|
||||
DEFAULT_TEXTBASELINE : textBaseline;
|
||||
this.offsetX_ = textStyle.getOffsetX() || 0;
|
||||
this.offsetY_ = textStyle.getOffsetY() || 0;
|
||||
this.rotateWithView = !!textStyle.getRotateWithView();
|
||||
this.rotation = textStyle.getRotation() || 0;
|
||||
|
||||
this.currAtlas_ = this.getAtlas_(state);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @param {Object} state Font attributes.
|
||||
* @return {GlyphAtlas} Glyph atlas.
|
||||
*/
|
||||
getAtlas_(state) {
|
||||
let params = [];
|
||||
for (const i in state) {
|
||||
if (state[i] || state[i] === 0) {
|
||||
if (Array.isArray(state[i])) {
|
||||
params = params.concat(state[i]);
|
||||
} else {
|
||||
params.push(state[i]);
|
||||
}
|
||||
}
|
||||
}
|
||||
const hash = this.calculateHash_(params);
|
||||
if (!this.atlases_[hash]) {
|
||||
const mCtx = this.measureCanvas_.getContext('2d');
|
||||
mCtx.font = state.font;
|
||||
const height = Math.ceil((mCtx.measureText('M').width * 1.5 +
|
||||
state.lineWidth / 2) * state.scale);
|
||||
|
||||
this.atlases_[hash] = {
|
||||
atlas: new AtlasManager({
|
||||
space: state.lineWidth + 1
|
||||
}),
|
||||
width: {},
|
||||
height: height
|
||||
};
|
||||
}
|
||||
return this.atlases_[hash];
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @param {Array<string|number>} params Array of parameters.
|
||||
* @return {string} Hash string.
|
||||
*/
|
||||
calculateHash_(params) {
|
||||
//TODO: Create a more performant, reliable, general hash function.
|
||||
let hash = '';
|
||||
for (let i = 0, ii = params.length; i < ii; ++i) {
|
||||
hash += params[i];
|
||||
}
|
||||
return hash;
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
getTextures(opt_all) {
|
||||
return this.textures_;
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
getHitDetectionTextures() {
|
||||
return this.textures_;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export default WebGLTextReplay;
|
||||
@@ -1,480 +0,0 @@
|
||||
/**
|
||||
* @module ol/render/webgl/TextureReplay
|
||||
*/
|
||||
import {abstract, getUid} from '../../util.js';
|
||||
import {intersects} from '../../extent.js';
|
||||
import {isEmpty} from '../../obj.js';
|
||||
import {fragment, vertex} from './texturereplay/defaultshader.js';
|
||||
import Locations from './texturereplay/defaultshader/Locations.js';
|
||||
import WebGLReplay from './Replay.js';
|
||||
import {CLAMP_TO_EDGE, FLOAT, TEXTURE_2D} from '../../webgl.js';
|
||||
import {createTexture} from '../../webgl/Context.js';
|
||||
|
||||
class WebGLTextureReplay extends WebGLReplay {
|
||||
/**
|
||||
* @param {number} tolerance Tolerance.
|
||||
* @param {import("../../extent.js").Extent} maxExtent Max extent.
|
||||
*/
|
||||
constructor(tolerance, maxExtent) {
|
||||
super(tolerance, maxExtent);
|
||||
|
||||
/**
|
||||
* @type {number|undefined}
|
||||
* @protected
|
||||
*/
|
||||
this.anchorX = undefined;
|
||||
|
||||
/**
|
||||
* @type {number|undefined}
|
||||
* @protected
|
||||
*/
|
||||
this.anchorY = undefined;
|
||||
|
||||
/**
|
||||
* @type {Array<number>}
|
||||
* @protected
|
||||
*/
|
||||
this.groupIndices = [];
|
||||
|
||||
/**
|
||||
* @type {Array<number>}
|
||||
* @protected
|
||||
*/
|
||||
this.hitDetectionGroupIndices = [];
|
||||
|
||||
/**
|
||||
* @type {number|undefined}
|
||||
* @protected
|
||||
*/
|
||||
this.height = undefined;
|
||||
|
||||
/**
|
||||
* @type {number|undefined}
|
||||
* @protected
|
||||
*/
|
||||
this.imageHeight = undefined;
|
||||
|
||||
/**
|
||||
* @type {number|undefined}
|
||||
* @protected
|
||||
*/
|
||||
this.imageWidth = undefined;
|
||||
|
||||
/**
|
||||
* @protected
|
||||
* @type {import("./texturereplay/defaultshader/Locations.js").default}
|
||||
*/
|
||||
this.defaultLocations = null;
|
||||
|
||||
/**
|
||||
* @protected
|
||||
* @type {number|undefined}
|
||||
*/
|
||||
this.opacity = undefined;
|
||||
|
||||
/**
|
||||
* @type {number|undefined}
|
||||
* @protected
|
||||
*/
|
||||
this.originX = undefined;
|
||||
|
||||
/**
|
||||
* @type {number|undefined}
|
||||
* @protected
|
||||
*/
|
||||
this.originY = undefined;
|
||||
|
||||
/**
|
||||
* @protected
|
||||
* @type {boolean|undefined}
|
||||
*/
|
||||
this.rotateWithView = undefined;
|
||||
|
||||
/**
|
||||
* @protected
|
||||
* @type {number|undefined}
|
||||
*/
|
||||
this.rotation = undefined;
|
||||
|
||||
/**
|
||||
* @protected
|
||||
* @type {number|undefined}
|
||||
*/
|
||||
this.scale = undefined;
|
||||
|
||||
/**
|
||||
* @type {number|undefined}
|
||||
* @protected
|
||||
*/
|
||||
this.width = undefined;
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
getDeleteResourcesFunction(context) {
|
||||
const verticesBuffer = this.verticesBuffer;
|
||||
const indicesBuffer = this.indicesBuffer;
|
||||
const textures = this.getTextures(true);
|
||||
const gl = context.getGL();
|
||||
return function() {
|
||||
if (!gl.isContextLost()) {
|
||||
let i, ii;
|
||||
for (i = 0, ii = textures.length; i < ii; ++i) {
|
||||
gl.deleteTexture(textures[i]);
|
||||
}
|
||||
}
|
||||
context.deleteBuffer(verticesBuffer);
|
||||
context.deleteBuffer(indicesBuffer);
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Array<number>} flatCoordinates Flat coordinates.
|
||||
* @param {number} offset Offset.
|
||||
* @param {number} end End.
|
||||
* @param {number} stride Stride.
|
||||
* @return {number} My end.
|
||||
* @protected
|
||||
*/
|
||||
drawCoordinates(flatCoordinates, offset, end, stride) {
|
||||
const anchorX = /** @type {number} */ (this.anchorX);
|
||||
const anchorY = /** @type {number} */ (this.anchorY);
|
||||
const height = /** @type {number} */ (this.height);
|
||||
const imageHeight = /** @type {number} */ (this.imageHeight);
|
||||
const imageWidth = /** @type {number} */ (this.imageWidth);
|
||||
const opacity = /** @type {number} */ (this.opacity);
|
||||
const originX = /** @type {number} */ (this.originX);
|
||||
const originY = /** @type {number} */ (this.originY);
|
||||
const rotateWithView = this.rotateWithView ? 1.0 : 0.0;
|
||||
// this.rotation_ is anti-clockwise, but rotation is clockwise
|
||||
const rotation = /** @type {number} */ (-this.rotation);
|
||||
const scale = /** @type {number} */ (this.scale);
|
||||
const width = /** @type {number} */ (this.width);
|
||||
const cos = Math.cos(rotation);
|
||||
const sin = Math.sin(rotation);
|
||||
let numIndices = this.indices.length;
|
||||
let numVertices = this.vertices.length;
|
||||
let i, n, offsetX, offsetY, x, y;
|
||||
for (i = offset; i < end; i += stride) {
|
||||
x = flatCoordinates[i] - this.origin[0];
|
||||
y = flatCoordinates[i + 1] - this.origin[1];
|
||||
|
||||
// There are 4 vertices per [x, y] point, one for each corner of the
|
||||
// rectangle we're going to draw. We'd use 1 vertex per [x, y] point if
|
||||
// WebGL supported Geometry Shaders (which can emit new vertices), but that
|
||||
// is not currently the case.
|
||||
//
|
||||
// And each vertex includes 8 values: the x and y coordinates, the x and
|
||||
// y offsets used to calculate the position of the corner, the u and
|
||||
// v texture coordinates for the corner, the opacity, and whether the
|
||||
// the image should be rotated with the view (rotateWithView).
|
||||
|
||||
n = numVertices / 8;
|
||||
|
||||
// bottom-left corner
|
||||
offsetX = -scale * anchorX;
|
||||
offsetY = -scale * (height - anchorY);
|
||||
this.vertices[numVertices++] = x;
|
||||
this.vertices[numVertices++] = y;
|
||||
this.vertices[numVertices++] = offsetX * cos - offsetY * sin;
|
||||
this.vertices[numVertices++] = offsetX * sin + offsetY * cos;
|
||||
this.vertices[numVertices++] = originX / imageWidth;
|
||||
this.vertices[numVertices++] = (originY + height) / imageHeight;
|
||||
this.vertices[numVertices++] = opacity;
|
||||
this.vertices[numVertices++] = rotateWithView;
|
||||
|
||||
// bottom-right corner
|
||||
offsetX = scale * (width - anchorX);
|
||||
offsetY = -scale * (height - anchorY);
|
||||
this.vertices[numVertices++] = x;
|
||||
this.vertices[numVertices++] = y;
|
||||
this.vertices[numVertices++] = offsetX * cos - offsetY * sin;
|
||||
this.vertices[numVertices++] = offsetX * sin + offsetY * cos;
|
||||
this.vertices[numVertices++] = (originX + width) / imageWidth;
|
||||
this.vertices[numVertices++] = (originY + height) / imageHeight;
|
||||
this.vertices[numVertices++] = opacity;
|
||||
this.vertices[numVertices++] = rotateWithView;
|
||||
|
||||
// top-right corner
|
||||
offsetX = scale * (width - anchorX);
|
||||
offsetY = scale * anchorY;
|
||||
this.vertices[numVertices++] = x;
|
||||
this.vertices[numVertices++] = y;
|
||||
this.vertices[numVertices++] = offsetX * cos - offsetY * sin;
|
||||
this.vertices[numVertices++] = offsetX * sin + offsetY * cos;
|
||||
this.vertices[numVertices++] = (originX + width) / imageWidth;
|
||||
this.vertices[numVertices++] = originY / imageHeight;
|
||||
this.vertices[numVertices++] = opacity;
|
||||
this.vertices[numVertices++] = rotateWithView;
|
||||
|
||||
// top-left corner
|
||||
offsetX = -scale * anchorX;
|
||||
offsetY = scale * anchorY;
|
||||
this.vertices[numVertices++] = x;
|
||||
this.vertices[numVertices++] = y;
|
||||
this.vertices[numVertices++] = offsetX * cos - offsetY * sin;
|
||||
this.vertices[numVertices++] = offsetX * sin + offsetY * cos;
|
||||
this.vertices[numVertices++] = originX / imageWidth;
|
||||
this.vertices[numVertices++] = originY / imageHeight;
|
||||
this.vertices[numVertices++] = opacity;
|
||||
this.vertices[numVertices++] = rotateWithView;
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
/**
|
||||
* @protected
|
||||
* @param {Array<WebGLTexture>} textures Textures.
|
||||
* @param {Array<HTMLCanvasElement|HTMLImageElement|HTMLVideoElement>} images Images.
|
||||
* @param {!Object<string, WebGLTexture>} texturePerImage Texture cache.
|
||||
* @param {WebGLRenderingContext} gl Gl.
|
||||
*/
|
||||
createTextures(textures, images, texturePerImage, gl) {
|
||||
let texture, image, uid, i;
|
||||
const ii = images.length;
|
||||
for (i = 0; i < ii; ++i) {
|
||||
image = images[i];
|
||||
|
||||
uid = getUid(image);
|
||||
if (uid in texturePerImage) {
|
||||
texture = texturePerImage[uid];
|
||||
} else {
|
||||
texture = createTexture(
|
||||
gl, image, CLAMP_TO_EDGE, CLAMP_TO_EDGE);
|
||||
texturePerImage[uid] = texture;
|
||||
}
|
||||
textures[i] = texture;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
setUpProgram(gl, context, size, pixelRatio) {
|
||||
// get the program
|
||||
const program = context.getProgram(fragment, vertex);
|
||||
|
||||
// get the locations
|
||||
let locations;
|
||||
if (!this.defaultLocations) {
|
||||
locations = new Locations(gl, program);
|
||||
this.defaultLocations = locations;
|
||||
} else {
|
||||
locations = this.defaultLocations;
|
||||
}
|
||||
|
||||
// use the program (FIXME: use the return value)
|
||||
context.useProgram(program);
|
||||
|
||||
// enable the vertex attrib arrays
|
||||
gl.enableVertexAttribArray(locations.a_position);
|
||||
gl.vertexAttribPointer(locations.a_position, 2, FLOAT,
|
||||
false, 32, 0);
|
||||
|
||||
gl.enableVertexAttribArray(locations.a_offsets);
|
||||
gl.vertexAttribPointer(locations.a_offsets, 2, FLOAT,
|
||||
false, 32, 8);
|
||||
|
||||
gl.enableVertexAttribArray(locations.a_texCoord);
|
||||
gl.vertexAttribPointer(locations.a_texCoord, 2, FLOAT,
|
||||
false, 32, 16);
|
||||
|
||||
gl.enableVertexAttribArray(locations.a_opacity);
|
||||
gl.vertexAttribPointer(locations.a_opacity, 1, FLOAT,
|
||||
false, 32, 24);
|
||||
|
||||
gl.enableVertexAttribArray(locations.a_rotateWithView);
|
||||
gl.vertexAttribPointer(locations.a_rotateWithView, 1, FLOAT,
|
||||
false, 32, 28);
|
||||
|
||||
return locations;
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
shutDownProgram(gl, locations) {
|
||||
gl.disableVertexAttribArray(locations.a_position);
|
||||
gl.disableVertexAttribArray(locations.a_offsets);
|
||||
gl.disableVertexAttribArray(locations.a_texCoord);
|
||||
gl.disableVertexAttribArray(locations.a_opacity);
|
||||
gl.disableVertexAttribArray(locations.a_rotateWithView);
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
drawReplay(gl, context, skippedFeaturesHash, hitDetection) {
|
||||
const textures = hitDetection ? this.getHitDetectionTextures() : this.getTextures();
|
||||
const groupIndices = hitDetection ? this.hitDetectionGroupIndices : this.groupIndices;
|
||||
|
||||
if (!isEmpty(skippedFeaturesHash)) {
|
||||
this.drawReplaySkipping(gl, context, skippedFeaturesHash, textures, groupIndices);
|
||||
} else {
|
||||
let i, ii, start;
|
||||
for (i = 0, ii = textures.length, start = 0; i < ii; ++i) {
|
||||
gl.bindTexture(TEXTURE_2D, textures[i]);
|
||||
const end = groupIndices[i];
|
||||
this.drawElements(gl, context, start, end);
|
||||
start = end;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Draw the replay while paying attention to skipped features.
|
||||
*
|
||||
* This functions creates groups of features that can be drawn to together,
|
||||
* so that the number of `drawElements` calls is minimized.
|
||||
*
|
||||
* For example given the following texture groups:
|
||||
*
|
||||
* Group 1: A B C
|
||||
* Group 2: D [E] F G
|
||||
*
|
||||
* If feature E should be skipped, the following `drawElements` calls will be
|
||||
* made:
|
||||
*
|
||||
* drawElements with feature A, B and C
|
||||
* drawElements with feature D
|
||||
* drawElements with feature F and G
|
||||
*
|
||||
* @protected
|
||||
* @param {WebGLRenderingContext} gl gl.
|
||||
* @param {import("../../webgl/Context.js").default} context Context.
|
||||
* @param {Object<string, boolean>} skippedFeaturesHash Ids of features
|
||||
* to skip.
|
||||
* @param {Array<WebGLTexture>} textures Textures.
|
||||
* @param {Array<number>} groupIndices Texture group indices.
|
||||
*/
|
||||
drawReplaySkipping(gl, context, skippedFeaturesHash, textures, groupIndices) {
|
||||
let featureIndex = 0;
|
||||
|
||||
let i, ii;
|
||||
for (i = 0, ii = textures.length; i < ii; ++i) {
|
||||
gl.bindTexture(TEXTURE_2D, textures[i]);
|
||||
const groupStart = (i > 0) ? groupIndices[i - 1] : 0;
|
||||
const groupEnd = groupIndices[i];
|
||||
|
||||
let start = groupStart;
|
||||
let end = groupStart;
|
||||
while (featureIndex < this.startIndices.length &&
|
||||
this.startIndices[featureIndex] <= groupEnd) {
|
||||
const feature = this.startIndicesFeature[featureIndex];
|
||||
|
||||
if (skippedFeaturesHash[getUid(feature)] !== undefined) {
|
||||
// feature should be skipped
|
||||
if (start !== end) {
|
||||
// draw the features so far
|
||||
this.drawElements(gl, context, start, end);
|
||||
}
|
||||
// continue with the next feature
|
||||
start = (featureIndex === this.startIndices.length - 1) ?
|
||||
groupEnd : this.startIndices[featureIndex + 1];
|
||||
end = start;
|
||||
} else {
|
||||
// the feature is not skipped, augment the end index
|
||||
end = (featureIndex === this.startIndices.length - 1) ?
|
||||
groupEnd : this.startIndices[featureIndex + 1];
|
||||
}
|
||||
featureIndex++;
|
||||
}
|
||||
|
||||
if (start !== end) {
|
||||
// draw the remaining features (in case there was no skipped feature
|
||||
// in this texture group, all features of a group are drawn together)
|
||||
this.drawElements(gl, context, start, end);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
drawHitDetectionReplayOneByOne(gl, context, skippedFeaturesHash, featureCallback, opt_hitExtent) {
|
||||
let i, groupStart, start, end, feature;
|
||||
let featureIndex = this.startIndices.length - 1;
|
||||
const hitDetectionTextures = this.getHitDetectionTextures();
|
||||
for (i = hitDetectionTextures.length - 1; i >= 0; --i) {
|
||||
gl.bindTexture(TEXTURE_2D, hitDetectionTextures[i]);
|
||||
groupStart = (i > 0) ? this.hitDetectionGroupIndices[i - 1] : 0;
|
||||
end = this.hitDetectionGroupIndices[i];
|
||||
|
||||
// draw all features for this texture group
|
||||
while (featureIndex >= 0 &&
|
||||
this.startIndices[featureIndex] >= groupStart) {
|
||||
start = this.startIndices[featureIndex];
|
||||
feature = this.startIndicesFeature[featureIndex];
|
||||
|
||||
if (skippedFeaturesHash[getUid(feature)] === undefined &&
|
||||
feature.getGeometry() &&
|
||||
(opt_hitExtent === undefined || intersects(
|
||||
/** @type {Array<number>} */ (opt_hitExtent),
|
||||
feature.getGeometry().getExtent()))) {
|
||||
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
|
||||
this.drawElements(gl, context, start, end);
|
||||
|
||||
const result = featureCallback(feature);
|
||||
if (result) {
|
||||
return result;
|
||||
}
|
||||
}
|
||||
|
||||
end = start;
|
||||
featureIndex--;
|
||||
}
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
finish(context) {
|
||||
this.anchorX = undefined;
|
||||
this.anchorY = undefined;
|
||||
this.height = undefined;
|
||||
this.imageHeight = undefined;
|
||||
this.imageWidth = undefined;
|
||||
this.indices = null;
|
||||
this.opacity = undefined;
|
||||
this.originX = undefined;
|
||||
this.originY = undefined;
|
||||
this.rotateWithView = undefined;
|
||||
this.rotation = undefined;
|
||||
this.scale = undefined;
|
||||
this.vertices = null;
|
||||
this.width = undefined;
|
||||
}
|
||||
|
||||
/**
|
||||
* @abstract
|
||||
* @protected
|
||||
* @param {boolean=} opt_all Return hit detection textures with regular ones.
|
||||
* @return {Array<WebGLTexture>} Textures.
|
||||
*/
|
||||
getTextures(opt_all) {
|
||||
return abstract();
|
||||
}
|
||||
|
||||
/**
|
||||
* @abstract
|
||||
* @protected
|
||||
* @return {Array<WebGLTexture>} Textures.
|
||||
*/
|
||||
getHitDetectionTextures() {
|
||||
return abstract();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export default WebGLTextureReplay;
|
||||
@@ -1,100 +0,0 @@
|
||||
//! MODULE=ol/render/webgl/circlereplay/defaultshader
|
||||
|
||||
|
||||
//! COMMON
|
||||
varying vec2 v_center;
|
||||
varying vec2 v_offset;
|
||||
varying float v_halfWidth;
|
||||
varying float v_pixelRatio;
|
||||
|
||||
|
||||
//! VERTEX
|
||||
attribute vec2 a_position;
|
||||
attribute float a_instruction;
|
||||
attribute float a_radius;
|
||||
|
||||
uniform mat4 u_projectionMatrix;
|
||||
uniform mat4 u_offsetScaleMatrix;
|
||||
uniform mat4 u_offsetRotateMatrix;
|
||||
uniform float u_lineWidth;
|
||||
uniform float u_pixelRatio;
|
||||
|
||||
void main(void) {
|
||||
mat4 offsetMatrix = u_offsetScaleMatrix * u_offsetRotateMatrix;
|
||||
v_center = vec4(u_projectionMatrix * vec4(a_position, 0.0, 1.0)).xy;
|
||||
v_pixelRatio = u_pixelRatio;
|
||||
float lineWidth = u_lineWidth * u_pixelRatio;
|
||||
v_halfWidth = lineWidth / 2.0;
|
||||
if (lineWidth == 0.0) {
|
||||
lineWidth = 2.0 * u_pixelRatio;
|
||||
}
|
||||
vec2 offset;
|
||||
// Radius with anitaliasing (roughly).
|
||||
float radius = a_radius + 3.0 * u_pixelRatio;
|
||||
// Until we get gl_VertexID in WebGL, we store an instruction.
|
||||
if (a_instruction == 0.0) {
|
||||
// Offsetting the edges of the triangle by lineWidth / 2 is necessary, however
|
||||
// we should also leave some space for the antialiasing, thus we offset by lineWidth.
|
||||
offset = vec2(-1.0, 1.0);
|
||||
} else if (a_instruction == 1.0) {
|
||||
offset = vec2(-1.0, -1.0);
|
||||
} else if (a_instruction == 2.0) {
|
||||
offset = vec2(1.0, -1.0);
|
||||
} else {
|
||||
offset = vec2(1.0, 1.0);
|
||||
}
|
||||
|
||||
gl_Position = u_projectionMatrix * vec4(a_position + offset * radius, 0.0, 1.0) +
|
||||
offsetMatrix * vec4(offset * lineWidth, 0.0, 0.0);
|
||||
v_offset = vec4(u_projectionMatrix * vec4(a_position.x + a_radius, a_position.y,
|
||||
0.0, 1.0)).xy;
|
||||
|
||||
if (distance(v_center, v_offset) > 20000.0) {
|
||||
gl_Position = vec4(v_center, 0.0, 1.0);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//! FRAGMENT
|
||||
|
||||
uniform float u_opacity;
|
||||
uniform vec4 u_fillColor;
|
||||
uniform vec4 u_strokeColor;
|
||||
uniform vec2 u_size;
|
||||
|
||||
void main(void) {
|
||||
vec2 windowCenter = vec2((v_center.x + 1.0) / 2.0 * u_size.x * v_pixelRatio,
|
||||
(v_center.y + 1.0) / 2.0 * u_size.y * v_pixelRatio);
|
||||
vec2 windowOffset = vec2((v_offset.x + 1.0) / 2.0 * u_size.x * v_pixelRatio,
|
||||
(v_offset.y + 1.0) / 2.0 * u_size.y * v_pixelRatio);
|
||||
float radius = length(windowCenter - windowOffset);
|
||||
float dist = length(windowCenter - gl_FragCoord.xy);
|
||||
if (dist > radius + v_halfWidth) {
|
||||
if (u_strokeColor.a == 0.0) {
|
||||
gl_FragColor = u_fillColor;
|
||||
} else {
|
||||
gl_FragColor = u_strokeColor;
|
||||
}
|
||||
gl_FragColor.a = gl_FragColor.a - (dist - (radius + v_halfWidth));
|
||||
} else if (u_fillColor.a == 0.0) {
|
||||
// Hooray, no fill, just stroke. We can use real antialiasing.
|
||||
gl_FragColor = u_strokeColor;
|
||||
if (dist < radius - v_halfWidth) {
|
||||
gl_FragColor.a = gl_FragColor.a - (radius - v_halfWidth - dist);
|
||||
}
|
||||
} else {
|
||||
gl_FragColor = u_fillColor;
|
||||
float strokeDist = radius - v_halfWidth;
|
||||
float antialias = 2.0 * v_pixelRatio;
|
||||
if (dist > strokeDist) {
|
||||
gl_FragColor = u_strokeColor;
|
||||
} else if (dist >= strokeDist - antialias) {
|
||||
float step = smoothstep(strokeDist - antialias, strokeDist, dist);
|
||||
gl_FragColor = mix(u_fillColor, u_strokeColor, step);
|
||||
}
|
||||
}
|
||||
gl_FragColor.a = gl_FragColor.a * u_opacity;
|
||||
if (gl_FragColor.a <= 0.0) {
|
||||
discard;
|
||||
}
|
||||
}
|
||||
@@ -1,17 +0,0 @@
|
||||
/**
|
||||
* @module ol/render/webgl/circlereplay/defaultshader
|
||||
*/
|
||||
// This file is automatically generated, do not edit.
|
||||
// Run `make shaders` to generate, and commit the result.
|
||||
|
||||
import {DEBUG as DEBUG_WEBGL} from '../../../webgl.js';
|
||||
import WebGLFragment from '../../../webgl/Fragment.js';
|
||||
import WebGLVertex from '../../../webgl/Vertex.js';
|
||||
|
||||
export const fragment = new WebGLFragment(DEBUG_WEBGL ?
|
||||
'precision mediump float;\nvarying vec2 v_center;\nvarying vec2 v_offset;\nvarying float v_halfWidth;\nvarying float v_pixelRatio;\n\n\n\nuniform float u_opacity;\nuniform vec4 u_fillColor;\nuniform vec4 u_strokeColor;\nuniform vec2 u_size;\n\nvoid main(void) {\n vec2 windowCenter = vec2((v_center.x + 1.0) / 2.0 * u_size.x * v_pixelRatio,\n (v_center.y + 1.0) / 2.0 * u_size.y * v_pixelRatio);\n vec2 windowOffset = vec2((v_offset.x + 1.0) / 2.0 * u_size.x * v_pixelRatio,\n (v_offset.y + 1.0) / 2.0 * u_size.y * v_pixelRatio);\n float radius = length(windowCenter - windowOffset);\n float dist = length(windowCenter - gl_FragCoord.xy);\n if (dist > radius + v_halfWidth) {\n if (u_strokeColor.a == 0.0) {\n gl_FragColor = u_fillColor;\n } else {\n gl_FragColor = u_strokeColor;\n }\n gl_FragColor.a = gl_FragColor.a - (dist - (radius + v_halfWidth));\n } else if (u_fillColor.a == 0.0) {\n // Hooray, no fill, just stroke. We can use real antialiasing.\n gl_FragColor = u_strokeColor;\n if (dist < radius - v_halfWidth) {\n gl_FragColor.a = gl_FragColor.a - (radius - v_halfWidth - dist);\n }\n } else {\n gl_FragColor = u_fillColor;\n float strokeDist = radius - v_halfWidth;\n float antialias = 2.0 * v_pixelRatio;\n if (dist > strokeDist) {\n gl_FragColor = u_strokeColor;\n } else if (dist >= strokeDist - antialias) {\n float step = smoothstep(strokeDist - antialias, strokeDist, dist);\n gl_FragColor = mix(u_fillColor, u_strokeColor, step);\n }\n }\n gl_FragColor.a = gl_FragColor.a * u_opacity;\n if (gl_FragColor.a <= 0.0) {\n discard;\n }\n}\n' :
|
||||
'precision mediump float;varying vec2 a;varying vec2 b;varying float c;varying float d;uniform float m;uniform vec4 n;uniform vec4 o;uniform vec2 p;void main(void){vec2 windowCenter=vec2((a.x+1.0)/2.0*p.x*d,(a.y+1.0)/2.0*p.y*d);vec2 windowOffset=vec2((b.x+1.0)/2.0*p.x*d,(b.y+1.0)/2.0*p.y*d);float radius=length(windowCenter-windowOffset);float dist=length(windowCenter-gl_FragCoord.xy);if(dist>radius+c){if(o.a==0.0){gl_FragColor=n;}else{gl_FragColor=o;}gl_FragColor.a=gl_FragColor.a-(dist-(radius+c));}else if(n.a==0.0){gl_FragColor=o;if(dist<radius-c){gl_FragColor.a=gl_FragColor.a-(radius-c-dist);}} else{gl_FragColor=n;float strokeDist=radius-c;float antialias=2.0*d;if(dist>strokeDist){gl_FragColor=o;}else if(dist>=strokeDist-antialias){float step=smoothstep(strokeDist-antialias,strokeDist,dist);gl_FragColor=mix(n,o,step);}} gl_FragColor.a=gl_FragColor.a*m;if(gl_FragColor.a<=0.0){discard;}}');
|
||||
|
||||
export const vertex = new WebGLVertex(DEBUG_WEBGL ?
|
||||
'varying vec2 v_center;\nvarying vec2 v_offset;\nvarying float v_halfWidth;\nvarying float v_pixelRatio;\n\n\nattribute vec2 a_position;\nattribute float a_instruction;\nattribute float a_radius;\n\nuniform mat4 u_projectionMatrix;\nuniform mat4 u_offsetScaleMatrix;\nuniform mat4 u_offsetRotateMatrix;\nuniform float u_lineWidth;\nuniform float u_pixelRatio;\n\nvoid main(void) {\n mat4 offsetMatrix = u_offsetScaleMatrix * u_offsetRotateMatrix;\n v_center = vec4(u_projectionMatrix * vec4(a_position, 0.0, 1.0)).xy;\n v_pixelRatio = u_pixelRatio;\n float lineWidth = u_lineWidth * u_pixelRatio;\n v_halfWidth = lineWidth / 2.0;\n if (lineWidth == 0.0) {\n lineWidth = 2.0 * u_pixelRatio;\n }\n vec2 offset;\n // Radius with anitaliasing (roughly).\n float radius = a_radius + 3.0 * u_pixelRatio;\n // Until we get gl_VertexID in WebGL, we store an instruction.\n if (a_instruction == 0.0) {\n // Offsetting the edges of the triangle by lineWidth / 2 is necessary, however\n // we should also leave some space for the antialiasing, thus we offset by lineWidth.\n offset = vec2(-1.0, 1.0);\n } else if (a_instruction == 1.0) {\n offset = vec2(-1.0, -1.0);\n } else if (a_instruction == 2.0) {\n offset = vec2(1.0, -1.0);\n } else {\n offset = vec2(1.0, 1.0);\n }\n\n gl_Position = u_projectionMatrix * vec4(a_position + offset * radius, 0.0, 1.0) +\n offsetMatrix * vec4(offset * lineWidth, 0.0, 0.0);\n v_offset = vec4(u_projectionMatrix * vec4(a_position.x + a_radius, a_position.y,\n 0.0, 1.0)).xy;\n\n if (distance(v_center, v_offset) > 20000.0) {\n gl_Position = vec4(v_center, 0.0, 1.0);\n }\n}\n\n\n' :
|
||||
'varying vec2 a;varying vec2 b;varying float c;varying float d;attribute vec2 e;attribute float f;attribute float g;uniform mat4 h;uniform mat4 i;uniform mat4 j;uniform float k;uniform float l;void main(void){mat4 offsetMatrix=i*j;a=vec4(h*vec4(e,0.0,1.0)).xy;d=l;float lineWidth=k*l;c=lineWidth/2.0;if(lineWidth==0.0){lineWidth=2.0*l;}vec2 offset;float radius=g+3.0*l;if(f==0.0){offset=vec2(-1.0,1.0);}else if(f==1.0){offset=vec2(-1.0,-1.0);}else if(f==2.0){offset=vec2(1.0,-1.0);}else{offset=vec2(1.0,1.0);}gl_Position=h*vec4(e+offset*radius,0.0,1.0)+offsetMatrix*vec4(offset*lineWidth,0.0,0.0);b=vec4(h*vec4(e.x+g,e.y,0.0,1.0)).xy;if(distance(a,b)>20000.0){gl_Position=vec4(a,0.0,1.0);}}');
|
||||
@@ -1,93 +0,0 @@
|
||||
/**
|
||||
* @module ol/render/webgl/circlereplay/defaultshader/Locations
|
||||
*/
|
||||
// This file is automatically generated, do not edit
|
||||
// Run `make shaders` to generate, and commit the result.
|
||||
|
||||
import {DEBUG as DEBUG_WEBGL} from '../../../../webgl.js';
|
||||
|
||||
class Locations {
|
||||
|
||||
/**
|
||||
* @param {WebGLRenderingContext} gl GL.
|
||||
* @param {WebGLProgram} program Program.
|
||||
*/
|
||||
constructor(gl, program) {
|
||||
|
||||
/**
|
||||
* @type {WebGLUniformLocation}
|
||||
*/
|
||||
this.u_projectionMatrix = gl.getUniformLocation(
|
||||
program, DEBUG_WEBGL ? 'u_projectionMatrix' : 'h');
|
||||
|
||||
/**
|
||||
* @type {WebGLUniformLocation}
|
||||
*/
|
||||
this.u_offsetScaleMatrix = gl.getUniformLocation(
|
||||
program, DEBUG_WEBGL ? 'u_offsetScaleMatrix' : 'i');
|
||||
|
||||
/**
|
||||
* @type {WebGLUniformLocation}
|
||||
*/
|
||||
this.u_offsetRotateMatrix = gl.getUniformLocation(
|
||||
program, DEBUG_WEBGL ? 'u_offsetRotateMatrix' : 'j');
|
||||
|
||||
/**
|
||||
* @type {WebGLUniformLocation}
|
||||
*/
|
||||
this.u_lineWidth = gl.getUniformLocation(
|
||||
program, DEBUG_WEBGL ? 'u_lineWidth' : 'k');
|
||||
|
||||
/**
|
||||
* @type {WebGLUniformLocation}
|
||||
*/
|
||||
this.u_pixelRatio = gl.getUniformLocation(
|
||||
program, DEBUG_WEBGL ? 'u_pixelRatio' : 'l');
|
||||
|
||||
/**
|
||||
* @type {WebGLUniformLocation}
|
||||
*/
|
||||
this.u_opacity = gl.getUniformLocation(
|
||||
program, DEBUG_WEBGL ? 'u_opacity' : 'm');
|
||||
|
||||
/**
|
||||
* @type {WebGLUniformLocation}
|
||||
*/
|
||||
this.u_fillColor = gl.getUniformLocation(
|
||||
program, DEBUG_WEBGL ? 'u_fillColor' : 'n');
|
||||
|
||||
/**
|
||||
* @type {WebGLUniformLocation}
|
||||
*/
|
||||
this.u_strokeColor = gl.getUniformLocation(
|
||||
program, DEBUG_WEBGL ? 'u_strokeColor' : 'o');
|
||||
|
||||
/**
|
||||
* @type {WebGLUniformLocation}
|
||||
*/
|
||||
this.u_size = gl.getUniformLocation(
|
||||
program, DEBUG_WEBGL ? 'u_size' : 'p');
|
||||
|
||||
/**
|
||||
* @type {number}
|
||||
*/
|
||||
this.a_position = gl.getAttribLocation(
|
||||
program, DEBUG_WEBGL ? 'a_position' : 'e');
|
||||
|
||||
/**
|
||||
* @type {number}
|
||||
*/
|
||||
this.a_instruction = gl.getAttribLocation(
|
||||
program, DEBUG_WEBGL ? 'a_instruction' : 'f');
|
||||
|
||||
/**
|
||||
* @type {number}
|
||||
*/
|
||||
this.a_radius = gl.getAttribLocation(
|
||||
program, DEBUG_WEBGL ? 'a_radius' : 'g');
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default Locations;
|
||||
@@ -1,160 +0,0 @@
|
||||
//! MODULE=ol/render/webgl/linestringreplay/defaultshader
|
||||
|
||||
|
||||
//! COMMON
|
||||
varying float v_round;
|
||||
varying vec2 v_roundVertex;
|
||||
varying float v_halfWidth;
|
||||
|
||||
|
||||
//! VERTEX
|
||||
attribute vec2 a_lastPos;
|
||||
attribute vec2 a_position;
|
||||
attribute vec2 a_nextPos;
|
||||
attribute float a_direction;
|
||||
|
||||
uniform mat4 u_projectionMatrix;
|
||||
uniform mat4 u_offsetScaleMatrix;
|
||||
uniform mat4 u_offsetRotateMatrix;
|
||||
uniform float u_lineWidth;
|
||||
uniform float u_miterLimit;
|
||||
|
||||
bool nearlyEquals(in float value, in float ref) {
|
||||
float epsilon = 0.000000000001;
|
||||
return value >= ref - epsilon && value <= ref + epsilon;
|
||||
}
|
||||
|
||||
void alongNormal(out vec2 offset, in vec2 nextP, in float turnDir, in float direction) {
|
||||
vec2 dirVect = nextP - a_position;
|
||||
vec2 normal = normalize(vec2(-turnDir * dirVect.y, turnDir * dirVect.x));
|
||||
offset = u_lineWidth / 2.0 * normal * direction;
|
||||
}
|
||||
|
||||
void miterUp(out vec2 offset, out float round, in bool isRound, in float direction) {
|
||||
float halfWidth = u_lineWidth / 2.0;
|
||||
vec2 tangent = normalize(normalize(a_nextPos - a_position) + normalize(a_position - a_lastPos));
|
||||
vec2 normal = vec2(-tangent.y, tangent.x);
|
||||
vec2 dirVect = a_nextPos - a_position;
|
||||
vec2 tmpNormal = normalize(vec2(-dirVect.y, dirVect.x));
|
||||
float miterLength = abs(halfWidth / dot(normal, tmpNormal));
|
||||
offset = normal * direction * miterLength;
|
||||
round = 0.0;
|
||||
if (isRound) {
|
||||
round = 1.0;
|
||||
} else if (miterLength > u_miterLimit + u_lineWidth) {
|
||||
offset = halfWidth * tmpNormal * direction;
|
||||
}
|
||||
}
|
||||
|
||||
bool miterDown(out vec2 offset, in vec4 projPos, in mat4 offsetMatrix, in float direction) {
|
||||
bool degenerate = false;
|
||||
vec2 tangent = normalize(normalize(a_nextPos - a_position) + normalize(a_position - a_lastPos));
|
||||
vec2 normal = vec2(-tangent.y, tangent.x);
|
||||
vec2 dirVect = a_lastPos - a_position;
|
||||
vec2 tmpNormal = normalize(vec2(-dirVect.y, dirVect.x));
|
||||
vec2 longOffset, shortOffset, longVertex;
|
||||
vec4 shortProjVertex;
|
||||
float halfWidth = u_lineWidth / 2.0;
|
||||
if (length(a_nextPos - a_position) > length(a_lastPos - a_position)) {
|
||||
longOffset = tmpNormal * direction * halfWidth;
|
||||
shortOffset = normalize(vec2(dirVect.y, -dirVect.x)) * direction * halfWidth;
|
||||
longVertex = a_nextPos;
|
||||
shortProjVertex = u_projectionMatrix * vec4(a_lastPos, 0.0, 1.0);
|
||||
} else {
|
||||
shortOffset = tmpNormal * direction * halfWidth;
|
||||
longOffset = normalize(vec2(dirVect.y, -dirVect.x)) * direction * halfWidth;
|
||||
longVertex = a_lastPos;
|
||||
shortProjVertex = u_projectionMatrix * vec4(a_nextPos, 0.0, 1.0);
|
||||
}
|
||||
//Intersection algorithm based on theory by Paul Bourke (http://paulbourke.net/geometry/pointlineplane/).
|
||||
vec4 p1 = u_projectionMatrix * vec4(longVertex, 0.0, 1.0) + offsetMatrix * vec4(longOffset, 0.0, 0.0);
|
||||
vec4 p2 = projPos + offsetMatrix * vec4(longOffset, 0.0, 0.0);
|
||||
vec4 p3 = shortProjVertex + offsetMatrix * vec4(-shortOffset, 0.0, 0.0);
|
||||
vec4 p4 = shortProjVertex + offsetMatrix * vec4(shortOffset, 0.0, 0.0);
|
||||
float denom = (p4.y - p3.y) * (p2.x - p1.x) - (p4.x - p3.x) * (p2.y - p1.y);
|
||||
float firstU = ((p4.x - p3.x) * (p1.y - p3.y) - (p4.y - p3.y) * (p1.x - p3.x)) / denom;
|
||||
float secondU = ((p2.x - p1.x) * (p1.y - p3.y) - (p2.y - p1.y) * (p1.x - p3.x)) / denom;
|
||||
float epsilon = 0.000000000001;
|
||||
if (firstU > epsilon && firstU < 1.0 - epsilon && secondU > epsilon && secondU < 1.0 - epsilon) {
|
||||
shortProjVertex.x = p1.x + firstU * (p2.x - p1.x);
|
||||
shortProjVertex.y = p1.y + firstU * (p2.y - p1.y);
|
||||
offset = shortProjVertex.xy;
|
||||
degenerate = true;
|
||||
} else {
|
||||
float miterLength = abs(halfWidth / dot(normal, tmpNormal));
|
||||
offset = normal * direction * miterLength;
|
||||
}
|
||||
return degenerate;
|
||||
}
|
||||
|
||||
void squareCap(out vec2 offset, out float round, in bool isRound, in vec2 nextP,
|
||||
in float turnDir, in float direction) {
|
||||
round = 0.0;
|
||||
vec2 dirVect = a_position - nextP;
|
||||
vec2 firstNormal = normalize(dirVect);
|
||||
vec2 secondNormal = vec2(turnDir * firstNormal.y * direction, -turnDir * firstNormal.x * direction);
|
||||
vec2 hypotenuse = normalize(firstNormal - secondNormal);
|
||||
vec2 normal = vec2(turnDir * hypotenuse.y * direction, -turnDir * hypotenuse.x * direction);
|
||||
float length = sqrt(v_halfWidth * v_halfWidth * 2.0);
|
||||
offset = normal * length;
|
||||
if (isRound) {
|
||||
round = 1.0;
|
||||
}
|
||||
}
|
||||
|
||||
void main(void) {
|
||||
bool degenerate = false;
|
||||
float direction = float(sign(a_direction));
|
||||
mat4 offsetMatrix = u_offsetScaleMatrix * u_offsetRotateMatrix;
|
||||
vec2 offset;
|
||||
vec4 projPos = u_projectionMatrix * vec4(a_position, 0.0, 1.0);
|
||||
bool round = nearlyEquals(mod(a_direction, 2.0), 0.0);
|
||||
|
||||
v_round = 0.0;
|
||||
v_halfWidth = u_lineWidth / 2.0;
|
||||
v_roundVertex = projPos.xy;
|
||||
|
||||
if (nearlyEquals(mod(a_direction, 3.0), 0.0) || nearlyEquals(mod(a_direction, 17.0), 0.0)) {
|
||||
alongNormal(offset, a_nextPos, 1.0, direction);
|
||||
} else if (nearlyEquals(mod(a_direction, 5.0), 0.0) || nearlyEquals(mod(a_direction, 13.0), 0.0)) {
|
||||
alongNormal(offset, a_lastPos, -1.0, direction);
|
||||
} else if (nearlyEquals(mod(a_direction, 23.0), 0.0)) {
|
||||
miterUp(offset, v_round, round, direction);
|
||||
} else if (nearlyEquals(mod(a_direction, 19.0), 0.0)) {
|
||||
degenerate = miterDown(offset, projPos, offsetMatrix, direction);
|
||||
} else if (nearlyEquals(mod(a_direction, 7.0), 0.0)) {
|
||||
squareCap(offset, v_round, round, a_nextPos, 1.0, direction);
|
||||
} else if (nearlyEquals(mod(a_direction, 11.0), 0.0)) {
|
||||
squareCap(offset, v_round, round, a_lastPos, -1.0, direction);
|
||||
}
|
||||
if (!degenerate) {
|
||||
vec4 offsets = offsetMatrix * vec4(offset, 0.0, 0.0);
|
||||
gl_Position = projPos + offsets;
|
||||
} else {
|
||||
gl_Position = vec4(offset, 0.0, 1.0);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//! FRAGMENT
|
||||
|
||||
uniform float u_opacity;
|
||||
uniform vec4 u_color;
|
||||
uniform vec2 u_size;
|
||||
uniform float u_pixelRatio;
|
||||
|
||||
void main(void) {
|
||||
if (v_round > 0.0) {
|
||||
vec2 windowCoords = vec2((v_roundVertex.x + 1.0) / 2.0 * u_size.x * u_pixelRatio,
|
||||
(v_roundVertex.y + 1.0) / 2.0 * u_size.y * u_pixelRatio);
|
||||
if (length(windowCoords - gl_FragCoord.xy) > v_halfWidth * u_pixelRatio) {
|
||||
discard;
|
||||
}
|
||||
}
|
||||
gl_FragColor = u_color;
|
||||
float alpha = u_color.a * u_opacity;
|
||||
if (alpha == 0.0) {
|
||||
discard;
|
||||
}
|
||||
gl_FragColor.a = alpha;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -1,99 +0,0 @@
|
||||
/**
|
||||
* @module ol/render/webgl/linestringreplay/defaultshader/Locations
|
||||
*/
|
||||
// This file is automatically generated, do not edit
|
||||
// Run `make shaders` to generate, and commit the result.
|
||||
|
||||
import {DEBUG as DEBUG_WEBGL} from '../../../../webgl.js';
|
||||
|
||||
class Locations {
|
||||
|
||||
/**
|
||||
* @param {WebGLRenderingContext} gl GL.
|
||||
* @param {WebGLProgram} program Program.
|
||||
*/
|
||||
constructor(gl, program) {
|
||||
|
||||
/**
|
||||
* @type {WebGLUniformLocation}
|
||||
*/
|
||||
this.u_projectionMatrix = gl.getUniformLocation(
|
||||
program, DEBUG_WEBGL ? 'u_projectionMatrix' : 'h');
|
||||
|
||||
/**
|
||||
* @type {WebGLUniformLocation}
|
||||
*/
|
||||
this.u_offsetScaleMatrix = gl.getUniformLocation(
|
||||
program, DEBUG_WEBGL ? 'u_offsetScaleMatrix' : 'i');
|
||||
|
||||
/**
|
||||
* @type {WebGLUniformLocation}
|
||||
*/
|
||||
this.u_offsetRotateMatrix = gl.getUniformLocation(
|
||||
program, DEBUG_WEBGL ? 'u_offsetRotateMatrix' : 'j');
|
||||
|
||||
/**
|
||||
* @type {WebGLUniformLocation}
|
||||
*/
|
||||
this.u_lineWidth = gl.getUniformLocation(
|
||||
program, DEBUG_WEBGL ? 'u_lineWidth' : 'k');
|
||||
|
||||
/**
|
||||
* @type {WebGLUniformLocation}
|
||||
*/
|
||||
this.u_miterLimit = gl.getUniformLocation(
|
||||
program, DEBUG_WEBGL ? 'u_miterLimit' : 'l');
|
||||
|
||||
/**
|
||||
* @type {WebGLUniformLocation}
|
||||
*/
|
||||
this.u_opacity = gl.getUniformLocation(
|
||||
program, DEBUG_WEBGL ? 'u_opacity' : 'm');
|
||||
|
||||
/**
|
||||
* @type {WebGLUniformLocation}
|
||||
*/
|
||||
this.u_color = gl.getUniformLocation(
|
||||
program, DEBUG_WEBGL ? 'u_color' : 'n');
|
||||
|
||||
/**
|
||||
* @type {WebGLUniformLocation}
|
||||
*/
|
||||
this.u_size = gl.getUniformLocation(
|
||||
program, DEBUG_WEBGL ? 'u_size' : 'o');
|
||||
|
||||
/**
|
||||
* @type {WebGLUniformLocation}
|
||||
*/
|
||||
this.u_pixelRatio = gl.getUniformLocation(
|
||||
program, DEBUG_WEBGL ? 'u_pixelRatio' : 'p');
|
||||
|
||||
/**
|
||||
* @type {number}
|
||||
*/
|
||||
this.a_lastPos = gl.getAttribLocation(
|
||||
program, DEBUG_WEBGL ? 'a_lastPos' : 'd');
|
||||
|
||||
/**
|
||||
* @type {number}
|
||||
*/
|
||||
this.a_position = gl.getAttribLocation(
|
||||
program, DEBUG_WEBGL ? 'a_position' : 'e');
|
||||
|
||||
/**
|
||||
* @type {number}
|
||||
*/
|
||||
this.a_nextPos = gl.getAttribLocation(
|
||||
program, DEBUG_WEBGL ? 'a_nextPos' : 'f');
|
||||
|
||||
/**
|
||||
* @type {number}
|
||||
*/
|
||||
this.a_direction = gl.getAttribLocation(
|
||||
program, DEBUG_WEBGL ? 'a_direction' : 'g');
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default Locations;
|
||||
@@ -1,31 +0,0 @@
|
||||
//! MODULE=ol/render/webgl/polygonreplay/defaultshader
|
||||
|
||||
|
||||
//! COMMON
|
||||
|
||||
|
||||
//! VERTEX
|
||||
attribute vec2 a_position;
|
||||
|
||||
uniform mat4 u_projectionMatrix;
|
||||
uniform mat4 u_offsetScaleMatrix;
|
||||
uniform mat4 u_offsetRotateMatrix;
|
||||
|
||||
void main(void) {
|
||||
gl_Position = u_projectionMatrix * vec4(a_position, 0.0, 1.0);
|
||||
}
|
||||
|
||||
|
||||
//! FRAGMENT
|
||||
|
||||
uniform vec4 u_color;
|
||||
uniform float u_opacity;
|
||||
|
||||
void main(void) {
|
||||
gl_FragColor = u_color;
|
||||
float alpha = u_color.a * u_opacity;
|
||||
if (alpha == 0.0) {
|
||||
discard;
|
||||
}
|
||||
gl_FragColor.a = alpha;
|
||||
}
|
||||
@@ -1,17 +0,0 @@
|
||||
/**
|
||||
* @module ol/render/webgl/polygonreplay/defaultshader
|
||||
*/
|
||||
// This file is automatically generated, do not edit.
|
||||
// Run `make shaders` to generate, and commit the result.
|
||||
|
||||
import {DEBUG as DEBUG_WEBGL} from '../../../webgl.js';
|
||||
import WebGLFragment from '../../../webgl/Fragment.js';
|
||||
import WebGLVertex from '../../../webgl/Vertex.js';
|
||||
|
||||
export const fragment = new WebGLFragment(DEBUG_WEBGL ?
|
||||
'precision mediump float;\n\n\n\nuniform vec4 u_color;\nuniform float u_opacity;\n\nvoid main(void) {\n gl_FragColor = u_color;\n float alpha = u_color.a * u_opacity;\n if (alpha == 0.0) {\n discard;\n }\n gl_FragColor.a = alpha;\n}\n' :
|
||||
'precision mediump float;uniform vec4 e;uniform float f;void main(void){gl_FragColor=e;float alpha=e.a*f;if(alpha==0.0){discard;}gl_FragColor.a=alpha;}');
|
||||
|
||||
export const vertex = new WebGLVertex(DEBUG_WEBGL ?
|
||||
'\n\nattribute vec2 a_position;\n\nuniform mat4 u_projectionMatrix;\nuniform mat4 u_offsetScaleMatrix;\nuniform mat4 u_offsetRotateMatrix;\n\nvoid main(void) {\n gl_Position = u_projectionMatrix * vec4(a_position, 0.0, 1.0);\n}\n\n\n' :
|
||||
'attribute vec2 a;uniform mat4 b;uniform mat4 c;uniform mat4 d;void main(void){gl_Position=b*vec4(a,0.0,1.0);}');
|
||||
@@ -1,57 +0,0 @@
|
||||
/**
|
||||
* @module ol/render/webgl/polygonreplay/defaultshader/Locations
|
||||
*/
|
||||
// This file is automatically generated, do not edit
|
||||
// Run `make shaders` to generate, and commit the result.
|
||||
|
||||
import {DEBUG as DEBUG_WEBGL} from '../../../../webgl.js';
|
||||
|
||||
class Locations {
|
||||
|
||||
/**
|
||||
* @param {WebGLRenderingContext} gl GL.
|
||||
* @param {WebGLProgram} program Program.
|
||||
*/
|
||||
constructor(gl, program) {
|
||||
|
||||
/**
|
||||
* @type {WebGLUniformLocation}
|
||||
*/
|
||||
this.u_projectionMatrix = gl.getUniformLocation(
|
||||
program, DEBUG_WEBGL ? 'u_projectionMatrix' : 'b');
|
||||
|
||||
/**
|
||||
* @type {WebGLUniformLocation}
|
||||
*/
|
||||
this.u_offsetScaleMatrix = gl.getUniformLocation(
|
||||
program, DEBUG_WEBGL ? 'u_offsetScaleMatrix' : 'c');
|
||||
|
||||
/**
|
||||
* @type {WebGLUniformLocation}
|
||||
*/
|
||||
this.u_offsetRotateMatrix = gl.getUniformLocation(
|
||||
program, DEBUG_WEBGL ? 'u_offsetRotateMatrix' : 'd');
|
||||
|
||||
/**
|
||||
* @type {WebGLUniformLocation}
|
||||
*/
|
||||
this.u_color = gl.getUniformLocation(
|
||||
program, DEBUG_WEBGL ? 'u_color' : 'e');
|
||||
|
||||
/**
|
||||
* @type {WebGLUniformLocation}
|
||||
*/
|
||||
this.u_opacity = gl.getUniformLocation(
|
||||
program, DEBUG_WEBGL ? 'u_opacity' : 'f');
|
||||
|
||||
/**
|
||||
* @type {number}
|
||||
*/
|
||||
this.a_position = gl.getAttribLocation(
|
||||
program, DEBUG_WEBGL ? 'a_position' : 'a');
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default Locations;
|
||||
@@ -1,43 +0,0 @@
|
||||
//! MODULE=ol/render/webgl/texturereplay/defaultshader
|
||||
|
||||
|
||||
//! 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;
|
||||
attribute float a_rotateWithView;
|
||||
|
||||
uniform mat4 u_projectionMatrix;
|
||||
uniform mat4 u_offsetScaleMatrix;
|
||||
uniform mat4 u_offsetRotateMatrix;
|
||||
|
||||
void main(void) {
|
||||
mat4 offsetMatrix = u_offsetScaleMatrix;
|
||||
if (a_rotateWithView == 1.0) {
|
||||
offsetMatrix = u_offsetScaleMatrix * u_offsetRotateMatrix;
|
||||
}
|
||||
vec4 offsets = offsetMatrix * vec4(a_offsets, 0.0, 0.0);
|
||||
gl_Position = u_projectionMatrix * vec4(a_position, 0.0, 1.0) + offsets;
|
||||
v_texCoord = a_texCoord;
|
||||
v_opacity = a_opacity;
|
||||
}
|
||||
|
||||
|
||||
//! FRAGMENT
|
||||
uniform float u_opacity;
|
||||
uniform sampler2D u_image;
|
||||
|
||||
void main(void) {
|
||||
vec4 texColor = texture2D(u_image, v_texCoord);
|
||||
gl_FragColor.rgb = texColor.rgb;
|
||||
float alpha = texColor.a * v_opacity * u_opacity;
|
||||
if (alpha == 0.0) {
|
||||
discard;
|
||||
}
|
||||
gl_FragColor.a = alpha;
|
||||
}
|
||||
@@ -1,17 +0,0 @@
|
||||
/**
|
||||
* @module ol/render/webgl/texturereplay/defaultshader
|
||||
*/
|
||||
// This file is automatically generated, do not edit.
|
||||
// Run `make shaders` to generate, and commit the result.
|
||||
|
||||
import {DEBUG as DEBUG_WEBGL} from '../../../webgl.js';
|
||||
import WebGLFragment from '../../../webgl/Fragment.js';
|
||||
import WebGLVertex from '../../../webgl/Vertex.js';
|
||||
|
||||
export const fragment = new WebGLFragment(DEBUG_WEBGL ?
|
||||
'precision mediump float;\nvarying vec2 v_texCoord;\nvarying float v_opacity;\n\nuniform float u_opacity;\nuniform sampler2D u_image;\n\nvoid main(void) {\n vec4 texColor = texture2D(u_image, v_texCoord);\n gl_FragColor.rgb = texColor.rgb;\n float alpha = texColor.a * v_opacity * u_opacity;\n if (alpha == 0.0) {\n discard;\n }\n gl_FragColor.a = alpha;\n}\n' :
|
||||
'precision mediump float;varying vec2 a;varying float b;uniform float k;uniform sampler2D l;void main(void){vec4 texColor=texture2D(l,a);gl_FragColor.rgb=texColor.rgb;float alpha=texColor.a*b*k;if(alpha==0.0){discard;}gl_FragColor.a=alpha;}');
|
||||
|
||||
export const vertex = new WebGLVertex(DEBUG_WEBGL ?
|
||||
'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;\nattribute float a_rotateWithView;\n\nuniform mat4 u_projectionMatrix;\nuniform mat4 u_offsetScaleMatrix;\nuniform mat4 u_offsetRotateMatrix;\n\nvoid main(void) {\n mat4 offsetMatrix = u_offsetScaleMatrix;\n if (a_rotateWithView == 1.0) {\n offsetMatrix = u_offsetScaleMatrix * u_offsetRotateMatrix;\n }\n vec4 offsets = offsetMatrix * vec4(a_offsets, 0.0, 0.0);\n gl_Position = u_projectionMatrix * vec4(a_position, 0.0, 1.0) + offsets;\n v_texCoord = a_texCoord;\n v_opacity = a_opacity;\n}\n\n\n' :
|
||||
'varying vec2 a;varying float b;attribute vec2 c;attribute vec2 d;attribute vec2 e;attribute float f;attribute float g;uniform mat4 h;uniform mat4 i;uniform mat4 j;void main(void){mat4 offsetMatrix=i;if(g==1.0){offsetMatrix=i*j;}vec4 offsets=offsetMatrix*vec4(e,0.0,0.0);gl_Position=h*vec4(c,0.0,1.0)+offsets;a=d;b=f;}');
|
||||
@@ -1,81 +0,0 @@
|
||||
/**
|
||||
* @module ol/render/webgl/texturereplay/defaultshader/Locations
|
||||
*/
|
||||
// This file is automatically generated, do not edit
|
||||
// Run `make shaders` to generate, and commit the result.
|
||||
|
||||
import {DEBUG as DEBUG_WEBGL} from '../../../../webgl.js';
|
||||
|
||||
class Locations {
|
||||
|
||||
/**
|
||||
* @param {WebGLRenderingContext} gl GL.
|
||||
* @param {WebGLProgram} program Program.
|
||||
*/
|
||||
constructor(gl, program) {
|
||||
|
||||
/**
|
||||
* @type {WebGLUniformLocation}
|
||||
*/
|
||||
this.u_projectionMatrix = gl.getUniformLocation(
|
||||
program, DEBUG_WEBGL ? 'u_projectionMatrix' : 'h');
|
||||
|
||||
/**
|
||||
* @type {WebGLUniformLocation}
|
||||
*/
|
||||
this.u_offsetScaleMatrix = gl.getUniformLocation(
|
||||
program, DEBUG_WEBGL ? 'u_offsetScaleMatrix' : 'i');
|
||||
|
||||
/**
|
||||
* @type {WebGLUniformLocation}
|
||||
*/
|
||||
this.u_offsetRotateMatrix = gl.getUniformLocation(
|
||||
program, DEBUG_WEBGL ? 'u_offsetRotateMatrix' : 'j');
|
||||
|
||||
/**
|
||||
* @type {WebGLUniformLocation}
|
||||
*/
|
||||
this.u_opacity = gl.getUniformLocation(
|
||||
program, DEBUG_WEBGL ? 'u_opacity' : 'k');
|
||||
|
||||
/**
|
||||
* @type {WebGLUniformLocation}
|
||||
*/
|
||||
this.u_image = gl.getUniformLocation(
|
||||
program, DEBUG_WEBGL ? 'u_image' : 'l');
|
||||
|
||||
/**
|
||||
* @type {number}
|
||||
*/
|
||||
this.a_position = gl.getAttribLocation(
|
||||
program, DEBUG_WEBGL ? 'a_position' : 'c');
|
||||
|
||||
/**
|
||||
* @type {number}
|
||||
*/
|
||||
this.a_texCoord = gl.getAttribLocation(
|
||||
program, DEBUG_WEBGL ? 'a_texCoord' : 'd');
|
||||
|
||||
/**
|
||||
* @type {number}
|
||||
*/
|
||||
this.a_offsets = gl.getAttribLocation(
|
||||
program, DEBUG_WEBGL ? 'a_offsets' : 'e');
|
||||
|
||||
/**
|
||||
* @type {number}
|
||||
*/
|
||||
this.a_opacity = gl.getAttribLocation(
|
||||
program, DEBUG_WEBGL ? 'a_opacity' : 'f');
|
||||
|
||||
/**
|
||||
* @type {number}
|
||||
*/
|
||||
this.a_rotateWithView = gl.getAttribLocation(
|
||||
program, DEBUG_WEBGL ? 'a_rotateWithView' : 'g');
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default Locations;
|
||||
@@ -1,271 +0,0 @@
|
||||
/**
|
||||
* @module ol/renderer/webgl/ImageLayer
|
||||
*/
|
||||
import {ENABLE_RASTER_REPROJECTION} from '../../reproj/common.js';
|
||||
import ViewHint from '../../ViewHint.js';
|
||||
import {createCanvasContext2D} from '../../dom.js';
|
||||
import {getIntersection, isEmpty} from '../../extent.js';
|
||||
import WebGLLayerRenderer from './Layer.js';
|
||||
import {
|
||||
create as createTransform,
|
||||
rotate as rotateTransform,
|
||||
translate as translateTransform,
|
||||
scale as scaleTransform,
|
||||
reset as resetTransform,
|
||||
apply as applyTransform,
|
||||
invert as invertTransform,
|
||||
multiply as multiplyTransform
|
||||
} from '../../transform.js';
|
||||
import {CLAMP_TO_EDGE} from '../../webgl.js';
|
||||
import {createTexture} from '../../webgl/Context.js';
|
||||
|
||||
/**
|
||||
* @classdesc
|
||||
* WebGL renderer for image layers.
|
||||
* @api
|
||||
*/
|
||||
class WebGLImageLayerRenderer extends WebGLLayerRenderer {
|
||||
|
||||
/**
|
||||
* @param {import("./Map.js").default} mapRenderer Map renderer.
|
||||
* @param {import("../../layer/Image.js").default} imageLayer Tile layer.
|
||||
*/
|
||||
constructor(mapRenderer, imageLayer) {
|
||||
|
||||
super(mapRenderer, imageLayer);
|
||||
|
||||
/**
|
||||
* The last rendered image.
|
||||
* @private
|
||||
* @type {?import("../../ImageBase.js").default}
|
||||
*/
|
||||
this.image_ = null;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {CanvasRenderingContext2D}
|
||||
*/
|
||||
this.hitCanvasContext_ = null;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {?import("../../transform.js").Transform}
|
||||
*/
|
||||
this.hitTransformationMatrix_ = null;
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {import("../../ImageBase.js").default} image Image.
|
||||
* @private
|
||||
* @return {WebGLTexture} Texture.
|
||||
*/
|
||||
createTexture_(image) {
|
||||
|
||||
// We meet the conditions to work with non-power of two textures.
|
||||
// http://www.khronos.org/webgl/wiki/WebGL_and_OpenGL_Differences#Non-Power_of_Two_Texture_Support
|
||||
// http://learningwebgl.com/blog/?p=2101
|
||||
|
||||
const imageElement = image.getImage();
|
||||
const gl = this.mapRenderer.getGL();
|
||||
|
||||
return createTexture(
|
||||
gl, imageElement, CLAMP_TO_EDGE, CLAMP_TO_EDGE);
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
prepareFrame(frameState, layerState, context) {
|
||||
|
||||
const gl = this.mapRenderer.getGL();
|
||||
|
||||
const pixelRatio = frameState.pixelRatio;
|
||||
const viewState = frameState.viewState;
|
||||
const viewCenter = viewState.center;
|
||||
const viewResolution = viewState.resolution;
|
||||
const viewRotation = viewState.rotation;
|
||||
|
||||
let image = this.image_;
|
||||
let texture = this.texture;
|
||||
const imageLayer = /** @type {import("../../layer/Image.js").default} */ (this.getLayer());
|
||||
const imageSource = /** @type {import("../../source/Image.js").default} */ (imageLayer.getSource());
|
||||
|
||||
const hints = frameState.viewHints;
|
||||
|
||||
let renderedExtent = frameState.extent;
|
||||
if (layerState.extent !== undefined) {
|
||||
renderedExtent = getIntersection(renderedExtent, layerState.extent);
|
||||
}
|
||||
if (!hints[ViewHint.ANIMATING] && !hints[ViewHint.INTERACTING] &&
|
||||
!isEmpty(renderedExtent)) {
|
||||
let projection = viewState.projection;
|
||||
if (!ENABLE_RASTER_REPROJECTION) {
|
||||
const sourceProjection = imageSource.getProjection();
|
||||
if (sourceProjection) {
|
||||
projection = sourceProjection;
|
||||
}
|
||||
}
|
||||
const image_ = imageSource.getImage(renderedExtent, viewResolution,
|
||||
pixelRatio, projection);
|
||||
if (image_) {
|
||||
const loaded = this.loadImage(image_);
|
||||
if (loaded) {
|
||||
image = image_;
|
||||
texture = this.createTexture_(image_);
|
||||
if (this.texture) {
|
||||
/**
|
||||
* @param {WebGLRenderingContext} gl GL.
|
||||
* @param {WebGLTexture} texture Texture.
|
||||
*/
|
||||
const postRenderFunction = function(gl, texture) {
|
||||
if (!gl.isContextLost()) {
|
||||
gl.deleteTexture(texture);
|
||||
}
|
||||
}.bind(null, gl, this.texture);
|
||||
frameState.postRenderFunctions.push(
|
||||
/** @type {import("../../PluggableMap.js").PostRenderFunction} */ (postRenderFunction)
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (image) {
|
||||
const canvas = this.mapRenderer.getContext().getCanvas();
|
||||
|
||||
this.updateProjectionMatrix_(canvas.width, canvas.height,
|
||||
pixelRatio, viewCenter, viewResolution, viewRotation,
|
||||
image.getExtent());
|
||||
this.hitTransformationMatrix_ = null;
|
||||
|
||||
// Translate and scale to flip the Y coord.
|
||||
const texCoordMatrix = this.texCoordMatrix;
|
||||
resetTransform(texCoordMatrix);
|
||||
scaleTransform(texCoordMatrix, 1, -1);
|
||||
translateTransform(texCoordMatrix, 0, -1);
|
||||
|
||||
this.image_ = image;
|
||||
this.texture = texture;
|
||||
}
|
||||
|
||||
return !!image;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {number} canvasWidth Canvas width.
|
||||
* @param {number} canvasHeight Canvas height.
|
||||
* @param {number} pixelRatio Pixel ratio.
|
||||
* @param {import("../../coordinate.js").Coordinate} viewCenter View center.
|
||||
* @param {number} viewResolution View resolution.
|
||||
* @param {number} viewRotation View rotation.
|
||||
* @param {import("../../extent.js").Extent} imageExtent Image extent.
|
||||
* @private
|
||||
*/
|
||||
updateProjectionMatrix_(
|
||||
canvasWidth,
|
||||
canvasHeight,
|
||||
pixelRatio,
|
||||
viewCenter,
|
||||
viewResolution,
|
||||
viewRotation,
|
||||
imageExtent
|
||||
) {
|
||||
|
||||
const canvasExtentWidth = canvasWidth * viewResolution;
|
||||
const canvasExtentHeight = canvasHeight * viewResolution;
|
||||
|
||||
const projectionMatrix = this.projectionMatrix;
|
||||
resetTransform(projectionMatrix);
|
||||
scaleTransform(projectionMatrix,
|
||||
pixelRatio * 2 / canvasExtentWidth,
|
||||
pixelRatio * 2 / canvasExtentHeight);
|
||||
rotateTransform(projectionMatrix, -viewRotation);
|
||||
translateTransform(projectionMatrix,
|
||||
imageExtent[0] - viewCenter[0],
|
||||
imageExtent[1] - viewCenter[1]);
|
||||
scaleTransform(projectionMatrix,
|
||||
(imageExtent[2] - imageExtent[0]) / 2,
|
||||
(imageExtent[3] - imageExtent[1]) / 2);
|
||||
translateTransform(projectionMatrix, 1, 1);
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
forEachLayerAtPixel(pixel, frameState, callback, thisArg) {
|
||||
if (!this.image_ || !this.image_.getImage()) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
const imageSize =
|
||||
[this.image_.getImage().width, this.image_.getImage().height];
|
||||
|
||||
if (!this.hitTransformationMatrix_) {
|
||||
this.hitTransformationMatrix_ = this.getHitTransformationMatrix_(
|
||||
frameState.size, imageSize);
|
||||
}
|
||||
|
||||
const pixelOnFrameBuffer = applyTransform(
|
||||
this.hitTransformationMatrix_, pixel.slice());
|
||||
|
||||
if (pixelOnFrameBuffer[0] < 0 || pixelOnFrameBuffer[0] > imageSize[0] ||
|
||||
pixelOnFrameBuffer[1] < 0 || pixelOnFrameBuffer[1] > imageSize[1]) {
|
||||
// outside the image, no need to check
|
||||
return undefined;
|
||||
}
|
||||
|
||||
if (!this.hitCanvasContext_) {
|
||||
this.hitCanvasContext_ = createCanvasContext2D(1, 1);
|
||||
}
|
||||
|
||||
this.hitCanvasContext_.clearRect(0, 0, 1, 1);
|
||||
this.hitCanvasContext_.drawImage(this.image_.getImage(),
|
||||
pixelOnFrameBuffer[0], pixelOnFrameBuffer[1], 1, 1, 0, 0, 1, 1);
|
||||
|
||||
const imageData = this.hitCanvasContext_.getImageData(0, 0, 1, 1).data;
|
||||
if (imageData[3] > 0) {
|
||||
return callback.call(thisArg, this.getLayer(), imageData);
|
||||
} else {
|
||||
return undefined;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* The transformation matrix to get the pixel on the image for a
|
||||
* pixel on the map.
|
||||
* @param {import("../../size.js").Size} mapSize The map size.
|
||||
* @param {import("../../size.js").Size} imageSize The image size.
|
||||
* @return {import("../../transform.js").Transform} The transformation matrix.
|
||||
* @private
|
||||
*/
|
||||
getHitTransformationMatrix_(mapSize, imageSize) {
|
||||
// the first matrix takes a map pixel, flips the y-axis and scales to
|
||||
// a range between -1 ... 1
|
||||
const mapCoordTransform = createTransform();
|
||||
translateTransform(mapCoordTransform, -1, -1);
|
||||
scaleTransform(mapCoordTransform, 2 / mapSize[0], 2 / mapSize[1]);
|
||||
translateTransform(mapCoordTransform, 0, mapSize[1]);
|
||||
scaleTransform(mapCoordTransform, 1, -1);
|
||||
|
||||
// the second matrix is the inverse of the projection matrix used in the
|
||||
// shader for drawing
|
||||
const projectionMatrixInv = invertTransform(this.projectionMatrix.slice());
|
||||
|
||||
// the third matrix scales to the image dimensions and flips the y-axis again
|
||||
const transform = createTransform();
|
||||
translateTransform(transform, 0, imageSize[1]);
|
||||
scaleTransform(transform, 1, -1);
|
||||
scaleTransform(transform, imageSize[0] / 2, imageSize[1] / 2);
|
||||
translateTransform(transform, 1, 1);
|
||||
|
||||
multiplyTransform(transform, projectionMatrixInv);
|
||||
multiplyTransform(transform, mapCoordTransform);
|
||||
|
||||
return transform;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export default WebGLImageLayerRenderer;
|
||||
@@ -1,263 +0,0 @@
|
||||
/**
|
||||
* @module ol/renderer/webgl/Layer
|
||||
*/
|
||||
import {abstract} from '../../util.js';
|
||||
import RenderEvent from '../../render/Event.js';
|
||||
import RenderEventType from '../../render/EventType.js';
|
||||
import WebGLImmediateRenderer from '../../render/webgl/Immediate.js';
|
||||
import LayerRenderer from '../Layer.js';
|
||||
import {fragment, vertex} from './defaultmapshader.js';
|
||||
import Locations from './defaultmapshader/Locations.js';
|
||||
import {create as createTransform} from '../../transform.js';
|
||||
import {create, fromTransform} from '../../vec/mat4.js';
|
||||
import {ARRAY_BUFFER, FRAMEBUFFER, FLOAT, TEXTURE_2D,
|
||||
TRIANGLE_STRIP, COLOR_ATTACHMENT0} from '../../webgl.js';
|
||||
import WebGLBuffer from '../../webgl/Buffer.js';
|
||||
import {createEmptyTexture} from '../../webgl/Context.js';
|
||||
|
||||
/**
|
||||
* @abstract
|
||||
*/
|
||||
class WebGLLayerRenderer extends LayerRenderer {
|
||||
|
||||
/**
|
||||
* @param {import("./Map.js").default} mapRenderer Map renderer.
|
||||
* @param {import("../../layer/Layer.js").default} layer Layer.
|
||||
*/
|
||||
constructor(mapRenderer, layer) {
|
||||
|
||||
super(layer);
|
||||
|
||||
/**
|
||||
* @protected
|
||||
* @type {import("./Map.js").default}
|
||||
*/
|
||||
this.mapRenderer = mapRenderer;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {import("../../webgl/Buffer.js").default}
|
||||
*/
|
||||
this.arrayBuffer_ = new WebGLBuffer([
|
||||
-1, -1, 0, 0,
|
||||
1, -1, 1, 0,
|
||||
-1, 1, 0, 1,
|
||||
1, 1, 1, 1
|
||||
]);
|
||||
|
||||
/**
|
||||
* @protected
|
||||
* @type {WebGLTexture}
|
||||
*/
|
||||
this.texture = null;
|
||||
|
||||
/**
|
||||
* @protected
|
||||
* @type {WebGLFramebuffer}
|
||||
*/
|
||||
this.framebuffer = null;
|
||||
|
||||
/**
|
||||
* @protected
|
||||
* @type {number|undefined}
|
||||
*/
|
||||
this.framebufferDimension = undefined;
|
||||
|
||||
/**
|
||||
* @protected
|
||||
* @type {import("../../transform.js").Transform}
|
||||
*/
|
||||
this.texCoordMatrix = createTransform();
|
||||
|
||||
/**
|
||||
* @protected
|
||||
* @type {import("../../transform.js").Transform}
|
||||
*/
|
||||
this.projectionMatrix = createTransform();
|
||||
|
||||
/**
|
||||
* @type {Array<number>}
|
||||
* @private
|
||||
*/
|
||||
this.tmpMat4_ = create();
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {import("./defaultmapshader/Locations.js").default}
|
||||
*/
|
||||
this.defaultLocations_ = null;
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {import("../../PluggableMap.js").FrameState} frameState Frame state.
|
||||
* @param {number} framebufferDimension Framebuffer dimension.
|
||||
* @protected
|
||||
*/
|
||||
bindFramebuffer(frameState, framebufferDimension) {
|
||||
|
||||
const gl = this.mapRenderer.getGL();
|
||||
|
||||
if (this.framebufferDimension === undefined ||
|
||||
this.framebufferDimension != framebufferDimension) {
|
||||
/**
|
||||
* @param {WebGLRenderingContext} gl GL.
|
||||
* @param {WebGLFramebuffer} framebuffer Framebuffer.
|
||||
* @param {WebGLTexture} texture Texture.
|
||||
*/
|
||||
const postRenderFunction = function(gl, framebuffer, texture) {
|
||||
if (!gl.isContextLost()) {
|
||||
gl.deleteFramebuffer(framebuffer);
|
||||
gl.deleteTexture(texture);
|
||||
}
|
||||
}.bind(null, gl, this.framebuffer, this.texture);
|
||||
|
||||
frameState.postRenderFunctions.push(
|
||||
/** @type {import("../../PluggableMap.js").PostRenderFunction} */ (postRenderFunction)
|
||||
);
|
||||
|
||||
const texture = createEmptyTexture(
|
||||
gl, framebufferDimension, framebufferDimension);
|
||||
|
||||
const framebuffer = gl.createFramebuffer();
|
||||
gl.bindFramebuffer(FRAMEBUFFER, framebuffer);
|
||||
gl.framebufferTexture2D(FRAMEBUFFER,
|
||||
COLOR_ATTACHMENT0, TEXTURE_2D, texture, 0);
|
||||
|
||||
this.texture = texture;
|
||||
this.framebuffer = framebuffer;
|
||||
this.framebufferDimension = framebufferDimension;
|
||||
|
||||
} else {
|
||||
gl.bindFramebuffer(FRAMEBUFFER, this.framebuffer);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {import("../../PluggableMap.js").FrameState} frameState Frame state.
|
||||
* @param {import("../../layer/Layer.js").State} layerState Layer state.
|
||||
* @param {import("../../webgl/Context.js").default} context Context.
|
||||
*/
|
||||
composeFrame(frameState, layerState, context) {
|
||||
|
||||
this.dispatchComposeEvent_(RenderEventType.PRECOMPOSE, context, frameState);
|
||||
|
||||
context.bindBuffer(ARRAY_BUFFER, this.arrayBuffer_);
|
||||
|
||||
const gl = context.getGL();
|
||||
|
||||
const program = context.getProgram(fragment, vertex);
|
||||
|
||||
let locations;
|
||||
if (!this.defaultLocations_) {
|
||||
locations = new Locations(gl, program);
|
||||
this.defaultLocations_ = locations;
|
||||
} else {
|
||||
locations = this.defaultLocations_;
|
||||
}
|
||||
|
||||
if (context.useProgram(program)) {
|
||||
gl.enableVertexAttribArray(locations.a_position);
|
||||
gl.vertexAttribPointer(
|
||||
locations.a_position, 2, FLOAT, false, 16, 0);
|
||||
gl.enableVertexAttribArray(locations.a_texCoord);
|
||||
gl.vertexAttribPointer(
|
||||
locations.a_texCoord, 2, FLOAT, false, 16, 8);
|
||||
gl.uniform1i(locations.u_texture, 0);
|
||||
}
|
||||
|
||||
gl.uniformMatrix4fv(locations.u_texCoordMatrix, false,
|
||||
fromTransform(this.tmpMat4_, this.getTexCoordMatrix()));
|
||||
gl.uniformMatrix4fv(locations.u_projectionMatrix, false,
|
||||
fromTransform(this.tmpMat4_, this.getProjectionMatrix()));
|
||||
gl.uniform1f(locations.u_opacity, layerState.opacity);
|
||||
gl.bindTexture(TEXTURE_2D, this.getTexture());
|
||||
gl.drawArrays(TRIANGLE_STRIP, 0, 4);
|
||||
|
||||
this.dispatchComposeEvent_(RenderEventType.POSTCOMPOSE, context, frameState);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {import("../../render/EventType.js").default} type Event type.
|
||||
* @param {import("../../webgl/Context.js").default} context WebGL context.
|
||||
* @param {import("../../PluggableMap.js").FrameState} frameState Frame state.
|
||||
* @private
|
||||
*/
|
||||
dispatchComposeEvent_(type, context, frameState) {
|
||||
const layer = this.getLayer();
|
||||
if (layer.hasListener(type)) {
|
||||
const viewState = frameState.viewState;
|
||||
const resolution = viewState.resolution;
|
||||
const pixelRatio = frameState.pixelRatio;
|
||||
const extent = frameState.extent;
|
||||
const center = viewState.center;
|
||||
const rotation = viewState.rotation;
|
||||
const size = frameState.size;
|
||||
|
||||
const render = new WebGLImmediateRenderer(
|
||||
context, center, resolution, rotation, size, extent, pixelRatio);
|
||||
const composeEvent = new RenderEvent(
|
||||
type, render, frameState, null, context);
|
||||
layer.dispatchEvent(composeEvent);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @return {!import("../../transform.js").Transform} Matrix.
|
||||
*/
|
||||
getTexCoordMatrix() {
|
||||
return this.texCoordMatrix;
|
||||
}
|
||||
|
||||
/**
|
||||
* @return {WebGLTexture} Texture.
|
||||
*/
|
||||
getTexture() {
|
||||
return this.texture;
|
||||
}
|
||||
|
||||
/**
|
||||
* @return {!import("../../transform.js").Transform} Matrix.
|
||||
*/
|
||||
getProjectionMatrix() {
|
||||
return this.projectionMatrix;
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle webglcontextlost.
|
||||
*/
|
||||
handleWebGLContextLost() {
|
||||
this.texture = null;
|
||||
this.framebuffer = null;
|
||||
this.framebufferDimension = undefined;
|
||||
}
|
||||
|
||||
/**
|
||||
* @abstract
|
||||
* @param {import("../../PluggableMap.js").FrameState} frameState Frame state.
|
||||
* @param {import("../../layer/Layer.js").State} layerState Layer state.
|
||||
* @param {import("../../webgl/Context.js").default} context Context.
|
||||
* @return {boolean} whether composeFrame should be called.
|
||||
*/
|
||||
prepareFrame(frameState, layerState, context) {
|
||||
return abstract();
|
||||
}
|
||||
|
||||
/**
|
||||
* @abstract
|
||||
* @param {import("../../pixel.js").Pixel} pixel Pixel.
|
||||
* @param {import("../../PluggableMap.js").FrameState} frameState FrameState.
|
||||
* @param {function(this: S, import("../../layer/Layer.js").default, (Uint8ClampedArray|Uint8Array)): T} callback Layer
|
||||
* callback.
|
||||
* @param {S} thisArg Value to use as `this` when executing `callback`.
|
||||
* @return {T|undefined} Callback result.
|
||||
* @template S,T,U
|
||||
*/
|
||||
forEachLayerAtPixel(pixel, frameState, callback, thisArg) {
|
||||
return abstract();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export default WebGLLayerRenderer;
|
||||
@@ -1,582 +0,0 @@
|
||||
/**
|
||||
* @module ol/renderer/webgl/Map
|
||||
*/
|
||||
|
||||
import {stableSort} from '../../array.js';
|
||||
import {CLASS_UNSELECTABLE} from '../../css.js';
|
||||
import {createCanvasContext2D} from '../../dom.js';
|
||||
import {listen} from '../../events.js';
|
||||
import {visibleAtResolution} from '../../layer/Layer.js';
|
||||
import RenderEvent from '../../render/Event.js';
|
||||
import RenderEventType from '../../render/EventType.js';
|
||||
import WebGLImmediateRenderer from '../../render/webgl/Immediate.js';
|
||||
import MapRenderer, {sortByZIndex} from '../Map.js';
|
||||
import SourceState from '../../source/State.js';
|
||||
import LRUCache from '../../structs/LRUCache.js';
|
||||
import PriorityQueue from '../../structs/PriorityQueue.js';
|
||||
import {BLEND, CLAMP_TO_EDGE, COLOR_BUFFER_BIT, CULL_FACE, DEPTH_TEST, FRAMEBUFFER,
|
||||
getContext, LINEAR, ONE, ONE_MINUS_SRC_ALPHA, RGBA, SCISSOR_TEST, SRC_ALPHA,
|
||||
STENCIL_TEST, TEXTURE0, TEXTURE_2D, TEXTURE_MAG_FILTER, TEXTURE_MIN_FILTER,
|
||||
TEXTURE_WRAP_S, TEXTURE_WRAP_T, UNSIGNED_BYTE} from '../../webgl.js';
|
||||
import WebGLContext from '../../webgl/Context.js';
|
||||
import ContextEventType from '../../webgl/ContextEventType.js';
|
||||
|
||||
|
||||
/**
|
||||
* @typedef {Object} TextureCacheEntry
|
||||
* @property {number} magFilter
|
||||
* @property {number} minFilter
|
||||
* @property {WebGLTexture} texture
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* Texture cache high water mark.
|
||||
* @type {number}
|
||||
*/
|
||||
const WEBGL_TEXTURE_CACHE_HIGH_WATER_MARK = 1024;
|
||||
|
||||
|
||||
/**
|
||||
* @classdesc
|
||||
* WebGL map renderer.
|
||||
* @api
|
||||
*/
|
||||
class WebGLMapRenderer extends MapRenderer {
|
||||
|
||||
/**
|
||||
* @param {import("../../PluggableMap.js").default} map Map.
|
||||
*/
|
||||
constructor(map) {
|
||||
super(map);
|
||||
|
||||
const container = map.getViewport();
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {HTMLCanvasElement}
|
||||
*/
|
||||
this.canvas_ = /** @type {HTMLCanvasElement} */
|
||||
(document.createElement('canvas'));
|
||||
this.canvas_.style.width = '100%';
|
||||
this.canvas_.style.height = '100%';
|
||||
this.canvas_.style.display = 'block';
|
||||
this.canvas_.className = CLASS_UNSELECTABLE;
|
||||
container.insertBefore(this.canvas_, container.childNodes[0] || null);
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {number}
|
||||
*/
|
||||
this.clipTileCanvasWidth_ = 0;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {number}
|
||||
*/
|
||||
this.clipTileCanvasHeight_ = 0;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {CanvasRenderingContext2D}
|
||||
*/
|
||||
this.clipTileContext_ = createCanvasContext2D();
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {boolean}
|
||||
*/
|
||||
this.renderedVisible_ = true;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {WebGLRenderingContext}
|
||||
*/
|
||||
this.gl_ = getContext(this.canvas_, {
|
||||
antialias: true,
|
||||
depth: true,
|
||||
failIfMajorPerformanceCaveat: true,
|
||||
preserveDrawingBuffer: false,
|
||||
stencil: true
|
||||
});
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {import("../../webgl/Context.js").default}
|
||||
*/
|
||||
this.context_ = new WebGLContext(this.canvas_, this.gl_);
|
||||
|
||||
listen(this.canvas_, ContextEventType.LOST,
|
||||
this.handleWebGLContextLost, this);
|
||||
listen(this.canvas_, ContextEventType.RESTORED,
|
||||
this.handleWebGLContextRestored, this);
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {import("../../structs/LRUCache.js").default<TextureCacheEntry|null>}
|
||||
*/
|
||||
this.textureCache_ = new LRUCache();
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {import("../../coordinate.js").Coordinate}
|
||||
*/
|
||||
this.focus_ = null;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {import("../../structs/PriorityQueue.js").default<Array>}
|
||||
*/
|
||||
this.tileTextureQueue_ = new PriorityQueue(
|
||||
/**
|
||||
* @param {Array<*>} element Element.
|
||||
* @return {number} Priority.
|
||||
* @this {WebGLMapRenderer}
|
||||
*/
|
||||
(function(element) {
|
||||
const tileCenter = /** @type {import("../../coordinate.js").Coordinate} */ (element[1]);
|
||||
const tileResolution = /** @type {number} */ (element[2]);
|
||||
const deltaX = tileCenter[0] - this.focus_[0];
|
||||
const deltaY = tileCenter[1] - this.focus_[1];
|
||||
return 65536 * Math.log(tileResolution) +
|
||||
Math.sqrt(deltaX * deltaX + deltaY * deltaY) / tileResolution;
|
||||
}).bind(this),
|
||||
/**
|
||||
* @param {Array<*>} element Element.
|
||||
* @return {string} Key.
|
||||
*/
|
||||
function(element) {
|
||||
return (
|
||||
/** @type {import("../../Tile.js").default} */ (element[0]).getKey()
|
||||
);
|
||||
});
|
||||
|
||||
|
||||
/**
|
||||
* @param {import("../../PluggableMap.js").default} map Map.
|
||||
* @param {?import("../../PluggableMap.js").FrameState} frameState Frame state.
|
||||
* @return {boolean} false.
|
||||
* @this {WebGLMapRenderer}
|
||||
*/
|
||||
this.loadNextTileTexture_ =
|
||||
function(map, frameState) {
|
||||
if (!this.tileTextureQueue_.isEmpty()) {
|
||||
this.tileTextureQueue_.reprioritize();
|
||||
const element = this.tileTextureQueue_.dequeue();
|
||||
const tile = /** @type {import("../../Tile.js").default} */ (element[0]);
|
||||
const tileSize = /** @type {import("../../size.js").Size} */ (element[3]);
|
||||
const tileGutter = /** @type {number} */ (element[4]);
|
||||
this.bindTileTexture(
|
||||
tile, tileSize, tileGutter, LINEAR, LINEAR);
|
||||
}
|
||||
return false;
|
||||
}.bind(this);
|
||||
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {number}
|
||||
*/
|
||||
this.textureCacheFrameMarkerCount_ = 0;
|
||||
|
||||
this.initializeGL_();
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {import("../../Tile.js").default} tile Tile.
|
||||
* @param {import("../../size.js").Size} tileSize Tile size.
|
||||
* @param {number} tileGutter Tile gutter.
|
||||
* @param {number} magFilter Mag filter.
|
||||
* @param {number} minFilter Min filter.
|
||||
*/
|
||||
bindTileTexture(tile, tileSize, tileGutter, magFilter, minFilter) {
|
||||
const gl = this.getGL();
|
||||
const tileKey = tile.getKey();
|
||||
if (this.textureCache_.containsKey(tileKey)) {
|
||||
const textureCacheEntry = this.textureCache_.get(tileKey);
|
||||
gl.bindTexture(TEXTURE_2D, textureCacheEntry.texture);
|
||||
if (textureCacheEntry.magFilter != magFilter) {
|
||||
gl.texParameteri(
|
||||
TEXTURE_2D, TEXTURE_MAG_FILTER, magFilter);
|
||||
textureCacheEntry.magFilter = magFilter;
|
||||
}
|
||||
if (textureCacheEntry.minFilter != minFilter) {
|
||||
gl.texParameteri(
|
||||
TEXTURE_2D, TEXTURE_MIN_FILTER, minFilter);
|
||||
textureCacheEntry.minFilter = minFilter;
|
||||
}
|
||||
} else {
|
||||
const texture = gl.createTexture();
|
||||
const imageTile = /** @type {import("../../ImageTile.js").default} */ (tile);
|
||||
gl.bindTexture(TEXTURE_2D, texture);
|
||||
if (tileGutter > 0) {
|
||||
const clipTileCanvas = this.clipTileContext_.canvas;
|
||||
const clipTileContext = this.clipTileContext_;
|
||||
if (this.clipTileCanvasWidth_ !== tileSize[0] ||
|
||||
this.clipTileCanvasHeight_ !== tileSize[1]) {
|
||||
clipTileCanvas.width = tileSize[0];
|
||||
clipTileCanvas.height = tileSize[1];
|
||||
this.clipTileCanvasWidth_ = tileSize[0];
|
||||
this.clipTileCanvasHeight_ = tileSize[1];
|
||||
} else {
|
||||
clipTileContext.clearRect(0, 0, tileSize[0], tileSize[1]);
|
||||
}
|
||||
clipTileContext.drawImage(imageTile.getImage(), tileGutter, tileGutter,
|
||||
tileSize[0], tileSize[1], 0, 0, tileSize[0], tileSize[1]);
|
||||
gl.texImage2D(TEXTURE_2D, 0,
|
||||
RGBA, RGBA,
|
||||
UNSIGNED_BYTE, clipTileCanvas);
|
||||
} else {
|
||||
gl.texImage2D(TEXTURE_2D, 0,
|
||||
RGBA, RGBA,
|
||||
UNSIGNED_BYTE, imageTile.getImage());
|
||||
}
|
||||
gl.texParameteri(
|
||||
TEXTURE_2D, TEXTURE_MAG_FILTER, magFilter);
|
||||
gl.texParameteri(
|
||||
TEXTURE_2D, TEXTURE_MIN_FILTER, minFilter);
|
||||
gl.texParameteri(TEXTURE_2D, TEXTURE_WRAP_S,
|
||||
CLAMP_TO_EDGE);
|
||||
gl.texParameteri(TEXTURE_2D, TEXTURE_WRAP_T,
|
||||
CLAMP_TO_EDGE);
|
||||
this.textureCache_.set(tileKey, {
|
||||
texture: texture,
|
||||
magFilter: magFilter,
|
||||
minFilter: minFilter
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {import("../../render/EventType.js").default} type Event type.
|
||||
* @param {import("../../PluggableMap.js").FrameState} frameState Frame state.
|
||||
*/
|
||||
dispatchRenderEvent(type, frameState) {
|
||||
const map = this.getMap();
|
||||
if (map.hasListener(type)) {
|
||||
const context = this.context_;
|
||||
|
||||
const extent = frameState.extent;
|
||||
const size = frameState.size;
|
||||
const viewState = frameState.viewState;
|
||||
const pixelRatio = frameState.pixelRatio;
|
||||
|
||||
const resolution = viewState.resolution;
|
||||
const center = viewState.center;
|
||||
const rotation = viewState.rotation;
|
||||
|
||||
const vectorContext = new WebGLImmediateRenderer(context,
|
||||
center, resolution, rotation, size, extent, pixelRatio);
|
||||
const composeEvent = new RenderEvent(type, vectorContext,
|
||||
frameState, null, context);
|
||||
map.dispatchEvent(composeEvent);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
disposeInternal() {
|
||||
const gl = this.getGL();
|
||||
if (!gl.isContextLost()) {
|
||||
this.textureCache_.forEach(
|
||||
/**
|
||||
* @param {?TextureCacheEntry} textureCacheEntry
|
||||
* Texture cache entry.
|
||||
*/
|
||||
function(textureCacheEntry) {
|
||||
if (textureCacheEntry) {
|
||||
gl.deleteTexture(textureCacheEntry.texture);
|
||||
}
|
||||
});
|
||||
}
|
||||
this.context_.dispose();
|
||||
super.disposeInternal();
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {import("../../PluggableMap.js").default} map Map.
|
||||
* @param {import("../../PluggableMap.js").FrameState} frameState Frame state.
|
||||
* @private
|
||||
*/
|
||||
expireCache_(map, frameState) {
|
||||
const gl = this.getGL();
|
||||
let textureCacheEntry;
|
||||
while (this.textureCache_.getCount() - this.textureCacheFrameMarkerCount_ >
|
||||
WEBGL_TEXTURE_CACHE_HIGH_WATER_MARK) {
|
||||
textureCacheEntry = this.textureCache_.peekLast();
|
||||
if (!textureCacheEntry) {
|
||||
if (+this.textureCache_.peekLastKey() == frameState.index) {
|
||||
break;
|
||||
} else {
|
||||
--this.textureCacheFrameMarkerCount_;
|
||||
}
|
||||
} else {
|
||||
gl.deleteTexture(textureCacheEntry.texture);
|
||||
}
|
||||
this.textureCache_.pop();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @return {import("../../webgl/Context.js").default} The context.
|
||||
*/
|
||||
getContext() {
|
||||
return this.context_;
|
||||
}
|
||||
|
||||
/**
|
||||
* @return {WebGLRenderingContext} GL.
|
||||
*/
|
||||
getGL() {
|
||||
return this.gl_;
|
||||
}
|
||||
|
||||
/**
|
||||
* @return {import("../../structs/PriorityQueue.js").default<Array>} Tile texture queue.
|
||||
*/
|
||||
getTileTextureQueue() {
|
||||
return this.tileTextureQueue_;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {import("../../events/Event.js").default} event Event.
|
||||
* @protected
|
||||
*/
|
||||
handleWebGLContextLost(event) {
|
||||
event.preventDefault();
|
||||
this.textureCache_.clear();
|
||||
this.textureCacheFrameMarkerCount_ = 0;
|
||||
|
||||
const renderers = this.getLayerRenderers();
|
||||
for (const id in renderers) {
|
||||
const renderer = /** @type {import("./Layer.js").default} */ (renderers[id]);
|
||||
renderer.handleWebGLContextLost();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @protected
|
||||
*/
|
||||
handleWebGLContextRestored() {
|
||||
this.initializeGL_();
|
||||
this.getMap().render();
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
initializeGL_() {
|
||||
const gl = this.gl_;
|
||||
gl.activeTexture(TEXTURE0);
|
||||
gl.blendFuncSeparate(
|
||||
SRC_ALPHA, ONE_MINUS_SRC_ALPHA,
|
||||
ONE, ONE_MINUS_SRC_ALPHA);
|
||||
gl.disable(CULL_FACE);
|
||||
gl.disable(DEPTH_TEST);
|
||||
gl.disable(SCISSOR_TEST);
|
||||
gl.disable(STENCIL_TEST);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {import("../../Tile.js").default} tile Tile.
|
||||
* @return {boolean} Is tile texture loaded.
|
||||
*/
|
||||
isTileTextureLoaded(tile) {
|
||||
return this.textureCache_.containsKey(tile.getKey());
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
renderFrame(frameState) {
|
||||
|
||||
const context = this.getContext();
|
||||
const gl = this.getGL();
|
||||
|
||||
if (gl.isContextLost()) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!frameState) {
|
||||
if (this.renderedVisible_) {
|
||||
this.canvas_.style.display = 'none';
|
||||
this.renderedVisible_ = false;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
this.focus_ = frameState.focus;
|
||||
|
||||
this.textureCache_.set((-frameState.index).toString(), null);
|
||||
++this.textureCacheFrameMarkerCount_;
|
||||
|
||||
this.dispatchRenderEvent(RenderEventType.PRECOMPOSE, frameState);
|
||||
|
||||
/** @type {Array<import("../../layer/Layer.js").State>} */
|
||||
const layerStatesToDraw = [];
|
||||
const layerStatesArray = frameState.layerStatesArray;
|
||||
stableSort(layerStatesArray, sortByZIndex);
|
||||
|
||||
const viewResolution = frameState.viewState.resolution;
|
||||
let i, ii;
|
||||
for (i = 0, ii = layerStatesArray.length; i < ii; ++i) {
|
||||
const layerState = layerStatesArray[i];
|
||||
if (visibleAtResolution(layerState, viewResolution) &&
|
||||
layerState.sourceState == SourceState.READY) {
|
||||
const layerRenderer = /** @type {import("./Layer.js").default} */ (this.getLayerRenderer(layerState.layer));
|
||||
if (layerRenderer.prepareFrame(frameState, layerState, context)) {
|
||||
layerStatesToDraw.push(layerState);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const width = frameState.size[0] * frameState.pixelRatio;
|
||||
const height = frameState.size[1] * frameState.pixelRatio;
|
||||
if (this.canvas_.width != width || this.canvas_.height != height) {
|
||||
this.canvas_.width = width;
|
||||
this.canvas_.height = height;
|
||||
}
|
||||
|
||||
gl.bindFramebuffer(FRAMEBUFFER, null);
|
||||
|
||||
gl.clearColor(0, 0, 0, 0);
|
||||
gl.clear(COLOR_BUFFER_BIT);
|
||||
gl.enable(BLEND);
|
||||
gl.viewport(0, 0, this.canvas_.width, this.canvas_.height);
|
||||
|
||||
for (i = 0, ii = layerStatesToDraw.length; i < ii; ++i) {
|
||||
const layerState = layerStatesToDraw[i];
|
||||
const layerRenderer = /** @type {import("./Layer.js").default} */ (this.getLayerRenderer(layerState.layer));
|
||||
layerRenderer.composeFrame(frameState, layerState, context);
|
||||
}
|
||||
|
||||
if (!this.renderedVisible_) {
|
||||
this.canvas_.style.display = '';
|
||||
this.renderedVisible_ = true;
|
||||
}
|
||||
|
||||
this.calculateMatrices2D(frameState);
|
||||
|
||||
if (this.textureCache_.getCount() - this.textureCacheFrameMarkerCount_ >
|
||||
WEBGL_TEXTURE_CACHE_HIGH_WATER_MARK) {
|
||||
frameState.postRenderFunctions.push(
|
||||
/** @type {import("../../PluggableMap.js").PostRenderFunction} */ (this.expireCache_.bind(this))
|
||||
);
|
||||
}
|
||||
|
||||
if (!this.tileTextureQueue_.isEmpty()) {
|
||||
frameState.postRenderFunctions.push(this.loadNextTileTexture_);
|
||||
frameState.animate = true;
|
||||
}
|
||||
|
||||
this.dispatchRenderEvent(RenderEventType.POSTCOMPOSE, frameState);
|
||||
|
||||
this.scheduleRemoveUnusedLayerRenderers(frameState);
|
||||
this.scheduleExpireIconCache(frameState);
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
forEachFeatureAtCoordinate(
|
||||
coordinate,
|
||||
frameState,
|
||||
hitTolerance,
|
||||
callback,
|
||||
thisArg,
|
||||
layerFilter,
|
||||
thisArg2
|
||||
) {
|
||||
let result;
|
||||
|
||||
if (this.getGL().isContextLost()) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const viewState = frameState.viewState;
|
||||
|
||||
const layerStates = frameState.layerStatesArray;
|
||||
const numLayers = layerStates.length;
|
||||
let i;
|
||||
for (i = numLayers - 1; i >= 0; --i) {
|
||||
const layerState = layerStates[i];
|
||||
const layer = layerState.layer;
|
||||
if (visibleAtResolution(layerState, viewState.resolution) &&
|
||||
layerFilter.call(thisArg2, layer)) {
|
||||
const layerRenderer = this.getLayerRenderer(layer);
|
||||
result = layerRenderer.forEachFeatureAtCoordinate(
|
||||
coordinate, frameState, hitTolerance, callback);
|
||||
if (result) {
|
||||
return result;
|
||||
}
|
||||
}
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
hasFeatureAtCoordinate(coordinate, frameState, hitTolerance, layerFilter, thisArg) {
|
||||
let hasFeature = false;
|
||||
|
||||
if (this.getGL().isContextLost()) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const viewState = frameState.viewState;
|
||||
|
||||
const layerStates = frameState.layerStatesArray;
|
||||
const numLayers = layerStates.length;
|
||||
let i;
|
||||
for (i = numLayers - 1; i >= 0; --i) {
|
||||
const layerState = layerStates[i];
|
||||
const layer = layerState.layer;
|
||||
if (visibleAtResolution(layerState, viewState.resolution) &&
|
||||
layerFilter.call(thisArg, layer)) {
|
||||
const layerRenderer = this.getLayerRenderer(layer);
|
||||
hasFeature =
|
||||
layerRenderer.hasFeatureAtCoordinate(coordinate, frameState);
|
||||
if (hasFeature) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
return hasFeature;
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
forEachLayerAtPixel(pixel, frameState, hitTolerance, callback, thisArg, layerFilter, thisArg2) {
|
||||
if (this.getGL().isContextLost()) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const viewState = frameState.viewState;
|
||||
let result;
|
||||
|
||||
const layerStates = frameState.layerStatesArray;
|
||||
const numLayers = layerStates.length;
|
||||
let i;
|
||||
for (i = numLayers - 1; i >= 0; --i) {
|
||||
const layerState = layerStates[i];
|
||||
const layer = layerState.layer;
|
||||
if (visibleAtResolution(layerState, viewState.resolution) &&
|
||||
layerFilter.call(thisArg, layer)) {
|
||||
const layerRenderer = /** @type {import("./Layer.js").default} */ (this.getLayerRenderer(layer));
|
||||
result = layerRenderer.forEachLayerAtPixel(
|
||||
pixel, frameState, callback, thisArg);
|
||||
if (result) {
|
||||
return result;
|
||||
}
|
||||
}
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export default WebGLMapRenderer;
|
||||
@@ -1,398 +0,0 @@
|
||||
/**
|
||||
* @module ol/renderer/webgl/TileLayer
|
||||
*/
|
||||
// FIXME large resolutions lead to too large framebuffers :-(
|
||||
// FIXME animated shaders! check in redraw
|
||||
|
||||
import ImageTile from '../../ImageTile.js';
|
||||
import TileRange from '../../TileRange.js';
|
||||
import TileState from '../../TileState.js';
|
||||
import TileSource from '../../source/Tile.js';
|
||||
import {numberSafeCompareFunction} from '../../array.js';
|
||||
import {createEmpty, intersects} from '../../extent.js';
|
||||
import {roundUpToPowerOfTwo} from '../../math.js';
|
||||
import WebGLLayerRenderer from './Layer.js';
|
||||
import {fragment, vertex} from './tilelayershader.js';
|
||||
import Locations from './tilelayershader/Locations.js';
|
||||
import {toSize} from '../../size.js';
|
||||
import {
|
||||
reset as resetTransform,
|
||||
rotate as rotateTransform,
|
||||
scale as scaleTransform,
|
||||
translate as translateTransform,
|
||||
apply as applyTransform
|
||||
} from '../../transform.js';
|
||||
import {COLOR_BUFFER_BIT, BLEND, ARRAY_BUFFER, FLOAT, LINEAR, TRIANGLE_STRIP} from '../../webgl.js';
|
||||
import WebGLBuffer from '../../webgl/Buffer.js';
|
||||
|
||||
/**
|
||||
* @classdesc
|
||||
* WebGL renderer for tile layers.
|
||||
* @api
|
||||
*/
|
||||
class WebGLTileLayerRenderer extends WebGLLayerRenderer {
|
||||
|
||||
/**
|
||||
* @param {import("./Map.js").default} mapRenderer Map renderer.
|
||||
* @param {import("../../layer/Tile.js").default} tileLayer Tile layer.
|
||||
*/
|
||||
constructor(mapRenderer, tileLayer) {
|
||||
|
||||
super(mapRenderer, tileLayer);
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {import("../../webgl/Fragment.js").default}
|
||||
*/
|
||||
this.fragmentShader_ = fragment;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {import("../../webgl/Vertex.js").default}
|
||||
*/
|
||||
this.vertexShader_ = vertex;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {import("./tilelayershader/Locations.js").default}
|
||||
*/
|
||||
this.locations_ = null;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {import("../../webgl/Buffer.js").default}
|
||||
*/
|
||||
this.renderArrayBuffer_ = new WebGLBuffer([
|
||||
0, 0, 0, 1,
|
||||
1, 0, 1, 1,
|
||||
0, 1, 0, 0,
|
||||
1, 1, 1, 0
|
||||
]);
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {import("../../TileRange.js").default}
|
||||
*/
|
||||
this.renderedTileRange_ = null;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {import("../../extent.js").Extent}
|
||||
*/
|
||||
this.renderedFramebufferExtent_ = null;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {number}
|
||||
*/
|
||||
this.renderedRevision_ = -1;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {import("../../size.js").Size}
|
||||
*/
|
||||
this.tmpSize_ = [0, 0];
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
disposeInternal() {
|
||||
const context = this.mapRenderer.getContext();
|
||||
context.deleteBuffer(this.renderArrayBuffer_);
|
||||
super.disposeInternal();
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
createLoadedTileFinder(source, projection, tiles) {
|
||||
const mapRenderer = this.mapRenderer;
|
||||
|
||||
return (
|
||||
/**
|
||||
* @param {number} zoom Zoom level.
|
||||
* @param {import("../../TileRange.js").default} tileRange Tile range.
|
||||
* @return {boolean} The tile range is fully loaded.
|
||||
*/
|
||||
function(zoom, tileRange) {
|
||||
function callback(tile) {
|
||||
const loaded = mapRenderer.isTileTextureLoaded(tile);
|
||||
if (loaded) {
|
||||
if (!tiles[zoom]) {
|
||||
tiles[zoom] = {};
|
||||
}
|
||||
tiles[zoom][tile.tileCoord.toString()] = tile;
|
||||
}
|
||||
return loaded;
|
||||
}
|
||||
return source.forEachLoadedTile(projection, zoom, tileRange, callback);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
handleWebGLContextLost() {
|
||||
super.handleWebGLContextLost();
|
||||
this.locations_ = null;
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
prepareFrame(frameState, layerState, context) {
|
||||
|
||||
const mapRenderer = this.mapRenderer;
|
||||
const gl = context.getGL();
|
||||
|
||||
const viewState = frameState.viewState;
|
||||
const projection = viewState.projection;
|
||||
|
||||
const tileLayer = /** @type {import("../../layer/Tile.js").default} */ (this.getLayer());
|
||||
const tileSource = tileLayer.getSource();
|
||||
if (!(tileSource instanceof TileSource)) {
|
||||
return true;
|
||||
}
|
||||
|
||||
const tileGrid = tileSource.getTileGridForProjection(projection);
|
||||
const z = tileGrid.getZForResolution(viewState.resolution);
|
||||
const tileResolution = tileGrid.getResolution(z);
|
||||
|
||||
const tilePixelSize =
|
||||
tileSource.getTilePixelSize(z, frameState.pixelRatio, projection);
|
||||
const pixelRatio = tilePixelSize[0] /
|
||||
toSize(tileGrid.getTileSize(z), this.tmpSize_)[0];
|
||||
const tilePixelResolution = tileResolution / pixelRatio;
|
||||
const tileGutter = tileSource.getTilePixelRatio(pixelRatio) * tileSource.getGutterForProjection(projection);
|
||||
|
||||
const center = viewState.center;
|
||||
const extent = frameState.extent;
|
||||
const tileRange = tileGrid.getTileRangeForExtentAndZ(extent, z);
|
||||
|
||||
let framebufferExtent;
|
||||
if (this.renderedTileRange_ &&
|
||||
this.renderedTileRange_.equals(tileRange) &&
|
||||
this.renderedRevision_ == tileSource.getRevision()) {
|
||||
framebufferExtent = this.renderedFramebufferExtent_;
|
||||
} else {
|
||||
|
||||
const tileRangeSize = tileRange.getSize();
|
||||
|
||||
const maxDimension = Math.max(
|
||||
tileRangeSize[0] * tilePixelSize[0],
|
||||
tileRangeSize[1] * tilePixelSize[1]);
|
||||
const framebufferDimension = roundUpToPowerOfTwo(maxDimension);
|
||||
const framebufferExtentDimension = tilePixelResolution * framebufferDimension;
|
||||
const origin = tileGrid.getOrigin(z);
|
||||
const minX = origin[0] +
|
||||
tileRange.minX * tilePixelSize[0] * tilePixelResolution;
|
||||
const minY = origin[1] +
|
||||
tileRange.minY * tilePixelSize[1] * tilePixelResolution;
|
||||
framebufferExtent = [
|
||||
minX, minY,
|
||||
minX + framebufferExtentDimension, minY + framebufferExtentDimension
|
||||
];
|
||||
|
||||
this.bindFramebuffer(frameState, framebufferDimension);
|
||||
gl.viewport(0, 0, framebufferDimension, framebufferDimension);
|
||||
|
||||
gl.clearColor(0, 0, 0, 0);
|
||||
gl.clear(COLOR_BUFFER_BIT);
|
||||
gl.disable(BLEND);
|
||||
|
||||
const program = context.getProgram(this.fragmentShader_, this.vertexShader_);
|
||||
context.useProgram(program);
|
||||
if (!this.locations_) {
|
||||
this.locations_ = new Locations(gl, program);
|
||||
}
|
||||
|
||||
context.bindBuffer(ARRAY_BUFFER, this.renderArrayBuffer_);
|
||||
gl.enableVertexAttribArray(this.locations_.a_position);
|
||||
gl.vertexAttribPointer(
|
||||
this.locations_.a_position, 2, FLOAT, false, 16, 0);
|
||||
gl.enableVertexAttribArray(this.locations_.a_texCoord);
|
||||
gl.vertexAttribPointer(
|
||||
this.locations_.a_texCoord, 2, FLOAT, false, 16, 8);
|
||||
gl.uniform1i(this.locations_.u_texture, 0);
|
||||
|
||||
/**
|
||||
* @type {Object<number, Object<string, import("../../Tile.js").default>>}
|
||||
*/
|
||||
const tilesToDrawByZ = {};
|
||||
tilesToDrawByZ[z] = {};
|
||||
|
||||
const findLoadedTiles = this.createLoadedTileFinder(
|
||||
tileSource, projection, tilesToDrawByZ);
|
||||
|
||||
const useInterimTilesOnError = tileLayer.getUseInterimTilesOnError();
|
||||
let allTilesLoaded = true;
|
||||
const tmpExtent = createEmpty();
|
||||
const tmpTileRange = new TileRange(0, 0, 0, 0);
|
||||
let childTileRange, drawable, fullyLoaded, tile, tileState;
|
||||
let x, y, tileExtent;
|
||||
for (x = tileRange.minX; x <= tileRange.maxX; ++x) {
|
||||
for (y = tileRange.minY; y <= tileRange.maxY; ++y) {
|
||||
|
||||
tile = tileSource.getTile(z, x, y, pixelRatio, projection);
|
||||
if (layerState.extent !== undefined) {
|
||||
// ignore tiles outside layer extent
|
||||
tileExtent = tileGrid.getTileCoordExtent(tile.tileCoord, tmpExtent);
|
||||
if (!intersects(tileExtent, layerState.extent)) {
|
||||
continue;
|
||||
}
|
||||
}
|
||||
tileState = tile.getState();
|
||||
drawable = tileState == TileState.LOADED ||
|
||||
tileState == TileState.EMPTY ||
|
||||
tileState == TileState.ERROR && !useInterimTilesOnError;
|
||||
if (!drawable) {
|
||||
tile = tile.getInterimTile();
|
||||
}
|
||||
tileState = tile.getState();
|
||||
if (tileState == TileState.LOADED) {
|
||||
if (mapRenderer.isTileTextureLoaded(tile)) {
|
||||
tilesToDrawByZ[z][tile.tileCoord.toString()] = tile;
|
||||
continue;
|
||||
}
|
||||
} else if (tileState == TileState.EMPTY ||
|
||||
(tileState == TileState.ERROR &&
|
||||
!useInterimTilesOnError)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
allTilesLoaded = false;
|
||||
fullyLoaded = tileGrid.forEachTileCoordParentTileRange(
|
||||
tile.tileCoord, findLoadedTiles, null, tmpTileRange, tmpExtent);
|
||||
if (!fullyLoaded) {
|
||||
childTileRange = tileGrid.getTileCoordChildTileRange(
|
||||
tile.tileCoord, tmpTileRange, tmpExtent);
|
||||
if (childTileRange) {
|
||||
findLoadedTiles(z + 1, childTileRange);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/** @type {Array<number>} */
|
||||
const zs = Object.keys(tilesToDrawByZ).map(Number);
|
||||
zs.sort(numberSafeCompareFunction);
|
||||
const u_tileOffset = new Float32Array(4);
|
||||
for (let i = 0, ii = zs.length; i < ii; ++i) {
|
||||
const tilesToDraw = tilesToDrawByZ[zs[i]];
|
||||
for (const tileKey in tilesToDraw) {
|
||||
tile = tilesToDraw[tileKey];
|
||||
|
||||
if (!(tile instanceof ImageTile)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tileExtent = tileGrid.getTileCoordExtent(tile.tileCoord, tmpExtent);
|
||||
u_tileOffset[0] = 2 * (tileExtent[2] - tileExtent[0]) /
|
||||
framebufferExtentDimension;
|
||||
u_tileOffset[1] = 2 * (tileExtent[3] - tileExtent[1]) /
|
||||
framebufferExtentDimension;
|
||||
u_tileOffset[2] = 2 * (tileExtent[0] - framebufferExtent[0]) /
|
||||
framebufferExtentDimension - 1;
|
||||
u_tileOffset[3] = 2 * (tileExtent[1] - framebufferExtent[1]) /
|
||||
framebufferExtentDimension - 1;
|
||||
gl.uniform4fv(this.locations_.u_tileOffset, u_tileOffset);
|
||||
mapRenderer.bindTileTexture(tile, tilePixelSize,
|
||||
tileGutter * pixelRatio, LINEAR, LINEAR);
|
||||
gl.drawArrays(TRIANGLE_STRIP, 0, 4);
|
||||
}
|
||||
}
|
||||
|
||||
if (allTilesLoaded) {
|
||||
this.renderedTileRange_ = tileRange;
|
||||
this.renderedFramebufferExtent_ = framebufferExtent;
|
||||
this.renderedRevision_ = tileSource.getRevision();
|
||||
} else {
|
||||
this.renderedTileRange_ = null;
|
||||
this.renderedFramebufferExtent_ = null;
|
||||
this.renderedRevision_ = -1;
|
||||
frameState.animate = true;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
this.updateUsedTiles(frameState.usedTiles, tileSource, z, tileRange);
|
||||
const tileTextureQueue = mapRenderer.getTileTextureQueue();
|
||||
this.manageTilePyramid(
|
||||
frameState, tileSource, tileGrid, pixelRatio, projection, extent, z,
|
||||
tileLayer.getPreload(),
|
||||
/**
|
||||
* @param {import("../../Tile.js").default} tile Tile.
|
||||
*/
|
||||
function(tile) {
|
||||
if (tile.getState() == TileState.LOADED &&
|
||||
!mapRenderer.isTileTextureLoaded(tile) &&
|
||||
!tileTextureQueue.isKeyQueued(tile.getKey())) {
|
||||
tileTextureQueue.enqueue([
|
||||
tile,
|
||||
tileGrid.getTileCoordCenter(tile.tileCoord),
|
||||
tileGrid.getResolution(tile.tileCoord[0]),
|
||||
tilePixelSize, tileGutter * pixelRatio
|
||||
]);
|
||||
}
|
||||
}, this);
|
||||
this.scheduleExpireCache(frameState, tileSource);
|
||||
|
||||
const texCoordMatrix = this.texCoordMatrix;
|
||||
resetTransform(texCoordMatrix);
|
||||
translateTransform(texCoordMatrix,
|
||||
(Math.round(center[0] / tileResolution) * tileResolution - framebufferExtent[0]) /
|
||||
(framebufferExtent[2] - framebufferExtent[0]),
|
||||
(Math.round(center[1] / tileResolution) * tileResolution - framebufferExtent[1]) /
|
||||
(framebufferExtent[3] - framebufferExtent[1]));
|
||||
if (viewState.rotation !== 0) {
|
||||
rotateTransform(texCoordMatrix, viewState.rotation);
|
||||
}
|
||||
scaleTransform(texCoordMatrix,
|
||||
frameState.size[0] * viewState.resolution /
|
||||
(framebufferExtent[2] - framebufferExtent[0]),
|
||||
frameState.size[1] * viewState.resolution /
|
||||
(framebufferExtent[3] - framebufferExtent[1]));
|
||||
translateTransform(texCoordMatrix, -0.5, -0.5);
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
forEachLayerAtPixel(pixel, frameState, callback, thisArg) {
|
||||
if (!this.framebuffer) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
const pixelOnMapScaled = [
|
||||
pixel[0] / frameState.size[0],
|
||||
(frameState.size[1] - pixel[1]) / frameState.size[1]];
|
||||
|
||||
const pixelOnFrameBufferScaled = applyTransform(
|
||||
this.texCoordMatrix, pixelOnMapScaled.slice());
|
||||
const pixelOnFrameBuffer = [
|
||||
pixelOnFrameBufferScaled[0] * this.framebufferDimension,
|
||||
pixelOnFrameBufferScaled[1] * this.framebufferDimension];
|
||||
|
||||
const gl = this.mapRenderer.getContext().getGL();
|
||||
gl.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffer);
|
||||
const imageData = new Uint8Array(4);
|
||||
gl.readPixels(pixelOnFrameBuffer[0], pixelOnFrameBuffer[1], 1, 1,
|
||||
gl.RGBA, gl.UNSIGNED_BYTE, imageData);
|
||||
|
||||
if (imageData[3] > 0) {
|
||||
return callback.call(thisArg, this.getLayer(), imageData);
|
||||
} else {
|
||||
return undefined;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export default WebGLTileLayerRenderer;
|
||||
@@ -1,306 +0,0 @@
|
||||
/**
|
||||
* @module ol/renderer/webgl/VectorLayer
|
||||
*/
|
||||
import {getUid} from '../../util.js';
|
||||
import ViewHint from '../../ViewHint.js';
|
||||
import {buffer, containsExtent, createEmpty} from '../../extent.js';
|
||||
import WebGLReplayGroup from '../../render/webgl/ReplayGroup.js';
|
||||
import {defaultOrder as defaultRenderOrder, getTolerance as getRenderTolerance, getSquaredTolerance as getSquaredRenderTolerance, renderFeature} from '../vector.js';
|
||||
import WebGLLayerRenderer from './Layer.js';
|
||||
import {apply as applyTransform} from '../../transform.js';
|
||||
|
||||
|
||||
/**
|
||||
* @classdesc
|
||||
* WebGL renderer for vector layers.
|
||||
* @api
|
||||
*/
|
||||
class WebGLVectorLayerRenderer extends WebGLLayerRenderer {
|
||||
|
||||
/**
|
||||
* @param {import("./Map.js").default} mapRenderer Map renderer.
|
||||
* @param {import("../../layer/Vector.js").default} vectorLayer Vector layer.
|
||||
*/
|
||||
constructor(mapRenderer, vectorLayer) {
|
||||
|
||||
super(mapRenderer, vectorLayer);
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {boolean}
|
||||
*/
|
||||
this.dirty_ = false;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {number}
|
||||
*/
|
||||
this.renderedRevision_ = -1;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {number}
|
||||
*/
|
||||
this.renderedResolution_ = NaN;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {import("../../extent.js").Extent}
|
||||
*/
|
||||
this.renderedExtent_ = createEmpty();
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {function(import("../../Feature.js").default, import("../../Feature.js").default): number|null}
|
||||
*/
|
||||
this.renderedRenderOrder_ = null;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {import("../../render/webgl/ReplayGroup.js").default}
|
||||
*/
|
||||
this.replayGroup_ = null;
|
||||
|
||||
/**
|
||||
* The last layer state.
|
||||
* @private
|
||||
* @type {?import("../../layer/Layer.js").State}
|
||||
*/
|
||||
this.layerState_ = null;
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
composeFrame(frameState, layerState, context) {
|
||||
this.layerState_ = layerState;
|
||||
const viewState = frameState.viewState;
|
||||
const replayGroup = this.replayGroup_;
|
||||
const size = frameState.size;
|
||||
const pixelRatio = frameState.pixelRatio;
|
||||
const gl = this.mapRenderer.getGL();
|
||||
if (replayGroup && !replayGroup.isEmpty()) {
|
||||
gl.enable(gl.SCISSOR_TEST);
|
||||
gl.scissor(0, 0, size[0] * pixelRatio, size[1] * pixelRatio);
|
||||
replayGroup.replay(context,
|
||||
viewState.center, viewState.resolution, viewState.rotation,
|
||||
size, pixelRatio, layerState.opacity,
|
||||
layerState.managed ? frameState.skippedFeatureUids : {});
|
||||
gl.disable(gl.SCISSOR_TEST);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
disposeInternal() {
|
||||
const replayGroup = this.replayGroup_;
|
||||
if (replayGroup) {
|
||||
const context = this.mapRenderer.getContext();
|
||||
replayGroup.getDeleteResourcesFunction(context)();
|
||||
this.replayGroup_ = null;
|
||||
}
|
||||
super.disposeInternal();
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
forEachFeatureAtCoordinate(coordinate, frameState, hitTolerance, callback, thisArg) {
|
||||
if (!this.replayGroup_ || !this.layerState_) {
|
||||
return undefined;
|
||||
} else {
|
||||
const context = this.mapRenderer.getContext();
|
||||
const viewState = frameState.viewState;
|
||||
const layer = this.getLayer();
|
||||
const layerState = this.layerState_;
|
||||
/** @type {!Object<string, boolean>} */
|
||||
const features = {};
|
||||
return this.replayGroup_.forEachFeatureAtCoordinate(coordinate,
|
||||
context, viewState.center, viewState.resolution, viewState.rotation,
|
||||
frameState.size, frameState.pixelRatio, layerState.opacity,
|
||||
{},
|
||||
/**
|
||||
* @param {import("../../Feature.js").FeatureLike} feature Feature.
|
||||
* @return {?} Callback result.
|
||||
*/
|
||||
function(feature) {
|
||||
const key = getUid(feature);
|
||||
if (!(key in features)) {
|
||||
features[key] = true;
|
||||
return callback.call(thisArg, feature, layer);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
hasFeatureAtCoordinate(coordinate, frameState) {
|
||||
if (!this.replayGroup_ || !this.layerState_) {
|
||||
return false;
|
||||
} else {
|
||||
const context = this.mapRenderer.getContext();
|
||||
const viewState = frameState.viewState;
|
||||
const layerState = this.layerState_;
|
||||
return this.replayGroup_.hasFeatureAtCoordinate(coordinate,
|
||||
context, viewState.center, viewState.resolution, viewState.rotation,
|
||||
frameState.size, frameState.pixelRatio, layerState.opacity,
|
||||
frameState.skippedFeatureUids);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
forEachLayerAtPixel(pixel, frameState, callback, thisArg) {
|
||||
const coordinate = applyTransform(
|
||||
frameState.pixelToCoordinateTransform, pixel.slice());
|
||||
const hasFeature = this.hasFeatureAtCoordinate(coordinate, frameState);
|
||||
|
||||
if (hasFeature) {
|
||||
return callback.call(thisArg, this.getLayer(), null);
|
||||
} else {
|
||||
return undefined;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle changes in image style state.
|
||||
* @param {import("../../events/Event.js").default} event Image style change event.
|
||||
* @private
|
||||
*/
|
||||
handleStyleImageChange_(event) {
|
||||
this.renderIfReadyAndVisible();
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
prepareFrame(frameState, layerState, context) {
|
||||
const vectorLayer = /** @type {import("../../layer/Vector.js").default} */ (this.getLayer());
|
||||
const vectorSource = /** @type {import("../../source/Vector.js").default} */ (vectorLayer.getSource());
|
||||
|
||||
const animating = frameState.viewHints[ViewHint.ANIMATING];
|
||||
const interacting = frameState.viewHints[ViewHint.INTERACTING];
|
||||
const updateWhileAnimating = vectorLayer.getUpdateWhileAnimating();
|
||||
const updateWhileInteracting = vectorLayer.getUpdateWhileInteracting();
|
||||
|
||||
if (!this.dirty_ && (!updateWhileAnimating && animating) ||
|
||||
(!updateWhileInteracting && interacting)) {
|
||||
return true;
|
||||
}
|
||||
|
||||
const frameStateExtent = frameState.extent;
|
||||
const viewState = frameState.viewState;
|
||||
const projection = viewState.projection;
|
||||
const resolution = viewState.resolution;
|
||||
const pixelRatio = frameState.pixelRatio;
|
||||
const vectorLayerRevision = vectorLayer.getRevision();
|
||||
const vectorLayerRenderBuffer = vectorLayer.getRenderBuffer();
|
||||
let vectorLayerRenderOrder = vectorLayer.getRenderOrder();
|
||||
|
||||
if (vectorLayerRenderOrder === undefined) {
|
||||
vectorLayerRenderOrder = defaultRenderOrder;
|
||||
}
|
||||
|
||||
const extent = buffer(frameStateExtent,
|
||||
vectorLayerRenderBuffer * resolution);
|
||||
|
||||
if (!this.dirty_ &&
|
||||
this.renderedResolution_ == resolution &&
|
||||
this.renderedRevision_ == vectorLayerRevision &&
|
||||
this.renderedRenderOrder_ == vectorLayerRenderOrder &&
|
||||
containsExtent(this.renderedExtent_, extent)) {
|
||||
return true;
|
||||
}
|
||||
|
||||
if (this.replayGroup_) {
|
||||
frameState.postRenderFunctions.push(
|
||||
this.replayGroup_.getDeleteResourcesFunction(context));
|
||||
}
|
||||
|
||||
this.dirty_ = false;
|
||||
|
||||
const replayGroup = new WebGLReplayGroup(
|
||||
getRenderTolerance(resolution, pixelRatio),
|
||||
extent, vectorLayer.getRenderBuffer());
|
||||
vectorSource.loadFeatures(extent, resolution, projection);
|
||||
/**
|
||||
* @param {import("../../Feature.js").default} feature Feature.
|
||||
* @this {WebGLVectorLayerRenderer}
|
||||
*/
|
||||
const render = function(feature) {
|
||||
let styles;
|
||||
const styleFunction = feature.getStyleFunction() || vectorLayer.getStyleFunction();
|
||||
if (styleFunction) {
|
||||
styles = styleFunction(feature, resolution);
|
||||
}
|
||||
if (styles) {
|
||||
const dirty = this.renderFeature(
|
||||
feature, resolution, pixelRatio, styles, replayGroup);
|
||||
this.dirty_ = this.dirty_ || dirty;
|
||||
}
|
||||
}.bind(this);
|
||||
if (vectorLayerRenderOrder) {
|
||||
/** @type {Array<import("../../Feature.js").default>} */
|
||||
const features = [];
|
||||
vectorSource.forEachFeatureInExtent(extent,
|
||||
/**
|
||||
* @param {import("../../Feature.js").default} feature Feature.
|
||||
*/
|
||||
function(feature) {
|
||||
features.push(feature);
|
||||
});
|
||||
features.sort(vectorLayerRenderOrder);
|
||||
features.forEach(render.bind(this));
|
||||
} else {
|
||||
vectorSource.forEachFeatureInExtent(extent, render);
|
||||
}
|
||||
replayGroup.finish(context);
|
||||
|
||||
this.renderedResolution_ = resolution;
|
||||
this.renderedRevision_ = vectorLayerRevision;
|
||||
this.renderedRenderOrder_ = vectorLayerRenderOrder;
|
||||
this.renderedExtent_ = extent;
|
||||
this.replayGroup_ = replayGroup;
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {import("../../Feature.js").default} feature Feature.
|
||||
* @param {number} resolution Resolution.
|
||||
* @param {number} pixelRatio Pixel ratio.
|
||||
* @param {import("../../style/Style.js").default|Array<import("../../style/Style.js").default>} styles The style or array of
|
||||
* styles.
|
||||
* @param {import("../../render/webgl/ReplayGroup.js").default} replayGroup Replay group.
|
||||
* @return {boolean} `true` if an image is loading.
|
||||
*/
|
||||
renderFeature(feature, resolution, pixelRatio, styles, replayGroup) {
|
||||
if (!styles) {
|
||||
return false;
|
||||
}
|
||||
let loading = false;
|
||||
if (Array.isArray(styles)) {
|
||||
for (let i = styles.length - 1, ii = 0; i >= ii; --i) {
|
||||
loading = renderFeature(
|
||||
replayGroup, feature, styles[i],
|
||||
getSquaredRenderTolerance(resolution, pixelRatio),
|
||||
this.handleStyleImageChange_, this) || loading;
|
||||
}
|
||||
} else {
|
||||
loading = renderFeature(
|
||||
replayGroup, feature, styles,
|
||||
getSquaredRenderTolerance(resolution, pixelRatio),
|
||||
this.handleStyleImageChange_, this) || loading;
|
||||
}
|
||||
return loading;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export default WebGLVectorLayerRenderer;
|
||||
@@ -1,29 +0,0 @@
|
||||
//! MODULE=ol/renderer/webgl/defaultmapshader
|
||||
|
||||
|
||||
//! COMMON
|
||||
varying vec2 v_texCoord;
|
||||
|
||||
|
||||
//! VERTEX
|
||||
attribute vec2 a_position;
|
||||
attribute vec2 a_texCoord;
|
||||
|
||||
uniform mat4 u_texCoordMatrix;
|
||||
uniform mat4 u_projectionMatrix;
|
||||
|
||||
void main(void) {
|
||||
gl_Position = u_projectionMatrix * vec4(a_position, 0., 1.);
|
||||
v_texCoord = (u_texCoordMatrix * vec4(a_texCoord, 0., 1.)).st;
|
||||
}
|
||||
|
||||
|
||||
//! FRAGMENT
|
||||
uniform float u_opacity;
|
||||
uniform sampler2D u_texture;
|
||||
|
||||
void main(void) {
|
||||
vec4 texColor = texture2D(u_texture, v_texCoord);
|
||||
gl_FragColor.rgb = texColor.rgb;
|
||||
gl_FragColor.a = texColor.a * u_opacity;
|
||||
}
|
||||
@@ -1,17 +0,0 @@
|
||||
/**
|
||||
* @module ol/renderer/webgl/defaultmapshader
|
||||
*/
|
||||
// This file is automatically generated, do not edit.
|
||||
// Run `make shaders` to generate, and commit the result.
|
||||
|
||||
import {DEBUG as DEBUG_WEBGL} from '../../webgl.js';
|
||||
import WebGLFragment from '../../webgl/Fragment.js';
|
||||
import WebGLVertex from '../../webgl/Vertex.js';
|
||||
|
||||
export const fragment = new WebGLFragment(DEBUG_WEBGL ?
|
||||
'precision mediump float;\nvarying vec2 v_texCoord;\n\n\nuniform float u_opacity;\nuniform sampler2D u_texture;\n\nvoid main(void) {\n vec4 texColor = texture2D(u_texture, v_texCoord);\n gl_FragColor.rgb = texColor.rgb;\n gl_FragColor.a = texColor.a * u_opacity;\n}\n' :
|
||||
'precision mediump float;varying vec2 a;uniform float f;uniform sampler2D g;void main(void){vec4 texColor=texture2D(g,a);gl_FragColor.rgb=texColor.rgb;gl_FragColor.a=texColor.a*f;}');
|
||||
|
||||
export const vertex = new WebGLVertex(DEBUG_WEBGL ?
|
||||
'varying vec2 v_texCoord;\n\n\nattribute vec2 a_position;\nattribute vec2 a_texCoord;\n\nuniform mat4 u_texCoordMatrix;\nuniform mat4 u_projectionMatrix;\n\nvoid main(void) {\n gl_Position = u_projectionMatrix * vec4(a_position, 0., 1.);\n v_texCoord = (u_texCoordMatrix * vec4(a_texCoord, 0., 1.)).st;\n}\n\n\n' :
|
||||
'varying vec2 a;attribute vec2 b;attribute vec2 c;uniform mat4 d;uniform mat4 e;void main(void){gl_Position=e*vec4(b,0.,1.);a=(d*vec4(c,0.,1.)).st;}');
|
||||
@@ -1,57 +0,0 @@
|
||||
/**
|
||||
* @module ol/renderer/webgl/defaultmapshader/Locations
|
||||
*/
|
||||
// This file is automatically generated, do not edit
|
||||
// Run `make shaders` to generate, and commit the result.
|
||||
|
||||
import {DEBUG as DEBUG_WEBGL} from '../../../webgl.js';
|
||||
|
||||
class Locations {
|
||||
|
||||
/**
|
||||
* @param {WebGLRenderingContext} gl GL.
|
||||
* @param {WebGLProgram} program Program.
|
||||
*/
|
||||
constructor(gl, program) {
|
||||
|
||||
/**
|
||||
* @type {WebGLUniformLocation}
|
||||
*/
|
||||
this.u_texCoordMatrix = gl.getUniformLocation(
|
||||
program, DEBUG_WEBGL ? 'u_texCoordMatrix' : 'd');
|
||||
|
||||
/**
|
||||
* @type {WebGLUniformLocation}
|
||||
*/
|
||||
this.u_projectionMatrix = gl.getUniformLocation(
|
||||
program, DEBUG_WEBGL ? 'u_projectionMatrix' : 'e');
|
||||
|
||||
/**
|
||||
* @type {WebGLUniformLocation}
|
||||
*/
|
||||
this.u_opacity = gl.getUniformLocation(
|
||||
program, DEBUG_WEBGL ? 'u_opacity' : 'f');
|
||||
|
||||
/**
|
||||
* @type {WebGLUniformLocation}
|
||||
*/
|
||||
this.u_texture = gl.getUniformLocation(
|
||||
program, DEBUG_WEBGL ? 'u_texture' : 'g');
|
||||
|
||||
/**
|
||||
* @type {number}
|
||||
*/
|
||||
this.a_position = gl.getAttribLocation(
|
||||
program, DEBUG_WEBGL ? 'a_position' : 'b');
|
||||
|
||||
/**
|
||||
* @type {number}
|
||||
*/
|
||||
this.a_texCoord = gl.getAttribLocation(
|
||||
program, DEBUG_WEBGL ? 'a_texCoord' : 'c');
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default Locations;
|
||||
@@ -1,24 +0,0 @@
|
||||
//! MODULE=ol/renderer/webgl/tilelayershader
|
||||
|
||||
|
||||
//! COMMON
|
||||
varying vec2 v_texCoord;
|
||||
|
||||
|
||||
//! VERTEX
|
||||
attribute vec2 a_position;
|
||||
attribute vec2 a_texCoord;
|
||||
uniform vec4 u_tileOffset;
|
||||
|
||||
void main(void) {
|
||||
gl_Position = vec4(a_position * u_tileOffset.xy + u_tileOffset.zw, 0., 1.);
|
||||
v_texCoord = a_texCoord;
|
||||
}
|
||||
|
||||
|
||||
//! FRAGMENT
|
||||
uniform sampler2D u_texture;
|
||||
|
||||
void main(void) {
|
||||
gl_FragColor = texture2D(u_texture, v_texCoord);
|
||||
}
|
||||
@@ -1,17 +0,0 @@
|
||||
/**
|
||||
* @module ol/renderer/webgl/tilelayershader
|
||||
*/
|
||||
// This file is automatically generated, do not edit.
|
||||
// Run `make shaders` to generate, and commit the result.
|
||||
|
||||
import {DEBUG as DEBUG_WEBGL} from '../../webgl.js';
|
||||
import WebGLFragment from '../../webgl/Fragment.js';
|
||||
import WebGLVertex from '../../webgl/Vertex.js';
|
||||
|
||||
export const fragment = new WebGLFragment(DEBUG_WEBGL ?
|
||||
'precision mediump float;\nvarying vec2 v_texCoord;\n\n\nuniform sampler2D u_texture;\n\nvoid main(void) {\n gl_FragColor = texture2D(u_texture, v_texCoord);\n}\n' :
|
||||
'precision mediump float;varying vec2 a;uniform sampler2D e;void main(void){gl_FragColor=texture2D(e,a);}');
|
||||
|
||||
export const vertex = new WebGLVertex(DEBUG_WEBGL ?
|
||||
'varying vec2 v_texCoord;\n\n\nattribute vec2 a_position;\nattribute vec2 a_texCoord;\nuniform vec4 u_tileOffset;\n\nvoid main(void) {\n gl_Position = vec4(a_position * u_tileOffset.xy + u_tileOffset.zw, 0., 1.);\n v_texCoord = a_texCoord;\n}\n\n\n' :
|
||||
'varying vec2 a;attribute vec2 b;attribute vec2 c;uniform vec4 d;void main(void){gl_Position=vec4(b*d.xy+d.zw,0.,1.);a=c;}');
|
||||
@@ -1,45 +0,0 @@
|
||||
/**
|
||||
* @module ol/renderer/webgl/tilelayershader/Locations
|
||||
*/
|
||||
// This file is automatically generated, do not edit
|
||||
// Run `make shaders` to generate, and commit the result.
|
||||
|
||||
import {DEBUG as DEBUG_WEBGL} from '../../../webgl.js';
|
||||
|
||||
class Locations {
|
||||
|
||||
/**
|
||||
* @param {WebGLRenderingContext} gl GL.
|
||||
* @param {WebGLProgram} program Program.
|
||||
*/
|
||||
constructor(gl, program) {
|
||||
|
||||
/**
|
||||
* @type {WebGLUniformLocation}
|
||||
*/
|
||||
this.u_tileOffset = gl.getUniformLocation(
|
||||
program, DEBUG_WEBGL ? 'u_tileOffset' : 'd');
|
||||
|
||||
/**
|
||||
* @type {WebGLUniformLocation}
|
||||
*/
|
||||
this.u_texture = gl.getUniformLocation(
|
||||
program, DEBUG_WEBGL ? 'u_texture' : 'e');
|
||||
|
||||
/**
|
||||
* @type {number}
|
||||
*/
|
||||
this.a_position = gl.getAttribLocation(
|
||||
program, DEBUG_WEBGL ? 'a_position' : 'b');
|
||||
|
||||
/**
|
||||
* @type {number}
|
||||
*/
|
||||
this.a_texCoord = gl.getAttribLocation(
|
||||
program, DEBUG_WEBGL ? 'a_texCoord' : 'c');
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default Locations;
|
||||
@@ -598,32 +598,4 @@ class WebGLHelper extends Disposable {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {number=} opt_wrapS wrapS.
|
||||
* @param {number=} opt_wrapT wrapT.
|
||||
* @return {WebGLTexture} The texture.
|
||||
*/
|
||||
export function createTextureInternal(gl, opt_wrapS, opt_wrapT) {
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {number} width Width.
|
||||
* @param {number} height Height.
|
||||
* @param {number=} opt_wrapS wrapS.
|
||||
* @param {number=} opt_wrapT wrapT.
|
||||
* @return {WebGLTexture} The texture.
|
||||
*/
|
||||
export function createEmptyTexture(gl, width, height, opt_wrapS, opt_wrapT) {
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* @param {HTMLCanvasElement|HTMLImageElement|HTMLVideoElement} image Image.
|
||||
* @param {number=} opt_wrapS wrapS.
|
||||
* @param {number=} opt_wrapT wrapT.
|
||||
* @return {WebGLTexture} The texture.
|
||||
*/
|
||||
export function createTexture(gl, image, opt_wrapS, opt_wrapT) {
|
||||
}
|
||||
|
||||
export default WebGLHelper;
|
||||
|
||||
Reference in New Issue
Block a user