currently, I need the fragment shader to write to a texture(which it does), but rather than overwriting, it blends. Here is the fragment shader itself
#version 400 core
in vec2 pass_textureCoordinates;
out vec4 out_Color;
layout(location = 1) out vec4 out_location0;
uniform sampler2D modelTexture;
uniform sampler2D bumpTexture;
uniform sampler2D overlayTexture;
uniform sampler2D scratchLevels;
void main(void)
{
vec2 txt = pass_textureCoordinates;
vec4 base = texture(overlayTexture,txt);
vec4 over = texture(modelTexture,txt);
float baseA = base[3] * (1.0f - over[3]);
float overA = over[3];
float finalA = base[3] + (1.0f - base[3]) * overA;
if(finalA == 0)
{
out_Color[0] = 0;
out_Color[1] = 0;
out_Color[2] = 0;
}
else
{
out_Color[0] = (base[0] * baseA + over[0] * overA) / finalA;
out_Color[1] = (base[1] * baseA + over[1] * overA) / finalA;
out_Color[2] = (base[2] * baseA + over[2] * overA) / finalA;
}
out_Color[3] = finalA;
out_location0 = out_Color;
}
How can I write to the texture with out blending?
Edit: I need to overwrite the alpha channel as well
Blending depends on the blend function and can be disabled (glDisable(GL_BLEND)).
If you're using the traditional alpha blending function (glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA)) or premultiplied alpha blending (glBlendFunc(GL_SRC_ALPHA, GL_ONE)), you can treat the texture as opaque by setting the output alpha channel to 1:
out_Color[3] = finalA;
out_Color[3] = 1.0;
Well you have several solutions to choose from:
the easiest is just to Disable Blending before the render call glDisable(GL_BLEND) and enable it again afterwards
You could just clear the data of the texture before rendering (if that is what you want) with opengl calls, e.g. glClear(GL_COLOR_BUFFER_BIT) and glClearColor(r,g,b)
change the alpha in your fragment shader e.g. to
if(out_Color.a > 0) out_Color = vec4(vec3(0,0,0)*(1.0-out_Color.a) + out_Color.rgb*out_Color.a, 1.0); this is just manually setting the background to black, but you could also discard it if out_Color.a == 0 (just discard;, that would - at least without a glClear call - cause the old data to stay visible at this pixel).
I hope I was able to help you :)
Related
I want to draw numbers on an object using multitexturing. But the final image is lighter, like:
Is it possible to exclude white color from multitexure and make the digit darker?
Here's the my fragment shader:
#version 300 es
precision mediump float;
in vec2 v_textureCoord;
out vec4 outColor;
uniform sampler2D base_texture;
uniform sampler2D number_texture;
void main() {
// wall texture
vec4 baseColor = texture(base_texture, v_textureCoord);
// texture with digit
vec4 numberColor = texture(number_texture, v_textureCoord);
// resulting pixel color based on two textures
outColor = baseColor * (numberColor + 0.5);
}
I tried to do this:
GLES30.glEnable(GLES30.GL_BLEND);
GLES30.glBlendFunc(GLES30.GL_SRC_ALPHA, GLES30.GL_ONE);
GLES30.glActiveTexture(GLES30.GL_TEXTURE1);
...
GLES30.glDisable(GLES30.GL_BLEND);
But this did not solve the problem.
Thank you for any answer/comment!
Solution:
On Rabbid76 advice, I applied this:
outColor = baseColor * mix(numberColor, vec4(1.0), 0.5);
Result:
mix the color of number_texture by a white color, rather than adding a constnant:
outColor = baseColor * mix(numberColor, vec4(1.0), 0.5);
Actually that is the same as:
outColor = baseColor * (numberColor * 0.5 + 0.5);
I'm looking for a specific shader or an idea for another approach to get the desired result.
A picture shows the desired result (left-side input, right-side output):
I already experimented with modifying a simple vignette shader:
varying vec4 v_color;
varying vec2 v_texCoord0;
uniform vec2 u_resolution;
uniform sampler2D u_sampler2D;
const float outerRadius = .65, innerRadius = .4, intensity = .6;
void main() {
vec4 color = texture2D(u_sampler2D, v_texCoord0) * v_color;
vec2 relativePosition = gl_FragCoord.xy / u_resolution - .5;
float len = length(relativePosition);
float vignette = smoothstep(outerRadius, innerRadius, len);
color.rgb = mix(color.rgb, color.rgb * vignette, intensity);
gl_FragColor = color;
}
I think it's more confusing than helpful when I show you my modified code. I tried to imitate the same concept as of the vignette shader: Used the bounding box of the island, transforming x,y,width,height in screenCoords and get the relative position of fragCoords to island's center (normal vignette would use the screen resolution instead the island 'resolution'). Then I wanted to invert the vignette effect (inside dark, outside fade out)
Unfortunately it doesn't work and I think whole approach should be changed.
Second idea is to place a dark light in all islands on my map. (with Box2DLights)
But this might be a little expensive?
Any other ideas?
i'm using my fragment shader to clip objects in OpenGL ES 2.0. Everything is working well, however the colour of the clipped surface is all black... I can not figure out how to change the colour (well ideally I'd want to make a similar texture to the rest of the object. I have included the code for my fragment shader below.
precision mediump float;
varying vec2 texCoord;
varying vec3 v_Normal;
varying vec3 v_Position;
varying vec4 originalPosition;
uniform sampler2D texSampler2D;
uniform vec3 lightPosition;
uniform vec4 lightColor;
void main()
{
vec3 L = normalize(lightPosition - v_Position);
vec3 N = normalize(v_Normal);
float NdotL = max(dot(N,L),0.0);
if(originalPosition.y >= 2.0){
discard;
}else{
gl_FragColor = NdotL * lightColor * texture2D(texSampler2D, texCoord);
}
}
Using discard in a fragment shader doesn't render anything to the pixel, it just leaves it exactly as it was before, so the black color is probably your clear color or whatever you had rendered previously. If you want to render a particular color to the pixels you are currently discarding, add another uniform to your shader for the clip color, like this:
uniform vec4 clipColor;
Set it in the same way you set the lightColor, then instead of discarding the pixel when clipping, you can set the pixel to the clip color:
if(originalPosition.y >= 2.0) {
gl_FragColor = clipColor;
} else {
gl_FragColor = NdotL * lightColor * texture2D(texSampler2D, texCoord);
}
I have a depth texture defined as the following:
//shadow FBO and texture
depthFBO = new FrameBufferObject().create().bind();
depthTexture = new Texture2D().create().bind()
.storage2D(12, GL_DEPTH_COMPONENT32F, 4096, 4096)
.minFilter(GL_LINEAR)
.magFilter(GL_LINEAR)
.compareMode(GL_COMPARE_REF_TO_TEXTURE)
.compareFunc(GL_LEQUAL);
depthFBO.texture2D(GL_DEPTH_ATTACHMENT, GL11.GL_TEXTURE_2D, depthTexture, 0)
.checkStatus().unbind();
depthTexture.unbind();
It's written in Java/LWJGL/Own small framework, but the idea should be clear.
Then I use a fragment shader at some point to visualize the data in it (fragment's depth):
#version 430 core
layout(location = 7) uniform int screen_width;
layout(location = 8) uniform int screen_height;
layout(binding = 0) uniform sampler2D shadow_tex;
out vec4 color;
void main(void) {
vec2 tex_coords = vec2(
(gl_FragCoord.x - 100) / (screen_width / 5),
(gl_FragCoord.y - (screen_height - (screen_height / 5) - 100)) / (screen_height / 5)
);
float red_channel = texture(shadow_tex, tex_coords).r;
if (red_channel < 0.999) {
red_channel = red_channel / 2.0;
}
color = vec4(vec3(red_channel), 1.0);
}
My tex_coords and shadow_tex are correct, but I need some more clarification on reading out of a GL_DEPTH_COMPONENT32F format.
I want to read the depth and I assume it is being stored being 0.0 and 1.0 in 4 bytes of float values.
So I was thinking I can use the red channel of what texture gives me back, however I cannot see a difference in depth. Other than it not being 1.0 exactly, but somewhat lower. If I do not divide by 2.0, then everything appears white.
Note that the floor is black at some points, but that is due to a failed shadow mapping, hence why I am visualizing it - however it is temporarily set to use the normal view MVP instead of the light's, to also make sure the depth information is saved correctly.
UPDATE: The colorization of the depth value is now working correctly with the following:
#version 430 core
layout(location = 7) uniform int screen_width;
layout(location = 8) uniform int screen_height;
layout(binding = 0) uniform sampler2D shadow_tex;
out vec4 color;
float linearize_depth(float original_depth) {
float near = 0.1;
float far = 1000.0;
return (2.0 * near) / (far + near - original_depth * (far - near));
}
void main(void) {
//calculate texture coordinates, based on current dimensions and positions of the viewport
vec2 tex_coords = vec2(
(gl_FragCoord.x - 100) / (screen_width / 5),
(gl_FragCoord.y - (screen_height - (screen_height / 5) - 100)) / (screen_height / 5)
);
//retrieve depth value from the red channel
float red_channel = texture(shadow_tex, tex_coords).r;
//colorize depth value, only if there actually is an object
if (red_channel < 0.999) {
red_channel = linearize_depth(red_channel) * 4.0;
}
color = vec4(vec3(red_channel), 1.0);
}
I would still like clarification though if accessing the red component is correct to retrieve the depth value?
In GLSL 4.30?
No.
If this is truly a depth texture (internal format = GL_DEPTH_COMPONENT[...]), then GLSL automatically samples it this way: vec4 (r, r, r, 1.0). Older versions would behave differently depending on the "depth texture mode" (which was removed from GL 3.1 / GLSL 1.30).
Now, if it is a depth texture with comparison as your code implies, then sampling it using sampler2D should be undefined. If you use sampler2DShadow though, sampling with texture (...) will return a single float unlike all other texture (...) overloads (which all return vec4).
Hopefully this is an oversight in the Java code you pasted, because your shader should be producing undefined results as it stands right now.
I am trying to make a lighting system, the program changes the texture(block) brightness depends on the light it gets, and the program does it for every block(texture) that is visible to the player.
However, the lighting system works perfectly, but when it comes to rendering with shaders everything gets destroyed.
This code is in the render loop -
float light = Lighting.checkLight(mapPosY, mapPosX, this); // Returns the light the current block gets
map[mapPos].light = light; // Applies the light to the block
Shaders.block.setUniformf("lightBlock", light); // Sets the light value to the shader's uniform, to change the brightness of the current block / texture.
batch.draw(map[mapPos].TEXTURE, (mapPosX * Block.WIDTH), (mapPosY * Block.HEIGHT), Block.WIDTH, Block.HEIGHT); // Renders the block / texture to the screen.
The result is pretty random..
As i said the first two lines work perfectly, the problem is probably is in the third line or in the shader itself.
The shader:
Vertex shader -
attribute vec4 a_color;
attribute vec3 a_position;
attribute vec2 a_texCoord0;
uniform mat4 u_projTrans;
varying vec4 vColor;
varying vec2 vTexCoord;
void main() {
vColor = a_color;
vTexCoord = a_texCoord0;
gl_Position = u_projTrans * vec4(a_position, 1.0f);
}
Fragment shader -
varying vec4 vColor;
varying vec2 vTexCoord;
uniform vec2 screenSize;
uniform sampler2D tex;
uniform float lightBlock;
const float outerRadius = .65, innerRadius = .4, intensity = .6;
const float SOFTNESS = 0.6;
void main() {
vec4 texColor = texture2D(tex, vTexCoord) * vColor;
vec2 relativePosition = gl_FragCoord.xy / screenSize - .5;
float len = length(relativePosition);
float vignette = smoothstep(outerRadius, innerRadius, len);
texColor.rgb = mix(texColor.rgb, texColor.rgb * vignette * lightBlock, intensity);
gl_FragColor = texColor;
}
I fixed the problem.. but i dont have any idea why it fixed it.
Thanks to Pedro, i focused more on the render loop instead of the shader itself.
Before the loop i added those 2 lines -
List<Integer> lBlocks = new ArrayList<Integer>();
Shaders.block.setUniformf("lightBlock", 0.3f);
Basically I created an array to store the bright blocks later on.
I set the uniform of the shader to be 0.3f which means pretty dark. the value should be 0-1f.
Now in the render loop, inside the for -
float light = Lighting.checkLight(mapPosY, mapPosX, this);
map[mapPos].light = light;
if( light == 1.0f) {
lBlocks.add(mapPos);
} else {
batch.draw(map[mapPos].TEXTURE, (mapPosX * Block.WIDTH), (mapPosY * Block.HEIGHT), Block.WIDTH, Block.HEIGHT);
}
As you can see, the bright blocks i add to the array and the dark ones i render, i set the uniform to 0.3f before the render loop as you can in the first code sample.
After the render loop i loop again through the bright blocks.. because we didn't render them.
Shaders.block.setUniformf("lightBlock", 1.0f);
for(int i = 0; i < lBlocks.size(); i++) {
batch.draw(map[lBlocks.get(i)].TEXTURE, ((lBlocks.get(i) % width) * Block.WIDTH), ((lBlocks.get(i) / width) * Block.HEIGHT), Block.WIDTH, Block.HEIGHT);
}
Now i rendered the bright blocks and it works.. the result was good.
But I don't have any idea why its like that, its like cutting the render loop to two, one for dark blocks and one for the bright ones.
Thanks :)