CODEWITHSUNDEEP
javaopenglglsltransparencylwjgl
Andreas Sandberg
Andreas Sandberg

Reputation: 261

Visual artifacts in LWJGL (OpenGL) when rendering transparent 2D images

I am using LWJGL to make a 2D game and my transparent textures have visual artifacts in them when rendered onto the screen. How it is supposed to look like

What is looks like in game

The top image is how it is supposed to look like, and the bottom one is how it looks like in game. These visual artifacts are even bigger on larger images. I have tried turning off texture wrapping and I've tried changing the MIN and MAG filter to GL_LINEAER.

This is what my fragment shader looks like:

#version 430

uniform sampler2D sampler;
uniform float opacities[5];
uniform int opacityIndex;

in vec2 tex_coords;

out vec4 out_Color;

void main() {
    out_Color = texture2D(sampler, tex_coords);
    out_Color.a *= opacities[opacityIndex];
}

The opacities are all 1f when rendering, and I've tried removing the last line of the main method all togehter but the artifacts still appear.

How do I get rid of these visual artifacts?

EDIT: I forgot to add that when I upscale or downscale some of the images, the artifacts disappear, but they shouldn't be where they are in the first place since the one shown here is not being scaled at all to begin with.

Upvotes: 2

Views: 235

Answers (1)

BDL
BDL

Reputation: 22168

These artefacts seem to be caused by linear interpolation in combination with repeat wrapping. With this modes, a texture coordinate of 0 will be an interpolation of the first texel with the last texel in the row which will cause the other side to bleed in.

You can, for example, set the wrapping mode to something else where the interpolation will not take texels from the other side like GL_CLAMP_TO_EDGE.

glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);

Upvotes: 2

Related Questions