JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/3.0.2/pixi.min.js"></script>
JavaScript
function BulgeFilter() {
PIXI.filters.AbstractFilter.call(this,
// vertex shader
null,
// fragment shader
[
'precision mediump float;',
'uniform vec2 center;',
'uniform float radius;',
'uniform float strength;',
'void main() {',
'vec2 coord = center;',
'float distance = length(coord);',
'if (distance < radius) {',
'float percent = distance / radius;',
'if (strength > 0.0) {',
'coord *= mix(1.0, smoothstep(0.0, radius / distance, percent), strength * 0.75);',
'} else {',
'coord *= mix(1.0, pow(percent, 1.0 + strength * 0.75) * radius / distance, 1.0 - percent);',
'}',
'}',
'}'
].join('\n'),
// custom uniforms
{
radius: {type: '1f', value:10},
strength: {type: '1f', value:5},
center: {type: '2fv', value:[100,100]}
}
);
};
BulgeFilter.prototype =...