Pixel Pull Shader

by roomyrooms

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.2.2/pixi.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/pixi-filters@latest/dist/pixi-filters.js"></script>
<script type="x-data-url" id="dest-url">
 ...

JavaScript

const portal = [
	"https://i.ibb.co/M9rWLVb/Portal-05.png",
  "https://i.ibb.co/JvgX7NS/Portal-06.png",
  "https://i.ibb.co/JvgX7NS/Portal-07.png",
  "https://i.ibb.co/JvgX7NS/Portal-08.png",
  "https://i.ibb.co/JvgX7NS/Portal-09.png",
];
const dest = "https://i.ibb.co/qmBcNDg/download-11.png";
var destUrl = document.getElementById('dest-url').textContent;
var portalUrl = document.getElementById('portal-url').textContent;

var fragmentShader = `
varying vec2 vTextureCoord;

uniform highp vec4 inputSize;
uniform highp vec4 outputFrame;

uniform sampler2D uSampler;
uniform sampler2D uAstral;
uniform float time;

vec2 mapCoord( vec2 coord )
{
    coord *= inputSize.xy;
    coord += inputSize.zw;

    return coord;
}

vec2 unmapCoord( vec2 coord )
{
    coord -= inputSize.zw;
    coord /= inputSize.xy;

    return coord;
}

void main() {
  vec2 coord = mapCoord(vTextureCoord);
  vec4 newcol = texture2D(uSampler, vTextureCoord);
  
  //float wavewidth = 0.004;
  //coord += sin(time*0.005 + (55.0 * vTextureCoord.x))*wavewidth;
  float blackval = distance(newcol.rgb, vec3(0.078, 0.086, 0.122));
  if (blackval <= 0.5 && newcol.a > 0.1) {
		newcol = texture2D(uAstral, coord);
    //newcol *= 1.0-blackval;
	}
  gl_FragColor = newcol;
}`

function defaultValue(inputValue, defaultValue) {
    inputValue = typeof inputValue !== 'undefined' ? inputValue : defaultValue;
    return inputValue;
}

function AstralFilter(uTex) {
    PIXI.Filter.call(this,undefined,fragmentShader);
    this.uniforms.uAstral = uTex;
    this.uniforms.uSize = [uTex.width, uTex.height];
    this.uniforms.time = performance.now();
}

AstralFilter.prototype = Object.create(PIXI.Filter.prototype);
AstralFilter.prototype.constructor = AstralFilter;

AstralFilter.prototype.apply = function (filterManager, input, output, clear) {
    this.uniforms.time = performance.now();
    filterManager.applyFilter(this, input, output);
}

var stage = new PIXI.Container();

var renderer =...