Clear() background with WEBGL p5.Graphics stopped working v1.4.1

[mkmori]

Most appropriate sub-area of p5.js?

• Accessibility (Web Accessibility)
• Build tools and processes
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Friendly error system
• Image
• IO (Input/Output)
• Localization
• Math
• Unit Testing
• Typography
• Utilities
• WebGL
• Other (specify if possible)

p5.js version

1.4.1

Web browser and version

Chrome 99.0.4844.51, FF 98.0, Mobile Safari 15.3.1

Operating System

Win10 (Chrome and FF), iOS 15.3.1

Steps to reproduce this

Steps

1. Create P2D main canvas.
2. Create a p5.Graphics object "pgBkgd" (either P2D or WEBGL) and clear(); reset(); and optionally set background to a color etc.;
3. Create a p5.Graphics object "pg3d" (WEBGL) and clear(); reset(); etc.
4. In main draw loop, draw pgBkgd using image(); then draw pg3d over it....

Issue

pgBkgd should show thru pg3d's clear background, but instead, pg3d's background appears black where it overlaps pgBkgd. This was working as expected as recently as 1.4.0, and as early as 1.1.9.

Note, pg3d's background does appear clear when drawn over the main canvas--the issue is only apparent when stacking pg3d atop another image (either P2D or WEBGL).

Examples

Main canvas background is pink, P2D image has a green background, and pg3D background is clear:
p5js 1.4.1 (no longer working): sketch using p5js v141
p5js 1.4.0 (still works): identical sketch using p5js v140
(Oh, yeah--that was my first issue! It was "fixed" in v0.9.0! #3816)

Related Issue

I did see this issue, suggesting this may be a result of a design decision, (and there may be a workaround):
issue 5552
My initial impression is...there might be more situations someone needs to go setAttributes() to get expected behaviors (or even ._pInst.setAttributes() in the case of the main canvas).

And the original issue remains, if I understand correctly: WEBGL p5.Graphics blends with container background, and ignores other p5 objects, "closer" objects, even opaque objects.

Anyway, I'll try to (belatedly) enumerate possible use cases on that (closed) issue for consideration by the community, see if people think it's a decision worth revisiting.... :)

[mkmori]

Sorry if I panicked in re-reporting this issue! I understand the cause now (design decision in 1.4.1), so I'm going to close it....

I can call setAttributes('alpha', true) on my p5.Graphics objects as advertised, for masking and compositing purposes etc. As long as I can clear the background pixels, I don't have strong expectations when rendering non-opaque geometry in p5js anyway...pending some future enhancement!

The only general inconvenience I've found related to #5555, is the inability to access the alpha attribute on the main canvas without calling myCanvas_._pInst_.setAttributes('alpha', true). I can't find instructions for using "._pInst" like this in the web reference, but maybe I missed the preferred, documented way of accessing the same...?

[mkmori]

I forgot to add one other thing: I will try to read the source and understand myself, but just toggling 'alpha' using setAttributes(), I was wondering if it might be feasible to automatically turn alpha on for a WEBGL buffer when clear() is called in that context, and leave it on until/if the background color alpha is set to 100% (255)...?

My idea being, if someone (like me!) is clearing the buffer with non-opaque pixels...they are presumably seeking observable, alpha behavior of some kind, right? And then they could determine whether or not the result is usable, given their rendered objects etc. More interesting than finding clear() just seems to set the background to black, or setting a non-opaque background color does nothing, no?

FWIW!