Шаблон PIXI. с размытием картинок.

PIXI.JS

import 'pixi.js';
import * as filters from 'pixi-filters';
import {TimelineMax} from 'gsap';

var tl = new TimelineMax();

var app = new PIXI.Application(window.innerWidth, window.innerHeight, {backgroundColor : 0x1099bb}); //создаем сцену с цветом, шириной и высотой
document.body.appendChild(app.view); //добавляем в body созданую сцену.

var container = new PIXI.Container(); // создаем один общий контейнер
var BgContainer = new PIXI.Container(); //создаем контейнер(слой) с картинкой
var TextContainer = new PIXI.Container(); //создаем контейнер(слой) с текстом

app.stage.addChild(container); //добавляем на сцену наш контейнер(общий)
container.addChild(BgContainer); //добавляем на общий контейнер слой(контейнер) с картинкой
container.addChild(TextContainer); //добавляем на общий контейнер слой(контейнер) с текстом

//image
var bg = PIXI.Sprite.fromImage('../img/girls.jpg'); //создаем картинку
bg.width = 400; //задаем ширину
bg.height = 600; //задаем высоту
BgContainer.addChild(bg); //добавляем на контейнер(слой) нашу картинку.

//text
var basicText = new PIXI.Text('Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, sed.',{
  fontFamily: 'Arial',
  fontSize: 36,
  fontStyle: 'italic',
  fontWeight: 'bold',
  fill: '#ffffff', // gradient
  stroke: '#4a1850',
  strokeThickness: 5,
  dropShadow: true,
  dropShadowColor: '#000000',
  dropShadowBlur: 4,
  dropShadowAngle: Math.PI / 6,
  dropShadowDistance: 6,
  wordWrap: true,
  wordWrapWidth: 440
}); //создаем текст со стилями
basicText.x = 30; //задаем координаты(позиционирования ) на экран  
basicText.y = 90; //
TextContainer.addChild(basicText); //добавляем на контейнер(слой) текст
//end text


//displacement
var dispSprite = PIXI.Sprite.fromImage('../img/displacement.png'); //создаем дисплейсмент мэп (картинку)
dispSprite.texture.baseTexture.wrapMode = PIXI.WRAP_MODES.REPEAT; //передаем этой текстуре(дисплейсменту) цикличность, чтобы начиналась с начала
var dispFilter = new PIXI.filters.DisplacementFilter(dispSprite); //создаем фильтр из дисплейсмента
app.stage.addChild(dispSprite); // добавляем на сцену
BgContainer.filters = [dispFilter]; // передаем контейнеру(слою) с картинкой наш фильтр
dispFilter.scale.x = 1; //размытие по X
dispFilter.scale.y = 1; //размытие по Y
//end

//twist filter
// let twist = new PIXI.filters.TwistFilter();
// twist.angle = 0;
// twist.radius = 0;
// basicText.filter = [twist];

$('canvas').mouseenter(function() {
  TweenMax.ticker.addEventListener('tick',doWaves);
  tl.to(dispFilter.scale,0.5,{x:20});
});
$('canvas').mouseleave(function() {
  tl.to(dispFilter.scale,0.5,{x:1});
});

function doWaves() {
  dispSprite.x += 1; //ф-ция по смещению дисплейсмента по Иксу
};

// // Listen for animate update
app.ticker.add(function(delta) {
  app.renderer.render(container); //создаем рендер нашего общего контейнера
});

import 'pixi.js';
import * as filters from 'pixi-filters';
import {TimelineMax} from 'gsap';

var tl = new TimelineMax();

var app = new PIXI.Application(window.innerWidth, window.innerHeight, {transparent : true}); //создаем сцену с цветом, шириной и высотой
document.body.appendChild(app.view); //добавляем в body созданую сцену.

//app.stage.interactive = true;

var container = new PIXI.Container(); // создаем один общий контейнер
var BgContainer = new PIXI.Container(); //создаем контейнер(слой) с картинкой

app.stage.addChild(container); //добавляем на сцену наш контейнер(общий)
container.addChild(BgContainer); //добавляем на общий контейнер слой(контейнер) с картинкой

//image
var bg = PIXI.Sprite.fromImage('../img/2.jpg'); //создаем картинку
bg.width = 1920; //задаем ширину
bg.height = 1080; //задаем высоту
bg.y= 0;
BgContainer.addChild(bg); //добавляем на контейнер(слой) нашу картинку.

//displacement
var dispSprite = PIXI.Sprite.fromImage('../img/displacement.png'); //создаем дисплейсмент мэп (картинку)
dispSprite.texture.baseTexture.wrapMode = PIXI.WRAP_MODES.REPEAT; //передаем этой текстуре(дисплейсменту) цикличность, чтобы начиналась с начала
var dispFilter = new PIXI.filters.DisplacementFilter(dispSprite); //создаем фильтр из дисплейсмента
app.stage.addChild(dispSprite); // добавляем на сцену
BgContainer.filters = [dispFilter]; // передаем контейнеру(слою) с картинкой наш фильтр
dispFilter.scale.x = 1; //размытие по X
dispFilter.scale.y = 1; //размытие по Y
//end

var filter = new filters.BulgePinchFilter();
filter.strength = 0.1;
filter.radius = 90;
filter.center.x = 0.5;
filter.center.y = 0.5;
BgContainer.filters = [filter,dispFilter];

$(window).mousemove(function(e) {
var x = (e.pageX /screen.width).toFixed(2);
var y = (e.pageY /screen.height).toFixed(2);
filter.center.x = x;
filter.center.y = y;
console.log(x,y);

});

TweenMax.ticker.addEventListener('tick',doWaves);
tl.to(dispFilter.scale,0.5,{x:25});
function doWaves() {
dispSprite.x += 2; //ф-ция по смещению дисплейсмента по Иксу
};

// // Listen for animate update
app.ticker.add(function(delta) {
app.renderer.render(container); //создаем рендер нашего общего контейнера
});