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="tree-url">
 ...

JavaScript

var treeUrl = document.getElementById('tree-url').textContent;
var treeImg = document.getElementById('tree-preview');
var lightUrl = document.getElementById('light-url').textContent;
var lightImg = document.getElementById('light-preview');

treeImg.src = treeUrl;
lightImg.src = lightUrl;

var fragmentShader = `
precision mediump float;

varying vec2 vTextureCoord;

uniform sampler2D uSampler;
uniform highp vec4 inputSize;
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(void)
{
    vec2 coord = mapCoord(vTextureCoord);
    float dist = distance(coord/inputSize.xy,vec2(0.5));
    float mopp = ceil(dist*16.);
    vec2 mov = mod(floor(coord), mopp);
    
		coord = unmapCoord(coord);
    vec4 col = texture2D(uSampler, coord);
    col = mix(col,col*0.0,mov.x+mov.y);
		gl_FragColor = col;
}`

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


function LightFilter() {
    PIXI.Filter.call(this,undefined,fragmentShader);
    this.uniforms.time = performance.now()
}

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

LightFilter.prototype.apply = function (filterManager, input, output, clear) {
		clear = PIXI.CLEAR_MODES;
    this.uniforms.time = performance.now();
    // draw the filter...
    filterManager.applyFilter(this, input, output, clear);
}

var stage = new PIXI.Container();

// create a renderer instance.
var renderer = PIXI.autoDetectRenderer(512,512);
renderer.roundPixels = true;
PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST;

// tex creation
var treeBaseTexture = new PIXI.BaseTexture(treeImg);
var treeTexture = new PIXI.Texture(treeBaseTexture);
var treeSprite = new PIXI.Sprite(treeTexture);

var...