Prismatic 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="sword-url">
  data:image/gif;base64,R0lGODlhIABBAOMNAH1fyC88aiiANYSoQ7PqTfz8v+//5S0VM0EfTWY4V5FVa6Z+aNi3af///////////yH5BAEKAA8ALAAAAAAgAEEAAAT+8MlJq7046807D4EQeJ4wnALZBcRAjA8owx1Cse8jELyoIjZJwCXYmUQyCRCIQTBswCHrGEIFEIpFIoNYMBILRUJ0GlQHAgQ4kWBesAzGQougFoHiucJECFoOCQpqdAgyal1iamguNBVLgWJtAZCEhTstKRghWGBabGCCN5eZFiEigFmeWgcXU5o+qHJ5CqxvpBpqqWwIta2aNHh6q0IgGTMJBYa5nQusQ2bGZVUgnAVsCoLPZjMVVSbPaW0tgQneZWiNQlZXu2rkljPhbkqWZijlS1GmIuFzWxNdwEQ5UWhSFCQnJmVJRGEQnTEiIolZVCRhGz8NFyYqRC7Boiv+dQjicrcsUEgzHZNw4XUAiz8gn7K8a4NrCEx/lPRs3LUSHZaFoCBdfECOC0R2qea89BNoAUaAWARcdNduCTCBbzjRfABTH5Jig7Y2DBjqWTx+6IjScTQokYwicOFa4SpoHle1oUygOaIX7QgsTyeAsiGN0Q5GUtQGllAUHA4QPLYV+xQYkQ2bQDBBhgYQq6O1Qy6+KBIiB2OXlcPQDFioTpoQwPJUFiOoqaQYaQp25smWiUc0hbiyuzLW7psq/7iaXMwhrB8EKJhvGBRcCblQKhgH8sHVHzbpRhVw7uIJ+w8242Ueyq49fTv2woFDOVI9u2uQjIdwZ19wCV2x8NEpA4VTAfamWIHFHYggVESZtyATgC3YkHLg2UehhAZiOJaGG3IIkIcqRAAAOw==
</script>

<script type="x-data-url" id="tree-url">
 ...

JavaScript

var treeUrl = document.getElementById('tree-url').textContent;
var swordUrl = document.getElementById('sword-url').textContent;

var fragmentShader = `
precision mediump float;

varying vec2 vTextureCoord;

uniform sampler2D uSampler;

void main() {
  vec4 ogcol = texture2D(uSampler, vTextureCoord);
  ogcol *= 1.0-smoothstep(256., 257., gl_FragCoord.y);
  gl_FragColor = ogcol;
}`

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

function DissolveFilter(uPolar, uGlowWidth, uGlowColor) {
    PIXI.Filter.call(this,undefined,fragmentShader);
    this.uniforms.uPolar = defaultValue(uPolar, 1.0);
    this.uniforms.uGlowWidth = defaultValue(uGlowWidth, 0.1);
    this.uniforms.uGlowColor = defaultValue(uGlowColor, [1.0,1.0,1.0]);
    this.uniforms.uStartTime = performance.now();
    this.uniforms.time = performance.now();
}

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

DissolveFilter.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(swordUrl);
var treeTexture = new PIXI.Texture(treeBaseTexture);
var treeSprite = new PIXI.Sprite(treeTexture);

var baseTexture = new PIXI.Texture(PIXI.Texture.WHITE);
var baseSprite = new PIXI.Sprite(baseTexture);
var bgSprite = new PIXI.Sprite(baseTexture);

treeSprite.width = 64
treeSprite.height = 32

baseSprite.width = 128
baseSprite.height = 128

bgSprite.width = 512
bgSprite.height =...