Skip to content

Loading…

WebGL renderer cleanups #93

Merged
merged 4 commits into from

2 participants

@twpayne

Various clean-ups in the WebGL renderer

@twpayne twpayne merged commit d1615db into openlayers:master

1 check passed

Details default The Travis build passed
@twpayne twpayne deleted the twpayne:webgl-renderer-cleanups branch
@elemoine
OpenLayers member

Looks great. Thanks.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
View
83 src/ol/renderer/webgl/webgllayerrenderer.js
@@ -3,6 +3,7 @@ goog.provide('ol.renderer.webgl.Layer');
goog.require('goog.vec.Mat4');
goog.require('ol.layer.Layer');
goog.require('ol.renderer.Layer');
+goog.require('ol.vec.Mat4');
@@ -13,7 +14,50 @@ goog.require('ol.renderer.Layer');
* @param {ol.layer.Layer} layer Layer.
*/
ol.renderer.webgl.Layer = function(mapRenderer, layer) {
+
goog.base(this, mapRenderer, layer);
+
+ /**
+ * @private
+ * @type {!goog.vec.Mat4.Float32}
+ */
+ this.brightnessMatrix_ = goog.vec.Mat4.createFloat32();
+
+ /**
+ * @private
+ * @type {!goog.vec.Mat4.Float32}
+ */
+ this.contrastMatrix_ = goog.vec.Mat4.createFloat32();
+
+ /**
+ * @private
+ * @type {!goog.vec.Mat4.Float32}
+ */
+ this.hueMatrix_ = goog.vec.Mat4.createFloat32();
+
+ /**
+ * @private
+ * @type {!goog.vec.Mat4.Float32}
+ */
+ this.saturationMatrix_ = goog.vec.Mat4.createFloat32();
+
+ /**
+ * @private
+ * @type {!goog.vec.Mat4.Float32}
+ */
+ this.colorMatrix_ = goog.vec.Mat4.createFloat32();
+
+ /**
+ * @private
+ * @type {boolean}
+ */
+ this.colorMatrixDirty_ = true;
+
+ this.handleLayerBrightnessChange();
+ this.handleLayerContrastChange();
+ this.handleLayerHueChange();
+ this.handleLayerSaturationChange();
+
};
goog.inherits(ol.renderer.webgl.Layer, ol.renderer.Layer);
@@ -27,6 +71,17 @@ ol.renderer.webgl.Layer.prototype.dispatchChangeEvent = function() {
/**
+ * @return {!goog.vec.Mat4.Float32} Color matrix.
+ */
+ol.renderer.webgl.Layer.prototype.getColorMatrix = function() {
+ if (this.colorMatrixDirty_) {
+ this.updateColorMatrix_();
+ }
+ return this.colorMatrix_;
+};
+
+
+/**
* @inheritDoc
* @return {ol.renderer.Map} MapRenderer.
*/
@@ -37,7 +92,7 @@ ol.renderer.webgl.Layer.prototype.getMapRenderer = function() {
/**
- * @return {goog.vec.Mat4.AnyType} Matrix.
+ * @return {!goog.vec.Mat4.Number} Matrix.
*/
ol.renderer.webgl.Layer.prototype.getMatrix = goog.abstractMethod;
@@ -52,6 +107,9 @@ ol.renderer.webgl.Layer.prototype.getTexture = goog.abstractMethod;
* @inheritDoc
*/
ol.renderer.webgl.Layer.prototype.handleLayerBrightnessChange = function() {
+ var value = this.getLayer().getBrightness();
+ ol.vec.Mat4.makeBrightness(this.brightnessMatrix_, value);
+ this.colorMatrixDirty_ = true;
this.dispatchChangeEvent();
};
@@ -60,6 +118,9 @@ ol.renderer.webgl.Layer.prototype.handleLayerBrightnessChange = function() {
* @inheritDoc
*/
ol.renderer.webgl.Layer.prototype.handleLayerContrastChange = function() {
+ var value = this.getLayer().getContrast();
+ ol.vec.Mat4.makeContrast(this.contrastMatrix_, value);
+ this.colorMatrixDirty_ = true;
this.dispatchChangeEvent();
};
@@ -68,6 +129,9 @@ ol.renderer.webgl.Layer.prototype.handleLayerContrastChange = function() {
* @inheritDoc
*/
ol.renderer.webgl.Layer.prototype.handleLayerHueChange = function() {
+ var value = this.getLayer().getHue();
+ ol.vec.Mat4.makeHue(this.hueMatrix_, value);
+ this.colorMatrixDirty_ = true;
this.dispatchChangeEvent();
};
@@ -92,6 +156,9 @@ ol.renderer.webgl.Layer.prototype.handleLayerOpacityChange = function() {
* @inheritDoc
*/
ol.renderer.webgl.Layer.prototype.handleLayerSaturationChange = function() {
+ var saturation = this.getLayer().getSaturation();
+ ol.vec.Mat4.makeSaturation(this.saturationMatrix_, saturation);
+ this.colorMatrixDirty_ = true;
this.dispatchChangeEvent();
};
@@ -116,3 +183,17 @@ ol.renderer.webgl.Layer.prototype.handleWebGLContextLost = goog.nullFunction;
* @return {boolean} Request render frame.
*/
ol.renderer.webgl.Layer.prototype.renderFrame = goog.abstractMethod;
+
+
+/**
+ * @private
+ */
+ol.renderer.webgl.Layer.prototype.updateColorMatrix_ = function() {
+ var colorMatrix = this.colorMatrix_;
+ goog.vec.Mat4.makeIdentity(colorMatrix);
+ goog.vec.Mat4.multMat(colorMatrix, this.contrastMatrix_, colorMatrix);
+ goog.vec.Mat4.multMat(colorMatrix, this.brightnessMatrix_, colorMatrix);
+ goog.vec.Mat4.multMat(colorMatrix, this.saturationMatrix_, colorMatrix);
+ goog.vec.Mat4.multMat(colorMatrix, this.hueMatrix_, colorMatrix);
+ this.colorMatrixDirty_ = false;
+};
View
113 src/ol/renderer/webgl/webglmaprenderer.js
@@ -16,7 +16,6 @@ goog.require('goog.events.Event');
goog.require('goog.events.EventType');
goog.require('goog.functions');
goog.require('goog.style');
-goog.require('goog.vec.Mat4');
goog.require('goog.webgl');
goog.require('ol.layer.Layer');
goog.require('ol.layer.TileLayer');
@@ -270,64 +269,6 @@ ol.renderer.webgl.Map.prototype.canRotate = goog.functions.TRUE;
/**
- * @param {number} value Hue value.
- * @return {!goog.vec.Mat4.Float32} Matrix.
- */
-ol.renderer.webgl.Map.prototype.createHueRotateMatrix = function(value) {
- var cosHue = Math.cos(value);
- var sinHue = Math.sin(value);
- var v00 = 0.213 + cosHue * 0.787 - sinHue * 0.213;
- var v01 = 0.715 - cosHue * 0.715 - sinHue * 0.715;
- var v02 = 0.072 - cosHue * 0.072 + sinHue * 0.928;
- var v03 = 0;
- var v10 = 0.213 - cosHue * 0.213 + sinHue * 0.143;
- var v11 = 0.715 + cosHue * 0.285 + sinHue * 0.140;
- var v12 = 0.072 - cosHue * 0.072 - sinHue * 0.283;
- var v13 = 0;
- var v20 = 0.213 - cosHue * 0.213 - sinHue * 0.787;
- var v21 = 0.715 - cosHue * 0.715 + sinHue * 0.715;
- var v22 = 0.072 + cosHue * 0.928 + sinHue * 0.072;
- var v23 = 0;
- var v30 = 0;
- var v31 = 0;
- var v32 = 0;
- var v33 = 1;
- var matrix = goog.vec.Mat4.createFloat32();
- goog.vec.Mat4.setFromValues(matrix,
- v00, v10, v20, v30,
- v01, v11, v21, v31,
- v02, v12, v22, v32,
- v03, v13, v23, v33);
- return matrix;
-};
-
-
-/**
- * @param {number} value Brightness value.
- * @return {!goog.vec.Mat4.Float32} Matrix.
- */
-ol.renderer.webgl.Map.prototype.createBrightnessMatrix = function(value) {
- var matrix = goog.vec.Mat4.createFloat32Identity();
- goog.vec.Mat4.setColumnValues(matrix, 3, value, value, value, 1);
- return matrix;
-};
-
-
-/**
- * @param {number} value Contrast value.
- * @return {!goog.vec.Mat4.Float32} Matrix.
- */
-ol.renderer.webgl.Map.prototype.createContrastMatrix = function(value) {
- var matrix = goog.vec.Mat4.createFloat32();
- goog.vec.Mat4.setDiagonalValues(matrix, value, value, value, 1);
- var translateValue = (-0.5 * value + 0.5);
- goog.vec.Mat4.setColumnValues(matrix, 3,
- translateValue, translateValue, translateValue, 1);
- return matrix;
-};
-
-
-/**
* @inheritDoc
*/
ol.renderer.webgl.Map.prototype.createLayerRenderer = function(layer) {
@@ -342,38 +283,6 @@ ol.renderer.webgl.Map.prototype.createLayerRenderer = function(layer) {
/**
- * @param {number} value Saturation value.
- * @return {!goog.vec.Mat4.Float32} Matrix.
- */
-ol.renderer.webgl.Map.prototype.createSaturateMatrix = function(value) {
- var v00 = 0.213 + 0.787 * value;
- var v01 = 0.715 - 0.715 * value;
- var v02 = 0.072 - 0.072 * value;
- var v03 = 0;
- var v10 = 0.213 - 0.213 * value;
- var v11 = 0.715 + 0.285 * value;
- var v12 = 0.072 - 0.072 * value;
- var v13 = 0;
- var v20 = 0.213 - 0.213 * value;
- var v21 = 0.715 - 0.715 * value;
- var v22 = 0.072 + 0.928 * value;
- var v23 = 0;
- var v30 = 0;
- var v31 = 0;
- var v32 = 0;
- var v33 = 1;
- var matrix = goog.vec.Mat4.createFloat32();
- goog.vec.Mat4.setFromValues(matrix,
- v00, v10, v20, v30,
- v01, v11, v21, v31,
- v02, v12, v22, v32,
- v03, v13, v23, v33);
- return matrix;
-
-};
-
-
-/**
* @inheritDoc
*/
ol.renderer.webgl.Map.prototype.disposeInternal = function() {
@@ -603,7 +512,8 @@ ol.renderer.webgl.Map.prototype.removeLayerRenderer = function(layer) {
*/
ol.renderer.webgl.Map.prototype.renderFrame = function(time) {
- if (!this.getMap().isDef()) {
+ var map = this.getMap();
+ if (!map.isDef()) {
return;
}
@@ -622,13 +532,6 @@ ol.renderer.webgl.Map.prototype.renderFrame = function(time) {
this.canvasSize_ = size;
}
- var animate = false;
- this.forEachReadyVisibleLayer(function(layer, layerRenderer) {
- if (layerRenderer.renderFrame(time)) {
- animate = true;
- }
- });
-
var gl = this.getGL();
gl.bindFramebuffer(goog.webgl.FRAMEBUFFER, null);
@@ -677,16 +580,8 @@ ol.renderer.webgl.Map.prototype.renderFrame = function(time) {
this.forEachReadyVisibleLayer(function(layer, layerRenderer) {
gl.uniformMatrix4fv(
this.locations_.uMatrix, false, layerRenderer.getMatrix());
- var hueRotateMatrix = this.createHueRotateMatrix(layer.getHue());
- var saturateMatrix = this.createSaturateMatrix(layer.getSaturation());
- var brightnessMatrix = this.createBrightnessMatrix(layer.getBrightness());
- var contrastMatrix = this.createContrastMatrix(layer.getContrast());
- var colorMatrix = goog.vec.Mat4.createFloat32Identity();
- goog.vec.Mat4.multMat(colorMatrix, contrastMatrix, colorMatrix);
- goog.vec.Mat4.multMat(colorMatrix, brightnessMatrix, colorMatrix);
- goog.vec.Mat4.multMat(colorMatrix, saturateMatrix, colorMatrix);
- goog.vec.Mat4.multMat(colorMatrix, hueRotateMatrix, colorMatrix);
- gl.uniformMatrix4fv(this.locations_.uColorMatrix, false, colorMatrix);
+ gl.uniformMatrix4fv(
+ this.locations_.uColorMatrix, false, layerRenderer.getColorMatrix());
gl.uniform1f(this.locations_.uOpacity, layer.getOpacity());
gl.bindTexture(goog.webgl.TEXTURE_2D, layerRenderer.getTexture());
gl.drawArrays(goog.webgl.TRIANGLE_STRIP, 0, 4);
View
2 src/ol/renderer/webgl/webgltilelayerrenderer.js
@@ -145,7 +145,7 @@ ol.renderer.webgl.TileLayer = function(mapRenderer, tileLayer) {
/**
* @private
- * @type {goog.vec.Mat4.AnyType}
+ * @type {!goog.vec.Mat4.Number}
*/
this.matrix_ = goog.vec.Mat4.createNumber();
View
92 src/ol/vec/mat4.js
@@ -0,0 +1,92 @@
+goog.provide('ol.vec.Mat4');
+
+goog.require('goog.vec.Mat4');
+
+
+/**
+ * @param {!goog.vec.Mat4.Float32} matrix Matrix.
+ * @param {number} value Brightness value.
+ * @return {!goog.vec.Mat4.Float32} Matrix.
+ */
+ol.vec.Mat4.makeBrightness = function(matrix, value) {
+ goog.vec.Mat4.makeTranslate(matrix, value, value, value);
+ return matrix;
+};
+
+
+/**
+ * @param {!goog.vec.Mat4.Float32} matrix Matrix.
+ * @param {number} value Contrast value.
+ * @return {!goog.vec.Mat4.Float32} Matrix.
+ */
+ol.vec.Mat4.makeContrast = function(matrix, value) {
+ goog.vec.Mat4.makeScale(matrix, value, value, value);
+ var translateValue = (-0.5 * value + 0.5);
+ goog.vec.Mat4.setColumnValues(matrix, 3,
+ translateValue, translateValue, translateValue, 1);
+ return matrix;
+};
+
+
+/**
+ * @param {!goog.vec.Mat4.Float32} matrix Matrix.
+ * @param {number} value Hue value.
+ * @return {!goog.vec.Mat4.Float32} Matrix.
+ */
+ol.vec.Mat4.makeHue = function(matrix, value) {
+ var cosHue = Math.cos(value);
+ var sinHue = Math.sin(value);
+ var v00 = 0.213 + cosHue * 0.787 - sinHue * 0.213;
+ var v01 = 0.715 - cosHue * 0.715 - sinHue * 0.715;
+ var v02 = 0.072 - cosHue * 0.072 + sinHue * 0.928;
+ var v03 = 0;
+ var v10 = 0.213 - cosHue * 0.213 + sinHue * 0.143;
+ var v11 = 0.715 + cosHue * 0.285 + sinHue * 0.140;
+ var v12 = 0.072 - cosHue * 0.072 - sinHue * 0.283;
+ var v13 = 0;
+ var v20 = 0.213 - cosHue * 0.213 - sinHue * 0.787;
+ var v21 = 0.715 - cosHue * 0.715 + sinHue * 0.715;
+ var v22 = 0.072 + cosHue * 0.928 + sinHue * 0.072;
+ var v23 = 0;
+ var v30 = 0;
+ var v31 = 0;
+ var v32 = 0;
+ var v33 = 1;
+ goog.vec.Mat4.setFromValues(matrix,
+ v00, v10, v20, v30,
+ v01, v11, v21, v31,
+ v02, v12, v22, v32,
+ v03, v13, v23, v33);
+ return matrix;
+};
+
+
+/**
+ * @param {!goog.vec.Mat4.Float32} matrix Matrix.
+ * @param {number} value Saturation value.
+ * @return {!goog.vec.Mat4.Float32} Matrix.
+ */
+ol.vec.Mat4.makeSaturation = function(matrix, value) {
+ var v00 = 0.213 + 0.787 * value;
+ var v01 = 0.715 - 0.715 * value;
+ var v02 = 0.072 - 0.072 * value;
+ var v03 = 0;
+ var v10 = 0.213 - 0.213 * value;
+ var v11 = 0.715 + 0.285 * value;
+ var v12 = 0.072 - 0.072 * value;
+ var v13 = 0;
+ var v20 = 0.213 - 0.213 * value;
+ var v21 = 0.715 - 0.715 * value;
+ var v22 = 0.072 + 0.928 * value;
+ var v23 = 0;
+ var v30 = 0;
+ var v31 = 0;
+ var v32 = 0;
+ var v33 = 1;
+ goog.vec.Mat4.setFromValues(matrix,
+ v00, v10, v20, v30,
+ v01, v11, v21, v31,
+ v02, v12, v22, v32,
+ v03, v13, v23, v33);
+ return matrix;
+};
Something went wrong with that request. Please try again.