Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

In this Discussion

Colors don't blend well when transparent colors are used in shaders

edited March 18 in Shaders Posts: 152

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?

Comments

  • dave1707dave1707 Mod
    Posts: 7,195

    @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.

  • Posts: 152

    @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.

    image.png 287.3K
  • Posts: 152

    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.

    image.png 95.5K
    image.png 277.4K
  • Posts: 152

    Here's the desired result with the square example.

    image.png 43.2K
  • dave1707dave1707 Mod
    Posts: 7,195

    @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.

  • Posts: 152

    @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?

  • dave1707dave1707 Mod
    Posts: 7,195

    @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.

Sign In or Register to comment.