Merge pull request #7769 from processing/fix/webgl-alpha

Fix WebGL alpha blending

Author: davepagurek

src/webgl/shaders/phong.frag

@@ -47,7 +47,7 @@ void main(void) {
   inputs.texCoord = vTexCoord;
   inputs.ambientLight = vAmbientColor;
   inputs.color = isTexture
-      ? TEXTURE(uSampler, vTexCoord) * uTint/255.
+      ? TEXTURE(uSampler, vTexCoord) * (vec4(uTint.rgb/255., 1.) * uTint.a/255.)
       : vColor;
   if (isTexture && inputs.color.a > 0.0) {
     // Textures come in with premultiplied alpha. Temporarily unpremultiply it

test/unit/visual/cases/webgl.js

@@ -375,7 +375,7 @@ visualSuite('WebGL', function() {
     visualTest('Basic colors have opacity applied correctly', (p5, screenshot) => {
       p5.createCanvas(50, 50, p5.WEBGL);
       p5.background(255);
-      p5.fill(255, 0, 0, 100);
+      p5.fill(255, 100, 100, 100);
       p5.circle(0, 0, 50);
       screenshot();
     });
@@ -384,7 +384,7 @@ visualSuite('WebGL', function() {
       p5.createCanvas(50, 50, p5.WEBGL);
       p5.background(255);
       p5.ambientLight(255);
-      p5.fill(255, 0, 0, 100);
+      p5.fill(255, 100, 100, 100);
       p5.circle(0, 0, 50);
       screenshot();
     });
@@ -393,7 +393,7 @@ visualSuite('WebGL', function() {
       p5.createCanvas(50, 50, p5.WEBGL);
       const myShader = p5.baseMaterialShader().modify({
         'Inputs getPixelInputs': `(Inputs inputs) {
-          inputs.color = vec4(1., 0., 0., 100./255.);
+          inputs.color = vec4(1., 0.4, 0.4, 100./255.);
           return inputs;
         }`
       })
@@ -406,7 +406,7 @@ visualSuite('WebGL', function() {
     visualTest('Colors in textures have opacity applied correctly', (p5, screenshot) => {
       p5.createCanvas(50, 50, p5.WEBGL);
       const tex = p5.createFramebuffer();
-      tex.draw(() => p5.background(255, 0, 0, 100));
+      tex.draw(() => p5.background(255, 100, 100, 100));
       p5.background(255);
       p5.texture(tex);
       p5.circle(0, 0, 50);
@@ -416,7 +416,7 @@ visualSuite('WebGL', function() {
     visualTest('Colors in tinted textures have opacity applied correctly', (p5, screenshot) => {
       p5.createCanvas(50, 50, p5.WEBGL);
       const tex = p5.createFramebuffer();
-      tex.draw(() => p5.background(255, 0, 0, 255));
+      tex.draw(() => p5.background(255, 100, 100, 255));
       p5.background(255);
       p5.texture(tex);
       p5.tint(255, 100);