diff --git a/src/ol/renderer/webgl/imagelayer.js b/src/ol/renderer/webgl/imagelayer.js index 94a74071c4..fe44044127 100644 --- a/src/ol/renderer/webgl/imagelayer.js +++ b/src/ol/renderer/webgl/imagelayer.js @@ -12,294 +12,298 @@ goog.require('ol.webgl'); goog.require('ol.webgl.Context'); -/** - * @constructor - * @extends {ol.renderer.webgl.Layer} - * @param {ol.renderer.webgl.Map} mapRenderer Map renderer. - * @param {ol.layer.Image} imageLayer Tile layer. - */ -ol.renderer.webgl.ImageLayer = function(mapRenderer, imageLayer) { - - ol.renderer.webgl.Layer.call(this, mapRenderer, imageLayer); +if (ol.ENABLE_WEBGL) { /** - * The last rendered image. - * @private - * @type {?ol.ImageBase} + * @constructor + * @extends {ol.renderer.webgl.Layer} + * @param {ol.renderer.webgl.Map} mapRenderer Map renderer. + * @param {ol.layer.Image} imageLayer Tile layer. */ - this.image_ = null; + ol.renderer.webgl.ImageLayer = function(mapRenderer, imageLayer) { + + ol.renderer.webgl.Layer.call(this, mapRenderer, imageLayer); + + /** + * The last rendered image. + * @private + * @type {?ol.ImageBase} + */ + this.image_ = null; + + /** + * @private + * @type {CanvasRenderingContext2D} + */ + this.hitCanvasContext_ = null; + + /** + * @private + * @type {?ol.Transform} + */ + this.hitTransformationMatrix_ = null; + + }; + ol.inherits(ol.renderer.webgl.ImageLayer, ol.renderer.webgl.Layer); + /** + * @param {ol.ImageBase} image Image. * @private - * @type {CanvasRenderingContext2D} + * @return {WebGLTexture} Texture. */ - this.hitCanvasContext_ = null; + ol.renderer.webgl.ImageLayer.prototype.createTexture_ = function(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 + + var imageElement = image.getImage(); + var gl = this.mapRenderer.getGL(); + + return ol.webgl.Context.createTexture( + gl, imageElement, ol.webgl.CLAMP_TO_EDGE, ol.webgl.CLAMP_TO_EDGE); + }; + /** - * @private - * @type {?ol.Transform} + * @inheritDoc */ - this.hitTransformationMatrix_ = null; + ol.renderer.webgl.ImageLayer.prototype.forEachFeatureAtCoordinate = function(coordinate, frameState, hitTolerance, callback, thisArg) { + var layer = this.getLayer(); + var source = layer.getSource(); + var resolution = frameState.viewState.resolution; + var rotation = frameState.viewState.rotation; + var skippedFeatureUids = frameState.skippedFeatureUids; + return source.forEachFeatureAtCoordinate( + coordinate, resolution, rotation, hitTolerance, skippedFeatureUids, -}; -ol.inherits(ol.renderer.webgl.ImageLayer, ol.renderer.webgl.Layer); + /** + * @param {ol.Feature|ol.render.Feature} feature Feature. + * @return {?} Callback result. + */ + function(feature) { + return callback.call(thisArg, feature, layer); + }); + }; -/** - * @param {ol.ImageBase} image Image. - * @private - * @return {WebGLTexture} Texture. - */ -ol.renderer.webgl.ImageLayer.prototype.createTexture_ = function(image) { + /** + * @inheritDoc + */ + ol.renderer.webgl.ImageLayer.prototype.prepareFrame = function(frameState, layerState, context) { - // 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 + var gl = this.mapRenderer.getGL(); - var imageElement = image.getImage(); - var gl = this.mapRenderer.getGL(); + var pixelRatio = frameState.pixelRatio; + var viewState = frameState.viewState; + var viewCenter = viewState.center; + var viewResolution = viewState.resolution; + var viewRotation = viewState.rotation; - return ol.webgl.Context.createTexture( - gl, imageElement, ol.webgl.CLAMP_TO_EDGE, ol.webgl.CLAMP_TO_EDGE); -}; + var image = this.image_; + var texture = this.texture; + var imageLayer = /** @type {ol.layer.Image} */ (this.getLayer()); + var imageSource = imageLayer.getSource(); + var hints = frameState.viewHints; -/** - * @inheritDoc - */ -ol.renderer.webgl.ImageLayer.prototype.forEachFeatureAtCoordinate = function(coordinate, frameState, hitTolerance, callback, thisArg) { - var layer = this.getLayer(); - var source = layer.getSource(); - var resolution = frameState.viewState.resolution; - var rotation = frameState.viewState.rotation; - var skippedFeatureUids = frameState.skippedFeatureUids; - return source.forEachFeatureAtCoordinate( - coordinate, resolution, rotation, hitTolerance, skippedFeatureUids, - - /** - * @param {ol.Feature|ol.render.Feature} feature Feature. - * @return {?} Callback result. - */ - function(feature) { - return callback.call(thisArg, feature, layer); - }); -}; - - -/** - * @inheritDoc - */ -ol.renderer.webgl.ImageLayer.prototype.prepareFrame = function(frameState, layerState, context) { - - var gl = this.mapRenderer.getGL(); - - var pixelRatio = frameState.pixelRatio; - var viewState = frameState.viewState; - var viewCenter = viewState.center; - var viewResolution = viewState.resolution; - var viewRotation = viewState.rotation; - - var image = this.image_; - var texture = this.texture; - var imageLayer = /** @type {ol.layer.Image} */ (this.getLayer()); - var imageSource = imageLayer.getSource(); - - var hints = frameState.viewHints; - - var renderedExtent = frameState.extent; - if (layerState.extent !== undefined) { - renderedExtent = ol.extent.getIntersection( - renderedExtent, layerState.extent); - } - if (!hints[ol.ViewHint.ANIMATING] && !hints[ol.ViewHint.INTERACTING] && - !ol.extent.isEmpty(renderedExtent)) { - var projection = viewState.projection; - if (!ol.ENABLE_RASTER_REPROJECTION) { - var sourceProjection = imageSource.getProjection(); - if (sourceProjection) { - projection = sourceProjection; - } + var renderedExtent = frameState.extent; + if (layerState.extent !== undefined) { + renderedExtent = ol.extent.getIntersection( + renderedExtent, layerState.extent); } - var image_ = imageSource.getImage(renderedExtent, viewResolution, - pixelRatio, projection); - if (image_) { - var loaded = this.loadImage(image_); - if (loaded) { - image = image_; - texture = this.createTexture_(image_); - if (this.texture) { - /** - * @param {WebGLRenderingContext} gl GL. - * @param {WebGLTexture} texture Texture. - */ - var postRenderFunction = function(gl, texture) { - if (!gl.isContextLost()) { - gl.deleteTexture(texture); - } - }.bind(null, gl, this.texture); - frameState.postRenderFunctions.push( - /** @type {ol.PostRenderFunction} */ (postRenderFunction) - ); + if (!hints[ol.ViewHint.ANIMATING] && !hints[ol.ViewHint.INTERACTING] && + !ol.extent.isEmpty(renderedExtent)) { + var projection = viewState.projection; + if (!ol.ENABLE_RASTER_REPROJECTION) { + var sourceProjection = imageSource.getProjection(); + if (sourceProjection) { + projection = sourceProjection; + } + } + var image_ = imageSource.getImage(renderedExtent, viewResolution, + pixelRatio, projection); + if (image_) { + var loaded = this.loadImage(image_); + if (loaded) { + image = image_; + texture = this.createTexture_(image_); + if (this.texture) { + /** + * @param {WebGLRenderingContext} gl GL. + * @param {WebGLTexture} texture Texture. + */ + var postRenderFunction = function(gl, texture) { + if (!gl.isContextLost()) { + gl.deleteTexture(texture); + } + }.bind(null, gl, this.texture); + frameState.postRenderFunctions.push( + /** @type {ol.PostRenderFunction} */ (postRenderFunction) + ); + } } } } - } - if (image) { - var canvas = this.mapRenderer.getContext().getCanvas(); + if (image) { + var canvas = this.mapRenderer.getContext().getCanvas(); - this.updateProjectionMatrix_(canvas.width, canvas.height, - pixelRatio, viewCenter, viewResolution, viewRotation, - image.getExtent()); - this.hitTransformationMatrix_ = null; + this.updateProjectionMatrix_(canvas.width, canvas.height, + pixelRatio, viewCenter, viewResolution, viewRotation, + image.getExtent()); + this.hitTransformationMatrix_ = null; - // Translate and scale to flip the Y coord. - var texCoordMatrix = this.texCoordMatrix; - ol.transform.reset(texCoordMatrix); - ol.transform.scale(texCoordMatrix, 1, -1); - ol.transform.translate(texCoordMatrix, 0, -1); + // Translate and scale to flip the Y coord. + var texCoordMatrix = this.texCoordMatrix; + ol.transform.reset(texCoordMatrix); + ol.transform.scale(texCoordMatrix, 1, -1); + ol.transform.translate(texCoordMatrix, 0, -1); - this.image_ = image; - this.texture = texture; + this.image_ = image; + this.texture = texture; - this.updateAttributions(frameState.attributions, image.getAttributions()); - this.updateLogos(frameState, imageSource); - } + this.updateAttributions(frameState.attributions, image.getAttributions()); + this.updateLogos(frameState, imageSource); + } - return !!image; -}; + return !!image; + }; -/** - * @param {number} canvasWidth Canvas width. - * @param {number} canvasHeight Canvas height. - * @param {number} pixelRatio Pixel ratio. - * @param {ol.Coordinate} viewCenter View center. - * @param {number} viewResolution View resolution. - * @param {number} viewRotation View rotation. - * @param {ol.Extent} imageExtent Image extent. - * @private - */ -ol.renderer.webgl.ImageLayer.prototype.updateProjectionMatrix_ = function(canvasWidth, canvasHeight, pixelRatio, - viewCenter, viewResolution, viewRotation, imageExtent) { + /** + * @param {number} canvasWidth Canvas width. + * @param {number} canvasHeight Canvas height. + * @param {number} pixelRatio Pixel ratio. + * @param {ol.Coordinate} viewCenter View center. + * @param {number} viewResolution View resolution. + * @param {number} viewRotation View rotation. + * @param {ol.Extent} imageExtent Image extent. + * @private + */ + ol.renderer.webgl.ImageLayer.prototype.updateProjectionMatrix_ = function(canvasWidth, canvasHeight, pixelRatio, + viewCenter, viewResolution, viewRotation, imageExtent) { - var canvasExtentWidth = canvasWidth * viewResolution; - var canvasExtentHeight = canvasHeight * viewResolution; + var canvasExtentWidth = canvasWidth * viewResolution; + var canvasExtentHeight = canvasHeight * viewResolution; - var projectionMatrix = this.projectionMatrix; - ol.transform.reset(projectionMatrix); - ol.transform.scale(projectionMatrix, - pixelRatio * 2 / canvasExtentWidth, - pixelRatio * 2 / canvasExtentHeight); - ol.transform.rotate(projectionMatrix, -viewRotation); - ol.transform.translate(projectionMatrix, - imageExtent[0] - viewCenter[0], - imageExtent[1] - viewCenter[1]); - ol.transform.scale(projectionMatrix, - (imageExtent[2] - imageExtent[0]) / 2, - (imageExtent[3] - imageExtent[1]) / 2); - ol.transform.translate(projectionMatrix, 1, 1); + var projectionMatrix = this.projectionMatrix; + ol.transform.reset(projectionMatrix); + ol.transform.scale(projectionMatrix, + pixelRatio * 2 / canvasExtentWidth, + pixelRatio * 2 / canvasExtentHeight); + ol.transform.rotate(projectionMatrix, -viewRotation); + ol.transform.translate(projectionMatrix, + imageExtent[0] - viewCenter[0], + imageExtent[1] - viewCenter[1]); + ol.transform.scale(projectionMatrix, + (imageExtent[2] - imageExtent[0]) / 2, + (imageExtent[3] - imageExtent[1]) / 2); + ol.transform.translate(projectionMatrix, 1, 1); -}; + }; -/** - * @inheritDoc - */ -ol.renderer.webgl.ImageLayer.prototype.hasFeatureAtCoordinate = function(coordinate, frameState) { - var hasFeature = this.forEachFeatureAtCoordinate( - coordinate, frameState, 0, ol.functions.TRUE, this); - return hasFeature !== undefined; -}; - - -/** - * @inheritDoc - */ -ol.renderer.webgl.ImageLayer.prototype.forEachLayerAtPixel = function(pixel, frameState, callback, thisArg) { - if (!this.image_ || !this.image_.getImage()) { - return undefined; - } - - if (this.getLayer().getSource() instanceof ol.source.ImageVector) { - // for ImageVector sources use the original hit-detection logic, - // so that for example also transparent polygons are detected - var coordinate = ol.transform.apply( - frameState.pixelToCoordinateTransform, pixel.slice()); + /** + * @inheritDoc + */ + ol.renderer.webgl.ImageLayer.prototype.hasFeatureAtCoordinate = function(coordinate, frameState) { var hasFeature = this.forEachFeatureAtCoordinate( coordinate, frameState, 0, ol.functions.TRUE, this); + return hasFeature !== undefined; + }; - if (hasFeature) { - return callback.call(thisArg, this.getLayer(), null); + + /** + * @inheritDoc + */ + ol.renderer.webgl.ImageLayer.prototype.forEachLayerAtPixel = function(pixel, frameState, callback, thisArg) { + if (!this.image_ || !this.image_.getImage()) { + return undefined; + } + + if (this.getLayer().getSource() instanceof ol.source.ImageVector) { + // for ImageVector sources use the original hit-detection logic, + // so that for example also transparent polygons are detected + var coordinate = ol.transform.apply( + frameState.pixelToCoordinateTransform, pixel.slice()); + var hasFeature = this.forEachFeatureAtCoordinate( + coordinate, frameState, 0, ol.functions.TRUE, this); + + if (hasFeature) { + return callback.call(thisArg, this.getLayer(), null); + } else { + return undefined; + } } else { - return undefined; + var imageSize = + [this.image_.getImage().width, this.image_.getImage().height]; + + if (!this.hitTransformationMatrix_) { + this.hitTransformationMatrix_ = this.getHitTransformationMatrix_( + frameState.size, imageSize); + } + + var pixelOnFrameBuffer = ol.transform.apply( + 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_ = ol.dom.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); + + var imageData = this.hitCanvasContext_.getImageData(0, 0, 1, 1).data; + if (imageData[3] > 0) { + return callback.call(thisArg, this.getLayer(), imageData); + } else { + return undefined; + } } - } else { - var imageSize = - [this.image_.getImage().width, this.image_.getImage().height]; - - if (!this.hitTransformationMatrix_) { - this.hitTransformationMatrix_ = this.getHitTransformationMatrix_( - frameState.size, imageSize); - } - - var pixelOnFrameBuffer = ol.transform.apply( - 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_ = ol.dom.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); - - var 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 {ol.Size} mapSize The map size. - * @param {ol.Size} imageSize The image size. - * @return {ol.Transform} The transformation matrix. - * @private - */ -ol.renderer.webgl.ImageLayer.prototype.getHitTransformationMatrix_ = function(mapSize, imageSize) { - // the first matrix takes a map pixel, flips the y-axis and scales to - // a range between -1 ... 1 - var mapCoordTransform = ol.transform.create(); - ol.transform.translate(mapCoordTransform, -1, -1); - ol.transform.scale(mapCoordTransform, 2 / mapSize[0], 2 / mapSize[1]); - ol.transform.translate(mapCoordTransform, 0, mapSize[1]); - ol.transform.scale(mapCoordTransform, 1, -1); + /** + * The transformation matrix to get the pixel on the image for a + * pixel on the map. + * @param {ol.Size} mapSize The map size. + * @param {ol.Size} imageSize The image size. + * @return {ol.Transform} The transformation matrix. + * @private + */ + ol.renderer.webgl.ImageLayer.prototype.getHitTransformationMatrix_ = function(mapSize, imageSize) { + // the first matrix takes a map pixel, flips the y-axis and scales to + // a range between -1 ... 1 + var mapCoordTransform = ol.transform.create(); + ol.transform.translate(mapCoordTransform, -1, -1); + ol.transform.scale(mapCoordTransform, 2 / mapSize[0], 2 / mapSize[1]); + ol.transform.translate(mapCoordTransform, 0, mapSize[1]); + ol.transform.scale(mapCoordTransform, 1, -1); - // the second matrix is the inverse of the projection matrix used in the - // shader for drawing - var projectionMatrixInv = ol.transform.invert(this.projectionMatrix.slice()); + // the second matrix is the inverse of the projection matrix used in the + // shader for drawing + var projectionMatrixInv = ol.transform.invert(this.projectionMatrix.slice()); - // the third matrix scales to the image dimensions and flips the y-axis again - var transform = ol.transform.create(); - ol.transform.translate(transform, 0, imageSize[1]); - ol.transform.scale(transform, 1, -1); - ol.transform.scale(transform, imageSize[0] / 2, imageSize[1] / 2); - ol.transform.translate(transform, 1, 1); + // the third matrix scales to the image dimensions and flips the y-axis again + var transform = ol.transform.create(); + ol.transform.translate(transform, 0, imageSize[1]); + ol.transform.scale(transform, 1, -1); + ol.transform.scale(transform, imageSize[0] / 2, imageSize[1] / 2); + ol.transform.translate(transform, 1, 1); - ol.transform.multiply(transform, projectionMatrixInv); - ol.transform.multiply(transform, mapCoordTransform); + ol.transform.multiply(transform, projectionMatrixInv); + ol.transform.multiply(transform, mapCoordTransform); - return transform; -}; + return transform; + }; + +} diff --git a/src/ol/renderer/webgl/layer.js b/src/ol/renderer/webgl/layer.js index 8311696dd8..40bf6fd2a6 100644 --- a/src/ol/renderer/webgl/layer.js +++ b/src/ol/renderer/webgl/layer.js @@ -13,255 +13,259 @@ goog.require('ol.webgl.Buffer'); goog.require('ol.webgl.Context'); -/** - * @constructor - * @extends {ol.renderer.Layer} - * @param {ol.renderer.webgl.Map} mapRenderer Map renderer. - * @param {ol.layer.Layer} layer Layer. - */ -ol.renderer.webgl.Layer = function(mapRenderer, layer) { - - ol.renderer.Layer.call(this, layer); +if (ol.ENABLE_WEBGL) { /** - * @protected - * @type {ol.renderer.webgl.Map} + * @constructor + * @extends {ol.renderer.Layer} + * @param {ol.renderer.webgl.Map} mapRenderer Map renderer. + * @param {ol.layer.Layer} layer Layer. */ - this.mapRenderer = mapRenderer; + ol.renderer.webgl.Layer = function(mapRenderer, layer) { - /** - * @private - * @type {ol.webgl.Buffer} - */ - this.arrayBuffer_ = new ol.webgl.Buffer([ - -1, -1, 0, 0, - 1, -1, 1, 0, - -1, 1, 0, 1, - 1, 1, 1, 1 - ]); + ol.renderer.Layer.call(this, layer); - /** - * @protected - * @type {WebGLTexture} - */ - this.texture = null; - - /** - * @protected - * @type {WebGLFramebuffer} - */ - this.framebuffer = null; - - /** - * @protected - * @type {number|undefined} - */ - this.framebufferDimension = undefined; - - /** - * @protected - * @type {ol.Transform} - */ - this.texCoordMatrix = ol.transform.create(); - - /** - * @protected - * @type {ol.Transform} - */ - this.projectionMatrix = ol.transform.create(); - - /** - * @type {Array.} - * @private - */ - this.tmpMat4_ = ol.vec.Mat4.create(); - - /** - * @private - * @type {ol.renderer.webgl.defaultmapshader.Locations} - */ - this.defaultLocations_ = null; - -}; -ol.inherits(ol.renderer.webgl.Layer, ol.renderer.Layer); - - -/** - * @param {olx.FrameState} frameState Frame state. - * @param {number} framebufferDimension Framebuffer dimension. - * @protected - */ -ol.renderer.webgl.Layer.prototype.bindFramebuffer = function(frameState, framebufferDimension) { - - var gl = this.mapRenderer.getGL(); - - if (this.framebufferDimension === undefined || - this.framebufferDimension != framebufferDimension) { /** - * @param {WebGLRenderingContext} gl GL. - * @param {WebGLFramebuffer} framebuffer Framebuffer. - * @param {WebGLTexture} texture Texture. + * @protected + * @type {ol.renderer.webgl.Map} */ - var postRenderFunction = function(gl, framebuffer, texture) { - if (!gl.isContextLost()) { - gl.deleteFramebuffer(framebuffer); - gl.deleteTexture(texture); - } - }.bind(null, gl, this.framebuffer, this.texture); + this.mapRenderer = mapRenderer; - frameState.postRenderFunctions.push( - /** @type {ol.PostRenderFunction} */ (postRenderFunction) - ); + /** + * @private + * @type {ol.webgl.Buffer} + */ + this.arrayBuffer_ = new ol.webgl.Buffer([ + -1, -1, 0, 0, + 1, -1, 1, 0, + -1, 1, 0, 1, + 1, 1, 1, 1 + ]); - var texture = ol.webgl.Context.createEmptyTexture( - gl, framebufferDimension, framebufferDimension); + /** + * @protected + * @type {WebGLTexture} + */ + this.texture = null; - var framebuffer = gl.createFramebuffer(); - gl.bindFramebuffer(ol.webgl.FRAMEBUFFER, framebuffer); - gl.framebufferTexture2D(ol.webgl.FRAMEBUFFER, - ol.webgl.COLOR_ATTACHMENT0, ol.webgl.TEXTURE_2D, texture, 0); + /** + * @protected + * @type {WebGLFramebuffer} + */ + this.framebuffer = null; - this.texture = texture; - this.framebuffer = framebuffer; - this.framebufferDimension = framebufferDimension; + /** + * @protected + * @type {number|undefined} + */ + this.framebufferDimension = undefined; - } else { - gl.bindFramebuffer(ol.webgl.FRAMEBUFFER, this.framebuffer); - } + /** + * @protected + * @type {ol.Transform} + */ + this.texCoordMatrix = ol.transform.create(); -}; + /** + * @protected + * @type {ol.Transform} + */ + this.projectionMatrix = ol.transform.create(); + + /** + * @type {Array.} + * @private + */ + this.tmpMat4_ = ol.vec.Mat4.create(); + + /** + * @private + * @type {ol.renderer.webgl.defaultmapshader.Locations} + */ + this.defaultLocations_ = null; + + }; + ol.inherits(ol.renderer.webgl.Layer, ol.renderer.Layer); -/** - * @param {olx.FrameState} frameState Frame state. - * @param {ol.LayerState} layerState Layer state. - * @param {ol.webgl.Context} context Context. - */ -ol.renderer.webgl.Layer.prototype.composeFrame = function(frameState, layerState, context) { + /** + * @param {olx.FrameState} frameState Frame state. + * @param {number} framebufferDimension Framebuffer dimension. + * @protected + */ + ol.renderer.webgl.Layer.prototype.bindFramebuffer = function(frameState, framebufferDimension) { - this.dispatchComposeEvent_( - ol.render.EventType.PRECOMPOSE, context, frameState); + var gl = this.mapRenderer.getGL(); - context.bindBuffer(ol.webgl.ARRAY_BUFFER, this.arrayBuffer_); + if (this.framebufferDimension === undefined || + this.framebufferDimension != framebufferDimension) { + /** + * @param {WebGLRenderingContext} gl GL. + * @param {WebGLFramebuffer} framebuffer Framebuffer. + * @param {WebGLTexture} texture Texture. + */ + var postRenderFunction = function(gl, framebuffer, texture) { + if (!gl.isContextLost()) { + gl.deleteFramebuffer(framebuffer); + gl.deleteTexture(texture); + } + }.bind(null, gl, this.framebuffer, this.texture); - var gl = context.getGL(); + frameState.postRenderFunctions.push( + /** @type {ol.PostRenderFunction} */ (postRenderFunction) + ); - var fragmentShader = ol.renderer.webgl.defaultmapshader.fragment; - var vertexShader = ol.renderer.webgl.defaultmapshader.vertex; + var texture = ol.webgl.Context.createEmptyTexture( + gl, framebufferDimension, framebufferDimension); - var program = context.getProgram(fragmentShader, vertexShader); + var framebuffer = gl.createFramebuffer(); + gl.bindFramebuffer(ol.webgl.FRAMEBUFFER, framebuffer); + gl.framebufferTexture2D(ol.webgl.FRAMEBUFFER, + ol.webgl.COLOR_ATTACHMENT0, ol.webgl.TEXTURE_2D, texture, 0); - var locations; - if (!this.defaultLocations_) { - locations = - new ol.renderer.webgl.defaultmapshader.Locations(gl, program); - this.defaultLocations_ = locations; - } else { - locations = this.defaultLocations_; - } + this.texture = texture; + this.framebuffer = framebuffer; + this.framebufferDimension = framebufferDimension; - if (context.useProgram(program)) { - gl.enableVertexAttribArray(locations.a_position); - gl.vertexAttribPointer( - locations.a_position, 2, ol.webgl.FLOAT, false, 16, 0); - gl.enableVertexAttribArray(locations.a_texCoord); - gl.vertexAttribPointer( - locations.a_texCoord, 2, ol.webgl.FLOAT, false, 16, 8); - gl.uniform1i(locations.u_texture, 0); - } + } else { + gl.bindFramebuffer(ol.webgl.FRAMEBUFFER, this.framebuffer); + } - gl.uniformMatrix4fv(locations.u_texCoordMatrix, false, - ol.vec.Mat4.fromTransform(this.tmpMat4_, this.getTexCoordMatrix())); - gl.uniformMatrix4fv(locations.u_projectionMatrix, false, - ol.vec.Mat4.fromTransform(this.tmpMat4_, this.getProjectionMatrix())); - gl.uniform1f(locations.u_opacity, layerState.opacity); - gl.bindTexture(ol.webgl.TEXTURE_2D, this.getTexture()); - gl.drawArrays(ol.webgl.TRIANGLE_STRIP, 0, 4); - - this.dispatchComposeEvent_( - ol.render.EventType.POSTCOMPOSE, context, frameState); - -}; + }; -/** - * @param {ol.render.EventType} type Event type. - * @param {ol.webgl.Context} context WebGL context. - * @param {olx.FrameState} frameState Frame state. - * @private - */ -ol.renderer.webgl.Layer.prototype.dispatchComposeEvent_ = function(type, context, frameState) { - var layer = this.getLayer(); - if (layer.hasListener(type)) { - var viewState = frameState.viewState; - var resolution = viewState.resolution; - var pixelRatio = frameState.pixelRatio; - var extent = frameState.extent; - var center = viewState.center; - var rotation = viewState.rotation; - var size = frameState.size; + /** + * @param {olx.FrameState} frameState Frame state. + * @param {ol.LayerState} layerState Layer state. + * @param {ol.webgl.Context} context Context. + */ + ol.renderer.webgl.Layer.prototype.composeFrame = function(frameState, layerState, context) { - var render = new ol.render.webgl.Immediate( - context, center, resolution, rotation, size, extent, pixelRatio); - var composeEvent = new ol.render.Event( - type, render, frameState, null, context); - layer.dispatchEvent(composeEvent); - } -}; + this.dispatchComposeEvent_( + ol.render.EventType.PRECOMPOSE, context, frameState); + + context.bindBuffer(ol.webgl.ARRAY_BUFFER, this.arrayBuffer_); + + var gl = context.getGL(); + + var fragmentShader = ol.renderer.webgl.defaultmapshader.fragment; + var vertexShader = ol.renderer.webgl.defaultmapshader.vertex; + + var program = context.getProgram(fragmentShader, vertexShader); + + var locations; + if (!this.defaultLocations_) { + locations = + new ol.renderer.webgl.defaultmapshader.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, ol.webgl.FLOAT, false, 16, 0); + gl.enableVertexAttribArray(locations.a_texCoord); + gl.vertexAttribPointer( + locations.a_texCoord, 2, ol.webgl.FLOAT, false, 16, 8); + gl.uniform1i(locations.u_texture, 0); + } + + gl.uniformMatrix4fv(locations.u_texCoordMatrix, false, + ol.vec.Mat4.fromTransform(this.tmpMat4_, this.getTexCoordMatrix())); + gl.uniformMatrix4fv(locations.u_projectionMatrix, false, + ol.vec.Mat4.fromTransform(this.tmpMat4_, this.getProjectionMatrix())); + gl.uniform1f(locations.u_opacity, layerState.opacity); + gl.bindTexture(ol.webgl.TEXTURE_2D, this.getTexture()); + gl.drawArrays(ol.webgl.TRIANGLE_STRIP, 0, 4); + + this.dispatchComposeEvent_( + ol.render.EventType.POSTCOMPOSE, context, frameState); + + }; -/** - * @return {!ol.Transform} Matrix. - */ -ol.renderer.webgl.Layer.prototype.getTexCoordMatrix = function() { - return this.texCoordMatrix; -}; + /** + * @param {ol.render.EventType} type Event type. + * @param {ol.webgl.Context} context WebGL context. + * @param {olx.FrameState} frameState Frame state. + * @private + */ + ol.renderer.webgl.Layer.prototype.dispatchComposeEvent_ = function(type, context, frameState) { + var layer = this.getLayer(); + if (layer.hasListener(type)) { + var viewState = frameState.viewState; + var resolution = viewState.resolution; + var pixelRatio = frameState.pixelRatio; + var extent = frameState.extent; + var center = viewState.center; + var rotation = viewState.rotation; + var size = frameState.size; + + var render = new ol.render.webgl.Immediate( + context, center, resolution, rotation, size, extent, pixelRatio); + var composeEvent = new ol.render.Event( + type, render, frameState, null, context); + layer.dispatchEvent(composeEvent); + } + }; -/** - * @return {WebGLTexture} Texture. - */ -ol.renderer.webgl.Layer.prototype.getTexture = function() { - return this.texture; -}; + /** + * @return {!ol.Transform} Matrix. + */ + ol.renderer.webgl.Layer.prototype.getTexCoordMatrix = function() { + return this.texCoordMatrix; + }; -/** - * @return {!ol.Transform} Matrix. - */ -ol.renderer.webgl.Layer.prototype.getProjectionMatrix = function() { - return this.projectionMatrix; -}; + /** + * @return {WebGLTexture} Texture. + */ + ol.renderer.webgl.Layer.prototype.getTexture = function() { + return this.texture; + }; -/** - * Handle webglcontextlost. - */ -ol.renderer.webgl.Layer.prototype.handleWebGLContextLost = function() { - this.texture = null; - this.framebuffer = null; - this.framebufferDimension = undefined; -}; + /** + * @return {!ol.Transform} Matrix. + */ + ol.renderer.webgl.Layer.prototype.getProjectionMatrix = function() { + return this.projectionMatrix; + }; -/** - * @abstract - * @param {olx.FrameState} frameState Frame state. - * @param {ol.LayerState} layerState Layer state. - * @param {ol.webgl.Context} context Context. - * @return {boolean} whether composeFrame should be called. - */ -ol.renderer.webgl.Layer.prototype.prepareFrame = function(frameState, layerState, context) {}; + /** + * Handle webglcontextlost. + */ + ol.renderer.webgl.Layer.prototype.handleWebGLContextLost = function() { + this.texture = null; + this.framebuffer = null; + this.framebufferDimension = undefined; + }; -/** - * @abstract - * @param {ol.Pixel} pixel Pixel. - * @param {olx.FrameState} frameState FrameState. - * @param {function(this: S, ol.layer.Layer, (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 - */ -ol.renderer.webgl.Layer.prototype.forEachLayerAtPixel = function(pixel, frameState, callback, thisArg) {}; + /** + * @abstract + * @param {olx.FrameState} frameState Frame state. + * @param {ol.LayerState} layerState Layer state. + * @param {ol.webgl.Context} context Context. + * @return {boolean} whether composeFrame should be called. + */ + ol.renderer.webgl.Layer.prototype.prepareFrame = function(frameState, layerState, context) {}; + + + /** + * @abstract + * @param {ol.Pixel} pixel Pixel. + * @param {olx.FrameState} frameState FrameState. + * @param {function(this: S, ol.layer.Layer, (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 + */ + ol.renderer.webgl.Layer.prototype.forEachLayerAtPixel = function(pixel, frameState, callback, thisArg) {}; + +} diff --git a/src/ol/renderer/webgl/map.js b/src/ol/renderer/webgl/map.js index 84b2cf3b29..772992807e 100644 --- a/src/ol/renderer/webgl/map.js +++ b/src/ol/renderer/webgl/map.js @@ -21,551 +21,555 @@ goog.require('ol.webgl.Context'); goog.require('ol.webgl.ContextEventType'); -/** - * @constructor - * @extends {ol.renderer.Map} - * @param {Element} container Container. - * @param {ol.Map} map Map. - */ -ol.renderer.webgl.Map = function(container, map) { - ol.renderer.Map.call(this, container, map); +if (ol.ENABLE_WEBGL) { /** - * @private - * @type {HTMLCanvasElement} + * @constructor + * @extends {ol.renderer.Map} + * @param {Element} container Container. + * @param {ol.Map} map Map. */ - this.canvas_ = /** @type {HTMLCanvasElement} */ - (document.createElement('CANVAS')); - this.canvas_.style.width = '100%'; - this.canvas_.style.height = '100%'; - this.canvas_.className = ol.css.CLASS_UNSELECTABLE; - container.insertBefore(this.canvas_, container.childNodes[0] || null); + ol.renderer.webgl.Map = function(container, map) { + ol.renderer.Map.call(this, container, map); + + /** + * @private + * @type {HTMLCanvasElement} + */ + this.canvas_ = /** @type {HTMLCanvasElement} */ + (document.createElement('CANVAS')); + this.canvas_.style.width = '100%'; + this.canvas_.style.height = '100%'; + this.canvas_.className = ol.css.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_ = ol.dom.createCanvasContext2D(); + + /** + * @private + * @type {boolean} + */ + this.renderedVisible_ = true; + + /** + * @private + * @type {WebGLRenderingContext} + */ + this.gl_ = ol.webgl.getContext(this.canvas_, { + antialias: true, + depth: true, + failIfMajorPerformanceCaveat: true, + preserveDrawingBuffer: false, + stencil: true + }); + + /** + * @private + * @type {ol.webgl.Context} + */ + this.context_ = new ol.webgl.Context(this.canvas_, this.gl_); + + ol.events.listen(this.canvas_, ol.webgl.ContextEventType.LOST, + this.handleWebGLContextLost, this); + ol.events.listen(this.canvas_, ol.webgl.ContextEventType.RESTORED, + this.handleWebGLContextRestored, this); + + /** + * @private + * @type {ol.structs.LRUCache.} + */ + this.textureCache_ = new ol.structs.LRUCache(); + + /** + * @private + * @type {ol.Coordinate} + */ + this.focus_ = null; + + /** + * @private + * @type {ol.structs.PriorityQueue.} + */ + this.tileTextureQueue_ = new ol.structs.PriorityQueue( + /** + * @param {Array.<*>} element Element. + * @return {number} Priority. + * @this {ol.renderer.webgl.Map} + */ + (function(element) { + var tileCenter = /** @type {ol.Coordinate} */ (element[1]); + var tileResolution = /** @type {number} */ (element[2]); + var deltaX = tileCenter[0] - this.focus_[0]; + var 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 {ol.Tile} */ (element[0]).getKey(); + }); + + + /** + * @param {ol.Map} map Map. + * @param {?olx.FrameState} frameState Frame state. + * @return {boolean} false. + * @this {ol.renderer.webgl.Map} + */ + this.loadNextTileTexture_ = + function(map, frameState) { + if (!this.tileTextureQueue_.isEmpty()) { + this.tileTextureQueue_.reprioritize(); + var element = this.tileTextureQueue_.dequeue(); + var tile = /** @type {ol.Tile} */ (element[0]); + var tileSize = /** @type {ol.Size} */ (element[3]); + var tileGutter = /** @type {number} */ (element[4]); + this.bindTileTexture( + tile, tileSize, tileGutter, ol.webgl.LINEAR, ol.webgl.LINEAR); + } + return false; + }.bind(this); + + + /** + * @private + * @type {number} + */ + this.textureCacheFrameMarkerCount_ = 0; + + this.initializeGL_(); + }; + ol.inherits(ol.renderer.webgl.Map, ol.renderer.Map); + /** - * @private - * @type {number} + * @param {ol.Tile} tile Tile. + * @param {ol.Size} tileSize Tile size. + * @param {number} tileGutter Tile gutter. + * @param {number} magFilter Mag filter. + * @param {number} minFilter Min filter. */ - this.clipTileCanvasWidth_ = 0; - - /** - * @private - * @type {number} - */ - this.clipTileCanvasHeight_ = 0; - - /** - * @private - * @type {CanvasRenderingContext2D} - */ - this.clipTileContext_ = ol.dom.createCanvasContext2D(); - - /** - * @private - * @type {boolean} - */ - this.renderedVisible_ = true; - - /** - * @private - * @type {WebGLRenderingContext} - */ - this.gl_ = ol.webgl.getContext(this.canvas_, { - antialias: true, - depth: true, - failIfMajorPerformanceCaveat: true, - preserveDrawingBuffer: false, - stencil: true - }); - - /** - * @private - * @type {ol.webgl.Context} - */ - this.context_ = new ol.webgl.Context(this.canvas_, this.gl_); - - ol.events.listen(this.canvas_, ol.webgl.ContextEventType.LOST, - this.handleWebGLContextLost, this); - ol.events.listen(this.canvas_, ol.webgl.ContextEventType.RESTORED, - this.handleWebGLContextRestored, this); - - /** - * @private - * @type {ol.structs.LRUCache.} - */ - this.textureCache_ = new ol.structs.LRUCache(); - - /** - * @private - * @type {ol.Coordinate} - */ - this.focus_ = null; - - /** - * @private - * @type {ol.structs.PriorityQueue.} - */ - this.tileTextureQueue_ = new ol.structs.PriorityQueue( - /** - * @param {Array.<*>} element Element. - * @return {number} Priority. - * @this {ol.renderer.webgl.Map} - */ - (function(element) { - var tileCenter = /** @type {ol.Coordinate} */ (element[1]); - var tileResolution = /** @type {number} */ (element[2]); - var deltaX = tileCenter[0] - this.focus_[0]; - var 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 {ol.Tile} */ (element[0]).getKey(); + ol.renderer.webgl.Map.prototype.bindTileTexture = function(tile, tileSize, tileGutter, magFilter, minFilter) { + var gl = this.getGL(); + var tileKey = tile.getKey(); + if (this.textureCache_.containsKey(tileKey)) { + var textureCacheEntry = this.textureCache_.get(tileKey); + gl.bindTexture(ol.webgl.TEXTURE_2D, textureCacheEntry.texture); + if (textureCacheEntry.magFilter != magFilter) { + gl.texParameteri( + ol.webgl.TEXTURE_2D, ol.webgl.TEXTURE_MAG_FILTER, magFilter); + textureCacheEntry.magFilter = magFilter; + } + if (textureCacheEntry.minFilter != minFilter) { + gl.texParameteri( + ol.webgl.TEXTURE_2D, ol.webgl.TEXTURE_MIN_FILTER, minFilter); + textureCacheEntry.minFilter = minFilter; + } + } else { + var texture = gl.createTexture(); + gl.bindTexture(ol.webgl.TEXTURE_2D, texture); + if (tileGutter > 0) { + var clipTileCanvas = this.clipTileContext_.canvas; + var 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(tile.getImage(), tileGutter, tileGutter, + tileSize[0], tileSize[1], 0, 0, tileSize[0], tileSize[1]); + gl.texImage2D(ol.webgl.TEXTURE_2D, 0, + ol.webgl.RGBA, ol.webgl.RGBA, + ol.webgl.UNSIGNED_BYTE, clipTileCanvas); + } else { + gl.texImage2D(ol.webgl.TEXTURE_2D, 0, + ol.webgl.RGBA, ol.webgl.RGBA, + ol.webgl.UNSIGNED_BYTE, tile.getImage()); + } + gl.texParameteri( + ol.webgl.TEXTURE_2D, ol.webgl.TEXTURE_MAG_FILTER, magFilter); + gl.texParameteri( + ol.webgl.TEXTURE_2D, ol.webgl.TEXTURE_MIN_FILTER, minFilter); + gl.texParameteri(ol.webgl.TEXTURE_2D, ol.webgl.TEXTURE_WRAP_S, + ol.webgl.CLAMP_TO_EDGE); + gl.texParameteri(ol.webgl.TEXTURE_2D, ol.webgl.TEXTURE_WRAP_T, + ol.webgl.CLAMP_TO_EDGE); + this.textureCache_.set(tileKey, { + texture: texture, + magFilter: magFilter, + minFilter: minFilter }); + } + }; + + + /** + * @param {ol.render.EventType} type Event type. + * @param {olx.FrameState} frameState Frame state. + * @private + */ + ol.renderer.webgl.Map.prototype.dispatchComposeEvent_ = function(type, frameState) { + var map = this.getMap(); + if (map.hasListener(type)) { + var context = this.context_; + + var extent = frameState.extent; + var size = frameState.size; + var viewState = frameState.viewState; + var pixelRatio = frameState.pixelRatio; + + var resolution = viewState.resolution; + var center = viewState.center; + var rotation = viewState.rotation; + + var vectorContext = new ol.render.webgl.Immediate(context, + center, resolution, rotation, size, extent, pixelRatio); + var composeEvent = new ol.render.Event(type, vectorContext, + frameState, null, context); + map.dispatchEvent(composeEvent); + } + }; + + + /** + * @inheritDoc + */ + ol.renderer.webgl.Map.prototype.disposeInternal = function() { + var gl = this.getGL(); + if (!gl.isContextLost()) { + this.textureCache_.forEach( + /** + * @param {?ol.WebglTextureCacheEntry} textureCacheEntry + * Texture cache entry. + */ + function(textureCacheEntry) { + if (textureCacheEntry) { + gl.deleteTexture(textureCacheEntry.texture); + } + }); + } + this.context_.dispose(); + ol.renderer.Map.prototype.disposeInternal.call(this); + }; /** * @param {ol.Map} map Map. - * @param {?olx.FrameState} frameState Frame state. - * @return {boolean} false. - * @this {ol.renderer.webgl.Map} + * @param {olx.FrameState} frameState Frame state. + * @private */ - this.loadNextTileTexture_ = - function(map, frameState) { - if (!this.tileTextureQueue_.isEmpty()) { - this.tileTextureQueue_.reprioritize(); - var element = this.tileTextureQueue_.dequeue(); - var tile = /** @type {ol.Tile} */ (element[0]); - var tileSize = /** @type {ol.Size} */ (element[3]); - var tileGutter = /** @type {number} */ (element[4]); - this.bindTileTexture( - tile, tileSize, tileGutter, ol.webgl.LINEAR, ol.webgl.LINEAR); + ol.renderer.webgl.Map.prototype.expireCache_ = function(map, frameState) { + var gl = this.getGL(); + var textureCacheEntry; + while (this.textureCache_.getCount() - this.textureCacheFrameMarkerCount_ > + ol.WEBGL_TEXTURE_CACHE_HIGH_WATER_MARK) { + textureCacheEntry = this.textureCache_.peekLast(); + if (!textureCacheEntry) { + if (+this.textureCache_.peekLastKey() == frameState.index) { + break; + } else { + --this.textureCacheFrameMarkerCount_; } - return false; - }.bind(this); + } else { + gl.deleteTexture(textureCacheEntry.texture); + } + this.textureCache_.pop(); + } + }; + + + /** + * @return {ol.webgl.Context} The context. + */ + ol.renderer.webgl.Map.prototype.getContext = function() { + return this.context_; + }; + + + /** + * @return {WebGLRenderingContext} GL. + */ + ol.renderer.webgl.Map.prototype.getGL = function() { + return this.gl_; + }; + + + /** + * @return {ol.structs.PriorityQueue.} Tile texture queue. + */ + ol.renderer.webgl.Map.prototype.getTileTextureQueue = function() { + return this.tileTextureQueue_; + }; + + + /** + * @inheritDoc + */ + ol.renderer.webgl.Map.prototype.getType = function() { + return ol.renderer.Type.WEBGL; + }; + + + /** + * @param {ol.events.Event} event Event. + * @protected + */ + ol.renderer.webgl.Map.prototype.handleWebGLContextLost = function(event) { + event.preventDefault(); + this.textureCache_.clear(); + this.textureCacheFrameMarkerCount_ = 0; + + var renderers = this.getLayerRenderers(); + for (var id in renderers) { + var renderer = /** @type {ol.renderer.webgl.Layer} */ (renderers[id]); + renderer.handleWebGLContextLost(); + } + }; + + + /** + * @protected + */ + ol.renderer.webgl.Map.prototype.handleWebGLContextRestored = function() { + this.initializeGL_(); + this.getMap().render(); + }; /** * @private - * @type {number} */ - this.textureCacheFrameMarkerCount_ = 0; - - this.initializeGL_(); -}; -ol.inherits(ol.renderer.webgl.Map, ol.renderer.Map); + ol.renderer.webgl.Map.prototype.initializeGL_ = function() { + var gl = this.gl_; + gl.activeTexture(ol.webgl.TEXTURE0); + gl.blendFuncSeparate( + ol.webgl.SRC_ALPHA, ol.webgl.ONE_MINUS_SRC_ALPHA, + ol.webgl.ONE, ol.webgl.ONE_MINUS_SRC_ALPHA); + gl.disable(ol.webgl.CULL_FACE); + gl.disable(ol.webgl.DEPTH_TEST); + gl.disable(ol.webgl.SCISSOR_TEST); + gl.disable(ol.webgl.STENCIL_TEST); + }; -/** - * @param {ol.Tile} tile Tile. - * @param {ol.Size} tileSize Tile size. - * @param {number} tileGutter Tile gutter. - * @param {number} magFilter Mag filter. - * @param {number} minFilter Min filter. - */ -ol.renderer.webgl.Map.prototype.bindTileTexture = function(tile, tileSize, tileGutter, magFilter, minFilter) { - var gl = this.getGL(); - var tileKey = tile.getKey(); - if (this.textureCache_.containsKey(tileKey)) { - var textureCacheEntry = this.textureCache_.get(tileKey); - gl.bindTexture(ol.webgl.TEXTURE_2D, textureCacheEntry.texture); - if (textureCacheEntry.magFilter != magFilter) { - gl.texParameteri( - ol.webgl.TEXTURE_2D, ol.webgl.TEXTURE_MAG_FILTER, magFilter); - textureCacheEntry.magFilter = magFilter; + /** + * @param {ol.Tile} tile Tile. + * @return {boolean} Is tile texture loaded. + */ + ol.renderer.webgl.Map.prototype.isTileTextureLoaded = function(tile) { + return this.textureCache_.containsKey(tile.getKey()); + }; + + + /** + * @inheritDoc + */ + ol.renderer.webgl.Map.prototype.renderFrame = function(frameState) { + + var context = this.getContext(); + var gl = this.getGL(); + + if (gl.isContextLost()) { + return false; } - if (textureCacheEntry.minFilter != minFilter) { - gl.texParameteri( - ol.webgl.TEXTURE_2D, ol.webgl.TEXTURE_MIN_FILTER, minFilter); - textureCacheEntry.minFilter = minFilter; - } - } else { - var texture = gl.createTexture(); - gl.bindTexture(ol.webgl.TEXTURE_2D, texture); - if (tileGutter > 0) { - var clipTileCanvas = this.clipTileContext_.canvas; - var 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]); + + if (!frameState) { + if (this.renderedVisible_) { + this.canvas_.style.display = 'none'; + this.renderedVisible_ = false; } - clipTileContext.drawImage(tile.getImage(), tileGutter, tileGutter, - tileSize[0], tileSize[1], 0, 0, tileSize[0], tileSize[1]); - gl.texImage2D(ol.webgl.TEXTURE_2D, 0, - ol.webgl.RGBA, ol.webgl.RGBA, - ol.webgl.UNSIGNED_BYTE, clipTileCanvas); - } else { - gl.texImage2D(ol.webgl.TEXTURE_2D, 0, - ol.webgl.RGBA, ol.webgl.RGBA, - ol.webgl.UNSIGNED_BYTE, tile.getImage()); + return false; } - gl.texParameteri( - ol.webgl.TEXTURE_2D, ol.webgl.TEXTURE_MAG_FILTER, magFilter); - gl.texParameteri( - ol.webgl.TEXTURE_2D, ol.webgl.TEXTURE_MIN_FILTER, minFilter); - gl.texParameteri(ol.webgl.TEXTURE_2D, ol.webgl.TEXTURE_WRAP_S, - ol.webgl.CLAMP_TO_EDGE); - gl.texParameteri(ol.webgl.TEXTURE_2D, ol.webgl.TEXTURE_WRAP_T, - ol.webgl.CLAMP_TO_EDGE); - this.textureCache_.set(tileKey, { - texture: texture, - magFilter: magFilter, - minFilter: minFilter - }); - } -}; + this.focus_ = frameState.focus; -/** - * @param {ol.render.EventType} type Event type. - * @param {olx.FrameState} frameState Frame state. - * @private - */ -ol.renderer.webgl.Map.prototype.dispatchComposeEvent_ = function(type, frameState) { - var map = this.getMap(); - if (map.hasListener(type)) { - var context = this.context_; + this.textureCache_.set((-frameState.index).toString(), null); + ++this.textureCacheFrameMarkerCount_; - var extent = frameState.extent; - var size = frameState.size; - var viewState = frameState.viewState; - var pixelRatio = frameState.pixelRatio; + this.dispatchComposeEvent_(ol.render.EventType.PRECOMPOSE, frameState); - var resolution = viewState.resolution; - var center = viewState.center; - var rotation = viewState.rotation; + /** @type {Array.} */ + var layerStatesToDraw = []; + var layerStatesArray = frameState.layerStatesArray; + ol.array.stableSort(layerStatesArray, ol.renderer.Map.sortByZIndex); - var vectorContext = new ol.render.webgl.Immediate(context, - center, resolution, rotation, size, extent, pixelRatio); - var composeEvent = new ol.render.Event(type, vectorContext, - frameState, null, context); - map.dispatchEvent(composeEvent); - } -}; - - -/** - * @inheritDoc - */ -ol.renderer.webgl.Map.prototype.disposeInternal = function() { - var gl = this.getGL(); - if (!gl.isContextLost()) { - this.textureCache_.forEach( - /** - * @param {?ol.WebglTextureCacheEntry} textureCacheEntry - * Texture cache entry. - */ - function(textureCacheEntry) { - if (textureCacheEntry) { - gl.deleteTexture(textureCacheEntry.texture); - } - }); - } - this.context_.dispose(); - ol.renderer.Map.prototype.disposeInternal.call(this); -}; - - -/** - * @param {ol.Map} map Map. - * @param {olx.FrameState} frameState Frame state. - * @private - */ -ol.renderer.webgl.Map.prototype.expireCache_ = function(map, frameState) { - var gl = this.getGL(); - var textureCacheEntry; - while (this.textureCache_.getCount() - this.textureCacheFrameMarkerCount_ > - ol.WEBGL_TEXTURE_CACHE_HIGH_WATER_MARK) { - textureCacheEntry = this.textureCache_.peekLast(); - if (!textureCacheEntry) { - if (+this.textureCache_.peekLastKey() == frameState.index) { - break; - } else { - --this.textureCacheFrameMarkerCount_; + var viewResolution = frameState.viewState.resolution; + var i, ii, layerRenderer, layerState; + for (i = 0, ii = layerStatesArray.length; i < ii; ++i) { + layerState = layerStatesArray[i]; + if (ol.layer.Layer.visibleAtResolution(layerState, viewResolution) && + layerState.sourceState == ol.source.State.READY) { + layerRenderer = /** @type {ol.renderer.webgl.Layer} */ (this.getLayerRenderer(layerState.layer)); + if (layerRenderer.prepareFrame(frameState, layerState, context)) { + layerStatesToDraw.push(layerState); + } } - } else { - gl.deleteTexture(textureCacheEntry.texture); } - this.textureCache_.pop(); - } -}; - -/** - * @return {ol.webgl.Context} The context. - */ -ol.renderer.webgl.Map.prototype.getContext = function() { - return this.context_; -}; - - -/** - * @return {WebGLRenderingContext} GL. - */ -ol.renderer.webgl.Map.prototype.getGL = function() { - return this.gl_; -}; - - -/** - * @return {ol.structs.PriorityQueue.} Tile texture queue. - */ -ol.renderer.webgl.Map.prototype.getTileTextureQueue = function() { - return this.tileTextureQueue_; -}; - - -/** - * @inheritDoc - */ -ol.renderer.webgl.Map.prototype.getType = function() { - return ol.renderer.Type.WEBGL; -}; - - -/** - * @param {ol.events.Event} event Event. - * @protected - */ -ol.renderer.webgl.Map.prototype.handleWebGLContextLost = function(event) { - event.preventDefault(); - this.textureCache_.clear(); - this.textureCacheFrameMarkerCount_ = 0; - - var renderers = this.getLayerRenderers(); - for (var id in renderers) { - var renderer = /** @type {ol.renderer.webgl.Layer} */ (renderers[id]); - renderer.handleWebGLContextLost(); - } -}; - - -/** - * @protected - */ -ol.renderer.webgl.Map.prototype.handleWebGLContextRestored = function() { - this.initializeGL_(); - this.getMap().render(); -}; - - -/** - * @private - */ -ol.renderer.webgl.Map.prototype.initializeGL_ = function() { - var gl = this.gl_; - gl.activeTexture(ol.webgl.TEXTURE0); - gl.blendFuncSeparate( - ol.webgl.SRC_ALPHA, ol.webgl.ONE_MINUS_SRC_ALPHA, - ol.webgl.ONE, ol.webgl.ONE_MINUS_SRC_ALPHA); - gl.disable(ol.webgl.CULL_FACE); - gl.disable(ol.webgl.DEPTH_TEST); - gl.disable(ol.webgl.SCISSOR_TEST); - gl.disable(ol.webgl.STENCIL_TEST); -}; - - -/** - * @param {ol.Tile} tile Tile. - * @return {boolean} Is tile texture loaded. - */ -ol.renderer.webgl.Map.prototype.isTileTextureLoaded = function(tile) { - return this.textureCache_.containsKey(tile.getKey()); -}; - - -/** - * @inheritDoc - */ -ol.renderer.webgl.Map.prototype.renderFrame = function(frameState) { - - var context = this.getContext(); - var gl = this.getGL(); - - if (gl.isContextLost()) { - return false; - } - - if (!frameState) { - if (this.renderedVisible_) { - this.canvas_.style.display = 'none'; - this.renderedVisible_ = false; + var width = frameState.size[0] * frameState.pixelRatio; + var height = frameState.size[1] * frameState.pixelRatio; + if (this.canvas_.width != width || this.canvas_.height != height) { + this.canvas_.width = width; + this.canvas_.height = height; } - return false; - } - this.focus_ = frameState.focus; + gl.bindFramebuffer(ol.webgl.FRAMEBUFFER, null); - this.textureCache_.set((-frameState.index).toString(), null); - ++this.textureCacheFrameMarkerCount_; + gl.clearColor(0, 0, 0, 0); + gl.clear(ol.webgl.COLOR_BUFFER_BIT); + gl.enable(ol.webgl.BLEND); + gl.viewport(0, 0, this.canvas_.width, this.canvas_.height); - this.dispatchComposeEvent_(ol.render.EventType.PRECOMPOSE, frameState); - - /** @type {Array.} */ - var layerStatesToDraw = []; - var layerStatesArray = frameState.layerStatesArray; - ol.array.stableSort(layerStatesArray, ol.renderer.Map.sortByZIndex); - - var viewResolution = frameState.viewState.resolution; - var i, ii, layerRenderer, layerState; - for (i = 0, ii = layerStatesArray.length; i < ii; ++i) { - layerState = layerStatesArray[i]; - if (ol.layer.Layer.visibleAtResolution(layerState, viewResolution) && - layerState.sourceState == ol.source.State.READY) { + for (i = 0, ii = layerStatesToDraw.length; i < ii; ++i) { + layerState = layerStatesToDraw[i]; layerRenderer = /** @type {ol.renderer.webgl.Layer} */ (this.getLayerRenderer(layerState.layer)); - if (layerRenderer.prepareFrame(frameState, layerState, context)) { - layerStatesToDraw.push(layerState); + layerRenderer.composeFrame(frameState, layerState, context); + } + + if (!this.renderedVisible_) { + this.canvas_.style.display = ''; + this.renderedVisible_ = true; + } + + this.calculateMatrices2D(frameState); + + if (this.textureCache_.getCount() - this.textureCacheFrameMarkerCount_ > + ol.WEBGL_TEXTURE_CACHE_HIGH_WATER_MARK) { + frameState.postRenderFunctions.push( + /** @type {ol.PostRenderFunction} */ (this.expireCache_.bind(this)) + ); + } + + if (!this.tileTextureQueue_.isEmpty()) { + frameState.postRenderFunctions.push(this.loadNextTileTexture_); + frameState.animate = true; + } + + this.dispatchComposeEvent_(ol.render.EventType.POSTCOMPOSE, frameState); + + this.scheduleRemoveUnusedLayerRenderers(frameState); + this.scheduleExpireIconCache(frameState); + + }; + + + /** + * @inheritDoc + */ + ol.renderer.webgl.Map.prototype.forEachFeatureAtCoordinate = function(coordinate, frameState, hitTolerance, callback, thisArg, + layerFilter, thisArg2) { + var result; + + if (this.getGL().isContextLost()) { + return false; + } + + var viewState = frameState.viewState; + + var layerStates = frameState.layerStatesArray; + var numLayers = layerStates.length; + var i; + for (i = numLayers - 1; i >= 0; --i) { + var layerState = layerStates[i]; + var layer = layerState.layer; + if (ol.layer.Layer.visibleAtResolution(layerState, viewState.resolution) && + layerFilter.call(thisArg2, layer)) { + var layerRenderer = this.getLayerRenderer(layer); + result = layerRenderer.forEachFeatureAtCoordinate( + coordinate, frameState, hitTolerance, callback, thisArg); + if (result) { + return result; + } } } - } - - var width = frameState.size[0] * frameState.pixelRatio; - var 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(ol.webgl.FRAMEBUFFER, null); - - gl.clearColor(0, 0, 0, 0); - gl.clear(ol.webgl.COLOR_BUFFER_BIT); - gl.enable(ol.webgl.BLEND); - gl.viewport(0, 0, this.canvas_.width, this.canvas_.height); - - for (i = 0, ii = layerStatesToDraw.length; i < ii; ++i) { - layerState = layerStatesToDraw[i]; - layerRenderer = /** @type {ol.renderer.webgl.Layer} */ (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_ > - ol.WEBGL_TEXTURE_CACHE_HIGH_WATER_MARK) { - frameState.postRenderFunctions.push( - /** @type {ol.PostRenderFunction} */ (this.expireCache_.bind(this)) - ); - } - - if (!this.tileTextureQueue_.isEmpty()) { - frameState.postRenderFunctions.push(this.loadNextTileTexture_); - frameState.animate = true; - } - - this.dispatchComposeEvent_(ol.render.EventType.POSTCOMPOSE, frameState); - - this.scheduleRemoveUnusedLayerRenderers(frameState); - this.scheduleExpireIconCache(frameState); - -}; + return undefined; + }; -/** - * @inheritDoc - */ -ol.renderer.webgl.Map.prototype.forEachFeatureAtCoordinate = function(coordinate, frameState, hitTolerance, callback, thisArg, - layerFilter, thisArg2) { - var result; + /** + * @inheritDoc + */ + ol.renderer.webgl.Map.prototype.hasFeatureAtCoordinate = function(coordinate, frameState, hitTolerance, layerFilter, thisArg) { + var hasFeature = false; - if (this.getGL().isContextLost()) { - return false; - } + if (this.getGL().isContextLost()) { + return false; + } - var viewState = frameState.viewState; + var viewState = frameState.viewState; - var layerStates = frameState.layerStatesArray; - var numLayers = layerStates.length; - var i; - for (i = numLayers - 1; i >= 0; --i) { - var layerState = layerStates[i]; - var layer = layerState.layer; - if (ol.layer.Layer.visibleAtResolution(layerState, viewState.resolution) && - layerFilter.call(thisArg2, layer)) { - var layerRenderer = this.getLayerRenderer(layer); - result = layerRenderer.forEachFeatureAtCoordinate( - coordinate, frameState, hitTolerance, callback, thisArg); - if (result) { - return result; + var layerStates = frameState.layerStatesArray; + var numLayers = layerStates.length; + var i; + for (i = numLayers - 1; i >= 0; --i) { + var layerState = layerStates[i]; + var layer = layerState.layer; + if (ol.layer.Layer.visibleAtResolution(layerState, viewState.resolution) && + layerFilter.call(thisArg, layer)) { + var layerRenderer = this.getLayerRenderer(layer); + hasFeature = + layerRenderer.hasFeatureAtCoordinate(coordinate, frameState); + if (hasFeature) { + return true; + } } } - } - return undefined; -}; + return hasFeature; + }; -/** - * @inheritDoc - */ -ol.renderer.webgl.Map.prototype.hasFeatureAtCoordinate = function(coordinate, frameState, hitTolerance, layerFilter, thisArg) { - var hasFeature = false; + /** + * @inheritDoc + */ + ol.renderer.webgl.Map.prototype.forEachLayerAtPixel = function(pixel, frameState, callback, thisArg, + layerFilter, thisArg2) { + if (this.getGL().isContextLost()) { + return false; + } - if (this.getGL().isContextLost()) { - return false; - } + var viewState = frameState.viewState; + var result; - var viewState = frameState.viewState; - - var layerStates = frameState.layerStatesArray; - var numLayers = layerStates.length; - var i; - for (i = numLayers - 1; i >= 0; --i) { - var layerState = layerStates[i]; - var layer = layerState.layer; - if (ol.layer.Layer.visibleAtResolution(layerState, viewState.resolution) && - layerFilter.call(thisArg, layer)) { - var layerRenderer = this.getLayerRenderer(layer); - hasFeature = - layerRenderer.hasFeatureAtCoordinate(coordinate, frameState); - if (hasFeature) { - return true; + var layerStates = frameState.layerStatesArray; + var numLayers = layerStates.length; + var i; + for (i = numLayers - 1; i >= 0; --i) { + var layerState = layerStates[i]; + var layer = layerState.layer; + if (ol.layer.Layer.visibleAtResolution(layerState, viewState.resolution) && + layerFilter.call(thisArg, layer)) { + var layerRenderer = /** @type {ol.renderer.webgl.Layer} */ (this.getLayerRenderer(layer)); + result = layerRenderer.forEachLayerAtPixel( + pixel, frameState, callback, thisArg); + if (result) { + return result; + } } } - } - return hasFeature; -}; + return undefined; + }; - -/** - * @inheritDoc - */ -ol.renderer.webgl.Map.prototype.forEachLayerAtPixel = function(pixel, frameState, callback, thisArg, - layerFilter, thisArg2) { - if (this.getGL().isContextLost()) { - return false; - } - - var viewState = frameState.viewState; - var result; - - var layerStates = frameState.layerStatesArray; - var numLayers = layerStates.length; - var i; - for (i = numLayers - 1; i >= 0; --i) { - var layerState = layerStates[i]; - var layer = layerState.layer; - if (ol.layer.Layer.visibleAtResolution(layerState, viewState.resolution) && - layerFilter.call(thisArg, layer)) { - var layerRenderer = /** @type {ol.renderer.webgl.Layer} */ (this.getLayerRenderer(layer)); - result = layerRenderer.forEachLayerAtPixel( - pixel, frameState, callback, thisArg); - if (result) { - return result; - } - } - } - return undefined; -}; +} diff --git a/src/ol/renderer/webgl/tilelayer.js b/src/ol/renderer/webgl/tilelayer.js index 0621ef6fff..45667be6c5 100644 --- a/src/ol/renderer/webgl/tilelayer.js +++ b/src/ol/renderer/webgl/tilelayer.js @@ -17,373 +17,377 @@ goog.require('ol.webgl'); goog.require('ol.webgl.Buffer'); -/** - * @constructor - * @extends {ol.renderer.webgl.Layer} - * @param {ol.renderer.webgl.Map} mapRenderer Map renderer. - * @param {ol.layer.Tile} tileLayer Tile layer. - */ -ol.renderer.webgl.TileLayer = function(mapRenderer, tileLayer) { - - ol.renderer.webgl.Layer.call(this, mapRenderer, tileLayer); +if (ol.ENABLE_WEBGL) { /** - * @private - * @type {ol.webgl.Fragment} + * @constructor + * @extends {ol.renderer.webgl.Layer} + * @param {ol.renderer.webgl.Map} mapRenderer Map renderer. + * @param {ol.layer.Tile} tileLayer Tile layer. */ - this.fragmentShader_ = ol.renderer.webgl.tilelayershader.fragment; + ol.renderer.webgl.TileLayer = function(mapRenderer, tileLayer) { - /** - * @private - * @type {ol.webgl.Vertex} - */ - this.vertexShader_ = ol.renderer.webgl.tilelayershader.vertex; - - /** - * @private - * @type {ol.renderer.webgl.tilelayershader.Locations} - */ - this.locations_ = null; - - /** - * @private - * @type {ol.webgl.Buffer} - */ - this.renderArrayBuffer_ = new ol.webgl.Buffer([ - 0, 0, 0, 1, - 1, 0, 1, 1, - 0, 1, 0, 0, - 1, 1, 1, 0 - ]); - - /** - * @private - * @type {ol.TileRange} - */ - this.renderedTileRange_ = null; - - /** - * @private - * @type {ol.Extent} - */ - this.renderedFramebufferExtent_ = null; - - /** - * @private - * @type {number} - */ - this.renderedRevision_ = -1; - - /** - * @private - * @type {ol.Size} - */ - this.tmpSize_ = [0, 0]; - -}; -ol.inherits(ol.renderer.webgl.TileLayer, ol.renderer.webgl.Layer); - - -/** - * @inheritDoc - */ -ol.renderer.webgl.TileLayer.prototype.disposeInternal = function() { - var context = this.mapRenderer.getContext(); - context.deleteBuffer(this.renderArrayBuffer_); - ol.renderer.webgl.Layer.prototype.disposeInternal.call(this); -}; - - -/** - * Create a function that adds loaded tiles to the tile lookup. - * @param {ol.source.Tile} source Tile source. - * @param {ol.proj.Projection} projection Projection of the tiles. - * @param {Object.>} tiles Lookup of loaded - * tiles by zoom level. - * @return {function(number, ol.TileRange):boolean} A function that can be - * called with a zoom level and a tile range to add loaded tiles to the - * lookup. - * @protected - */ -ol.renderer.webgl.TileLayer.prototype.createLoadedTileFinder = function(source, projection, tiles) { - var mapRenderer = this.mapRenderer; - - return ( - /** - * @param {number} zoom Zoom level. - * @param {ol.TileRange} tileRange Tile range. - * @return {boolean} The tile range is fully loaded. - */ - function(zoom, tileRange) { - function callback(tile) { - var 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 - */ -ol.renderer.webgl.TileLayer.prototype.handleWebGLContextLost = function() { - ol.renderer.webgl.Layer.prototype.handleWebGLContextLost.call(this); - this.locations_ = null; -}; - - -/** - * @inheritDoc - */ -ol.renderer.webgl.TileLayer.prototype.prepareFrame = function(frameState, layerState, context) { - - var mapRenderer = this.mapRenderer; - var gl = context.getGL(); - - var viewState = frameState.viewState; - var projection = viewState.projection; - - var tileLayer = /** @type {ol.layer.Tile} */ (this.getLayer()); - var tileSource = tileLayer.getSource(); - var tileGrid = tileSource.getTileGridForProjection(projection); - var z = tileGrid.getZForResolution(viewState.resolution); - var tileResolution = tileGrid.getResolution(z); - - var tilePixelSize = - tileSource.getTilePixelSize(z, frameState.pixelRatio, projection); - var pixelRatio = tilePixelSize[0] / - ol.size.toSize(tileGrid.getTileSize(z), this.tmpSize_)[0]; - var tilePixelResolution = tileResolution / pixelRatio; - var tileGutter = tileSource.getTilePixelRatio(pixelRatio) * tileSource.getGutter(projection); - - var center = viewState.center; - var extent = frameState.extent; - var tileRange = tileGrid.getTileRangeForExtentAndResolution( - extent, tileResolution); - - var framebufferExtent; - if (this.renderedTileRange_ && - this.renderedTileRange_.equals(tileRange) && - this.renderedRevision_ == tileSource.getRevision()) { - framebufferExtent = this.renderedFramebufferExtent_; - } else { - - var tileRangeSize = tileRange.getSize(); - - var maxDimension = Math.max( - tileRangeSize[0] * tilePixelSize[0], - tileRangeSize[1] * tilePixelSize[1]); - var framebufferDimension = ol.math.roundUpToPowerOfTwo(maxDimension); - var framebufferExtentDimension = tilePixelResolution * framebufferDimension; - var origin = tileGrid.getOrigin(z); - var minX = origin[0] + - tileRange.minX * tilePixelSize[0] * tilePixelResolution; - var 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(ol.webgl.COLOR_BUFFER_BIT); - gl.disable(ol.webgl.BLEND); - - var program = context.getProgram(this.fragmentShader_, this.vertexShader_); - context.useProgram(program); - if (!this.locations_) { - this.locations_ = - new ol.renderer.webgl.tilelayershader.Locations(gl, program); - } - - context.bindBuffer(ol.webgl.ARRAY_BUFFER, this.renderArrayBuffer_); - gl.enableVertexAttribArray(this.locations_.a_position); - gl.vertexAttribPointer( - this.locations_.a_position, 2, ol.webgl.FLOAT, false, 16, 0); - gl.enableVertexAttribArray(this.locations_.a_texCoord); - gl.vertexAttribPointer( - this.locations_.a_texCoord, 2, ol.webgl.FLOAT, false, 16, 8); - gl.uniform1i(this.locations_.u_texture, 0); + ol.renderer.webgl.Layer.call(this, mapRenderer, tileLayer); /** - * @type {Object.>} + * @private + * @type {ol.webgl.Fragment} */ - var tilesToDrawByZ = {}; - tilesToDrawByZ[z] = {}; + this.fragmentShader_ = ol.renderer.webgl.tilelayershader.fragment; - var findLoadedTiles = this.createLoadedTileFinder( - tileSource, projection, tilesToDrawByZ); + /** + * @private + * @type {ol.webgl.Vertex} + */ + this.vertexShader_ = ol.renderer.webgl.tilelayershader.vertex; - var useInterimTilesOnError = tileLayer.getUseInterimTilesOnError(); - var allTilesLoaded = true; - var tmpExtent = ol.extent.createEmpty(); - var tmpTileRange = new ol.TileRange(0, 0, 0, 0); - var childTileRange, drawable, fullyLoaded, tile, tileState; - var x, y, tileExtent; - for (x = tileRange.minX; x <= tileRange.maxX; ++x) { - for (y = tileRange.minY; y <= tileRange.maxY; ++y) { + /** + * @private + * @type {ol.renderer.webgl.tilelayershader.Locations} + */ + this.locations_ = null; - tile = tileSource.getTile(z, x, y, pixelRatio, projection); - if (layerState.extent !== undefined) { - // ignore tiles outside layer extent - tileExtent = tileGrid.getTileCoordExtent(tile.tileCoord, tmpExtent); - if (!ol.extent.intersects(tileExtent, layerState.extent)) { - continue; + /** + * @private + * @type {ol.webgl.Buffer} + */ + this.renderArrayBuffer_ = new ol.webgl.Buffer([ + 0, 0, 0, 1, + 1, 0, 1, 1, + 0, 1, 0, 0, + 1, 1, 1, 0 + ]); + + /** + * @private + * @type {ol.TileRange} + */ + this.renderedTileRange_ = null; + + /** + * @private + * @type {ol.Extent} + */ + this.renderedFramebufferExtent_ = null; + + /** + * @private + * @type {number} + */ + this.renderedRevision_ = -1; + + /** + * @private + * @type {ol.Size} + */ + this.tmpSize_ = [0, 0]; + + }; + ol.inherits(ol.renderer.webgl.TileLayer, ol.renderer.webgl.Layer); + + + /** + * @inheritDoc + */ + ol.renderer.webgl.TileLayer.prototype.disposeInternal = function() { + var context = this.mapRenderer.getContext(); + context.deleteBuffer(this.renderArrayBuffer_); + ol.renderer.webgl.Layer.prototype.disposeInternal.call(this); + }; + + + /** + * Create a function that adds loaded tiles to the tile lookup. + * @param {ol.source.Tile} source Tile source. + * @param {ol.proj.Projection} projection Projection of the tiles. + * @param {Object.>} tiles Lookup of loaded + * tiles by zoom level. + * @return {function(number, ol.TileRange):boolean} A function that can be + * called with a zoom level and a tile range to add loaded tiles to the + * lookup. + * @protected + */ + ol.renderer.webgl.TileLayer.prototype.createLoadedTileFinder = function(source, projection, tiles) { + var mapRenderer = this.mapRenderer; + + return ( + /** + * @param {number} zoom Zoom level. + * @param {ol.TileRange} tileRange Tile range. + * @return {boolean} The tile range is fully loaded. + */ + function(zoom, tileRange) { + function callback(tile) { + var loaded = mapRenderer.isTileTextureLoaded(tile); + if (loaded) { + if (!tiles[zoom]) { + tiles[zoom] = {}; + } + tiles[zoom][tile.tileCoord.toString()] = tile; + } + return loaded; } - } - tileState = tile.getState(); - drawable = tileState == ol.TileState.LOADED || - tileState == ol.TileState.EMPTY || - tileState == ol.TileState.ERROR && !useInterimTilesOnError; - if (!drawable) { - tile = tile.getInterimTile(); - } - tileState = tile.getState(); - if (tileState == ol.TileState.LOADED) { - if (mapRenderer.isTileTextureLoaded(tile)) { - tilesToDrawByZ[z][tile.tileCoord.toString()] = tile; - continue; - } - } else if (tileState == ol.TileState.EMPTY || - (tileState == ol.TileState.ERROR && - !useInterimTilesOnError)) { - continue; - } + return source.forEachLoadedTile(projection, zoom, tileRange, callback); + }); + }; - 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); - } - } - } + /** + * @inheritDoc + */ + ol.renderer.webgl.TileLayer.prototype.handleWebGLContextLost = function() { + ol.renderer.webgl.Layer.prototype.handleWebGLContextLost.call(this); + this.locations_ = null; + }; - } - /** @type {Array.} */ - var zs = Object.keys(tilesToDrawByZ).map(Number); - zs.sort(ol.array.numberSafeCompareFunction); - var u_tileOffset = new Float32Array(4); - var i, ii, tileKey, tilesToDraw; - for (i = 0, ii = zs.length; i < ii; ++i) { - tilesToDraw = tilesToDrawByZ[zs[i]]; - for (tileKey in tilesToDraw) { - tile = tilesToDraw[tileKey]; - 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, ol.webgl.LINEAR, ol.webgl.LINEAR); - gl.drawArrays(ol.webgl.TRIANGLE_STRIP, 0, 4); - } - } + /** + * @inheritDoc + */ + ol.renderer.webgl.TileLayer.prototype.prepareFrame = function(frameState, layerState, context) { - if (allTilesLoaded) { - this.renderedTileRange_ = tileRange; - this.renderedFramebufferExtent_ = framebufferExtent; - this.renderedRevision_ = tileSource.getRevision(); + var mapRenderer = this.mapRenderer; + var gl = context.getGL(); + + var viewState = frameState.viewState; + var projection = viewState.projection; + + var tileLayer = /** @type {ol.layer.Tile} */ (this.getLayer()); + var tileSource = tileLayer.getSource(); + var tileGrid = tileSource.getTileGridForProjection(projection); + var z = tileGrid.getZForResolution(viewState.resolution); + var tileResolution = tileGrid.getResolution(z); + + var tilePixelSize = + tileSource.getTilePixelSize(z, frameState.pixelRatio, projection); + var pixelRatio = tilePixelSize[0] / + ol.size.toSize(tileGrid.getTileSize(z), this.tmpSize_)[0]; + var tilePixelResolution = tileResolution / pixelRatio; + var tileGutter = tileSource.getTilePixelRatio(pixelRatio) * tileSource.getGutter(projection); + + var center = viewState.center; + var extent = frameState.extent; + var tileRange = tileGrid.getTileRangeForExtentAndResolution( + extent, tileResolution); + + var framebufferExtent; + if (this.renderedTileRange_ && + this.renderedTileRange_.equals(tileRange) && + this.renderedRevision_ == tileSource.getRevision()) { + framebufferExtent = this.renderedFramebufferExtent_; } else { - this.renderedTileRange_ = null; - this.renderedFramebufferExtent_ = null; - this.renderedRevision_ = -1; - frameState.animate = true; + + var tileRangeSize = tileRange.getSize(); + + var maxDimension = Math.max( + tileRangeSize[0] * tilePixelSize[0], + tileRangeSize[1] * tilePixelSize[1]); + var framebufferDimension = ol.math.roundUpToPowerOfTwo(maxDimension); + var framebufferExtentDimension = tilePixelResolution * framebufferDimension; + var origin = tileGrid.getOrigin(z); + var minX = origin[0] + + tileRange.minX * tilePixelSize[0] * tilePixelResolution; + var 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(ol.webgl.COLOR_BUFFER_BIT); + gl.disable(ol.webgl.BLEND); + + var program = context.getProgram(this.fragmentShader_, this.vertexShader_); + context.useProgram(program); + if (!this.locations_) { + this.locations_ = + new ol.renderer.webgl.tilelayershader.Locations(gl, program); + } + + context.bindBuffer(ol.webgl.ARRAY_BUFFER, this.renderArrayBuffer_); + gl.enableVertexAttribArray(this.locations_.a_position); + gl.vertexAttribPointer( + this.locations_.a_position, 2, ol.webgl.FLOAT, false, 16, 0); + gl.enableVertexAttribArray(this.locations_.a_texCoord); + gl.vertexAttribPointer( + this.locations_.a_texCoord, 2, ol.webgl.FLOAT, false, 16, 8); + gl.uniform1i(this.locations_.u_texture, 0); + + /** + * @type {Object.>} + */ + var tilesToDrawByZ = {}; + tilesToDrawByZ[z] = {}; + + var findLoadedTiles = this.createLoadedTileFinder( + tileSource, projection, tilesToDrawByZ); + + var useInterimTilesOnError = tileLayer.getUseInterimTilesOnError(); + var allTilesLoaded = true; + var tmpExtent = ol.extent.createEmpty(); + var tmpTileRange = new ol.TileRange(0, 0, 0, 0); + var childTileRange, drawable, fullyLoaded, tile, tileState; + var 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 (!ol.extent.intersects(tileExtent, layerState.extent)) { + continue; + } + } + tileState = tile.getState(); + drawable = tileState == ol.TileState.LOADED || + tileState == ol.TileState.EMPTY || + tileState == ol.TileState.ERROR && !useInterimTilesOnError; + if (!drawable) { + tile = tile.getInterimTile(); + } + tileState = tile.getState(); + if (tileState == ol.TileState.LOADED) { + if (mapRenderer.isTileTextureLoaded(tile)) { + tilesToDrawByZ[z][tile.tileCoord.toString()] = tile; + continue; + } + } else if (tileState == ol.TileState.EMPTY || + (tileState == ol.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.} */ + var zs = Object.keys(tilesToDrawByZ).map(Number); + zs.sort(ol.array.numberSafeCompareFunction); + var u_tileOffset = new Float32Array(4); + var i, ii, tileKey, tilesToDraw; + for (i = 0, ii = zs.length; i < ii; ++i) { + tilesToDraw = tilesToDrawByZ[zs[i]]; + for (tileKey in tilesToDraw) { + tile = tilesToDraw[tileKey]; + 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, ol.webgl.LINEAR, ol.webgl.LINEAR); + gl.drawArrays(ol.webgl.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); + var tileTextureQueue = mapRenderer.getTileTextureQueue(); + this.manageTilePyramid( + frameState, tileSource, tileGrid, pixelRatio, projection, extent, z, + tileLayer.getPreload(), + /** + * @param {ol.Tile} tile Tile. + */ + function(tile) { + if (tile.getState() == ol.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); + this.updateLogos(frameState, tileSource); - this.updateUsedTiles(frameState.usedTiles, tileSource, z, tileRange); - var tileTextureQueue = mapRenderer.getTileTextureQueue(); - this.manageTilePyramid( - frameState, tileSource, tileGrid, pixelRatio, projection, extent, z, - tileLayer.getPreload(), - /** - * @param {ol.Tile} tile Tile. - */ - function(tile) { - if (tile.getState() == ol.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); - this.updateLogos(frameState, tileSource); + var texCoordMatrix = this.texCoordMatrix; + ol.transform.reset(texCoordMatrix); + ol.transform.translate(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) { + ol.transform.rotate(texCoordMatrix, viewState.rotation); + } + ol.transform.scale(texCoordMatrix, + frameState.size[0] * viewState.resolution / + (framebufferExtent[2] - framebufferExtent[0]), + frameState.size[1] * viewState.resolution / + (framebufferExtent[3] - framebufferExtent[1])); + ol.transform.translate(texCoordMatrix, -0.5, -0.5); - var texCoordMatrix = this.texCoordMatrix; - ol.transform.reset(texCoordMatrix); - ol.transform.translate(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) { - ol.transform.rotate(texCoordMatrix, viewState.rotation); - } - ol.transform.scale(texCoordMatrix, - frameState.size[0] * viewState.resolution / - (framebufferExtent[2] - framebufferExtent[0]), - frameState.size[1] * viewState.resolution / - (framebufferExtent[3] - framebufferExtent[1])); - ol.transform.translate(texCoordMatrix, -0.5, -0.5); - - return true; -}; + return true; + }; -/** - * @inheritDoc - */ -ol.renderer.webgl.TileLayer.prototype.forEachLayerAtPixel = function(pixel, frameState, callback, thisArg) { - if (!this.framebuffer) { - return undefined; - } + /** + * @inheritDoc + */ + ol.renderer.webgl.TileLayer.prototype.forEachLayerAtPixel = function(pixel, frameState, callback, thisArg) { + if (!this.framebuffer) { + return undefined; + } - var pixelOnMapScaled = [ - pixel[0] / frameState.size[0], - (frameState.size[1] - pixel[1]) / frameState.size[1]]; + var pixelOnMapScaled = [ + pixel[0] / frameState.size[0], + (frameState.size[1] - pixel[1]) / frameState.size[1]]; - var pixelOnFrameBufferScaled = ol.transform.apply( - this.texCoordMatrix, pixelOnMapScaled.slice()); - var pixelOnFrameBuffer = [ - pixelOnFrameBufferScaled[0] * this.framebufferDimension, - pixelOnFrameBufferScaled[1] * this.framebufferDimension]; + var pixelOnFrameBufferScaled = ol.transform.apply( + this.texCoordMatrix, pixelOnMapScaled.slice()); + var pixelOnFrameBuffer = [ + pixelOnFrameBufferScaled[0] * this.framebufferDimension, + pixelOnFrameBufferScaled[1] * this.framebufferDimension]; - var gl = this.mapRenderer.getContext().getGL(); - gl.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffer); - var imageData = new Uint8Array(4); - gl.readPixels(pixelOnFrameBuffer[0], pixelOnFrameBuffer[1], 1, 1, - gl.RGBA, gl.UNSIGNED_BYTE, imageData); + var gl = this.mapRenderer.getContext().getGL(); + gl.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffer); + var 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; - } -}; + if (imageData[3] > 0) { + return callback.call(thisArg, this.getLayer(), imageData); + } else { + return undefined; + } + }; + +} diff --git a/src/ol/renderer/webgl/vectorlayer.js b/src/ol/renderer/webgl/vectorlayer.js index 563c57fb36..ad901032d8 100644 --- a/src/ol/renderer/webgl/vectorlayer.js +++ b/src/ol/renderer/webgl/vectorlayer.js @@ -9,307 +9,311 @@ goog.require('ol.renderer.webgl.Layer'); goog.require('ol.transform'); -/** - * @constructor - * @extends {ol.renderer.webgl.Layer} - * @param {ol.renderer.webgl.Map} mapRenderer Map renderer. - * @param {ol.layer.Vector} vectorLayer Vector layer. - */ -ol.renderer.webgl.VectorLayer = function(mapRenderer, vectorLayer) { - - ol.renderer.webgl.Layer.call(this, mapRenderer, vectorLayer); +if (ol.ENABLE_WEBGL) { /** - * @private - * @type {boolean} + * @constructor + * @extends {ol.renderer.webgl.Layer} + * @param {ol.renderer.webgl.Map} mapRenderer Map renderer. + * @param {ol.layer.Vector} vectorLayer Vector layer. */ - this.dirty_ = false; + ol.renderer.webgl.VectorLayer = function(mapRenderer, vectorLayer) { - /** - * @private - * @type {number} - */ - this.renderedRevision_ = -1; + ol.renderer.webgl.Layer.call(this, mapRenderer, vectorLayer); - /** - * @private - * @type {number} - */ - this.renderedResolution_ = NaN; + /** + * @private + * @type {boolean} + */ + this.dirty_ = false; - /** - * @private - * @type {ol.Extent} - */ - this.renderedExtent_ = ol.extent.createEmpty(); + /** + * @private + * @type {number} + */ + this.renderedRevision_ = -1; - /** - * @private - * @type {function(ol.Feature, ol.Feature): number|null} - */ - this.renderedRenderOrder_ = null; + /** + * @private + * @type {number} + */ + this.renderedResolution_ = NaN; - /** - * @private - * @type {ol.render.webgl.ReplayGroup} - */ - this.replayGroup_ = null; + /** + * @private + * @type {ol.Extent} + */ + this.renderedExtent_ = ol.extent.createEmpty(); - /** - * The last layer state. - * @private - * @type {?ol.LayerState} - */ - this.layerState_ = null; + /** + * @private + * @type {function(ol.Feature, ol.Feature): number|null} + */ + this.renderedRenderOrder_ = null; -}; -ol.inherits(ol.renderer.webgl.VectorLayer, ol.renderer.webgl.Layer); - - -/** - * @inheritDoc - */ -ol.renderer.webgl.VectorLayer.prototype.composeFrame = function(frameState, layerState, context) { - this.layerState_ = layerState; - var viewState = frameState.viewState; - var replayGroup = this.replayGroup_; - var size = frameState.size; - var pixelRatio = frameState.pixelRatio; - var 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 - */ -ol.renderer.webgl.VectorLayer.prototype.disposeInternal = function() { - var replayGroup = this.replayGroup_; - if (replayGroup) { - var context = this.mapRenderer.getContext(); - replayGroup.getDeleteResourcesFunction(context)(); + /** + * @private + * @type {ol.render.webgl.ReplayGroup} + */ this.replayGroup_ = null; - } - ol.renderer.webgl.Layer.prototype.disposeInternal.call(this); -}; + + /** + * The last layer state. + * @private + * @type {?ol.LayerState} + */ + this.layerState_ = null; + + }; + ol.inherits(ol.renderer.webgl.VectorLayer, ol.renderer.webgl.Layer); -/** - * @inheritDoc - */ -ol.renderer.webgl.VectorLayer.prototype.forEachFeatureAtCoordinate = function(coordinate, frameState, hitTolerance, callback, thisArg) { - if (!this.replayGroup_ || !this.layerState_) { - return undefined; - } else { - var context = this.mapRenderer.getContext(); - var viewState = frameState.viewState; - var layer = this.getLayer(); - var layerState = this.layerState_; - /** @type {Object.} */ - var features = {}; - return this.replayGroup_.forEachFeatureAtCoordinate(coordinate, - context, viewState.center, viewState.resolution, viewState.rotation, - frameState.size, frameState.pixelRatio, layerState.opacity, - {}, - /** - * @param {ol.Feature|ol.render.Feature} feature Feature. - * @return {?} Callback result. - */ - function(feature) { - var key = ol.getUid(feature).toString(); - if (!(key in features)) { - features[key] = true; - return callback.call(thisArg, feature, layer); - } - }); - } -}; - - -/** - * @inheritDoc - */ -ol.renderer.webgl.VectorLayer.prototype.hasFeatureAtCoordinate = function(coordinate, frameState) { - if (!this.replayGroup_ || !this.layerState_) { - return false; - } else { - var context = this.mapRenderer.getContext(); - var viewState = frameState.viewState; - var layerState = this.layerState_; - return this.replayGroup_.hasFeatureAtCoordinate(coordinate, - context, viewState.center, viewState.resolution, viewState.rotation, - frameState.size, frameState.pixelRatio, layerState.opacity, - frameState.skippedFeatureUids); - } -}; - - -/** - * @inheritDoc - */ -ol.renderer.webgl.VectorLayer.prototype.forEachLayerAtPixel = function(pixel, frameState, callback, thisArg) { - var coordinate = ol.transform.apply( - frameState.pixelToCoordinateTransform, pixel.slice()); - var hasFeature = this.hasFeatureAtCoordinate(coordinate, frameState); - - if (hasFeature) { - return callback.call(thisArg, this.getLayer(), null); - } else { - return undefined; - } -}; - - -/** - * Handle changes in image style state. - * @param {ol.events.Event} event Image style change event. - * @private - */ -ol.renderer.webgl.VectorLayer.prototype.handleStyleImageChange_ = function(event) { - this.renderIfReadyAndVisible(); -}; - - -/** - * @inheritDoc - */ -ol.renderer.webgl.VectorLayer.prototype.prepareFrame = function(frameState, layerState, context) { - - var vectorLayer = /** @type {ol.layer.Vector} */ (this.getLayer()); - var vectorSource = vectorLayer.getSource(); - - this.updateAttributions( - frameState.attributions, vectorSource.getAttributions()); - this.updateLogos(frameState, vectorSource); - - var animating = frameState.viewHints[ol.ViewHint.ANIMATING]; - var interacting = frameState.viewHints[ol.ViewHint.INTERACTING]; - var updateWhileAnimating = vectorLayer.getUpdateWhileAnimating(); - var updateWhileInteracting = vectorLayer.getUpdateWhileInteracting(); - - if (!this.dirty_ && (!updateWhileAnimating && animating) || - (!updateWhileInteracting && interacting)) { - return true; - } - - var frameStateExtent = frameState.extent; - var viewState = frameState.viewState; - var projection = viewState.projection; - var resolution = viewState.resolution; - var pixelRatio = frameState.pixelRatio; - var vectorLayerRevision = vectorLayer.getRevision(); - var vectorLayerRenderBuffer = vectorLayer.getRenderBuffer(); - var vectorLayerRenderOrder = vectorLayer.getRenderOrder(); - - if (vectorLayerRenderOrder === undefined) { - vectorLayerRenderOrder = ol.renderer.vector.defaultOrder; - } - - var extent = ol.extent.buffer(frameStateExtent, - vectorLayerRenderBuffer * resolution); - - if (!this.dirty_ && - this.renderedResolution_ == resolution && - this.renderedRevision_ == vectorLayerRevision && - this.renderedRenderOrder_ == vectorLayerRenderOrder && - ol.extent.containsExtent(this.renderedExtent_, extent)) { - return true; - } - - if (this.replayGroup_) { - frameState.postRenderFunctions.push( - this.replayGroup_.getDeleteResourcesFunction(context)); - } - - this.dirty_ = false; - - var replayGroup = new ol.render.webgl.ReplayGroup( - ol.renderer.vector.getTolerance(resolution, pixelRatio), - extent, vectorLayer.getRenderBuffer()); - vectorSource.loadFeatures(extent, resolution, projection); /** - * @param {ol.Feature} feature Feature. - * @this {ol.renderer.webgl.VectorLayer} + * @inheritDoc */ - var renderFeature = function(feature) { - var styles; - var styleFunction = feature.getStyleFunction(); - if (styleFunction) { - styles = styleFunction.call(feature, resolution); - } else { - styleFunction = vectorLayer.getStyleFunction(); - if (styleFunction) { - styles = styleFunction(feature, resolution); - } + ol.renderer.webgl.VectorLayer.prototype.composeFrame = function(frameState, layerState, context) { + this.layerState_ = layerState; + var viewState = frameState.viewState; + var replayGroup = this.replayGroup_; + var size = frameState.size; + var pixelRatio = frameState.pixelRatio; + var 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); } - if (styles) { - var dirty = this.renderFeature( - feature, resolution, pixelRatio, styles, replayGroup); - this.dirty_ = this.dirty_ || dirty; + + }; + + + /** + * @inheritDoc + */ + ol.renderer.webgl.VectorLayer.prototype.disposeInternal = function() { + var replayGroup = this.replayGroup_; + if (replayGroup) { + var context = this.mapRenderer.getContext(); + replayGroup.getDeleteResourcesFunction(context)(); + this.replayGroup_ = null; + } + ol.renderer.webgl.Layer.prototype.disposeInternal.call(this); + }; + + + /** + * @inheritDoc + */ + ol.renderer.webgl.VectorLayer.prototype.forEachFeatureAtCoordinate = function(coordinate, frameState, hitTolerance, callback, thisArg) { + if (!this.replayGroup_ || !this.layerState_) { + return undefined; + } else { + var context = this.mapRenderer.getContext(); + var viewState = frameState.viewState; + var layer = this.getLayer(); + var layerState = this.layerState_; + /** @type {Object.} */ + var features = {}; + return this.replayGroup_.forEachFeatureAtCoordinate(coordinate, + context, viewState.center, viewState.resolution, viewState.rotation, + frameState.size, frameState.pixelRatio, layerState.opacity, + {}, + /** + * @param {ol.Feature|ol.render.Feature} feature Feature. + * @return {?} Callback result. + */ + function(feature) { + var key = ol.getUid(feature).toString(); + if (!(key in features)) { + features[key] = true; + return callback.call(thisArg, feature, layer); + } + }); } }; - if (vectorLayerRenderOrder) { - /** @type {Array.} */ - var features = []; - vectorSource.forEachFeatureInExtent(extent, - /** - * @param {ol.Feature} feature Feature. - */ - function(feature) { - features.push(feature); - }, this); - features.sort(vectorLayerRenderOrder); - features.forEach(renderFeature, this); - } else { - vectorSource.forEachFeatureInExtent(extent, renderFeature, this); - } - replayGroup.finish(context); - - this.renderedResolution_ = resolution; - this.renderedRevision_ = vectorLayerRevision; - this.renderedRenderOrder_ = vectorLayerRenderOrder; - this.renderedExtent_ = extent; - this.replayGroup_ = replayGroup; - - return true; -}; -/** - * @param {ol.Feature} feature Feature. - * @param {number} resolution Resolution. - * @param {number} pixelRatio Pixel ratio. - * @param {(ol.style.Style|Array.)} styles The style or array of - * styles. - * @param {ol.render.webgl.ReplayGroup} replayGroup Replay group. - * @return {boolean} `true` if an image is loading. - */ -ol.renderer.webgl.VectorLayer.prototype.renderFeature = function(feature, resolution, pixelRatio, styles, replayGroup) { - if (!styles) { - return false; - } - var loading = false; - if (Array.isArray(styles)) { - for (var i = styles.length - 1, ii = 0; i >= ii; --i) { + /** + * @inheritDoc + */ + ol.renderer.webgl.VectorLayer.prototype.hasFeatureAtCoordinate = function(coordinate, frameState) { + if (!this.replayGroup_ || !this.layerState_) { + return false; + } else { + var context = this.mapRenderer.getContext(); + var viewState = frameState.viewState; + var layerState = this.layerState_; + return this.replayGroup_.hasFeatureAtCoordinate(coordinate, + context, viewState.center, viewState.resolution, viewState.rotation, + frameState.size, frameState.pixelRatio, layerState.opacity, + frameState.skippedFeatureUids); + } + }; + + + /** + * @inheritDoc + */ + ol.renderer.webgl.VectorLayer.prototype.forEachLayerAtPixel = function(pixel, frameState, callback, thisArg) { + var coordinate = ol.transform.apply( + frameState.pixelToCoordinateTransform, pixel.slice()); + var hasFeature = this.hasFeatureAtCoordinate(coordinate, frameState); + + if (hasFeature) { + return callback.call(thisArg, this.getLayer(), null); + } else { + return undefined; + } + }; + + + /** + * Handle changes in image style state. + * @param {ol.events.Event} event Image style change event. + * @private + */ + ol.renderer.webgl.VectorLayer.prototype.handleStyleImageChange_ = function(event) { + this.renderIfReadyAndVisible(); + }; + + + /** + * @inheritDoc + */ + ol.renderer.webgl.VectorLayer.prototype.prepareFrame = function(frameState, layerState, context) { + + var vectorLayer = /** @type {ol.layer.Vector} */ (this.getLayer()); + var vectorSource = vectorLayer.getSource(); + + this.updateAttributions( + frameState.attributions, vectorSource.getAttributions()); + this.updateLogos(frameState, vectorSource); + + var animating = frameState.viewHints[ol.ViewHint.ANIMATING]; + var interacting = frameState.viewHints[ol.ViewHint.INTERACTING]; + var updateWhileAnimating = vectorLayer.getUpdateWhileAnimating(); + var updateWhileInteracting = vectorLayer.getUpdateWhileInteracting(); + + if (!this.dirty_ && (!updateWhileAnimating && animating) || + (!updateWhileInteracting && interacting)) { + return true; + } + + var frameStateExtent = frameState.extent; + var viewState = frameState.viewState; + var projection = viewState.projection; + var resolution = viewState.resolution; + var pixelRatio = frameState.pixelRatio; + var vectorLayerRevision = vectorLayer.getRevision(); + var vectorLayerRenderBuffer = vectorLayer.getRenderBuffer(); + var vectorLayerRenderOrder = vectorLayer.getRenderOrder(); + + if (vectorLayerRenderOrder === undefined) { + vectorLayerRenderOrder = ol.renderer.vector.defaultOrder; + } + + var extent = ol.extent.buffer(frameStateExtent, + vectorLayerRenderBuffer * resolution); + + if (!this.dirty_ && + this.renderedResolution_ == resolution && + this.renderedRevision_ == vectorLayerRevision && + this.renderedRenderOrder_ == vectorLayerRenderOrder && + ol.extent.containsExtent(this.renderedExtent_, extent)) { + return true; + } + + if (this.replayGroup_) { + frameState.postRenderFunctions.push( + this.replayGroup_.getDeleteResourcesFunction(context)); + } + + this.dirty_ = false; + + var replayGroup = new ol.render.webgl.ReplayGroup( + ol.renderer.vector.getTolerance(resolution, pixelRatio), + extent, vectorLayer.getRenderBuffer()); + vectorSource.loadFeatures(extent, resolution, projection); + /** + * @param {ol.Feature} feature Feature. + * @this {ol.renderer.webgl.VectorLayer} + */ + var renderFeature = function(feature) { + var styles; + var styleFunction = feature.getStyleFunction(); + if (styleFunction) { + styles = styleFunction.call(feature, resolution); + } else { + styleFunction = vectorLayer.getStyleFunction(); + if (styleFunction) { + styles = styleFunction(feature, resolution); + } + } + if (styles) { + var dirty = this.renderFeature( + feature, resolution, pixelRatio, styles, replayGroup); + this.dirty_ = this.dirty_ || dirty; + } + }; + if (vectorLayerRenderOrder) { + /** @type {Array.} */ + var features = []; + vectorSource.forEachFeatureInExtent(extent, + /** + * @param {ol.Feature} feature Feature. + */ + function(feature) { + features.push(feature); + }, this); + features.sort(vectorLayerRenderOrder); + features.forEach(renderFeature, this); + } else { + vectorSource.forEachFeatureInExtent(extent, renderFeature, this); + } + replayGroup.finish(context); + + this.renderedResolution_ = resolution; + this.renderedRevision_ = vectorLayerRevision; + this.renderedRenderOrder_ = vectorLayerRenderOrder; + this.renderedExtent_ = extent; + this.replayGroup_ = replayGroup; + + return true; + }; + + + /** + * @param {ol.Feature} feature Feature. + * @param {number} resolution Resolution. + * @param {number} pixelRatio Pixel ratio. + * @param {(ol.style.Style|Array.)} styles The style or array of + * styles. + * @param {ol.render.webgl.ReplayGroup} replayGroup Replay group. + * @return {boolean} `true` if an image is loading. + */ + ol.renderer.webgl.VectorLayer.prototype.renderFeature = function(feature, resolution, pixelRatio, styles, replayGroup) { + if (!styles) { + return false; + } + var loading = false; + if (Array.isArray(styles)) { + for (var i = styles.length - 1, ii = 0; i >= ii; --i) { + loading = ol.renderer.vector.renderFeature( + replayGroup, feature, styles[i], + ol.renderer.vector.getSquaredTolerance(resolution, pixelRatio), + this.handleStyleImageChange_, this) || loading; + } + } else { loading = ol.renderer.vector.renderFeature( - replayGroup, feature, styles[i], + replayGroup, feature, styles, ol.renderer.vector.getSquaredTolerance(resolution, pixelRatio), this.handleStyleImageChange_, this) || loading; } - } else { - loading = ol.renderer.vector.renderFeature( - replayGroup, feature, styles, - ol.renderer.vector.getSquaredTolerance(resolution, pixelRatio), - this.handleStyleImageChange_, this) || loading; - } - return loading; -}; + return loading; + }; + +} diff --git a/src/ol/webgl.js b/src/ol/webgl.js index 224397a930..56a4953497 100644 --- a/src/ol/webgl.js +++ b/src/ol/webgl.js @@ -1,288 +1,292 @@ goog.provide('ol.webgl'); -/** Constants taken from goog.webgl - */ +if (ol.ENABLE_WEBGL) { + /** Constants taken from goog.webgl + */ -/** - * @const - * @type {number} - */ -ol.webgl.ONE = 1; + /** + * @const + * @type {number} + */ + ol.webgl.ONE = 1; -/** - * @const - * @type {number} - */ -ol.webgl.SRC_ALPHA = 0x0302; + /** + * @const + * @type {number} + */ + ol.webgl.SRC_ALPHA = 0x0302; -/** - * @const - * @type {number} - */ -ol.webgl.COLOR_ATTACHMENT0 = 0x8CE0; + /** + * @const + * @type {number} + */ + ol.webgl.COLOR_ATTACHMENT0 = 0x8CE0; -/** - * @const - * @type {number} - */ -ol.webgl.COLOR_BUFFER_BIT = 0x00004000; + /** + * @const + * @type {number} + */ + ol.webgl.COLOR_BUFFER_BIT = 0x00004000; -/** - * @const - * @type {number} - */ -ol.webgl.TRIANGLES = 0x0004; + /** + * @const + * @type {number} + */ + ol.webgl.TRIANGLES = 0x0004; -/** - * @const - * @type {number} - */ -ol.webgl.TRIANGLE_STRIP = 0x0005; + /** + * @const + * @type {number} + */ + ol.webgl.TRIANGLE_STRIP = 0x0005; -/** - * @const - * @type {number} - */ -ol.webgl.ONE_MINUS_SRC_ALPHA = 0x0303; + /** + * @const + * @type {number} + */ + ol.webgl.ONE_MINUS_SRC_ALPHA = 0x0303; -/** - * @const - * @type {number} - */ -ol.webgl.ARRAY_BUFFER = 0x8892; + /** + * @const + * @type {number} + */ + ol.webgl.ARRAY_BUFFER = 0x8892; -/** - * @const - * @type {number} - */ -ol.webgl.ELEMENT_ARRAY_BUFFER = 0x8893; + /** + * @const + * @type {number} + */ + ol.webgl.ELEMENT_ARRAY_BUFFER = 0x8893; -/** - * @const - * @type {number} - */ -ol.webgl.STREAM_DRAW = 0x88E0; + /** + * @const + * @type {number} + */ + ol.webgl.STREAM_DRAW = 0x88E0; -/** - * @const - * @type {number} - */ -ol.webgl.STATIC_DRAW = 0x88E4; + /** + * @const + * @type {number} + */ + ol.webgl.STATIC_DRAW = 0x88E4; -/** - * @const - * @type {number} - */ -ol.webgl.DYNAMIC_DRAW = 0x88E8; + /** + * @const + * @type {number} + */ + ol.webgl.DYNAMIC_DRAW = 0x88E8; -/** - * @const - * @type {number} - */ -ol.webgl.CULL_FACE = 0x0B44; + /** + * @const + * @type {number} + */ + ol.webgl.CULL_FACE = 0x0B44; -/** - * @const - * @type {number} - */ -ol.webgl.BLEND = 0x0BE2; + /** + * @const + * @type {number} + */ + ol.webgl.BLEND = 0x0BE2; -/** - * @const - * @type {number} - */ -ol.webgl.STENCIL_TEST = 0x0B90; + /** + * @const + * @type {number} + */ + ol.webgl.STENCIL_TEST = 0x0B90; -/** - * @const - * @type {number} - */ -ol.webgl.DEPTH_TEST = 0x0B71; + /** + * @const + * @type {number} + */ + ol.webgl.DEPTH_TEST = 0x0B71; -/** - * @const - * @type {number} - */ -ol.webgl.SCISSOR_TEST = 0x0C11; + /** + * @const + * @type {number} + */ + ol.webgl.SCISSOR_TEST = 0x0C11; -/** - * @const - * @type {number} - */ -ol.webgl.UNSIGNED_BYTE = 0x1401; + /** + * @const + * @type {number} + */ + ol.webgl.UNSIGNED_BYTE = 0x1401; -/** - * @const - * @type {number} - */ -ol.webgl.UNSIGNED_SHORT = 0x1403; + /** + * @const + * @type {number} + */ + ol.webgl.UNSIGNED_SHORT = 0x1403; -/** - * @const - * @type {number} - */ -ol.webgl.UNSIGNED_INT = 0x1405; + /** + * @const + * @type {number} + */ + ol.webgl.UNSIGNED_INT = 0x1405; -/** - * @const - * @type {number} - */ -ol.webgl.FLOAT = 0x1406; + /** + * @const + * @type {number} + */ + ol.webgl.FLOAT = 0x1406; -/** - * @const - * @type {number} - */ -ol.webgl.RGBA = 0x1908; + /** + * @const + * @type {number} + */ + ol.webgl.RGBA = 0x1908; -/** - * @const - * @type {number} - */ -ol.webgl.FRAGMENT_SHADER = 0x8B30; + /** + * @const + * @type {number} + */ + ol.webgl.FRAGMENT_SHADER = 0x8B30; -/** - * @const - * @type {number} - */ -ol.webgl.VERTEX_SHADER = 0x8B31; + /** + * @const + * @type {number} + */ + ol.webgl.VERTEX_SHADER = 0x8B31; -/** - * @const - * @type {number} - */ -ol.webgl.LINK_STATUS = 0x8B82; + /** + * @const + * @type {number} + */ + ol.webgl.LINK_STATUS = 0x8B82; -/** - * @const - * @type {number} - */ -ol.webgl.LINEAR = 0x2601; + /** + * @const + * @type {number} + */ + ol.webgl.LINEAR = 0x2601; -/** - * @const - * @type {number} - */ -ol.webgl.TEXTURE_MAG_FILTER = 0x2800; + /** + * @const + * @type {number} + */ + ol.webgl.TEXTURE_MAG_FILTER = 0x2800; -/** - * @const - * @type {number} - */ -ol.webgl.TEXTURE_MIN_FILTER = 0x2801; + /** + * @const + * @type {number} + */ + ol.webgl.TEXTURE_MIN_FILTER = 0x2801; -/** - * @const - * @type {number} - */ -ol.webgl.TEXTURE_WRAP_S = 0x2802; + /** + * @const + * @type {number} + */ + ol.webgl.TEXTURE_WRAP_S = 0x2802; -/** - * @const - * @type {number} - */ -ol.webgl.TEXTURE_WRAP_T = 0x2803; + /** + * @const + * @type {number} + */ + ol.webgl.TEXTURE_WRAP_T = 0x2803; -/** - * @const - * @type {number} - */ -ol.webgl.TEXTURE_2D = 0x0DE1; + /** + * @const + * @type {number} + */ + ol.webgl.TEXTURE_2D = 0x0DE1; -/** - * @const - * @type {number} - */ -ol.webgl.TEXTURE0 = 0x84C0; + /** + * @const + * @type {number} + */ + ol.webgl.TEXTURE0 = 0x84C0; -/** - * @const - * @type {number} - */ -ol.webgl.CLAMP_TO_EDGE = 0x812F; + /** + * @const + * @type {number} + */ + ol.webgl.CLAMP_TO_EDGE = 0x812F; -/** - * @const - * @type {number} - */ -ol.webgl.COMPILE_STATUS = 0x8B81; + /** + * @const + * @type {number} + */ + ol.webgl.COMPILE_STATUS = 0x8B81; -/** - * @const - * @type {number} - */ -ol.webgl.FRAMEBUFFER = 0x8D40; + /** + * @const + * @type {number} + */ + ol.webgl.FRAMEBUFFER = 0x8D40; -/** end of goog.webgl constants - */ + /** end of goog.webgl constants + */ -/** - * @const - * @private - * @type {Array.} - */ -ol.webgl.CONTEXT_IDS_ = [ - 'experimental-webgl', - 'webgl', - 'webkit-3d', - 'moz-webgl' -]; + /** + * @const + * @private + * @type {Array.} + */ + ol.webgl.CONTEXT_IDS_ = [ + 'experimental-webgl', + 'webgl', + 'webkit-3d', + 'moz-webgl' + ]; -/** - * @param {HTMLCanvasElement} canvas Canvas. - * @param {Object=} opt_attributes Attributes. - * @return {WebGLRenderingContext} WebGL rendering context. - */ -ol.webgl.getContext = function(canvas, opt_attributes) { - var context, i, ii = ol.webgl.CONTEXT_IDS_.length; - for (i = 0; i < ii; ++i) { - try { - context = canvas.getContext(ol.webgl.CONTEXT_IDS_[i], opt_attributes); - if (context) { - return /** @type {!WebGLRenderingContext} */ (context); + + /** + * @param {HTMLCanvasElement} canvas Canvas. + * @param {Object=} opt_attributes Attributes. + * @return {WebGLRenderingContext} WebGL rendering context. + */ + ol.webgl.getContext = function(canvas, opt_attributes) { + var context, i, ii = ol.webgl.CONTEXT_IDS_.length; + for (i = 0; i < ii; ++i) { + try { + context = canvas.getContext(ol.webgl.CONTEXT_IDS_[i], opt_attributes); + if (context) { + return /** @type {!WebGLRenderingContext} */ (context); + } + } catch (e) { + // pass } - } catch (e) { - // pass } - } - return null; -}; + return null; + }; + +}