JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.4.3/pixi.min.js"></script>
JavaScript
function createShaderShadow() {
const fragmentSrc = [
"precision mediump float;",
"uniform vec4 filterArea;",
'varying vec2 vTextureCoord;',
'uniform sampler2D uSampler;',
"uniform mat3 mappedMatrix;",
"void main() {",
"vec3 map = vec3( vTextureCoord.xy,1)*mappedMatrix;",
"vec2 start =map.xy;",
"vec2 end = vec2(0.5, 0.5);",
"float dist = distance(start, end);",
"vec4 color = texture2D(uSampler, vTextureCoord);",
"vec4 red = vec4(1.0, 0.0, 0.0, 0.0);",
"vec4 yellow = vec4(1.0, 1.0, 0.0, 0.0);",
"if(dist < 0.2) {",
" gl_FragColor = mix(color, yellow, 0.5);",
"} else {",
" gl_FragColor = mix(color, red, 0.5);",
"}",
"}",
];
const filter = new PIXI.Filter(null, fragmentSrc.join('\r\n'));
filter.uniforms.mappedMatrix = new PIXI.Matrix();
filter.apply = function(filterManager, input, output, clear) {
this.uniforms.mappedMatrix = filterManager.calculateNormalizedScreenSpaceMatrix(
this.uniforms.mappedMatrix);
filterManager.applyFilter(this, input, output);
};
return filter;
};
function runMain() {
const renderer = PIXI.autoDetectRenderer(1920, 1080);
document.body.appendChild(renderer.view);
const stage = new PIXI.Container();
const sprite = PIXI.Sprite.fromImage(
'http://pixijs.github.io/examples/required/assets/basics/bunny.png'
);
const filter = createShaderShadow(100, 100);
sprite.filters = [filter];
stage.addChild(sprite);
sprite.scale.set(5.0);
let time = 0;
setInterval(() => {
time++;
sprite.position.x = 0 - Math.sin(time / 40.0) * 100;
}, 20);
function animate() {
requestAnimationFrame(animate);
renderer.render(stage);
}
animate();
};
runMain();