pixi.js - v2.0.0 - displacement shader vs twist shader

by Guillaume Lafarge

HTML

<script src="https://cdn.rawgit.com/GoodBoyDigital/pixi.js/v2.0.0/bin/pixi.js"></script>
<h1>pixi.js - v2.0.0 / twist shader</h1>
<div id="twist"></div>

<h1>pixi.js - v2.0.0 / displacement map</h1>
<div id="dmap"></div>

CSS

canvas {
    margin:5px;
}
img {
    width:64px;
}

JavaScript

// Twist shader
(function () {
    var renderer = PIXI.autoDetectRenderer(256, 256);
    document.querySelector('#twist').appendChild(renderer.view);

    // Stage
    var stage = new PIXI.Stage(0xd92256);

    // Background
    var bg = PIXI.Sprite.fromImage("https://i.imgur.com/TQirGDD.jpg");
    stage.addChild(bg);

    // Apply shader
    var twistShader = new PIXI.TwistFilter();
    bg.shader = twistShader;

    // Animate
    requestAnimFrame(animate);

    function animate() {
        twistShader.angle += 0.01;
        renderer.render(stage);
        requestAnimFrame(animate);
    }
})();

// Displacement map shader
(function () {
    var renderer = PIXI.autoDetectRenderer(256, 256);
    document.querySelector('#dmap').appendChild(renderer.view);

    // Stage
    var stage = new PIXI.Stage(0xd92256);

    // Background
    var bg = PIXI.Sprite.fromImage("https://i.imgur.com/TQirGDD.jpg");
    stage.addChild(bg);

    // Apply shader
    var displacementTexture = PIXI.Texture.fromImage("https://i.imgur.com/2yYayZk.png");
	var displacementShader = new PIXI.DisplacementFilter(displacementTexture);
    bg.shader = displacementShader; // bg.filters = [displacementShader]

    // Animate
    requestAnimFrame(animate);

    function animate() {
        displacementShader.offset.x += 1;
        renderer.render(stage);
        requestAnimFrame(animate);
    }
})();