WebGL background & clear odd behaviour

[JetStarBlues]

Most appropriate sub-area of p5.js?

• WebGL

Details about the bug:

• p5.js version: 1.2.0, 1.3.1 (I suspect this bug is not version specific)

Description of the bug:

When you try to clear the screen (with clear() or background()), a weird subtle thing happens.

Consider this snippet (live version here):

function setup()
{
  createCanvas(400, 400, WEBGL);

  noFill();
  stroke( 200, 255, 200 );  // lime
  strokeWeight( 1 );
}

function draw()
{
  // clear();  // equivalent-ish to `background( 0, 0, 0, 0 )`
  // background( 0, 0, 0, 0 );  // black w/ alpha zero
  background( 255, 0, 0, 0 );  // red w/ alpha zero
  // background( 255, 255, 255, 0 );  // white w/ alpha zero

  scale( 4 );
  box();

  noLoop();
}

It should draw a box stroked with a lime-green color. However, in addition to the lime-green stroke, a ghost-like stroke appears in some regions that corresponds to the color used in background() or clear()*. Here are some examples:

• clear or black background with alpha zero background( 0, 0, 0, 0 )
  

• detail of clear or black background with alpha zero background( 0, 0, 0, 0 )
  

• red background with alpha zero background( 255, 0, 0, 0 )
  

• detail of red background with alpha zero background( 255, 0, 0, 0 )
  

• white background with alpha zero background( 255, 255, 255, 0 )
  

• detail of white background with alpha zero background( 255, 255, 255, 0 ). A red background has been added with an image editor for contrast.
  

The effect does not seem to be unique to the stroke shader. The same effect can be observed with a filled box.

The bug seems to be triggered by using a color with an alpha that is not equal to 1 as an argument to this.GL.clearColor (clear implementation, background implementation).

*Even though clear() does not take a color parameter, behind the scenes, the color (0,0,0,0) is used.

[stalgiag]

Hi @JetStarBlues thanks for the thorough issue!

I think this is due to subpixel rendering or antialiasing. If you look at your example in Chrome with setAttributes('antialias', false), you should no longer see the artifacts. Whereas, this will have no impact in Firefox which will display the artifact at certain zoom levels but not others. The last example you posted seems the most correct to me with no hue being added to the blending with the dom element in the background.

I hesitate to say this is caused by p5 in specific.

[JetStarBlues]

Thank you for pinpointing the issue!

I guess I'm expecting that the color used for the anti-aliasing will correspond to the color of the object. For example in this case, the lime green would be used, but varying in opacity, to generate the anti-aliasing. And that the background color will play no role whatsoever.

[davepagurek]

Hi! I think this should be fixed now as of #5917, as the weird blending with the background seems to only happen when premultiplied alpha is turned off. I'm going to close this for organizational purposes but feel free to discuss more or ask for this to be reopened if you notice anything weird still going on in the next p5 release!