Волнистая картинка с маской (THREE/Fragment/Vertex shader)

app.js

//import 'pixi.js';
//import * as filters from 'pixi-filters';
import * as THREE from 'three';
import {TimelineMax} from 'gsap';
import fragment from './fragment.glsl';
import vertex from './vertex.glsl';


var container;
var camera, scene, renderer;
var uniforms;
var mouse = {x:0, y:0};
var loader = new THREE.TextureLoader();
document.onmousemove = getMouseXY;
init();
animate();
function getMouseXY(e) {
  mouse.x = e.pageX;
  mouse.y = e.pageY;
  uniforms.u_mouse.value.x = mouse.x;
  uniforms.u_mouse.value.y = mouse.y;
}
function init() {
  container = document.getElementById( 'container' );
            
  camera = new THREE.Camera();
  camera.position.z = 1;
  scene = new THREE.Scene();
  var geometry = new THREE.PlaneBufferGeometry( 2, 2 );
  var textura = loader.load( '../img/3.jpg' );
  uniforms = {
    u_time: { type: 'f', value: 1.0 },
    u_animation: { type: 'f', value: 0.0 },
    u_mouse: { type: 'v2', value: new THREE.Vector2() },
    u_resolution: { type: 'v2', value: new THREE.Vector2() },
    u_size: {type:'v2',value: new THREE.Vector2(1024,815) },
    texture: {value:textura },
    map: {value:loader.load( 'img/3_mask.jpg' ) }
  };
  var material = new THREE.ShaderMaterial( {
    uniforms: uniforms,
    vertexShader: vertex,
    fragmentShader: fragment
  } );
  var mesh = new THREE.Mesh( geometry, material );
  scene.add( mesh );
  renderer = new THREE.WebGLRenderer();
  renderer.setPixelRatio( window.devicePixelRatio );
            
  container.appendChild( renderer.domElement );
  onWindowResize();
  window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize( event ) {
  renderer.setSize( window.innerWidth, window.innerHeight );
  uniforms.u_resolution.value.x = renderer.domElement.width;
  uniforms.u_resolution.value.y = renderer.domElement.height;
  uniforms.u_mouse.value.x = mouse.x;
  uniforms.u_mouse.value.y = mouse.y;
}
function animate() {
  requestAnimationFrame( animate );
  render();
}
function render() {
  uniforms.u_time.value += 0.05;
  renderer.render( scene, camera );
}
document.addEventListener('click',function() {
  var tl = new TimelineMax();
  tl
    .to(uniforms.u_animation, 3, {value:1, ease: Power3.easeInOut});
});




















// 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/1.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); //создаем рендер нашего общего контейнера
// });