Shader example blur on ellipse

I’m testing a simple shader example to blur an ellipse using shaders. To test the shader, I’ve copied the shader example included in OF.

I’ve been playing with it for some time already, but I still don’t get the error. Why it doesn’t work?

It compiles correctly the shader, but I don’t find the way to make it work as it is supposed to.

Here is the vert:

void main(){
    gl_Position = gl_ModelViewProjectionMatrix * gl_Vertex;
    gl_TexCoord[0] = gl_TextureMatrix[0] * gl_MultiTexCoord0;
    gl_FrontColor = gl_Color;
}

here is the frag:

#version 120

uniform vec4 color;
uniform float expand;
uniform vec2 center;
uniform float radius;
uniform float windowWidth;
uniform float windowHeight;

void main(){
vec2 centerFromSfml = vec2(windowWidth - center.x, windowHeight - center.y);
vec2 p = (gl_FragCoord.xy - centerFromSfml) / radius;
    float r = sqrt(dot(p, p));
    if (r < 1.0)
    {
        gl_FragColor = mix(color, gl_Color, (r - expand) / (1 - expand));
    }
    else
    {
        gl_FragColor = gl_Color;
    }
}

setup:

void ofApp::setup(){
    //ofBackground(34, 34, 34);
    ofSetVerticalSync(false);
    ofEnableAlphaBlending();
    
    shader.load("shaders/blur.vert", "shaders/blur.frag");
    shader.setUniform1f("windowWidth", static_cast<float>(ofGetWidth()));
    shader.setUniform1f("windowHeight", static_cast<float>(ofGetHeight()));

}

Draw:

void ofApp::draw(){
    ofBackground(0);
    
    shader.begin();
    shader.setUniform4f("color", glm::vec4(1.f, 1.f, 1.f, 1.f));
    shader.setUniform2f("center", glm::vec2(mouseX, mouseY));
    shader.setUniform1f("radius", 40.f);
    shader.setUniform1f("expand", 1.5f);
    
    //shader.setUniform2f("center", mouseX - ofGetWidth()/2, ofGetHeight()/2-mouseY );
    
    ofSetColor(255);
    ofDrawCircle(mouseX, mouseY, 40);
    shader.end();
    
}

Hey @Dazzid_of , don’t forget to call shader.begin() and shader.end() when setting these uniform values.

ok added, but still a plain ellipse. Maybe better to play with a texture using FBO?

Hey drawing the ellipse into an ofFbo and then blurring it would work really well. If the current shader is drawing an ellipse without a blur, maybe you need to do something like smoothstep() instead of mix(). I’m not good with these kinds of procedural shaders. Sometimes Shadertoy is a fun way to look for examples that are similar, plus you can modify the shaders or even write your own ones to test.

Thanks for the feedback, in the end, the best option is to use Point Sprites with a nice blurred texture made in photoshop and some lighting.

1 Like