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/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

var spineContainer = null;

function createSmokeOnTextureShader(width, height) {
    var fragmentSrc = "precision mediump float;\r\n\
        uniform vec2      resolution;\r\n\
        uniform float     time;\r\n\
        uniform float     alpha;\r\n\
        uniform vec2      speed;\r\n\
        uniform float     shift;\r\n\
        varying vec2 vTextureCoord;\r\n\
        uniform sampler2D uSampler;\r\n\
        float rand(vec2 n) {\r\n\
        return fract(cos(dot(n, vec2(12.9898, 4.1414))) * 43758.5453);\r\n\
        }\r\n\
        float noise(vec2 n) {\r\n\
        const vec2 d = vec2(0.0, 1.0);\r\n\
        vec2 b = floor(n), f = smoothstep(vec2(0.0), vec2(1.0), fract(n));\r\n\
        return mix(mix(rand(b), rand(b + d.yx), f.x), mix(rand(b + d.xy), rand(b + d.yy), f.x), f.y);\r\n\
        }\r\n\
        float fbm(vec2 n) {\r\n\
        float total = 0.0, amplitude = 1.0;\r\n\
        for (int i = 0; i < 4; i++) {\r\n\
        total += noise(n) * amplitude;\r\n\
        n += n;\r\n\
        amplitude *= 0.5;\r\n\
        }\r\n\
        return total;\r\n\
        }\r\n\
        void main() {\r\n\
        vec4 vTexColor = texture2D(uSampler, vTextureCoord);\r\n\
        if(vTexColor.a < 0.1) {return;}\r\n\
        const vec3 c1 = vec3(173.0/255.0, 0.0/255.0, 0.0/255.0);\r\n\
        const vec3 c2 = vec3(173.0/255.0, 0.0/255.0, 0.4/255.0);\r\n\
        const vec3 c3 = vec3(0.2, 0.0, 0.0);\r\n\
        const vec3 c4 = vec3(164.0/255.0, 1.0/255.0, 0.4/255.0);\r\n\
        const vec3 c5 = vec3(0.8);\r\n\
        const vec3 c6 = vec3(0.9);\r\n\
        vec2 p = gl_FragCoord.xy * 8.0 / resolution.xx;\r\n\
        float q = fbm(p - time * 0.1);\r\n\
        vec2 r = vec2(fbm(p + q + time * speed.x - p.x - p.y), fbm(p + q - time * speed.y));\r\n\
        vec3 c = mix(c1, c2, fbm(p + r)) + mix(c3, c4, r.x) - mix(c5, c6, r.y);\r\n\
        float grad = gl_FragCoord.y / resolution.y;\r\n\
        gl_FragColor = vec4(c * cos(shift * gl_FragCoord.y / resolution.y),...