@pixi/filter-displacement

What is @pixi/filter-displacement?

@pixi/filter-displacement is a filter for the PixiJS library that allows developers to create displacement effects on display objects. This can be used to create a variety of visual effects such as water ripples, heat haze, or any effect that requires the distortion of pixels based on a displacement map.

What are @pixi/filter-displacement's main functionalities?

Basic Displacement Effect

This code demonstrates how to apply a basic displacement effect to a sprite using a displacement map. The displacement map is another image that defines how the pixels of the original image should be displaced.

const app = new PIXI.Application();
document.body.appendChild(app.view);

const sprite = PIXI.Sprite.from('path/to/image.png');
app.stage.addChild(sprite);

const displacementSprite = PIXI.Sprite.from('path/to/displacement_map.png');
const displacementFilter = new PIXI.filters.DisplacementFilter(displacementSprite);

app.stage.addChild(displacementSprite);
sprite.filters = [displacementFilter];

displacementSprite.x = app.renderer.width / 2;
displacementSprite.y = app.renderer.height / 2;

Animating Displacement

This code snippet shows how to animate the displacement effect by moving the displacement map over time. This can create dynamic effects like moving water or shifting heat haze.

app.ticker.add(() => {
  displacementSprite.x += 1;
  displacementSprite.y += 1;
});

Other packages similar to @pixi/filter-displacement

pixi-filters

pixi-filters is a collection of filters for PixiJS, including displacement, blur, and more. It offers a broader range of filters compared to @pixi/filter-displacement, which focuses specifically on displacement effects.

three.js

three.js is a 3D library that includes shaders and effects similar to displacement mapping. While it is more complex and geared towards 3D graphics, it can achieve similar visual effects in a 3D context.

README

@pixi/filter-displacement

Installation

npm install @pixi/filter-displacement

Usage

import '@pixi/filter-displacement';