JSFiddle - React, Tailwind, and code Playground

by kouty79

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.5.1/pixi.min.js"></script>
<script id="vertex" type="shader">
attribute vec2 aVertexPosition;
attribute vec2 aTextureCoord;

uniform mat3 projectionMatrix;
uniform mat3 filterMatrix;

varying vec2 vTextureCoord;
varying vec2 vFilterCoord;
varying vec2 cippa;

void main(void)
{
   gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);
   vFilterCoord = ( filterMatrix * vec3( aTextureCoord, 1.0)  ).xy;
   cippa =  ( filterMatrix * vec3( 1.0, 1.0, 1.0)  ).xy;
   vTextureCoord = aTextureCoord;
}
</script>

<script id="fragment" type="shader">
uniform sampler2D from,to;
uniform float progress;
uniform float unzoom;
uniform vec2 resolution;
uniform vec2 filterDim;
uniform vec2 filterPos;

varying vec2 vTextureCoord, vFilterCoord, cippa;

float persp = 0.67;

bool inBounds(vec2 p){
	return all(lessThan(vec2(0.0),p))&&all(lessThan(p,vec2(1.0)));
}

bool inBounds2(vec2 p, float max){
	return all(lessThan(vec2(0.0),p))&&all(lessThan(p,vec2(1.0, max)));
}


// p : the position
// persp : the perspective in [ 0, 1 ]
// center : the xcenter in [0, 1] \ 0.5 excluded
vec2 xskew (vec2 p, float persp, float center) {
  float x = mix(p.x, 1.0-p.x, center);
  return (
    (
      vec2( x, (p.y - 0.5*(1.0-persp) * x) / (1.0+(persp-1.0)*x) )
      - vec2(0.5-distance(center, 0.5), 0.0)
    )
    * vec2(0.5 / distance(center, 0.5) * (center<0.5 ? 1.0 : -1.0), 1.0)
    + vec2(center<0.5 ? 0.0 : 1.0, 0.0)
  );
}

vec2 xskew2 (vec2 p, float persp, float center, vec2 max) {
  float x = mix(p.x, 1.0-p.x, center);
  return (
    (
      vec2( x, (p.y - 0.5*(1.0-persp) * x) / (1.0+(persp-1.0)*x) )
      - vec2(0.5-distance(center, 0.5), 0.0)
    )
    * vec2(0.5 / distance(center, 0.5) * (center<0.5 ? 1.0 : -1.0), 1.0)
    + vec2(center<0.5 ? 0.0 : 1.0, 0.0)
  );
}

void main(){
	vec2 op = gl_FragCoord.xy / resolution.xy;

	vec2 fromP = xskew(
  vec2(vTextureCoord.x / progress  , vTextureCoord.y), 
 ...

JavaScript

class CubeFilter extends PIXI.Filter
{
	constructor(to, resolution) {

    const maskMatrix = new PIXI.Matrix();

    super(
      // vertex shader
     	document.getElementById("vertex").innerHTML,
      // fragment shader
      document.getElementById("fragment").innerHTML,
      // custom uniforms
      {

				to: {
            type: 'sampler2D',
            value: to.texture
          },
        progress : {
          type:"1f",
          value:0.01
        },
        filterMatrix:{
          type:'mat3',
          value:maskMatrix
        },
        unzoom : {
          type:"1f",
          value:3.2
        },
        resolution:{
          type:'vec2',
          value:resolution
        },
        filterDim:{
          type:'vec2',
          value: {
          	x: to.width,
            y: to.height
          }
        },
        filterPos: {
         	type:'vec2',
          x: to.x,
          y: to.y
      	}
      }
    );
    this.padding = 0;
		this.maskSprite = to;
    this.maskMatrix = maskMatrix;
  }

  apply(filterManager, input, output, clear, currentState) {
  //console.log(this.maskMatrix)
  
    this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, this.maskSprite);
      
      this.uniforms.filterDim = {
        x: this.maskSprite.width,
        y: this.maskSprite.height
      };
      
       this.uniforms.filterPos = {
        x: this.maskSprite.x,
        y: this.maskSprite.y
      };

     // draw the filter...
   	filterManager.applyFilter(this, input, output, clear);
  }
}

var dim = {w:500, h:500};

var renderer = PIXI.autoDetectRenderer(dim.w, dim.h);
document.body.appendChild(renderer.view);

// create the root of the scene graph
var stage = new PIXI.Container();

var oldsprite = PIXI.Sprite.fromImage('https://i.imgur.com/StJ5aaf.jpg');
var newsprite = PIXI.Sprite.fromImage('https://i.imgur.com/Msctfi7.jpg');
//var newsprite = PIXI.Sprite.fromImage('https://i.imgur.com/StJ5aaf.jpg');
var progress =...