JSFiddle - React, Tailwind, and code Playground

by f1nal

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.8.5/pixi.js"></script>
<body>
  <img id="grid_img" style="display: none"...

JavaScript

var app = new PIXI.Application(320, 186, {backgroundColor : 0x1099bb});
document.body.appendChild(app.view);

var vertSrc = `
#ifdef GL_ES
precision highp float;
#endif

attribute vec3 aVertexPosition;

attribute vec2 aTextureCoord;

uniform vec4 filterArea;
uniform vec2 dimensions;

varying vec3 vPosition;
varying vec2 vTextureCoord;

void main(void){
	vPosition = aVertexPosition;
	vTextureCoord = aTextureCoord;
	gl_Position = vec4(vPosition, 1.0);
}
`;

var fragSrc = `
#ifdef GL_ES
precision highp float;
#endif

uniform sampler2D uSampler;

uniform vec4 filterArea;
uniform vec2 dimensions;

varying vec3 vPosition;
varying vec2 vTextureCoord;

vec2 GLCoord2TextureCoord(vec2 glCoord) {
	return glCoord  * vec2(1.0, -1.0) / 2.0 + vec2(0.5, 0.5);
}

void main(void){
  float a = 1.0;
  float b = 1.0;
  float F = 1.0;
  float scale = 1.0;
  vec4 uLens = vec4(a, b, F, scale);
  vec2 uFov = vec2(1.0, 1.0);
  
  vec2 pixelCoord = vPosition.xy;

	float L = length(vec3(pixelCoord.xy/scale, F));

	vec2 vMapping = pixelCoord.xy * F / L;
	
	vMapping = vMapping * uLens.xy;
	vMapping = GLCoord2TextureCoord(vMapping / scale);

	vec4 texture = texture2D(uSampler, vMapping);
	
	if(vMapping.x > 0.99 || vMapping.x < 0.01 || vMapping.y > 0.99 || vMapping.y < 0.01){
		texture = vec4(0.0, 0.0, 0.0, 1.0);
	} 
	
	gl_FragColor = texture;
}
`;

var uniforms = {  };
filter = new PIXI.Filter( vertSrc, fragSrc, uniforms );

// load image
var img = document.getElementById( "grid_img" );
var texture = PIXI.Texture.from( img );
var sprite = new PIXI.Sprite( texture );
app.stage.addChild( sprite );

app.stage.filterArea = app.renderer.screen;

// apply filter
sprite.filters = [ filter ];