WEBGL Color Alpha Bug?

Same sketch. P5js version on the left and Java Processing version on the right.


Why the color difference for:

color(255, 0, 0, alpha); // alpha: 0 to 200

p5js is rendering as WEBGL. Java p5 is rendering as P3D.

Do they treat the fill color alpha channel differently? Are the lighting defaults different? Or is this a bug with p5js WEBGL?

I’ve tried forcing lighting to defaults by adding lights() in the draw loop of both sketches. After doing so Java p5 output remains the same but p5js color looks even more dull.

When I use similar code within a 2D context p5js and Java p5 output looks identical:

Yes, I filed this issue this morning as I believe the behaviour I’m describing here is a bug in the p5js WEBGL renderer. I’ll write back to this thread to describe how the issue is resolved.

Explanation of this behaviour and a fix from the p5js issue I filed about this:

This is due to the fact that with WebGL the canvas itself is on top of another element (the document). We have experimented with different default behavior and this gets reported as a bug whenever we switch it. The problem is that some amount of blending with the background document is expected to be possible.

Long story short, you can get the same colors as Processing by adding setAttributes('alpha', false) to your sketch.

The question always becomes which person should have to set this attribute, the person hoping to blend or the person that is expecting specific colors when migrating from Processing.

Well, alpha behaviour in Java Processing with GL is completely borked too! :wink: