XHH

Need help with shader code

Recommended Posts

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!

Share this post


Link to post
Share on other sites

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 by XHH

Share this post


Link to post
Share on other sites

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 by ivan.popelyshev

Share this post


Link to post
Share on other sites

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 by XHH

Share this post


Link to post
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...

  • Recently Browsing   0 members

    No registered users viewing this page.