Semi-transparent objects in WebGL mode make the background behind them transparent

[tonyrobots]

Most appropriate sub-area of p5.js?

• Color
• Core/Environment/Rendering
• WebGL

Details about the bug:

• p5.js version: 1.4.0
• Web browser and version: reproduced on multiple browsers
• Operating System: Windows 10
• Steps to reproduce this:

1. Create a canvas in WEBGL mode
2. Set the background color to something (white is fine)
3. Draw an object on the canvas that is semi-transparent, e.g. RGBA color (100,100,100,150)
4. Without changing the background color of the p5.js canvas, change the background color (or image!) of the page it's sitting on -- you will see that it affects the color of the objects on the canvas

It appears the canvas background behind the cube (or other object) is not appearing (i.e. is completely transparent), and the transparency of the object is exposing the background of the webpage itself.

Here is an example that makes it very clear (no pun intended!), since I've specified a background image pattern in the css:

https://openprocessing.org/sketch/1309599

In this example:
The background image of the html page is set to be a repeating red "x"
The background of the canvas is a solid (no alpha) green
The color of the spinning cube and rect is (RGBA) color(255,80,180,150) -- note the "150" alpha value.
It appears the canvas background behind the cube is not appearing (i.e. is completely transparent), and the transparency of the cube is exposing the background of the webpage itself.
Indeed, even a PNG capture (hit 's' to saveCanvas()) has the same behavior, and the background of whatever you
look at the PNG on (a web browser, an OS image viewer, whatever) shows through in the area of the cube. (It does not in this example capture the "x"s, rather it preserves the transparency. Same happens with GIF capture with createloop.p5 or any capture with CCapture.js -- the issue is with the object itself as rendered in ps.j5)

Also attached two files -- the code is identical; only the background color of the underlying web page has changed (from white to black.) You can see the profound effect on the color of the object because the underlying color is showing through.

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

[sflanker]

This seems relevant: https://medium.com/david-guan/alpha-blending-and-webgl-823d86de00d8

[sflanker]

I think I finally found a workaround based on https://webglfundamentals.org/webgl/lessons/webgl-and-alpha.html

get a reference to the WebGLRenderingContext:

	let canvas = createCanvas(windowWidth, windowHeight, WEBGL);
	gl = canvas.GL;

at the end of rendering each frame:

	gl.clearColor(0, 0, 0, 1);
	gl.colorMask(false, false, false, true);
	// Set all of the pixels alpha values to 1 (this assumes there is a fully
	// opaque triangle covering every pixel, and WebGL is just botching the alpha
	// blending math)
	gl.clear(gl.COLOR_BUFFER_BIT);
	// re-enable the RGB channels
	gl.colorMask(true, true, true, true);

https://openprocessing.org/sketch/1311259

[aferriss]

I think you should also be able to call setAttributes('alpha', false); somewhere in your sketch to fix this issue.