P5.js: tint() is not working in WEBGL mode (version 1.0.0)

[stc]

Most appropriate sub-area of p5.js?

• [ ] Color
• [x] Core/Environment/Rendering
• [ ] Data
• [ ] Dom
• [ ] Events
• [x] Image
• [ ] IO
• [ ] Math
• [ ] Typography
• [ ] Utilities
• [x] WebGL
• [ ] Other (specify if possible)

Details about the bug:

• p5.js version: p5.js v1.0.0 February 29, 2020
• Web browser and version: 81.0.4044.129 (Official Build) (64-bit)
• Operating System: MacOS 10.14.6
• Steps to reproduce this:

let img;
function preload() {
  // load an image here
  img = loadImage("flower.png");
}
function setup() {
  createCanvas(1000,800, WEBGL);  
}
function draw() {
  background(255,0,100)
  tint(255,100);
  texture(img);
  quad(0,0,100,0,100,100,0,100);
}

note: in version 0.9.0, tint() works nicely with the WEBGL renderer

[welcome[bot]]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

[stalgiag]

I can reproduce.

Thank you for the well-written issue @stc !

[stalgiag]

Okay this is due to the change ~ made by me ~ for this issue.

Essentially, phong.frag is the default fragment shader for textures now instead of light_texture.frag and it does not have a tint uniform.

As a quick fix you can add:

setAttributes('perPixelLighting', false);

to your setup().

To fix in the library we will need to add a uTint uniform to phong.frag that is applied in the same way that it is in light_texture.frag.

Anyone is welcome to handle this. It should be a good first issue for anyone interested in WebGL or GLSL.

[matvs]

I would gladly start working on this issue :)

[matvs]

Hi @stalgiag

Should any other shader support tint?
Maybe point.frag?

[stalgiag]

@matvs great! Sure, point.frag and vertexColor.frag should both probably have it as well.

[matvs]

@stalgiag since uTint makes sense only for texture (It is actually arguable*) should then texture support be added to point and vertexColor.frag?

• In general one can set via shader any colour directly, no need fot tint then, but I guess, that in some scenarios tint could be helpful.

[stalgiag]

@matvs good point! It is kind of redundant. I briefly thought that it would be nice to apply an 'all-over tint' to vertex colored immediate drawing, but this behavior doesn't exist in Processing and I don't have a strong argument for it. I'll review and accept your PR as is.

[grege2]

Hi @stalgiag and @matvs , just fyi, I encountered this problem, tint() not working with texture() in WEBGL in p5 1.0.0, and searched the Github issues. I'm glad to see it will be resolved in the next release, and the tip "setAttributes('perPixelLighting', false);" got me going well enough for now. Thanks, Greg E