Warning Shader

by roomyrooms

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.2.2/pixi.min.js"></script>
<script type="x-data-url" id="tree-url">
  data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAAQCAIAAAB2sTYeAAAARElEQVRoge3TAREAIACEsNf+nTUI21GB87YdKdodhBmANAOQZgDSDECaAUgzAGkGIM0ApBmANAOQZgDSDECaAUgzAGkfdSICHkXtvlsAAAAASUVORK5CYII=
</script>
<script type="x-data-url" id="cloak-url">
 ...

JavaScript

var treeUrl = document.getElementById('tree-url').textContent;
var treeImg = document.getElementById('tree-preview');
var cloakUrl = document.getElementById('cloak-url').textContent;
var cloakImg = document.getElementById('cloak-preview');

cloakImg.src = cloakUrl;

var fragmentShader = `
precision mediump float;

varying vec2 vTextureCoord;

uniform sampler2D uSampler;
uniform highp vec4 inputSize;
uniform highp vec4 outputFrame;
uniform float time;

void main() {
	vec2 o = vTextureCoord * inputSize.xy;
  vec4 ogcol = texture2D(uSampler, vTextureCoord);
  float c = distance(o, vec2(0.5)*inputSize.xy);
  float size = 0.1;
  float wavewidth = (inputSize.x+inputSize.y)/2./2.;
  float t = fract(time*0.001)*2.;
  float s = smoothstep((t-size)*wavewidth, (t+size)*wavewidth, c);
  s = (1.0-s) * s;
  ogcol = vec4(vec3(s*5.0) * vec3(1.0) * ogcol.rgb + ogcol.rgb, ogcol.a);
  gl_FragColor = ogcol;
}`

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

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

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

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

PIXI.settings.MIPMAP_TEXTURES = PIXI.MIPMAP_MODES.ON;
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 baseTexture = new...