Shader that used on 2.x is not operating on 3.11

[GBear]

hi this shader was used on pixi.2.x

and i wanna use on 3.x  

so i update black color line only..

but it's not operating ..

regards

Yun
 

Quote

function createSmokeOnTextureShader(width, height) {
    // smoke shader
    var uniforms = {};
    uniforms.resolution = {
        type: '2f',
        value: {
            x: width,
            y: height
        }
    };
    uniforms.alpha = {
        type: '1f',
        value: 0.5
    };
    uniforms.shift = {
        type: '1f',
        value: 0.8
    };
    uniforms.time = {
        type: '1f',
        value: 10
    };
    uniforms.speed = {
        type: '2f',
        value: {
            x: 3.7,
            y: 3.4
        }
    };

    var fragmentSrc = [
        "precision mediump float;",
        "uniform vec2      resolution;",
        "uniform float     time;",
        "uniform float     alpha;",
        "uniform vec2      speed;",
        "uniform float     shift;",
        "varying vec2 vTextureCoord;",
        "uniform sampler2D uSampler;",

        "float rand(vec2 n) {",
        "return fract(cos(dot(n, vec2(12.9898, 4.1414))) * 43758.5453);",
        "}",

        "float noise(vec2 n) {",
        "const vec2 d = vec2(0.0, 1.0);",
        "vec2 b = floor(n), f = smoothstep(vec2(0.0), vec2(1.0), fract(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);",
        "}",

        "float fbm(vec2 n) {",
        "float total = 0.0, amplitude = 1.0;",
        "for (int i = 0; i < 4; i++) {",
        "total += noise(n) * amplitude;",
        "n += n;",
        "amplitude *= 0.5;",
        "}",
        "return total;",
        "}",

        "void main() {",
        "vec4 vTexColor = texture2D(uSampler, vTextureCoord);",
        "if(vTexColor.a < 0.1) {return;}",

        "const vec3 c1 = vec3(126.0/255.0, 0.0/255.0, 97.0/255.0);",
        "const vec3 c2 = vec3(173.0/255.0, 0.0/255.0, 161.4/255.0);",
        "const vec3 c3 = vec3(0.2, 0.0, 0.0);",
        "const vec3 c4 = vec3(164.0/255.0, 1.0/255.0, 214.4/255.0);",
        "const vec3 c5 = vec3(0.1);",
        "const vec3 c6 = vec3(0.9);",

        "vec2 p = gl_FragCoord.xy * 8.0 / resolution.xx;",
        "float q = fbm(p - time * 0.1);",
        "vec2 r = vec2(fbm(p + q + time * speed.x - p.x - p.y), fbm(p + q - time * speed.y));",
        "vec3 c = mix(c1, c2, fbm(p + r)) + mix(c3, c4, r.x) - mix(c5, c6, r.y);",
        "float grad = gl_FragCoord.y / resolution.y;",
        //"gl_FragColor = vec4(c * cos(shift * gl_FragCoord.y / resolution.y), 1.0);",
        "gl_FragColor = mix(vTexColor, vec4(c * cos(shift * gl_FragCoord.y / resolution.y), 1.0),0.5);",
        "gl_FragColor.xyz *= 1.0-grad;",
        "}"
    ];


    //added to convert 2.x to 3.x
    var frag = fragmentSrc.join(' ');


    var coolFilter = new PIXI.AbstractFilter(null, frag, uniforms);
    return coolFilter;
};

following movie on 2.x 
bandicam 2016-07-28 22-04-56-145.avi


following movie on 3.x
bandicam 2016-07-28 22-05-56-130.avi

[GBear]

http://jsfiddle.net/n0kzcjyu/8/

this is example by jsfiddle..

when mouse over, filter is operated;

but it give me error

==
WebGL: INVALID_VALUE: attachShader: no object or object deleted
VM117 pixi.min.js:11 Pixi.js Error: Could not initialize shader.i.compile @ VM117 pixi.min.js:11i.init @ VM117 pixi.min.js:11i @ VM117 pixi.min.js:11f @ VM117 pixi.min.js:11h.getShader @ VM117 pixi.min.js:11h.applyFilter @ VM117 pixi.min.js:11j.popFilter @ VM117 pixi.min.js:11e.renderWebGL @ VM117 pixi.min.js:11e.renderWebGL @ VM117 pixi.min.js:11e.renderWebGL @ VM117 pixi.min.js:11n.renderDisplayObject @ VM117 pixi.min.js:11n.render @ VM117 pixi.min.js:11animate @ VM116:231
VM117 pixi.min.js:11 gl.VALIDATE_STATUS falsei.compile @ VM117 pixi.min.js:11i.init @ VM117 pixi.min.js:11i @ VM117 pixi.min.js:11f @ VM117 pixi.min.js:11h.getShader @ VM117 pixi.min.js:11h.applyFilter @ VM117 pixi.min.js:11j.popFilter @ VM117 pixi.min.js:11e.renderWebGL @ VM117 pixi.min.js:11e.renderWebGL @ VM117 pixi.min.js:11e.renderWebGL @ VM117 pixi.min.js:11n.renderDisplayObject @ VM117 pixi.min.js:11n.render @ VM117 pixi.min.js:11animate @ VM116:231
VM117 pixi.min.js:11 gl.getError() 1281i.compile @ VM117 pixi.min.js:11i.init @ VM117 pixi.min.js:11i @ VM117 pixi.min.js:11f @ VM117 pixi.min.js:11h.getShader @ VM117 pixi.min.js:11h.applyFilter @ VM117 pixi.min.js:11j.popFilter @ VM117 pixi.min.js:11e.renderWebGL @ VM117 pixi.min.js:11e.renderWebGL @ VM117 pixi.min.js:11e.renderWebGL @ VM117 pixi.min.js:11n.renderDisplayObject @ VM117 pixi.min.js:11n.render @ VM117 pixi.min.js:11animate @ VM116:231
VM117 pixi.min.js:11 Pixi.js Warning: gl.getProgramInfoLog() missing shaders
==

this shader code is using on 2.x  but i can't use 3.x  

help me.. 

thx..

[GBear]

Resolved..

http://jsfiddle.net/gbear/n0kzcjyu/12/
 

it is due to '\r\n'

changed

 var frag = fragmentSrc.join(' ');

to 

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

it is normal..




and i have other question..

upper example's shade is changed if i move image..(click goblin image and move, and then you can see..) 
i wanna same shader animation when move image on screen..

can you give me any tips?