Jump to content
This forum will be closing down. Please move to the respective dedicated project forums.

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


GBear
 Share

Recommended Posts


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
이미지 3.png

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

이미지 4.png

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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?

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...