Cube transition effect on PIXI js

Cube transition effect as a pixi js filter.

by kouty79

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.5.1/pixi.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;

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

<script id="fragment" type="shader">
uniform sampler2D from, to;
uniform float progress;

uniform float persp;
uniform float unzoom;
uniform float reflection;
uniform float floating;

uniform vec2 resolution;
uniform vec2 filterDim;
uniform vec2 spriteDim;

varying vec2 vTextureCoord, vFilterCoord;

vec2 project (vec2 p) {
  return p * vec2(1.0, -1.2) + vec2(0.0, -floating/100.);
}

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

vec4 bgColor (vec2 p, vec2 pfr, vec2 pto, vec2 filterMax, vec2 ratio) {
  vec4 c = vec4(0.0, 0.0, 0.0, 1.0);
  pfr = project(pfr);
  if (inBounds(pfr)) {
    vec2 deltaFrom = vec2((p.x - pfr.x) , (p.y - (1. - pfr.y))) / ratio;
    vec2 fromPP = vec2(vTextureCoord.x - deltaFrom.x, 1./ratio.y -(vTextureCoord.y + deltaFrom.y));
  
  	pfr.y = 1.- pfr.y;
    c += mix(vec4(0.0), texture2D(from, fromPP), reflection * mix(.0, 1.0, pfr.y));
  }
  pto = project(pto);
  if (inBounds(pto)) {
    vec2 deltaTo = (p - pto) * filterMax;
    vec2 toPP = vec2(vFilterCoord.x - deltaTo.x, (vFilterCoord.y + deltaTo.y));
  
 		pto.y = 1.- pto.y;
    c += mix(vec4(0.0), texture2D(to, toPP), reflection * mix(.0, 1.0, pto.y));
  }
  return c;
}

// 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) /...

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
          },
          persp : {
            type:"1f",
            value:0.7
          },
          unzoom : {
            type:"1f",
            value:3.2
          },
          reflection : {
            type:"1f",
            value:0.4
          },
          floating : {
            type:"1f",
            value:3
          },
          filterMatrix:{
            type:'mat3',
            value:maskMatrix
          },
          resolution:{
            type:'vec2',
            value:resolution
          },
          filterDim:{
            type:'vec2',
            value: {
              x: to.width,
              y: to.height
            }
          },
          spriteDim:{
            type:'vec2',
            value: {
              x: 0,
              y: 0
            }
          }
        }
      
    );
    this.padding = 0;
		this.maskSprite = to;
    this.maskMatrix = maskMatrix;
  }

  apply(filterManager, input, output, clear, currentState) {

    this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, this.maskSprite);
      
      this.uniforms.filterDim = {
        x: this.maskSprite.width,
        y: this.maskSprite.height
      };
       this.uniforms.spriteDim = {
        x: currentState.target.width,
        y: currentState.target.height
      };
     // draw the filter...
    filterManager.applyFilter(this, input, output, clear);
  }
}

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

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

//...