Issues with Background Alpha/Transparency in WEBGL

[markjoshua12]

Most appropriate sub-area of p5.js?

• [ x ] WebGL

Details about the bug:

Hello! There's an issue we're having on transparency in WEBGL. Using background() and fill() with transparency doesn't work and produces a lighter color instead of blending properly. We've tried using blendMode() and the different setAttributes() to no avail.
Is this intended behavior in WEBGL? Or do we have to set something else to make this work? Just trying to figure out how to fade to a color in WEBGL.
Using blendMode(MULTIPLY) with a light gray fill() seems to work, but this doesn't allow for other colors with the way MULTIPLY works.
Thanks and have a nice day 😄

• Steps to reproduce this:

function setup() {
  createCanvas(400, 400, WEBGL);
  background(0);
}

function draw() {
  background(0, 10);
}

Here's another one using fill()

function setup() {
  createCanvas(400, 400, WEBGL);
  background(0);
}

function draw() {
  fill(0, 10);
  rect(0, 0, width, height);
}

Both examples ignores the alpha instead of fading to black just like it would in 2D.

[welcome]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

[Creativeguru97]

Hi, I have exactly same problem.

I want to apply the fading out effect on point() by using alpha value in stroke(), but even I write like stroke(r, g, b, [some alpha value]), it seems not to work:(
(By the way on Processing that works)

I'd like to know, is this because p5.js simply don't have the function or some kind of bug.

[micuat]

I think it's the expected behavior as background calls clearColor which sets the background color without holding the last color
https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/clearColor

what you could do is to use p5.Graphics in WEBGL mode, and draw that graphics on top of 2d canvas
https://editor.p5js.org/micuat/sketches/qOAjrWJf9

[markjoshua12]

I see now, thank you very much! Didn't cross my mind to do it that way. Hopefully others who have the same problem can see this as well. Maybe this could be an example on the website?

[rmacnguyen]

what you could do is to use p5.Graphics in WEBGL mode, and draw that graphics on top of 2d canvas https://editor.p5js.org/micuat/sketches/qOAjrWJf9

This doesn't seem to work properly anymore on the latest version of p5js
https://editor.p5js.org/rmacnguyen/sketches/niMPaeWc4

[davepagurek]

This doesn't seem to work properly anymore on the latest version of p5js https://editor.p5js.org/rmacnguyen/sketches/niMPaeWc4

In p5 1.4.1, WebGL canvases were changed to not have an alpha channel by default to get more predictable blending: #5555

So now you have to manually specify when you want an alpha channel on your WebGL graphic. Try adding this after you create the graphic:

pg.setAttributes({ alpha: true });

[rmacnguyen]

Thanks for the suggestion. I tried updating the sketch, but it still doesn't render the same way as the old version:

1.4.2 vs 0.10.2

[davepagurek]

You additionally need to call pg.reset() at the start of each frame if you want to clear the depth information. I haven't found the discussion yet where that was changed, but it may have been related to the fact that graphics don't auto-reset anything each frame any more, in case you want to keep building up the existing scene. Arguably background could do this automatically though, feel free to open another issue for that if you want to discuss whether or not it should!

[rmacnguyen]

Amazing, thank you! Looks much better now.

I initially stumbled across this thread because I was trying to figure out why background didn't accomplish the blending like I expected it to, but I'm pretty new to p5js, so I wasn't sure if I was just going about it wrong.