Scrolling with Shaders

I’m trying to achieve scrolling effect and then apply blur shader using a FBO.
When an infinite scrolling background has a custom shader applied, FPS drops significantly.
Is there a possibility to achieve the “scrolling effect” also with a shader to avoid the framerate droping?

  
#include "testApp.h"  
  
//--------------------------------------------------------------  
void testApp::setup(){  
  
	fbo.allocate(600, 600, GL_RGBA);  
  
	blur.setup(600, 600);  
  
	img.loadImage("test.jpg");  
  
	acc = .1;  
	pos.set(0, 0);  
	vel.set(0.5, 0);  
}  
  
//--------------------------------------------------------------  
void testApp::update(){  
  
    pos -= vel;  
  
}  
  
//--------------------------------------------------------------  
void testApp::draw(){  
  
    blur.setRadius(ofMap(mouseX, 0, ofGetWidth(), 0, 15, true));  
    blur.setPasses(ofMap(mouseX, 0, ofGetHeight(), 1, 15, true));  
  
    ofSetColor(ofColor::white);  
  
    fbo.begin();  
    blur.begin();  
    if (pos.x > 0) img.draw(pos.x-img.getWidth(), pos.y);  
    if (pos.x+img.getWidth() < ofGetWidth()) img.draw(pos.x+img.getWidth(), pos.y);  
    img.draw(pos.x, pos.y);  
    if (pos.x+img.getWidth() < 0) pos.x += img.getWidth();  
    if (pos.x >= img.getWidth()) pos.x -= img.getWidth();  
    blur.end();  
    fbo.end();  
  
    fbo.draw(500,150);  
  
    ofSetColor(ofColor::red);  
    ofDrawBitmapString(ofToString(ofGetFrameRate()), 10, 20);  
  
}  
  
//--------------------------------------------------------------  
void testApp::mousePressed(int x, int y, int button){  
  
    if(button == 0) vel.x = ofClamp(vel.x-acc, 0, 5.0);  
    if(button == 2) vel.x = ofClamp(vel.x+acc, 0, 5.0);  
  
}  

I have found this link, but can’t apply it:
http://stackoverflow.com/questions/10847985/glsl-shader-that-scroll-texture

Blur Shader is taked from here:
https://github.com/jamezilla/ofxBlurShader

The question is actually how to equalize the speed of scrolling texture with or without blur shader ???

Here is what I have for now. The texture scrolls in one direction only once.
I need a help with infinite scrolling texture.

  
#include "testApp.h"  
  
//--------------------------------------------------------------  
void testApp::setup(){  
	ofDisableArbTex();  
	shader.load("shaders/scroll");  
	colormap.loadImage("test.jpg");  
}  
  
//--------------------------------------------------------------  
void testApp::update(){  
	ofSetWindowTitle(ofToString(ofGetFrameRate()));  
}  
  
//--------------------------------------------------------------  
void testApp::draw(){  
	shader.begin();  
	shader.setUniformTexture("colormap", colormap, 1);  
	shader.setUniform1f("time", ofGetElapsedTimef()/10);  
	colormap.draw(0,0);  
	shader.end();  
}  

fragment shader

  
// scroll fragment shader  
  
uniform sampler2D colormap;  
uniform float time;  
varying vec2 TexCoord;  
  
void main(void) {  
	vec4 texel = texture2D(colormap, vec2(TexCoord.x + time, TexCoord.y));  
	gl_FragColor = texel;  
}  

vertex shader

  
// scroll vertex shader  
  
uniform sampler2D colormap;  
varying vec2 TexCoord;  
  
void main(void) {  
	TexCoord = gl_MultiTexCoord0.st;  
    gl_Position = gl_ProjectionMatrix * gl_ModelViewMatrix * gl_Vertex;  
}  

After setup the texture wrapping mode using this line between shader.begin and shader.end, the texture is scrolling, but the start and the end are not connected and animation seems a bit jerky for some reason.

glTexParameterf( GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT );

Can someone improve it or give me a guidance?

Code in attachment…

scroll.zip

Since I can’t find a faster solution (shader) for scrolling texture, I will use this trick:

  
void testApp::update(){  
    vel.x = ofMap(0.0, ofGetFrameRate(), 7.0, 7.0, false);  
    pos -= vel;  
}  

This keeps vel.x variable constant apart from framerate.

For future reference, GL_REPEAT only works with Power Of Two textures, i.e. 64x64, 128x128, 256x256, and so on. Your solution looks like a good one.