pixi.js - displacement filter / 1.6.1 vs 2.0.0
HTML
<script src="https://cdn.rawgit.com/GoodBoyDigital/pixi.js/v1.6.1/bin/pixi.js"></script>
<h1>pixi.js - v1.6.1</h1>
<img src="http://i.imgur.com/TQirGDD.jpg">
CSS
canvas {
margin:5px;
}
img {
width:64px;
}
JavaScript
for (var id = 0; id < 3; id++) {
// 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("http://i.imgur.com/TQirGDD.jpg");
container.addChild(bg);
// Filter
var displacementTexture = PIXI.Texture.fromImage("http://i.imgur.com/2yYayZk.png");
var displacementFilter = new PIXI.DisplacementFilter(displacementTexture);
// Apply it
container.filters = [displacementFilter];
// Animate
requestAnimFrame(animate);
function animate() {
var offset = 0.1;
if(id==1) offset = 1;
else if(id==2) offset = 2;
displacementFilter.offset.x += offset;
displacementFilter.offset.y += offset;
renderer.render(stage);
requestAnimFrame(animate);
}
}