DisplacementFilter Class
Distorts portions of the image, creates effects like computer glitches, bulge/pinch, and pond ripples. This filter Uses a reference image/canvas and interprets its r/g channels as a displacement map. A displacement map species how far from the original pixel the output pixel should be taken from.
Painting a displacement map means understanding how the r/g channel are interpreted. The red channel changes how far in the x to sample, and the green changes how far in the y to sample. The maximum range is -distance to +distance ('distance' being the distance value on the filter instance). This maps to the 0-255 color space for each channel. This means that for an image to experience no change it should be painted #808000 as that is in the middle for both the x and the y displacements.
- Red values smaller than 0x80 sample from further left, and larger than 0x80 sample form further right.
- Green values smaller than 0x80 sample from higher up, and larger than 0x80 sample form lower down.
See Filter for an more information on applying filters.
Constructor
DisplacementFilter
-
dudvMap
-
[distance=0]
Parameters:
-
dudvMap
HTMLImageElement | HTMLCanvasElement | WebGLTextureThe horizontal blur radius in pixels.
-
[distance=0]
Number optionalThe absolute value of the maximum possible displacement from the original pixel.
Item Index
Properties
Methods
_applyFilter
-
imageData
Parameters:
-
imageData
ImageDataTarget ImageData instance.
Returns:
applyFilter
-
ctx
-
x
-
y
-
width
-
height
-
[targetCtx=ctx]
Applies the filter to the specified context.
Parameters:
-
ctx
CanvasRenderingContext2DThe 2D context to use as the source.
-
x
NumberThe x position to use for the source rect.
-
y
NumberThe y position to use for the source rect.
-
width
NumberThe width to use for the source rect.
-
height
NumberThe height to use for the source rect.
-
[targetCtx=ctx]
CanvasRenderingContext2D optionalThe 2D context to draw the result to. Defaults to the context passed to ctx.
Returns:
If the filter was applied successfully.
clone
()
Filter
Returns a clone of this Filter instance.
Returns:
A clone of the current Filter instance.
getBounds
-
[rect]
Provides padding values for this filter. That is, how much the filter will extend the visual bounds of an object it is applied to.
Parameters:
-
[rect]
Rectangle optionalIf specified, the provided Rectangle instance will be expanded by the padding amounts and returned.
Returns:
If a rect
param was provided, it is returned. If not, either a new rectangle with the padding values, or null if no padding is required for this filter.
shaderParamSetup
-
gl
-
stage
-
shaderProgram
Assign any unique uniforms or other setup functionality here.
Parameters:
-
gl
WebGLContextThe context associated with the stage performing the render.
-
stage
StageGLThe stage instance that will be rendering.
-
shaderProgram
ShaderProgramThe compiled shader that is going to be used to perform the render.
Properties
_multiPass
Filter
private
Another filter that is required to act as part of this filter and created and managed under the hood.
Default: null
distance
Image | HTMLCanvasElement
The absolute value of the maximum shift in x/y possible.
Default: 128
dudvMap
Image | HTMLCanvasElement
The visual source to fetch the displacement map from.
FRAG_SHADER
String
readonly
Pre-processed template shader code. It will be parsed before being fed in into the shader compiler. This should be based upon StageGL.SHADER_FRAGMENT_BODY_REGULAR
usesContext
Boolean
A flag stating that this filter uses a context draw mode and cannot be batched into imageData processing.
Default: false
VTX_SHADER
String
readonly
Pre-processed template shader code. It will be parsed before being fed in into the shader compiler. This should be based upon StageGL.SHADER_VERTEX_BODY_REGULAR