glsl background is black

OpenGL Development
#1

Hello Guys,
I recently started looking into GLSL and tried implementing an effect i found online.The effect worked but the background behind the effect is black. I want that only the effect is visible and not the black backgroung but instead the stuff thats already rendered. Im using LibGDX for the rendering. Here is the GLSL code so far:

#ifdef GL_ES
precision mediump float;
#endif

varying vec4 v_color;
varying vec2 v_texCoord0;

uniform sampler2D u_sampler2D;

uniform float time;
uniform vec2 mouse;
uniform vec2 resolution;


void main( void )
{
    vec4 color_original = texture2D(u_sampler2D, v_texCoord0) * v_color;
    
	vec2 uPos = ( gl_FragCoord.xy / resolution.xy );
	
	uPos.x -= 1.0;
	uPos.y -= 0.5;
	
	vec3 color = vec3(0.0);
	float vertColor = 2.0;
	for( float i = 0.0; i < 15.0; ++i )
	{
		float t = time * (0.9);
	
		uPos.y += sin( uPos.x*i + t+i/2.0 ) * 0.1;
		float fTemp = abs(1.0 / uPos.y / 100.0);
		vertColor += fTemp;
		color += vec3( fTemp*(10.0-i)/10.0, fTemp*i/10.0, pow(fTemp,1.5)*1.5 );
	}
	
	color_original.rgb = mix(color_original.rgb, color.rgb, 1.0);
	gl_FragColor = color_original;
}

Help is appreciated :slight_smile:

#2

Do you have some screenshots or code in which you call it?

#3

Is this enough?

	private OrthogonalTiledMapRenderer renderer;
	private OrthographicCamera camera;	
	private ShaderProgram shader;
 
	@Override
	public void show() {	
		Gdx.gl.glClearColor(0, 0, 0, 1);
		Gdx.input.setInputProcessor(this);
		
		TiledMap map = new TmxMapLoader().load("assets/maps/map.tmx");
		renderer = new OrthogonalTiledMapRenderer(map);
		camera = new OrthographicCamera();
		camera.position.set(Gdx.graphics.getWidth() / 4, Gdx.graphics.getHeight() / 4, 0);
		camera.zoom = .5f;

		ShaderProgram.pedantic = false;
		shader = new ShaderProgram(Gdx.files.internal("shaders/shader.vsh"), Gdx.files.internal("shaders/shader.fsh"));
		if(!shader.isCompiled())
			System.out.println(shader.getLog());
		renderer.getSpriteBatch().setShader(shader);
	}
    float time = 1;
	@Override
	public void render(float delta) {

	
		time +=delta;
		shader.begin();	
		shader.setUniformf("time", time);
		shader.end();
		Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
		camera.update();
		renderer.render();		
		renderer.setView(camera);		
	}
#4

Ok i found the problem:
in the glsl code

 color_original.rgb = mix(color_original.rgb, color.rgb, 1.0);

should be

 color_original.rgb = mix(color_original.rgb, color.rgb, 0.2);

the problem im having now is that everything is a little bit darker because it blends the black of the shader with the background, does anyone know how to stop the black stuff from being rendered?

#5

I know this is a month old, but you should be using rgba, you need the alpha channel for transparency (so it won’t dim the screen).