pixi.js - water displacement filter
HTML
<script src="https://cdn.rawgit.com/GoodBoyDigital/pixi.js/v1.6.1/bin/pixi.js"></script>
JavaScript
// Renderer
var renderer = PIXI.autoDetectRenderer(256, 256);
document.body.appendChild(renderer.view);
// Stage
var stage = new PIXI.Stage(0xd92256);
// Container
var container = new PIXI.DisplayObjectContainer();
stage.addChild(container);
// Background
var bg = PIXI.Sprite.fromImage("https://thumbs.dreamstime.com/x/tileable-water-reflection-pattern-illustration-39240315.jpg");
container.addChild(bg);
// Filter
var displacementTexture = PIXI.Texture.fromImage("http://i.imgur.com/2yYayZk.png");
var displacementFilter = new PIXI.ReflectionFilter({mirror:false});
container.filters = [displacementFilter];
// Animate
requestAnimFrame(animate);
function animate() {
var offset = 0.2;
displacementFilter.offset.x += offset;
displacementFilter.offset.y += offset;
renderer.render(stage);
requestAnimFrame(animate);
}