Fix WebGL blending bugs #5794
Fix WebGL blending bugs #5794
Conversation
| @@ -437,7 +437,7 @@ suite('p5.RendererGL', function() { | |||
| test('blendModes change pixel colors as expected', function(done) { | |||
| myp5.createCanvas(10, 10, myp5.WEBGL); | |||
| myp5.noStroke(); | |||
| assert.deepEqual([133, 69, 191, 255], mixAndReturn(myp5.ADD, 255)); | |||
| assert.deepEqual([122, 0, 122, 255], mixAndReturn(myp5.ADD, 0)); | |||
There was a problem hiding this comment.
This was updated to use a black background because previously, the background was white, and blending anything onto white with ADD results in more white once ADD works the same way as in 2D mode.
| @@ -1054,7 +1054,10 @@ p5.RendererGL.prototype._applyColorBlend = function(colors) { | |||
|
|
|||
| const isTexture = this.drawMode === constants.TEXTURE; | |||
| const doBlend = | |||
| isTexture || colors[colors.length - 1] < 1.0 || this._isErasing; | |||
| isTexture || | |||
| this.curBlendMode !== constants.BLEND || | |||
There was a problem hiding this comment.
This is a great and important change! I remember when we first added blendmodes to WebGL, we were getting a bunch of issues that all involved transparency or textures. It was easy to forget that people blend fully opaque colors as well 🤦♀️ . Great job finding a small improvement that makes a big difference!
There was a problem hiding this comment.
I dread every transparency/blending bug I encounter because it's so easy to mess up in WebGL 😅 I really appreciate your work setting all of it up so that transparency Just Works in p5!
| 'Resets to MULTIPLY' | ||
| ); | ||
| done(); | ||
| }); |
There was a problem hiding this comment.
This is a great set of unit tests. This is a great safeguard against unexpected divergence between the renderers down the road.
Resolves #5793
Changes:
BLENDregardless of opacityADDblend mode more similarly to in 2D modepush()/pop()DIFFERENCEis not implemented in WebGL modeScreenshots of the change:
In each image, left is 2D mode, and right is WebGL
PR Checklist
npm run lintpasses