JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.3.5/pixi.js"></script>
<body>
<img id="grid_img" style="display: none"...
JavaScript
var app = new PIXI.Application(500, 500, {
backgroundColor: 0x1099bb
});
document.body.appendChild(app.view);
// create filter
var fragSrc = `
precision mediump float;
uniform vec2 iResolution;
uniform vec4 iMouse;
uniform sampler2D uSampler;
uniform vec4 filterArea;
uniform vec2 dimensions;
void main()
{
vec2 p = gl_FragCoord.xy / iResolution.x;//normalized coords with some cheat
//(assume 1:1 prop)
float prop = iResolution.x / iResolution.y;//screen proroption
vec2 m = vec2(0.5, 0.5 / prop);//center coords
vec2 d = p - m;//vector from center to current fragment
float r = sqrt(dot(d, d)); // distance of pixel from center
float power = ( 2.0 * 3.141592 / (2.0 * sqrt(dot(m, m))) ) *
(iMouse.x / iResolution.x - 0.5);//amount of effect
float bind;//radius of 1:1 effect
if (power > 0.0) bind = sqrt(dot(m, m));//stick to corners
else {if (prop < 1.0) bind = m.x; else bind = m.y;}//stick to borders
//Weird formulas
vec2 uv;
if (power > 0.0)//fisheye
uv = m + normalize(d) * tan(r * power) * bind / tan( bind * power);
else if (power < 0.0)//antifisheye
uv = m + normalize(d) * atan(r * -power * 10.0) * bind / atan(-power * bind * 10.0);
else uv = p;//no effect for power = 1.0
vec3 col = texture2D(uSampler, vec2(uv.x, -uv.y * prop)).xyz;//Second part of cheat
//for round effect, not elliptical
gl_FragColor = vec4(col, 1.0);
}
`.split('\n').reduce((c, a) => c + a.trim() + '\n');
var uniforms = {
iResolution: {
type: 'v3',
value: [500, 500, 0]
},
iMouse: {
type: 'v4',
value: [0, 0, 0, 0]
}
}
var filter = new PIXI.Filter(null, fragSrc );
filter.apply = function(filterManager, input, output)
{
this.uniforms.dimensions[0] = input.sourceFrame.width
this.uniforms.dimensions[1] = input.sourceFrame.height
this.uniforms.iMouse[0] = 0
this.uniforms.iMouse[1] = 0
...