Portal 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">
 ...

JavaScript

var treeUrl = document.getElementById('tree-url').textContent;
var punchUrl = document.getElementById('punch-url').textContent;

var fragmentShader = `
precision mediump float;

varying vec2 vTextureCoord;

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

uniform sampler2D uAstral;
uniform float time;

void main() {
  vec4 newcol = texture2D(uSampler, vTextureCoord);
  vec2 coord = vec2(vTextureCoord.x+0.125, vTextureCoord.y+0.125);
  
  float wx = 0.0075;
  float tx = cos(time * 0.002 + (10.0*vTextureCoord.y))*wx;
  vec2 offset = vec2(tx,0.0);
 	coord += offset;
  
  float blackval = distance(newcol.rgb, vec3(1.0));
  if (blackval >= 1.73 && newcol.a > 0.1) {
		newcol = texture2D(uAstral, coord);
  	newcol *= 1.0-smoothstep(70./inputSize.y, 86./inputSize.y, vTextureCoord.y);
	}
  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.time = performance.now();
}

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

AstralFilter.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(treeUrl);
var treeTexture = new PIXI.Texture(treeBaseTexture);
var treeSprite = new PIXI.TilingSprite(treeTexture, 256, 256);
var punchBaseTexture = new...