[p5.js 2.0 Bug Report]: WebGL tint() with alpha blows out colors

[davepagurek]

Most appropriate sub-area of p5.js?

• Accessibility
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Build process
• Unit testing
• Internationalization
• Friendly errors
• Other (specify if possible)

p5.js version

2.0.0

Web browser and version

Firefox

Operating system

MacOS

Steps to reproduce this

Steps:

1. Load an image
2. Use WebGL mode
3. Apply a tint with alpha, e.g. tint(255, 50)
4. Draw the image

The image's colours get blown out. e.g. with no tint:

With tint(255, 50):

Snippet:

let img

async function setup() {
  createCanvas(400, 400, WEBGL)
  img = await loadImage('https://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Brown_paper_bag_texture.jpg/960px-Brown_paper_bag_texture.jpg?20161026200514')
}

function draw() {
  background(220)
  imageMode(CENTER)
  tint(255, 50)
  image(img, 0, 0, width, height)
}

Live: https://editor.p5js.org/davepagurek/sketches/Cljuh6uQM

[davepagurek]

In WebGL, we work in premultiplied alpha, meaning full white at 50% opacity should look like ve4(1, 1, 1, 1) * 0.5 which is vec4(0.5, 0.5, 0.5, 0.5). This is unintuitive for shader writers, so we intentionally divide by the alpha here before calling hooks, so that users can work with the more expected format vec4(1, 1, 1, 0.5):

p5.js/src/webgl/shaders/phong.frag

Lines 52 to 56 in eac15d9

	if (isTexture && inputs.color.a > 0.0) {
	// Textures come in with premultiplied alpha. Temporarily unpremultiply it
	// so hooks users don't have to think about premultiplied alpha.
	inputs.color.rgb /= inputs.color.a;
	}

We then re-apply the alpha here:

p5.js/src/webgl/shaders/phong.frag

Line 82 in eac15d9

OUT_COLOR.rgb *= OUT_COLOR.a; // Premultiply alpha before rendering

It looks like something about this process isn't quite working and we're ending up with colors that are higher than usual, which I'd expect if we only divided by alpha and never re-applied it.