OpenLayers

Class: WebGLPostProcessingPass

ol/webgl/PostProcessingPass~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;

void main() {
  gl_FragColor = texture2D(u_image, v_texCoord);
}

new WebGLPostProcessingPass(options)

webgl/PostProcessingPass.js, line 104
Name Type Description
options

Options.

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

Methods

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>>

getFrameBuffer(){WebGLFramebuffer}

webgl/PostProcessingPass.js, line 250
Returns:
Frame buffer

getGL(){WebGLRenderingContext}

webgl/PostProcessingPass.js, line 164

Get the WebGL rendering context

Returns:
The rendering context.

init(frameState)

webgl/PostProcessingPass.js, line 175

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
frameState

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>>