Blur Shader is only blurring the texture

beginners
#1

I’ve been going through the shaders tutorial, and have run into an issue I can’t sort out: http://www.openframeworks.cc/tutorials/graphics/shaders.html

Currently, I’m working on the blurring part. I’m trying to blur a sphere, but only the texture is blurred, while the sphere stays crisp. Here’s an image of what’s happening:

As you can see the leaves texture is blurred while the sphere is crisp. At this point, I’m only blurring the X axis. So, my question is: How do blur the sphere and texture? I’ve tried the following in my draw() method, but get the same result:

fboBlurPass01.begin();
Xpass.begin();
Xpass.setUniformTexture("img", img.getTextureReference(), 1);
img.draw(0,0);
Xpass.end();
fboBlurPass01.end();

fboBlurPass01.getTextureReference().bind();
ofPushMatrix();
ofTranslate(50, 50);
sphere.draw();
ofPopMatrix();
fboBlurPass01.getTextureReference().unbind();

Xpass.begin();
Xpass.setUniformTexture("img", img.getTextureReference(), 1);
ofPushMatrix();
ofTranslate(50, 50);
sphere.draw();
ofPopMatrix();
Xpass.end();
1 Like
#2

If you want the borders of the sphere to be blurred you will have to use an fbo.
using an fbo is like taking a screenshot of the render. then throw that to the blur shader and then everything will be blured.
Try the fbo example and post some code if you need help.

#3

Hi Jordi, thanks for the tip. I’ve attempted to draw the sphere into a FBO, and I’ve got the edges to blur. However, It seems I’m missing a step somewhere. As you can see when I rotate the camera, the sphere is drawn onto a flat plane instead of being a sphere, and I’m only getting part of it.

Here’s some code:

planet.h

#ifndef _PLANET
#define _PLANET

#include "ofMain.h"

class planet {

public:

ofSpherePrimitive sphere;
ofShader Xpass;
ofImage img;
ofFbo blurPass01;

planet();

void update();
void draw();

private:

};

#endif

planet.cpp

#include "planet.h"

planet::planet()
{
Xpass.load("shaders/Xpass");

sphere.set(200,20);

img.loadImage("leaves.jpg");
sphere.mapTexCoordsFromTexture(img.getTextureReference());

blurPass01.allocate(1024, 768);

blurPass01.begin();
ofClear(0, 0, 0, 0);
blurPass01.end();
}

void planet::update()
{

}

void planet::draw()
{
blurPass01.begin();
img.getTextureReference().bind();
sphere.draw();
img.getTextureReference().unbind();
blurPass01.end();

Xpass.begin();
Xpass.setUniformTexture("img", blurPass01.getTextureReference(0), 0);
blurPass01.draw(0, 0);
Xpass.end();
}

Xpass.vert

// vertex shader

#version 150

uniform mat4 modelViewProjectionMatrix;
in vec4 position;
in vec2 texcoord;

out vec2 texCoordVar;

void main()
{
    texCoordVar = texcoord;
    gl_Position = modelViewProjectionMatrix * position;
}

Xpass.frag

// fragment shader

#version 150

in vec2 texCoordVar;
out vec4 outputColor;
uniform sampler2DRect img;

void main()
{
vec4 color;
float blurAmnt = 5.0;

color += 1.0 * texture(img, texCoordVar + vec2(blurAmnt * -4.0, 0.0));
color += 2.0 * texture(img, texCoordVar + vec2(blurAmnt * -3.0, 0.0));
color += 3.0 * texture(img, texCoordVar + vec2(blurAmnt * -2.0, 0.0));
color += 4.0 * texture(img, texCoordVar + vec2(blurAmnt * -1.0, 0.0));

color += 5.0 * texture(img, texCoordVar + vec2(blurAmnt, 0));

color += 4.0 * texture(img, texCoordVar + vec2(blurAmnt * 1.0, 0.0));
color += 3.0 * texture(img, texCoordVar + vec2(blurAmnt * 2.0, 0.0));
color += 2.0 * texture(img, texCoordVar + vec2(blurAmnt * 3.0, 0.0));
color += 1.0 * texture(img, texCoordVar + vec2(blurAmnt * 4.0, 0.0));

color /= 25.0;

outputColor = color;

}
#4

I don’t see your camera in the code. I guess you have it in the file that calls planet.
You need to use the camera when drawing inside the fbo. but not use it when you are drawing the result of the fbo.

I would suggest:

blurPass01.begin();
cam.begin();
img.getTextureReference().bind();
sphere.draw();
img.getTextureReference().unbind();
cam.end();
blurPass01.end();

but not sure if that will work :confused:

#5

You’ll want to rotate the camera inside your FBO. Think of the FBO as a rendering context, you can move the camera anywhere you want inside that context and then render the results of what it can see into the FBO.

fbo.begin();
camera.rotate(rotationVector());
fbo.end();

Hope that helps a little :slight_smile:

#6

Oh, well that was the missing element. I was in fact calling the planet class from the main testApp class. Which, is where the camera resides, and where I would prefer it stays. My idea involved a scene with objects that had a bloom effect, and objects that didn’t have a bloom effect.

So, I suppose I need to re-think the way everything needs rendered.