Class: WebGLPostProcessingPass

ol/webgl/PostProcessingPass~WebGLPostProcessingPass 


import WebGLPostProcessingPass from 'ol/webgl/PostProcessingPass.js';

This class is used to define Post Processing passes with custom shaders and uniforms. This is used internally by 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;
uniform float u_opacity;

varying vec2 v_texCoord;

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

new WebGLPostProcessingPass(options)

webgl/PostProcessingPass.js, line 103
Name Type Description
webGlContext WebGLRenderingContext

WebGL context; mandatory.
scaleRatio number | undefined

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

Vertex shader source
fragmentShader string | undefined

Fragment shader source
uniforms Object | undefined

Uniform definitions for the post process step

Methods

apply(frameState, nextPass, preCompose, postCompose)

webgl/PostProcessingPass.js, line 257

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

Name Type Description
frameState FrameState

current frame state
nextPass WebGLPostProcessingPass | undefined

Next pass, optional
preCompose function | undefined

Called before composing.
postCompose function | undefined

Called before composing.
frameState.pixelRatio number

The pixel ratio of the frame.
frameState.time number

The time when rendering of the frame was requested.
frameState.viewState State

The state of the current view.
frameState.animate boolean

Animate.
frameState.coordinateToPixelTransform Transform

CoordinateToPixelTransform.
frameState.declutterTree module:rbush

DeclutterTree.
frameState.extent null | Extent

Extent.
frameState.nextExtent Extent | undefined

Next extent during an animation series.
frameState.index number

Index.
frameState.layerStatesArray Array<State>

LayerStatesArray.
frameState.layerIndex number

LayerIndex.
frameState.pixelToCoordinateTransform Transform

PixelToCoordinateTransform.
frameState.postRenderFunctions Array<PostRenderFunction>

PostRenderFunctions.
frameState.size Size

Size.
frameState.tileQueue TileQueue

TileQueue.
frameState.usedTiles Object.<string, Object.<string, boolean>>

UsedTiles.
frameState.viewHints Array.<number>

ViewHints.
frameState.wantedTiles Object.<string, Object.<string, boolean>>

WantedTiles.
frameState.mapId string

The id of the map.
frameState.renderTargets Object.<string, boolean>

Identifiers of previously rendered elements.

getFrameBuffer(){WebGLFramebuffer}

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

getGL(){WebGLRenderingContext}

webgl/PostProcessingPass.js, line 184

Get the WebGL rendering context

Returns:
The rendering context.

init(frameState)

webgl/PostProcessingPass.js, line 195

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 State

The state of the current view.
animate boolean

Animate.
coordinateToPixelTransform Transform

CoordinateToPixelTransform.
declutterTree module:rbush

DeclutterTree.
extent null | Extent

Extent.
nextExtent Extent | undefined

Next extent during an animation series.
index number

Index.
layerStatesArray Array<State>

LayerStatesArray.
layerIndex number

LayerIndex.
pixelToCoordinateTransform Transform

PixelToCoordinateTransform.
postRenderFunctions Array<PostRenderFunction>

PostRenderFunctions.
size Size

Size.
tileQueue TileQueue

TileQueue.
usedTiles Object.<string, Object.<string, boolean>>

UsedTiles.
viewHints Array.<number>

ViewHints.
wantedTiles Object.<string, Object.<string, boolean>>

WantedTiles.
mapId string

The id of the map.
renderTargets Object.<string, boolean>

Identifiers of previously rendered elements.