Shader Atlas
한국어
≈ Distortions

Displacement Map

변위 맵

A source layer's pixel values push the input image around in different places.

Also known as: DisplacementMapDisplacement mapping

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

React
// Renders only in browsers with WebGPU.
// /samples/… are this site’s sample files — point them at your own image or video.
import {
  Shader,
  DisplacementMap,
  ImageTexture,
  SimplexNoise,
} from 'shaders/react'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: 320 }} disableTelemetry>
      <ImageTexture
        objectFit="cover"
        url="/samples/poster.jpg" />
      <SimplexNoise
        id="displacement-source"
        visible={false} />
      <DisplacementMap
        amount={0.08}
        source="displacement-source" />
    </Shader>
  )
}
Vue
<!-- Renders only in browsers with WebGPU. -->
<!-- /samples/… are this site’s sample files — point them at your own image or video. -->
<script setup lang="ts">
import {
  Shader,
  DisplacementMap,
  ImageTexture,
  SimplexNoise
} from 'shaders/vue'
</script>

<template>
  <Shader style="width: 100%; height: 320px" :disable-telemetry="true">
    <ImageTexture
      object-fit="cover"
      url="/samples/poster.jpg"/>
    <SimplexNoise
      id="displacement-source"
      :visible="false"/>
    <DisplacementMap
      :amount="0.08"
      source="displacement-source"/>
  </Shader>
</template>
Svelte
<!-- Renders only in browsers with WebGPU. -->
<!-- /samples/… are this site’s sample files — point them at your own image or video. -->
<script>
  import {
    Shader,
    DisplacementMap,
    ImageTexture,
    SimplexNoise,
  } from 'shaders/svelte'
</script>

<Shader style="width: 100%; height: 320px" disableTelemetry>
  <ImageTexture
    objectFit="cover"
    url="/samples/poster.jpg" />
  <SimplexNoise
    id="displacement-source"
    visible={false} />
  <DisplacementMap
    amount={0.08}
    source="displacement-source" />
</Shader>
Solid
// Renders only in browsers with WebGPU.
// /samples/… are this site’s sample files — point them at your own image or video.
import {
  Shader,
  DisplacementMap,
  ImageTexture,
  SimplexNoise,
} from 'shaders/solid'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: '320px' }} disableTelemetry>
      <ImageTexture
        objectFit="cover"
        url="/samples/poster.jpg" />
      <SimplexNoise
        id="displacement-source"
        visible={false} />
      <DisplacementMap
        amount={0.08}
        source="displacement-source" />
    </Shader>
  )
}
JavaScript
// Renders only in browsers with WebGPU.
// /samples/… are this site’s sample files — point them at your own image or video.
// expects <canvas id="canvas" style="width:100%;height:320px"></canvas> on the page
import { createShader } from 'shaders/js'

const shader = await createShader(document.getElementById("canvas"), {
  components: [
    {
      type: 'ImageTexture',
      props: {
        objectFit: 'cover',
        url: '/samples/poster.jpg',
      },
    },
    {
      type: 'SimplexNoise',
      id: 'displacement-source',
      props: {
        visible: false,
      },
    },
    {
      type: 'DisplacementMap',
      props: {
        amount: 0.08,
        source: 'displacement-source',
      },
    }
  ]
}, { disableTelemetry: true })

Props · DisplacementMap

Changes apply to the demo above and to the code tabs. Descriptions come from the library registry (MIT).

NameValueDefaultRange / optionsDescription
sourceSource LayerSet in code—The layer whose pixels drive the displacement — its red/green (or luminance) push the content around
amountAmount0.30 – 1 (step 0.01)Overall displacement strength
channelModeChannelstwoAxistwoAxis · directionalHow the source drives the push — red→X / green→Y, or luminance along a fixed angle
angleAngle00 – 360 (step 1)Push direction in degrees (used by the Luminance channel mode)
edgesEdgesmirrorstretch · transparent · mirror · wrapHow to handle edges when distortion pushes content out of bounds

Every component also takes blendMode · opacity · visible · maskSource/maskType · boundingBox · id

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Wave Distortion파동 왜곡

The input ripples in a repeating wave that can move across the frame.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Flow Field플로우 필드 왜곡

The image drifts continuously along a smooth, fluid-like flow.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Glass Tiles유리 타일 왜곡

A grid of glass-like tiles refracts the input into a segmented mosaic.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Fluted Glass골유리 굴절

The input refracts through repeating glass flutes, creating ribbed bands and highlights.

Like placing an uneven transparent sheet over a picture, a map layer's colors push different parts of the input by different amounts.

Choose the map with `source` and set the overall displacement with `amount`. `channelMode` uses red and green to push horizontally and vertically, or luminance to push along one direction; `angle` sets that direction.

Both the content to distort and a map layer are needed for a visible change. With no source selected, the image can pass through unchanged. Set boundary behavior with `edges`, and pair it with `WaveDistortion` or `FlowField` for rippling or fluid-like movement.

When to use

Use it for water or heat refraction, paper-like texture, and localized image movement. Avoid it when no displacement map is selected or when copy must stay crisp.

Open as page ↗