2D Parallax scrolling through GLSL shader

Question

I currently switched from LWJGL to LibGDX. In LWJGL I had a shader to do parallax scrolling by simply adding an offset to the texture coordinates and it worked fine, the texture repeated itself when the coordinates where greater than 1 or smaller than 0. But in LibGDX the same shader won't work. Once the texture coordinates are greater than 1 or smaller than 0, the texture just "smears" all over the screen, it doesn't repeat itself.

Vertex shader:

#version 330 core

layout (location = 0) in vec4 a_position;
layout (location = 1) in vec4 a_color;
layout (location = 2) in vec2 a_texCoord0;

out vec4 v_color;
out vec2 v_texCoords;

uniform float x_offset;
uniform mat4 u_projTrans;

void main() {
    v_color = a_color;
    v_texCoords = vec2(a_texCoord0.x + x_offset, a_texCoord0.y);
    gl_Position = u_projTrans * a_position;
}

Fragment shader:

#version 330 core

in vec4 v_color;
in vec2 v_texCoords;

out vec4 frag_color;

uniform sampler2D u_texture;

void main() {
    frag_color = v_color * texture2D(u_texture, v_texCoords);;
}

Answer 1

You need to set the texture parameters to change it from clamping to the edge of the texture to repeating the texture. You can do this with:

glTexParameteri(target, GL_TEXTURE_WRAP_S, GL_REPEAT);
glTexParameteri(target, GL_TEXTURE_WRAP_T, GL_REPEAT);

after you've bound the texture to the appropriate texture target (which in your case is GL_TEXTURE_2D).

Answer 2

You can also achieve this with the fract function in GLSL, i.e.

frag_color = v_color * texture2D(u_texture, fract(v_texCoords));