Need help with shader code

[XHH]

I'm very new to shaders and trying to create a zoom blur effect on a container. I have one uniform 'center' where i just give it some coordinates. But this just gives me a black screen. I would love any help with this.

I'm trying to convert the code from https://www.shadertoy.com/view/3slSRj

Here's the shader code:

precision mediump float;
    
varying vec2 vTextureCoord;
uniform sampler2D uSampler;
uniform vec3 iResolution;
uniform vec2 center;

void main()
{
	float focusPower = 10.0;
    const int focusDetail = 7;

    vec2 uv = vTextureCoord.xy / iResolution.xy;
    vec2 mousePos = center.xy / iResolution.xy;
	vec2 focus = uv - mousePos;

    vec4 outColor;
    outColor = vec4(0, 0, 0, 1);

    for (int i=0; i<focusDetail; i++) {
        float power = 1.0 - focusPower * (1.0/iResolution.x) * float(i);
        outColor.rgb += texture2D(uSampler, focus * power + mousePos).rgb;
    }
    
    outColor.rgb *= 1.0 / float(focusDetail);

	gl_FragColor = outColor;
}

Thanks in advance!

[ivan.popelyshev]

You can either wait when someone like me or @eXponeta is available (~1 week), or you can read 

https://github.com/pixijs/pixi.js/wiki/v5-Creating-filters

https://github.com/pixijs/pixi.js/wiki/v4-Creating-filters

and look code in https://github.com/pixijs/pixi-filters

[XHH]

I've look at these pages and still have a hard time figuring this out, so I'll just wait till someone is available.

I think I'm mainly having issue understanding the measurements of coordinates and what values are given to the shader. For example, it looks like iResolution should be filterArea instead, but I'm not sure how to make that work properly. Also, inputSize doesn't seem to be passed to the shader.

Thanks!

Edited October 23, 2019 by XHH

[ivan.popelyshev]

> I think I'm mainly having issue understanding the measurements of coordinates and what values are given to the shader.

Exactly. There's nothing else there.

The thing is , PixiJS allows to apply filter to a region of screen, not whole 0-1 normal space screen

[XHH]

Do I have to pass in filterArea manually as a uniform then?

[ivan.popelyshev]

https://www.pixiplayground.com/#/edit/s~VNyhMHDC32k41fJ4iD7

OK, so, vTextureCoord is normalized input, mouse is screen coord.

We convert mouse to normalized input too.

power is also converted to normlalized input, by dividing.

If you want to get rid of division - pixi also gives 1.0/inputSize in its "zw" part.

No way to put int constant there, have to use js interpolation.

Its easy to fix aspect ratio there if you need, but, since original shadertoy source didnt have it, i dont want to add it for you.

I'm depressed because my articles do nothing and people still ask me to do all the stuff for them.

Edited October 24, 2019 by ivan.popelyshev

[XHH]

Ok this helps a whole lot. Thanks!

For the int constant I ended up putting `#define focusDetail 7` at the top instead of using js interpolation, but I do understand the benefits interpolation can bring.

Edit: I made some small changes to compensate for alpha blending (I think that might be the right term). I'll post it here in case someone else wants to use this. I'm using this on a container where it's filterArea = app.renderer.screen and center is a uniform passed in. 

precision highp float;
varying vec2 vTextureCoord;

uniform sampler2D uSampler;
uniform vec2 center;
uniform vec4 inputSize;
uniform vec4 outputFrame;
uniform float time;

#define focusDetail 7

void main() {
	float focusPower = 10.0;

    vec2 fragCoord = vTextureCoord;

    vec2 uv = fragCoord.xy;
    vec2 mousePos = (center.xy - outputFrame.xy) / inputSize.xy; // same as * inputSize.zw
	vec2 focus = uv - mousePos;
    
    vec4 outColor;
    outColor = vec4(0, 0, 0, 0);

    for (int i=0; i<focusDetail; i++) {
        float power = 1.0 - focusPower * (1.0/inputSize.x) * float(i);
        vec4 c = texture2D(uSampler, focus * power + mousePos).rgba;
        if (texture2D(uSampler, focus * power + mousePos).a > 0.0)
            outColor.rgba += c;
        else
            outColor.rgb += c.rgb;
    }
    
    outColor.rgba *= 1.0 / float(focusDetail);

	gl_FragColor = outColor;
}

 

Edited October 25, 2019 by XHH

[ivan.popelyshev]

oh, right, i forgot how to use define! Thanks