Portal Shader

by roomyrooms

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.2.2/pixi.min.js"></script>

JavaScript

var fragmentShader = `
precision mediump float;

varying vec2 vTextureCoord;

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

uniform vec2 linePoints[16];
uniform int lineCount;
uniform float uThick;
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;
}

float drawLine(vec2 p1, vec2 p2, vec2 uv, float a) {
	float r = 0.;
  float one_px = 1. / inputSize.w;
  
  float d = distance(p1, p2);
  float duv = distance(p1, uv);
  
  r = 1.-floor(1.-(a*one_px)+distance(mix(p1, p2, clamp(duv/d, 0., 1.)), uv));
  return r;
}

void main() {
  vec4 ogcol = texture2D(uSampler, vTextureCoord);
  vec2 coord = mapCoord(vTextureCoord.xy);
  vec4 linecol = vec4(0.0);
  for (int i = 0; i < 16; i++) {
  	if (i >= lineCount-1) { break; }
  	//linecol.rgb += vec3(drawLine(linePoints[i], linePoints[i+1], coord, 0.));
  }
  linecol.rgb += vec3(drawLine(vec2(256.), vec2(0.), coord, 1.));
  gl_FragColor = ogcol+linecol;
}`

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

function AstralFilter(linePoints, lineThickness) {
    PIXI.Filter.call(this,undefined,fragmentShader);
    this.uniforms.linePoints = new Float32Array(linePoints);
    this.uniforms.lineCount = linePoints.length;
    this.uniforms.uThick = lineThickness;
    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();
    filterManager.applyFilter(this, input, output);
}

PIXI.settings.MIPMAP_TEXTURES = PIXI.MIPMAP_MODES.ON;
var stage = new...