Hello, everyone.
I’ve recently encountered a problem when making a shader with colors that have alpha values below 1. It seems that the colors don’t blend properly with shapes behind it.
The code below demonstrates the problem
function setup()
square = mesh()
square:addRect(WIDTH/2,HEIGHT/2,150,150)
square:setRectColor(1,0,255,0,255)
square.shader = shader(vertS,fragS)
end
function draw()
background(255,0,0) -- red background
square:draw() -- draw the green square
end
vertS = [[ // This is the default vertex shader code
uniform mat4 modelViewProjection;
attribute vec4 position;
attribute vec4 color;
attribute vec2 texCoord;
varying lowp vec4 vColor;
varying highp vec2 vTexCoord;
void main()
{ vColor = color;
vTexCoord = texCoord;
gl_Position = modelViewProjection * position;
}
]]
fragS = [[ // This code adds the fading effect in the center
precision highp float;
varying lowp vec4 vColor;
varying highp vec2 vTexCoord;
void main()
{
lowp vec4 col;
mediump float dis = distance(vTexCoord,vec2(0.5,0.5)); // get the distance from this pixel to the center
if (dis < 0.5) {
col = vec4(vColor.rgb,dis * 2.0); // dis ranges from 0-0.5, so we double it to get 0-1
} else col = vColor; // if this pixel is outside the circle, make it vColor
gl_FragColor = col;
}
]]
If you run the code, you will see a red background and a green square. The square is drawn with a shader. In the shader, I made the alpha values gradually decrease as you get closer to the center of the square, creating a hole in the center of the square.
If you look at the colors between the red background and the green square, you’d expect to see a yellow color; But instead you see a brownish color.
How can I fix this?
@Kolosso I increased the size of the square to 700x700 so I could see the middle easier. The square goes from green to red in the middle, I don’t see any other colors. I don’t know if reducing the alpha will blend the colors to make yellow, at least I’m not seeing it.
@dave1707 Maybe this will help. Here I produced the same problem with a circle this time. As you can see, it has a dark outline around it. I want to fix the outline.
This is what Im trying to produce. What I did was make the red value increase at the same rate that the alpha value decreases. But the problem with this approach, is that it only works when the background is red.
In the first image, you can see that the dark outline is gone, and it looks much better.
However, in the second image, we see the same code with a blue background, which is producing a dark outline again.
Here’s the desired result with the square example.
@Kolosso So does what you did in the last example take care of your issue. What did you change. When I take the last image and zoom in to make the green square almost full screen and then look at the inner red part in a circular motion, it looks like the red inner area changes shape. Optical illusion.
@dave1707 The code with correct blending increases the red as the alpha decreases. This fixes the issue, but only when the background is red. If I had a blue background, I’d have to increase the blue as the alpha decreases. This approach works for now, but I was wondering if there’s a better way of doing this, for when there are multiple colours behind the mesh.
—————————————————————————————————————————
So, back to the question: Is there a way to have translucent pixels (that were generated from a shader) blend properly with colours behind the mesh?
@Kolosso Have you looked at smooth and noSmooth. Try the reference under Graphics, then Style. There’s a few things there that might work for blending.