JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.5.2/pixi.js"></script>
CSS
margin: 0;
padding: 0;
background-color: #000000;
JavaScript
function CircleFilter() {
var vertexShader = `
precision mediump float;
attribute vec2 aVertexPosition;
attribute vec2 aTextureCoord;
uniform mat3 projectionMatrix;
varying vec2 vTextureCoord;
void main(void)
{
gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);
vTextureCoord = aTextureCoord;
}
`;
var fragShader = `
precision mediump float;
float frequency = 10.0;
float uScale = 13.0;
uniform vec4 filterArea;
uniform vec2 dimensions;
varying vec2 vTextureCoord;
vec2 resolution = vec2(1.0, 1.0);
uniform sampler2D uSampler;
vec4 color = vec4(0.027, 1.0, 0.054, 1.0);
float aastep(float threshold, float value) {
float afwidth = frequency * (1.0/dimensions.x) / uScale;
return smoothstep(threshold-afwidth, threshold+afwidth, value);
}
void main() {
vec2 pixelCoord = vTextureCoord * filterArea.xy;
vec2 normalizedCoord = pixelCoord / dimensions;
float r = 0.5;
vec2 uv = normalizedCoord.xy;
uv -= 0.5;
float d = length(uv);
float alpha = aastep(r, d);
gl_FragColor = mix(color, vec4(0.0), alpha);
}
`;
PIXI.Filter.call(this, vertexShader, fragShader);
this.uniforms.dimensions = [0, 0];
this.padding = 0;
}
CircleFilter.prototype = Object.create(PIXI.Filter.prototype);
CircleFilter.prototype.constructor = CircleFilter;
CircleFilter.prototype.apply = function(filterManager, input, output) {
this.uniforms.dimensions[0] = input.sourceFrame.width;
this.uniforms.dimensions[1] = input.sourceFrame.height;
filterManager.applyFilter(this, input, output);
};
var app = new PIXI.Application();
document.body.appendChild(app.view);
var test = new PIXI.Sprite();
test.width = 512;
test.height = 512;
test.position.x = 0.5;
test.position.y = 0.5;
app.stage.addChild(test);
var filter = new CircleFilter();
test.filters =...