DisplacementMap

Distorts child content using another layer's pixels as a displacement map

Props

sourcestring

Default:

The layer whose pixels drive the displacement — its red/green (or luminance) push the content around

source

stringDefault:

The layer whose pixels drive the displacement — its red/green (or luminance) push the content around

amountnumber

Default:0.3

Overall displacement strength

amount

numberDefault: 0.3

Overall displacement strength

channelMode"twoAxis" | "directional"

Default:twoAxis

How the source drives the push — red→X / green→Y, or luminance along a fixed angle

channelMode

"twoAxis" | "directional"Default: twoAxis

How the source drives the push — red→X / green→Y, or luminance along a fixed angle

anglenumber

Default:0

Push direction in degrees (used by the Luminance channel mode)

angle

numberDefault: 0

Push direction in degrees (used by the Luminance channel mode)

edges"stretch" | "transparent" | "mirror" | "wrap"

Default:mirror

How to handle edges when distortion pushes content out of bounds

edges

"stretch" | "transparent" | "mirror" | "wrap"Default: mirror

How to handle edges when distortion pushes content out of bounds

Usage

<Shader>
  <DisplacementMap>
    <Circle />
  </DisplacementMap>
</Shader>

<Shader>
  <DisplacementMap>
    <Circle />
  </DisplacementMap>
</Shader>

<Shader>
  <DisplacementMap>
    <Circle />
  </DisplacementMap>
</Shader>

<Shader>
  <DisplacementMap>
    <Circle />
  </DisplacementMap>
</Shader>

import { createShader } from 'shaders/js'

const shader = await createShader(canvas, {
  components: [
    { type: 'DisplacementMap', props: {}, children: [
      { type: 'Circle', props: {} }
    ]}
  ]
})

DiffuseBlur

Dither