JSFiddle - React, Tailwind, and code Playground

by Retroeric

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.3.4/pixi.min.js"></script>
<canvas id="canvas"></canvas>

JavaScript

// Setup renderer and stage
    var renderer = new PIXI.WebGLRenderer(500, 500, { view: document.querySelector('#canvas'), backgroundColor: 0x303030, antialias: true });
    var stage = new PIXI.Container();

    // Setup resource loader
    PIXI.loader.add("https://i.imgur.com/IVaQxVM.png");
    PIXI.loader.add("https://i.imgur.com/tGJfzWY.png");
    PIXI.loader.load(function ()
    {                        
        // Get texture references
        var ballTexture = PIXI.loader.resources["https://i.imgur.com/IVaQxVM.png"].texture;
        var maskTexture = PIXI.loader.resources["https://i.imgur.com/tGJfzWY.png"].texture;

        // Create example ball sprite
        var ball = new PIXI.Sprite(ballTexture);
        ball.position.set(0, 0);
        stage.addChild(ball);

        // Create example mask sprite
        var mask = new PIXI.Sprite(maskTexture);
        mask.position.set(64, 0);
        stage.addChild(mask);

        // Create ball sprite with shader
        var sprite = new PIXI.Sprite(ballTexture);
        sprite.x = 200;
        sprite.y = 200;        
        sprite.filters = [new maskFilter(maskTexture)];
        stage.addChild(sprite);

        // Display loop
        var ticker = new PIXI.ticker.Ticker();
        ticker.add(function ()
        {
            renderer.render(stage);
        });
        ticker.start();
    });


    // Example filter
    function maskFilter(maskTexture)
    {
        PIXI.Filter.call(this,
                         null,
                        'varying vec2 vTextureCoord;' +
                        'uniform sampler2D uSampler;' +
                        'uniform sampler2D maskTexture;' +

                        'void main(void)' +
                        '{' +
                        '    vec4 one = texture2D(uSampler, vTextureCoord);' +
                        '    vec4 two = texture2D(maskTexture, vTextureCoord);' +
                        '    gl_FragColor = one + two;' +
                        '}'
       ...