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

Fewer calls to the color callback

Browse Source
This commit is contained in:
Tim Schaub
2019-04-19 13:49:53 -07:00
parent 440ae897a5
commit 154265a2d9
3 changed files with 44 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
examples/filter-points-webgl.js
View File

@@ -37,15 +37,16 @@ updateStatusText();
class WebglPointsLayer extends VectorLayer { class WebglPointsLayer extends VectorLayer {
createRenderer() { createRenderer() {
return new WebGLPointsLayerRenderer(this, { return new WebGLPointsLayerRenderer(this, {
colorCallback: function(feature, vertex, component) { colorCallback: function(feature, vertex, color) {
// component at index 3 is alpha
if (component === 3) {
return 1;
}
// color is interpolated based on year // color is interpolated based on year
const ratio = clamp((feature.get('year') - 1800) / (2013 - 1800), 0, 1); const ratio = clamp((feature.get('year') - 1800) / (2013 - 1800), 0, 1);
return lerp(oldColor[component], newColor[component], ratio) / 255;
color[0] = lerp(oldColor[0], newColor[0], ratio) / 255;
color[1] = lerp(oldColor[1], newColor[1], ratio) / 255;
color[2] = lerp(oldColor[2], newColor[2], ratio) / 255;
color[3] = 1;
return color;
}, },
sizeCallback: function(feature) { sizeCallback: function(feature) {
return 18 * clamp(feature.get('mass') / 200000, 0, 1) + 8; return 18 * clamp(feature.get('mass') / 200000, 0, 1) + 8;

15
examples/icon-sprite-webgl.js
View File

@@ -38,16 +38,17 @@ class WebglPointsLayer extends VectorLayer {
createRenderer() { createRenderer() {
return new WebGLPointsLayerRenderer(this, { return new WebGLPointsLayerRenderer(this, {
texture: texture, texture: texture,
colorCallback: function(feature, vertex, component) { colorCallback: function(feature, vertex, color) {
// component at index 3 is alpha
if (component === 3) {
return 1;
}
// color is interpolated based on year (min is 1910, max is 2013) // color is interpolated based on year (min is 1910, max is 2013)
// please note: most values are between 2000-2013 // please note: most values are between 2000-2013
const ratio = (feature.get('year') - 1950) / (2013 - 1950); const ratio = (feature.get('year') - 1950) / (2013 - 1950);
return lerp(oldColor[component], newColor[component], ratio * ratio) / 255;
color[0] = lerp(oldColor[0], newColor[0], ratio * ratio) / 255;
color[1] = lerp(oldColor[1], newColor[1], ratio * ratio) / 255;
color[2] = lerp(oldColor[2], newColor[2], ratio * ratio) / 255;
color[3] = 1;
return color;
}, },
texCoordCallback: function(feature, component) { texCoordCallback: function(feature, component) {
let coords = shapeTextureCoords[feature.get('shape')]; let coords = shapeTextureCoords[feature.get('shape')];

49
src/ol/renderer/webgl/PointsLayer.js
View File

@@ -74,11 +74,11 @@ const FRAGMENT_SHADER = `
* @property {function(import("../../Feature").default, number):number} [texCoordCallback] Will be called on every feature in the * @property {function(import("../../Feature").default, number):number} [texCoordCallback] Will be called on every feature in the
* source to compute the texture coordinates of each corner of the quad (without effect if no `texture` option defined). This is only done on source change. * source to compute the texture coordinates of each corner of the quad (without effect if no `texture` option defined). This is only done on source change.
* The second argument is 0 for `u0` component, 1 for `v0`, 2 for `u1`, and 3 for `v1`. * The second argument is 0 for `u0` component, 1 for `v0`, 2 for `u1`, and 3 for `v1`.
* @property {function(import("../../Feature").default, number, number):number} [colorCallback] Will be called on every feature in the * @property {function(import("../../Feature").default, number, Array<number>):Array<number>} [colorCallback] Will be called on every feature in the
* source to compute the color of each corner of the quad. This is only done on source change. * source to compute the color of each corner of the quad. This is only done on source change.
* The second argument is 0 for bottom left, 1 for bottom right, 2 for top right and 3 for top left * The second argument is 0 for bottom left, 1 for bottom right, 2 for top right and 3 for top left
* The third argument is 0 for red, 1 for green, 2 for blue and 3 for alpha * The third argument is a array that can be reused to avoid creating a new one.
* The return value should be between 0 and 1. * The return value should be between an array of R, G, B, A values between 0 and 1.
* @property {function(import("../../Feature").default):number} [opacityCallback] Will be called on every feature in the * @property {function(import("../../Feature").default):number} [opacityCallback] Will be called on every feature in the
* source to compute the opacity of the quad on screen (from 0 to 1). This is only done on source change. * source to compute the opacity of the quad on screen (from 0 to 1). This is only done on source change.
* Note: this is multiplied with the color of the point which can also have an alpha value < 1. * Note: this is multiplied with the color of the point which can also have an alpha value < 1.
@@ -227,9 +227,12 @@ class WebGLPointsLayerRenderer extends LayerRenderer {
this.texCoordCallback_ = options.texCoordCallback || function(feature, index) { this.texCoordCallback_ = options.texCoordCallback || function(feature, index) {
return index < 2 ? 0 : 1; return index < 2 ? 0 : 1;
}; };
this.colorCallback_ = options.colorCallback || function(feature, index, component) {
return 1; this.colorArray_ = [1, 1, 1, 1];
this.colorCallback_ = options.colorCallback || function(feature, index, color) {
return this.colorArray_;
}; };
this.rotateWithViewCallback_ = options.rotateWithViewCallback || function() { this.rotateWithViewCallback_ = options.rotateWithViewCallback || function() {
return false; return false;
}; };
@@ -293,22 +296,26 @@ class WebGLPointsLayerRenderer extends LayerRenderer {
const size = this.sizeCallback_(feature); const size = this.sizeCallback_(feature);
const opacity = this.opacityCallback_(feature); const opacity = this.opacityCallback_(feature);
const rotateWithView = this.rotateWithViewCallback_(feature) ? 1 : 0; const rotateWithView = this.rotateWithViewCallback_(feature) ? 1 : 0;
const v0_r = this.colorCallback_(feature, 0, 0); const v0_rgba = this.colorCallback_(feature, 0, this.colorArray_);
const v0_g = this.colorCallback_(feature, 0, 1); const v0_r = v0_rgba[0];
const v0_b = this.colorCallback_(feature, 0, 2); const v0_g = v0_rgba[1];
const v0_a = this.colorCallback_(feature, 0, 3); const v0_b = v0_rgba[2];
const v1_r = this.colorCallback_(feature, 1, 0); const v0_a = v0_rgba[3];
const v1_g = this.colorCallback_(feature, 1, 1); const v1_rgba = this.colorCallback_(feature, 1, this.colorArray_);
const v1_b = this.colorCallback_(feature, 1, 2); const v1_r = v1_rgba[0];
const v1_a = this.colorCallback_(feature, 1, 3); const v1_g = v1_rgba[1];
const v2_r = this.colorCallback_(feature, 2, 0); const v1_b = v1_rgba[2];
const v2_g = this.colorCallback_(feature, 2, 1); const v1_a = v1_rgba[3];
const v2_b = this.colorCallback_(feature, 2, 2); const v2_rgba = this.colorCallback_(feature, 2, this.colorArray_);
const v2_a = this.colorCallback_(feature, 2, 3); const v2_r = v2_rgba[0];
const v3_r = this.colorCallback_(feature, 3, 0); const v2_g = v2_rgba[1];
const v3_g = this.colorCallback_(feature, 3, 1); const v2_b = v2_rgba[2];
const v3_b = this.colorCallback_(feature, 3, 2); const v2_a = v2_rgba[3];
const v3_a = this.colorCallback_(feature, 3, 3); const v3_rgba = this.colorCallback_(feature, 3, this.colorArray_);
const v3_r = v3_rgba[0];
const v3_g = v3_rgba[1];
const v3_b = v3_rgba[2];
const v3_a = v3_rgba[3];
const baseIndex = this.verticesBuffer_.getArray().length / stride; const baseIndex = this.verticesBuffer_.getArray().length / stride;
this.verticesBuffer_.getArray().push( this.verticesBuffer_.getArray().push(