JSFiddle - React, Tailwind, and code Playground

by gbear

HTML

<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/3.0.8/pixi.min.js"></script>-->
<script src="https://cdn.rawgit.com/SeminYun/test/master/asset/pixi.4.0rc2.min.js"></script>
<script src="https://cdn.rawgit.com/pixijs/pixi-spine/master/bin/pixi-spine.min.js"></script>
<!--<script src="https://cdn.rawgit.com/pixijs/pixi-spine/gpupatch/gpupatch/SkinnedMeshPatch.js"></script>-->
<script src="https://cdn.rawgit.com/pixijs/pixi-extra-filters/master/bin/pixi-extra-filters.min.js"></script>

JavaScript

function createShaderShadow(x, y, dist) {
// smoke shader
    var uniforms = {};
    uniforms.time = {
        type: '1f',
        value: 0
    };
    uniforms.mark= {
        type: '2f',
        value: {
            x: 0.5,
            y: 0.5
        }
    };


    var fragmentSrc = [
        "precision mediump float;",
        "uniform vec4      filterArea;",
        'varying vec2 vTextureCoord;',
        'uniform sampler2D uSampler;',
        "uniform float     time;",
        "uniform vec2      mark;",
        "const float max_dist = 0.2;",
        "void main() {",
        "vec2 start = vTextureCoord.xy;",
        "float dist = distance(start, mark);",        
        "if(dist < max_dist) {",
        "   vec4 color1  =texture2D(uSampler, vTextureCoord);",
        "   vec4 color2 = vec4(1.0, 1.0, 0.0, 1.0);",
        "   gl_FragColor = mix(color1, color2, 0.5);",
        "} else {",
        "    gl_FragColor = vec4(1.0, 0.0,  0.0, 1.0);",
        "   vec4 color1  =texture2D(uSampler, vTextureCoord);",
        "   vec4 color2 = vec4(1.0, 0.0, 0.0, 1.0);",
        "   gl_FragColor = mix(color1, color2, 0.5);",
        "}",
        "}",
    ];

    fragmentSrc = fragmentSrc.join('\r\n');

    var coolFilter = new PIXI.Filter(null, fragmentSrc, uniforms);
    console.log(coolFilter.uniforms.mark)
    return coolFilter;
};


function runMain() {
    var renderer = PIXI.autoDetectRenderer(1920, 1080);
    document.body.appendChild(renderer.view);

// create the root of the scene graph
    var stage = new PIXI.Container();


    var filter = null;
    var sprite = PIXI.Sprite.fromImage('https://raw.githubusercontent.com/SeminYun/test/master/asset/11.jpg');
	
	var filter = createShaderShadow(512, 512);
	sprite.filters = [filter];

	
	stage.addChild(sprite)
	sprite.on('mousedown', function(){                                				sprite.isDown = true;			
    });	
	sprite.on('mouseup', function(){                                				sprite.isDown = false;			
    });
	
   ...