Class: WebGLPostProcessingPass


import WebGLPostProcessingPass from 'ol/webgl/PostProcessingPass';

This class is used to define Post Processing passes with custom shaders and uniforms. This is used internally by module:ol/webgl/Helper~WebGLHelper.

Please note that the final output on the DOM canvas is expected to have premultiplied alpha, which means that a pixel which is 100% red with an opacity of 50% must have a color of (r=0.5, g=0, b=0, a=0.5). Failing to provide pixel colors with premultiplied alpha will result in render anomalies.

The default post-processing pass does not multiply color values with alpha value, it expects color values to be premultiplied.

Default shaders are shown hereafter:

  • Vertex shader:

    precision mediump float;
    attribute vec2 a_position;
    varying vec2 v_texCoord;
    varying vec2 v_screenCoord;
    uniform vec2 u_screenSize;
    void main() {
      v_texCoord = a_position * 0.5 + 0.5;
      v_screenCoord = v_texCoord * u_screenSize;
      gl_Position = vec4(a_position, 0.0, 1.0);
  • Fragment shader:

    precision mediump float;
    uniform sampler2D u_image;
    varying vec2 v_texCoord;
    varying vec2 v_screenCoord;
    void main() {
      gl_FragColor = texture2D(u_image, v_texCoord);

new WebGLPostProcessingPass(options)

webgl/PostProcessingPass.js, line 106
Name Type Description


Name Type Description
webGlContext WebGLRenderingContext

WebGL context; mandatory.

scaleRatio number

Scale ratio; if < 1, the post process will render to a texture smaller than the main canvas that will then be sampled up (useful for saving resource on blur steps).

vertexShader string

Vertex shader source

fragmentShader string

Fragment shader source

uniforms Object.<string, module:ol/webgl/Helper~UniformValue>

Uniform definitions for the post process step


apply(frameState, nextPass)

webgl/PostProcessingPass.js, line 218

Render to the next postprocessing pass (or to the canvas if final pass).

Name Type Description
frameState module:ol/PluggableMap~FrameState

current frame state

nextPass module:ol/webgl/PostProcessingPass~WebGLPostProcessingPass

Next pass, optional

frameState.pixelRatio number

The pixel ratio of the frame.

frameState.time number

The time when rendering of the frame was requested.

frameState.viewState module:ol/View~State

The state of the current view.

frameState.animate boolean
frameState.coordinateToPixelTransform module:ol/transform~Transform
frameState.extent null | module:ol/extent~Extent
frameState.declutterItems Array.<module:ol/PluggableMap~DeclutterItems>
frameState.index number
frameState.layerStatesArray Array.<module:ol/layer/Layer~State>
frameState.layerIndex number
frameState.pixelToCoordinateTransform module:ol/transform~Transform
frameState.postRenderFunctions Array.<module:ol/PluggableMap~PostRenderFunction>
frameState.size module:ol/size~Size
frameState.tileQueue module:ol/TileQueue~TileQueue
frameState.usedTiles Object.<string, Object.<string, boolean>>
frameState.viewHints Array.<number>
frameState.wantedTiles Object.<string, Object.<string, boolean>>


webgl/PostProcessingPass.js, line 250
Frame buffer


webgl/PostProcessingPass.js, line 166

Get the WebGL rendering context

The rendering context.


webgl/PostProcessingPass.js, line 177

Initialize the render target texture of the post process, make sure it is at the right size and bind it as a render target for the next draw calls. The last step to be initialized will be the one where the primitives are rendered.

Name Type Description

current frame state

Name Type Description
pixelRatio number

The pixel ratio of the frame.

time number

The time when rendering of the frame was requested.

viewState module:ol/View~State

The state of the current view.

animate boolean
coordinateToPixelTransform module:ol/transform~Transform
extent null | module:ol/extent~Extent
declutterItems Array.<module:ol/PluggableMap~DeclutterItems>
index number
layerStatesArray Array.<module:ol/layer/Layer~State>
layerIndex number
pixelToCoordinateTransform module:ol/transform~Transform
postRenderFunctions Array.<module:ol/PluggableMap~PostRenderFunction>
size module:ol/size~Size
tileQueue module:ol/TileQueue~TileQueue
usedTiles Object.<string, Object.<string, boolean>>
viewHints Array.<number>
wantedTiles Object.<string, Object.<string, boolean>>