From 4534bb8861e47d0c108ba529d71626a4fa7350c9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89ric=20Lemoine?= Date: Mon, 3 Nov 2014 12:43:22 +0100 Subject: [PATCH 1/3] Make shaders closer to WebGL image replay --- .../webgl/webglimage.glsl} | 4 +- src/ol/render/webgl/webglimageshader.js | 123 ++++++++++++++++++ src/ol/render/webgl/webglreplay.js | 66 ++++++---- .../webgl/webglvectorlayerrenderer.js | 38 ------ .../renderer/webgl/webglvectorlayershader.js | 123 ------------------ 5 files changed, 166 insertions(+), 188 deletions(-) rename src/ol/{renderer/webgl/webglvectorlayer.glsl => render/webgl/webglimage.glsl} (82%) create mode 100644 src/ol/render/webgl/webglimageshader.js delete mode 100644 src/ol/renderer/webgl/webglvectorlayershader.js diff --git a/src/ol/renderer/webgl/webglvectorlayer.glsl b/src/ol/render/webgl/webglimage.glsl similarity index 82% rename from src/ol/renderer/webgl/webglvectorlayer.glsl rename to src/ol/render/webgl/webglimage.glsl index 53e57efbda..ade5cb7446 100644 --- a/src/ol/renderer/webgl/webglvectorlayer.glsl +++ b/src/ol/render/webgl/webglimage.glsl @@ -1,5 +1,5 @@ -//! NAMESPACE=ol.renderer.webgl.vectorlayer.shader -//! CLASS=ol.renderer.webgl.vectorlayer.shader. +//! NAMESPACE=ol.render.webgl.imagereplay.shader +//! CLASS=ol.render.webgl.imagereplay.shader. //! COMMON diff --git a/src/ol/render/webgl/webglimageshader.js b/src/ol/render/webgl/webglimageshader.js new file mode 100644 index 0000000000..1d792306b6 --- /dev/null +++ b/src/ol/render/webgl/webglimageshader.js @@ -0,0 +1,123 @@ +// This file is automatically generated, do not edit +goog.provide('ol.render.webgl.imagereplay.shader'); + +goog.require('ol.webgl.shader'); + + + +/** + * @constructor + * @extends {ol.webgl.shader.Fragment} + * @struct + */ +ol.render.webgl.imagereplay.shader.Fragment = function() { + goog.base(this, ol.render.webgl.imagereplay.shader.Fragment.SOURCE); +}; +goog.inherits(ol.render.webgl.imagereplay.shader.Fragment, ol.webgl.shader.Fragment); +goog.addSingletonGetter(ol.render.webgl.imagereplay.shader.Fragment); + + +/** + * @const + * @type {string} + */ +ol.render.webgl.imagereplay.shader.Fragment.DEBUG_SOURCE = 'precision mediump float;\nvarying vec2 v_texCoord;\n\nuniform sampler2D u_image;\n\nvoid main(void) {\n gl_FragColor = texture2D(u_image, v_texCoord);\n}\n'; + + +/** + * @const + * @type {string} + */ +ol.render.webgl.imagereplay.shader.Fragment.OPTIMIZED_SOURCE = 'precision mediump float;varying vec2 a;uniform sampler2D g;void main(void){gl_FragColor=texture2D(g,a);}'; + + +/** + * @const + * @type {string} + */ +ol.render.webgl.imagereplay.shader.Fragment.SOURCE = goog.DEBUG ? + ol.render.webgl.imagereplay.shader.Fragment.DEBUG_SOURCE : + ol.render.webgl.imagereplay.shader.Fragment.OPTIMIZED_SOURCE; + + + +/** + * @constructor + * @extends {ol.webgl.shader.Vertex} + * @struct + */ +ol.render.webgl.imagereplay.shader.Vertex = function() { + goog.base(this, ol.render.webgl.imagereplay.shader.Vertex.SOURCE); +}; +goog.inherits(ol.render.webgl.imagereplay.shader.Vertex, ol.webgl.shader.Vertex); +goog.addSingletonGetter(ol.render.webgl.imagereplay.shader.Vertex); + + +/** + * @const + * @type {string} + */ +ol.render.webgl.imagereplay.shader.Vertex.DEBUG_SOURCE = 'varying vec2 v_texCoord;\n\nattribute vec2 a_position;\nattribute vec2 a_texCoord;\nattribute vec2 a_offsets;\n\nuniform mat4 u_projectionMatrix;\nuniform mat2 u_sizeMatrix;\n\nvoid main(void) {\n vec2 offsets = u_sizeMatrix * a_offsets;\n gl_Position = u_projectionMatrix * vec4(a_position, 0., 1.) + vec4(offsets, 0., 0.);\n v_texCoord = a_texCoord;\n}\n\n\n'; + + +/** + * @const + * @type {string} + */ +ol.render.webgl.imagereplay.shader.Vertex.OPTIMIZED_SOURCE = 'varying vec2 a;attribute vec2 b;attribute vec2 c;attribute vec2 d;uniform mat4 e;uniform mat2 f;void main(void){vec2 offsets=f*d;gl_Position=e*vec4(b,0.,1.)+vec4(offsets,0.,0.);a=c;}'; + + +/** + * @const + * @type {string} + */ +ol.render.webgl.imagereplay.shader.Vertex.SOURCE = goog.DEBUG ? + ol.render.webgl.imagereplay.shader.Vertex.DEBUG_SOURCE : + ol.render.webgl.imagereplay.shader.Vertex.OPTIMIZED_SOURCE; + + + +/** + * @constructor + * @param {WebGLRenderingContext} gl GL. + * @param {WebGLProgram} program Program. + * @struct + */ +ol.render.webgl.imagereplay.shader.Locations = function(gl, program) { + + /** + * @type {WebGLUniformLocation} + */ + this.u_image = gl.getUniformLocation( + program, goog.DEBUG ? 'u_image' : 'g'); + + /** + * @type {WebGLUniformLocation} + */ + this.u_projectionMatrix = gl.getUniformLocation( + program, goog.DEBUG ? 'u_projectionMatrix' : 'e'); + + /** + * @type {WebGLUniformLocation} + */ + this.u_sizeMatrix = gl.getUniformLocation( + program, goog.DEBUG ? 'u_sizeMatrix' : 'f'); + + /** + * @type {number} + */ + this.a_offsets = gl.getAttribLocation( + program, goog.DEBUG ? 'a_offsets' : 'd'); + + /** + * @type {number} + */ + this.a_position = gl.getAttribLocation( + program, goog.DEBUG ? 'a_position' : 'b'); + + /** + * @type {number} + */ + this.a_texCoord = gl.getAttribLocation( + program, goog.DEBUG ? 'a_texCoord' : 'c'); +}; diff --git a/src/ol/render/webgl/webglreplay.js b/src/ol/render/webgl/webglreplay.js index 5e38defb51..034a5a2842 100644 --- a/src/ol/render/webgl/webglreplay.js +++ b/src/ol/render/webgl/webglreplay.js @@ -5,6 +5,7 @@ goog.require('goog.asserts'); goog.require('goog.object'); goog.require('ol.extent'); goog.require('ol.render.IReplayGroup'); +goog.require('ol.render.webgl.imagereplay.shader'); @@ -23,6 +24,13 @@ ol.render.webgl.ImageReplay = function(tolerance) { */ this.extent_ = ol.extent.createEmpty(); + /** + * @private + * @type {ol.webgl.shader.Fragment} + */ + this.fragmentShader_ = + ol.render.webgl.imagereplay.shader.Fragment.getInstance(); + /** * @type {Array.} * @private @@ -65,6 +73,12 @@ ol.render.webgl.ImageReplay = function(tolerance) { */ this.indicesBuffer_ = null; + /** + * @private + * @type {ol.render.webgl.imagereplay.shader.Locations} + */ + this.locations_ = null; + /** * @type {number|undefined} * @private @@ -83,6 +97,13 @@ ol.render.webgl.ImageReplay = function(tolerance) { */ this.textures_ = []; + /** + * @private + * @type {ol.webgl.shader.Vertex} + */ + this.vertexShader_ = + ol.render.webgl.imagereplay.shader.Vertex.getInstance(); + /** * @type {Array.} * @private @@ -325,11 +346,6 @@ ol.render.webgl.ImageReplay.prototype.getExtent = function() { /** * @param {ol.webgl.Context} context Context. - * @param {number} positionAttribLocation Attribute location for positions. - * @param {number} offsetsAttribLocation Attribute location for offsets. - * @param {number} texCoordAttribLocation Attribute location for texCoord. - * @param {WebGLUniformLocation} projectionMatrixLocation Proj matrix location. - * @param {WebGLUniformLocation} sizeMatrixLocation Size matrix location. * @param {number} pixelRatio Pixel ratio. * @param {Array.} size Size. * @param {goog.vec.Mat4.Number} transform Transform. @@ -338,28 +354,37 @@ ol.render.webgl.ImageReplay.prototype.getExtent = function() { * @template T */ ol.render.webgl.ImageReplay.prototype.replay = function(context, - positionAttribLocation, offsetsAttribLocation, texCoordAttribLocation, - projectionMatrixLocation, sizeMatrixLocation, pixelRatio, size, transform, skippedFeaturesHash) { var gl = context.getGL(); + var program = context.getProgram( + this.fragmentShader_, this.vertexShader_); + context.useProgram(program); + + if (goog.isNull(this.locations_)) { + this.locations_ = + new ol.render.webgl.imagereplay.shader.Locations( + gl, program); + } + + var locations = this.locations_; + gl.bindBuffer(goog.webgl.ARRAY_BUFFER, this.verticesBuffer_); - gl.enableVertexAttribArray(positionAttribLocation); - gl.vertexAttribPointer(positionAttribLocation, 2, goog.webgl.FLOAT, + gl.enableVertexAttribArray(locations.a_position); + gl.vertexAttribPointer(locations.a_position, 2, goog.webgl.FLOAT, false, 24, 0); - gl.enableVertexAttribArray(offsetsAttribLocation); - gl.vertexAttribPointer(offsetsAttribLocation, 2, goog.webgl.FLOAT, + gl.enableVertexAttribArray(locations.a_offsets); + gl.vertexAttribPointer(locations.a_offsets, 2, goog.webgl.FLOAT, false, 24, 8); - gl.enableVertexAttribArray(texCoordAttribLocation); - gl.vertexAttribPointer(texCoordAttribLocation, 2, goog.webgl.FLOAT, + gl.enableVertexAttribArray(locations.a_texCoord); + gl.vertexAttribPointer(locations.a_texCoord, 2, goog.webgl.FLOAT, false, 24, 16); - - gl.uniformMatrix4fv(projectionMatrixLocation, false, transform); - gl.uniformMatrix2fv(sizeMatrixLocation, false, + gl.uniformMatrix4fv(locations.u_projectionMatrix, false, transform); + gl.uniformMatrix2fv(locations.u_sizeMatrix, false, new Float32Array([1 / size[0], 0.0, 0.0, 1 / size[1]])); gl.bindBuffer(goog.webgl.ELEMENT_ARRAY_BUFFER, this.indicesBuffer_); @@ -484,11 +509,6 @@ ol.render.webgl.ReplayGroup.prototype.isEmpty = function() { /** * @param {ol.webgl.Context} context Context. - * @param {number} positionAttribLocation Attribute location for positions. - * @param {number} offsetsAttribLocation Attribute location for offsets. - * @param {number} texCoordAttribLocation Attribute location for texCoord. - * @param {WebGLUniformLocation} projectionMatrixLocation Proj matrix location. - * @param {WebGLUniformLocation} sizeMatrixLocation Size matrix location. * @param {ol.Extent} extent Extent. * @param {number} pixelRatio Pixel ratio. * @param {Array.} size Size. @@ -498,8 +518,6 @@ ol.render.webgl.ReplayGroup.prototype.isEmpty = function() { * @template T */ ol.render.webgl.ReplayGroup.prototype.replay = function(context, - positionAttribLocation, offsetsAttribLocation, texCoordAttribLocation, - projectionMatrixLocation, sizeMatrixLocation, extent, pixelRatio, size, transform, skippedFeaturesHash) { var i, ii, replay, result; for (i = 0, ii = ol.render.REPLAY_ORDER.length; i < ii; ++i) { @@ -507,8 +525,6 @@ ol.render.webgl.ReplayGroup.prototype.replay = function(context, if (goog.isDef(replay) && ol.extent.intersects(extent, replay.getExtent())) { result = replay.replay(context, - positionAttribLocation, offsetsAttribLocation, texCoordAttribLocation, - projectionMatrixLocation, sizeMatrixLocation, pixelRatio, size, transform, skippedFeaturesHash); if (result) { return result; diff --git a/src/ol/renderer/webgl/webglvectorlayerrenderer.js b/src/ol/renderer/webgl/webglvectorlayerrenderer.js index cb67b0174b..440581bfbf 100644 --- a/src/ol/renderer/webgl/webglvectorlayerrenderer.js +++ b/src/ol/renderer/webgl/webglvectorlayerrenderer.js @@ -9,7 +9,6 @@ goog.require('ol.layer.Vector'); goog.require('ol.render.webgl.ReplayGroup'); goog.require('ol.renderer.vector'); goog.require('ol.renderer.webgl.Layer'); -goog.require('ol.renderer.webgl.vectorlayer.shader'); goog.require('ol.vec.Mat4'); @@ -24,26 +23,6 @@ ol.renderer.webgl.VectorLayer = function(mapRenderer, vectorLayer) { goog.base(this, mapRenderer, vectorLayer); - /** - * @private - * @type {ol.webgl.shader.Fragment} - */ - this.fragmentShader_ = - ol.renderer.webgl.vectorlayer.shader.Fragment.getInstance(); - - /** - * @private - * @type {ol.webgl.shader.Vertex} - */ - this.vertexShader_ = - ol.renderer.webgl.vectorlayer.shader.Vertex.getInstance(); - - /** - * @private - * @type {ol.renderer.webgl.vectorlayer.shader.Locations} - */ - this.locations_ = null; - /** * @private * @type {boolean} @@ -90,18 +69,6 @@ goog.inherits(ol.renderer.webgl.VectorLayer, ol.renderer.webgl.Layer); ol.renderer.webgl.VectorLayer.prototype.composeFrame = function(frameState, layerState, context) { - var gl = context.getGL(); - - var program = context.getProgram( - this.fragmentShader_, this.vertexShader_); - context.useProgram(program); - - if (goog.isNull(this.locations_)) { - this.locations_ = - new ol.renderer.webgl.vectorlayer.shader.Locations( - gl, program); - } - var viewState = frameState.viewState; ol.vec.Mat4.makeTransform2D(this.projectionMatrix, 0.0, 0.0, @@ -113,11 +80,6 @@ ol.renderer.webgl.VectorLayer.prototype.composeFrame = var replayGroup = this.replayGroup_; if (!goog.isNull(replayGroup) && !replayGroup.isEmpty()) { replayGroup.replay(context, - this.locations_.a_position, - this.locations_.a_offsets, - this.locations_.a_texCoord, - this.locations_.u_projectionMatrix, - this.locations_.u_sizeMatrix, frameState.extent, frameState.pixelRatio, frameState.size, this.projectionMatrix, frameState.skippedFeatureUids); diff --git a/src/ol/renderer/webgl/webglvectorlayershader.js b/src/ol/renderer/webgl/webglvectorlayershader.js deleted file mode 100644 index f3226c8963..0000000000 --- a/src/ol/renderer/webgl/webglvectorlayershader.js +++ /dev/null @@ -1,123 +0,0 @@ -// This file is automatically generated, do not edit -goog.provide('ol.renderer.webgl.vectorlayer.shader'); - -goog.require('ol.webgl.shader'); - - - -/** - * @constructor - * @extends {ol.webgl.shader.Fragment} - * @struct - */ -ol.renderer.webgl.vectorlayer.shader.Fragment = function() { - goog.base(this, ol.renderer.webgl.vectorlayer.shader.Fragment.SOURCE); -}; -goog.inherits(ol.renderer.webgl.vectorlayer.shader.Fragment, ol.webgl.shader.Fragment); -goog.addSingletonGetter(ol.renderer.webgl.vectorlayer.shader.Fragment); - - -/** - * @const - * @type {string} - */ -ol.renderer.webgl.vectorlayer.shader.Fragment.DEBUG_SOURCE = 'precision mediump float;\nvarying vec2 v_texCoord;\n\nuniform sampler2D u_image;\n\nvoid main(void) {\n gl_FragColor = texture2D(u_image, v_texCoord);\n}\n'; - - -/** - * @const - * @type {string} - */ -ol.renderer.webgl.vectorlayer.shader.Fragment.OPTIMIZED_SOURCE = 'precision mediump float;varying vec2 a;uniform sampler2D g;void main(void){gl_FragColor=texture2D(g,a);}'; - - -/** - * @const - * @type {string} - */ -ol.renderer.webgl.vectorlayer.shader.Fragment.SOURCE = goog.DEBUG ? - ol.renderer.webgl.vectorlayer.shader.Fragment.DEBUG_SOURCE : - ol.renderer.webgl.vectorlayer.shader.Fragment.OPTIMIZED_SOURCE; - - - -/** - * @constructor - * @extends {ol.webgl.shader.Vertex} - * @struct - */ -ol.renderer.webgl.vectorlayer.shader.Vertex = function() { - goog.base(this, ol.renderer.webgl.vectorlayer.shader.Vertex.SOURCE); -}; -goog.inherits(ol.renderer.webgl.vectorlayer.shader.Vertex, ol.webgl.shader.Vertex); -goog.addSingletonGetter(ol.renderer.webgl.vectorlayer.shader.Vertex); - - -/** - * @const - * @type {string} - */ -ol.renderer.webgl.vectorlayer.shader.Vertex.DEBUG_SOURCE = 'varying vec2 v_texCoord;\n\nattribute vec2 a_position;\nattribute vec2 a_texCoord;\nattribute vec2 a_offsets;\n\nuniform mat4 u_projectionMatrix;\nuniform mat2 u_sizeMatrix;\n\nvoid main(void) {\n vec2 offsets = u_sizeMatrix * a_offsets;\n gl_Position = u_projectionMatrix * vec4(a_position, 0., 1.) + vec4(offsets, 0., 0.);\n v_texCoord = a_texCoord;\n}\n\n\n'; - - -/** - * @const - * @type {string} - */ -ol.renderer.webgl.vectorlayer.shader.Vertex.OPTIMIZED_SOURCE = 'varying vec2 a;attribute vec2 b;attribute vec2 c;attribute vec2 d;uniform mat4 e;uniform mat2 f;void main(void){vec2 offsets=f*d;gl_Position=e*vec4(b,0.,1.)+vec4(offsets,0.,0.);a=c;}'; - - -/** - * @const - * @type {string} - */ -ol.renderer.webgl.vectorlayer.shader.Vertex.SOURCE = goog.DEBUG ? - ol.renderer.webgl.vectorlayer.shader.Vertex.DEBUG_SOURCE : - ol.renderer.webgl.vectorlayer.shader.Vertex.OPTIMIZED_SOURCE; - - - -/** - * @constructor - * @param {WebGLRenderingContext} gl GL. - * @param {WebGLProgram} program Program. - * @struct - */ -ol.renderer.webgl.vectorlayer.shader.Locations = function(gl, program) { - - /** - * @type {WebGLUniformLocation} - */ - this.u_image = gl.getUniformLocation( - program, goog.DEBUG ? 'u_image' : 'g'); - - /** - * @type {WebGLUniformLocation} - */ - this.u_projectionMatrix = gl.getUniformLocation( - program, goog.DEBUG ? 'u_projectionMatrix' : 'e'); - - /** - * @type {WebGLUniformLocation} - */ - this.u_sizeMatrix = gl.getUniformLocation( - program, goog.DEBUG ? 'u_sizeMatrix' : 'f'); - - /** - * @type {number} - */ - this.a_offsets = gl.getAttribLocation( - program, goog.DEBUG ? 'a_offsets' : 'd'); - - /** - * @type {number} - */ - this.a_position = gl.getAttribLocation( - program, goog.DEBUG ? 'a_position' : 'b'); - - /** - * @type {number} - */ - this.a_texCoord = gl.getAttribLocation( - program, goog.DEBUG ? 'a_texCoord' : 'c'); -}; From 14d7f2a797ab80e5afdc22a4af2e9ce795f850cd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89ric=20Lemoine?= Date: Mon, 3 Nov 2014 14:16:32 +0100 Subject: [PATCH 2/3] Delete ImageReplay textures --- src/ol/render/webgl/webglreplay.js | 37 +++++++++++++++++++ .../webgl/webglvectorlayerrenderer.js | 6 +-- 2 files changed, 40 insertions(+), 3 deletions(-) diff --git a/src/ol/render/webgl/webglreplay.js b/src/ol/render/webgl/webglreplay.js index 034a5a2842..21706333ca 100644 --- a/src/ol/render/webgl/webglreplay.js +++ b/src/ol/render/webgl/webglreplay.js @@ -125,6 +125,30 @@ ol.render.webgl.ImageReplay = function(tolerance) { }; +/** + * @param {olx.FrameState} frameState Frame state. + * @param {ol.webgl.Context} context Context. + */ +ol.render.webgl.ImageReplay.prototype.deleteTextures = + function(frameState, context) { + frameState.postRenderFunctions.push( + goog.partial( + /** + * @param {WebGLRenderingContext} gl GL. + * @param {Array.} textures Textures. + */ + function(gl, textures) { + if (!gl.isContextLost()) { + var i, ii; + for (i = 0, ii = textures.length; i < ii; ++i) { + gl.deleteTexture(textures[i]); + } + } + }, context.getGL(), this.textures_)); + +}; + + /** * @inheritDoc */ @@ -472,6 +496,19 @@ ol.render.webgl.ReplayGroup = function(tolerance) { }; +/** + * @param {olx.FrameState} frameState Frame state. + * @param {ol.webgl.Context} context Context. + */ +ol.render.webgl.ReplayGroup.prototype.deleteTextures = + function(frameState, context) { + var replayKey; + for (replayKey in this.replays_) { + this.replays_[replayKey].deleteTextures(frameState, context); + } +}; + + /** * @param {ol.webgl.Context} context Context. */ diff --git a/src/ol/renderer/webgl/webglvectorlayerrenderer.js b/src/ol/renderer/webgl/webglvectorlayerrenderer.js index 440581bfbf..78355ec7ac 100644 --- a/src/ol/renderer/webgl/webglvectorlayerrenderer.js +++ b/src/ol/renderer/webgl/webglvectorlayerrenderer.js @@ -153,9 +153,9 @@ ol.renderer.webgl.VectorLayer.prototype.prepareFrame = extent[2] = frameStateExtent[2] + xBuffer; extent[3] = frameStateExtent[3] + yBuffer; - // FIXME dispose of old replayGroup in post render - goog.dispose(this.replayGroup_); - this.replayGroup_ = null; + if (!goog.isNull(this.replayGroup_)) { + this.replayGroup_.deleteTextures(frameState, context); + } this.dirty_ = false; From 2c92d9a709a613917cb2ec32b349d871ae6d125e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89ric=20Lemoine?= Date: Mon, 3 Nov 2014 14:54:41 +0100 Subject: [PATCH 3/3] Fix drawElement call --- src/ol/render/webgl/webglreplay.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/ol/render/webgl/webglreplay.js b/src/ol/render/webgl/webglreplay.js index 21706333ca..26a5bcddd6 100644 --- a/src/ol/render/webgl/webglreplay.js +++ b/src/ol/render/webgl/webglreplay.js @@ -415,12 +415,13 @@ ol.render.webgl.ImageReplay.prototype.replay = function(context, goog.asserts.assert(this.textures_.length == this.groupIndices_.length); - var i; - var ii = this.textures_.length; - for (i = 0; i < ii; ++i) { + var i, ii, start; + for (i = 0, ii = this.textures_.length, start = 0; i < ii; ++i) { gl.bindTexture(goog.webgl.TEXTURE_2D, this.textures_[i]); - gl.drawElements(goog.webgl.TRIANGLES, this.groupIndices_[i], - goog.webgl.UNSIGNED_SHORT, 0); + var end = this.groupIndices_[i]; + gl.drawElements(goog.webgl.TRIANGLES, end - start, + goog.webgl.UNSIGNED_SHORT, start); + start = end; } };