Webgl points layer / allow disabling hit detection

Having hit detection enabled has an overhead as it means
continously generating additional render instructions and rendering
to an offscreen canvas
This commit is contained in:
Olivier Guyot
2019-10-25 15:11:29 +02:00
parent 4462608991
commit e63bb45e6f
3 changed files with 16 additions and 4 deletions

View File

@@ -122,7 +122,8 @@ const map = new Map({
}), }),
new WebGLPointsLayer({ new WebGLPointsLayer({
style: style, style: style,
source: vectorSource source: vectorSource,
disableHitDetection: true
}) })
], ],
target: document.getElementById('map'), target: document.getElementById('map'),

View File

@@ -117,7 +117,8 @@ function refreshLayer(newStyle) {
const previousLayer = pointsLayer; const previousLayer = pointsLayer;
pointsLayer = new WebGLPointsLayer({ pointsLayer = new WebGLPointsLayer({
source: vectorSource, source: vectorSource,
style: newStyle style: newStyle,
disableHitDetection: true
}); });
map.addLayer(pointsLayer); map.addLayer(pointsLayer);

View File

@@ -24,6 +24,8 @@ import Layer from './Layer.js';
* @property {number} [maxResolution] The maximum resolution (exclusive) below which this layer will * @property {number} [maxResolution] The maximum resolution (exclusive) below which this layer will
* be visible. * be visible.
* @property {import("../source/Vector.js").default} [source] Source. * @property {import("../source/Vector.js").default} [source] Source.
* @property {boolean} [disableHitDetection] Setting this to true will provide a slight performance boost, but will
* prevent all hit detection on the layer.
*/ */
@@ -75,6 +77,12 @@ class WebGLPointsLayer extends Layer {
* @type {import('../webgl/ShaderBuilder.js').StyleParseResult} * @type {import('../webgl/ShaderBuilder.js').StyleParseResult}
*/ */
this.parseResult_ = parseLiteralStyle(options.style); this.parseResult_ = parseLiteralStyle(options.style);
/**
* @private
* @type {boolean}
*/
this.hitDetectionDisabled_ = !!options.disableHitDetection;
} }
/** /**
@@ -84,8 +92,10 @@ class WebGLPointsLayer extends Layer {
return new WebGLPointsLayerRenderer(this, { return new WebGLPointsLayerRenderer(this, {
vertexShader: this.parseResult_.builder.getSymbolVertexShader(), vertexShader: this.parseResult_.builder.getSymbolVertexShader(),
fragmentShader: this.parseResult_.builder.getSymbolFragmentShader(), fragmentShader: this.parseResult_.builder.getSymbolFragmentShader(),
hitVertexShader: this.parseResult_.builder.getSymbolVertexShader(true), hitVertexShader: !this.hitDetectionDisabled_ &&
hitFragmentShader: this.parseResult_.builder.getSymbolFragmentShader(true), this.parseResult_.builder.getSymbolVertexShader(true),
hitFragmentShader: !this.hitDetectionDisabled_ &&
this.parseResult_.builder.getSymbolFragmentShader(true),
uniforms: this.parseResult_.uniforms, uniforms: this.parseResult_.uniforms,
attributes: this.parseResult_.attributes attributes: this.parseResult_.attributes
}); });