Put back premultiplied alpha settings in WebGL from before

Author: davepagurek

src/core/filterShaders.js

@@ -102,15 +102,14 @@ export function makeFilterShader(renderer, operation, p5) {
             const sampleCoord = uv + p5.vec2(sample, sample) / inputs.canvasSize * direction;
             const weight = quadWeight(sample, (numSamples - 1.0) * 0.5 * spacing);
 
-            const texSample = p5.getTexture(canvasContent , sampleCoord);
-            avg += weight * (texSample * p5.vec4(
+            const texSample = p5.getTexture(canvasContent, sampleCoord);
+            avg += weight * texSample * p5.vec4(
               texSample.a, texSample.a, texSample.a, 1
-            ));
+            );
             total += weight;
           }
 
           const blended = avg / total;
-
           return p5.vec4(
             blended.r / blended.a,
             blended.g / blended.a,

src/core/p5.Renderer3D.js

@@ -1669,6 +1669,9 @@ export class Renderer3D extends Renderer {
   //// TEXT SUPPORT METHODS
   //////////////////////////////
 
+  _beforeDrawText() {}
+  _afterDrawText() {}
+
   textCanvas() {
     if (!this._textCanvas) {
       this._textCanvas = document.createElement('canvas');

src/webgl/p5.RendererGL.js

@@ -312,6 +312,17 @@ class RendererGL extends Renderer3D {
     }
   }
 
+  //////////////////////////////////////////////
+  // Text
+  //////////////////////////////////////////////
+
+  _beforeDrawText() {
+    this.GL.pixelStorei(this.GL.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
+  }
+  _afterDrawText() {
+    this.GL.pixelStorei(this.GL.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
+  }
+
   //////////////////////////////////////////////
   // Setting
   //////////////////////////////////////////////
@@ -413,9 +424,10 @@ class RendererGL extends Renderer3D {
       gl.enable(gl.DEPTH_TEST);
       gl.depthFunc(gl.LEQUAL);
       gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
-      // Make sure all images are loaded into the canvas non-premultiplied so that
-      // they can be handled consistently in shaders.
-      gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
+      // Make sure all images are loaded into the canvas premultiplied so that
+      // they match the way we render colors. This will make framebuffer textures
+      // be encoded the same way as textures from everything else.
+      gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
       this._viewport = this.drawingContext.getParameter(
         this.drawingContext.VIEWPORT
       );

src/webgl/shaders/light_texture.frag

@@ -14,12 +14,13 @@ void main(void) {
   }
   else {
     vec4 baseColor = isTexture
-      // Textures come in with non-premultiplied alpha. Apply tint.
-      ? TEXTURE(uSampler, vVertTexCoord) * (uTint/255.)
-      // Colors come in with non-premultiplied alpha.
-      : vColor;
-    // Convert to premultiplied alpha for consistent output
-    baseColor.rgb *= baseColor.a;
+      // Textures come in with premultiplied alpha. To apply tint and still have
+      // premultiplied alpha output, we need to multiply the RGB channels by the
+      // tint RGB, and all channels by the tint alpha.
+      ? TEXTURE(uSampler, vVertTexCoord) * vec4(uTint.rgb/255., 1.) * (uTint.a/255.)
+      // Colors come in with unmultiplied alpha, so we need to multiply the RGB
+      // channels by alpha to convert it to premultiplied alpha.
+      : vec4(vColor.rgb * vColor.a, vColor.a);
     OUT_COLOR = vec4(baseColor.rgb * vDiffuseColor + vSpecularColor, baseColor.a);
   }
 }

src/webgl/shaders/phong.frag

@@ -47,8 +47,13 @@ void main(void) {
   inputs.texCoord = vTexCoord;
   inputs.ambientLight = uAmbientColor;
   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
+    // so hooks users don't have to think about premultiplied alpha.
+    inputs.color.rgb /= inputs.color.a;
+  }
   inputs.shininess = uShininess;
   inputs.metalness = uMetallic;
   inputs.ambientMaterial = uHasSetAmbient ? uAmbientMatColor.rgb : inputs.color.rgb;

src/webgl/shaders/webgl2Compatibility.glsl

@@ -26,5 +26,9 @@ out vec4 outColor;
 #endif
 
 #ifdef FRAGMENT_SHADER
-#define getTexture TEXTURE
+vec4 getTexture(in sampler2D content, vec2 coord) {
+  vec4 color = TEXTURE(content, coord);
+  if (color.a > 0.) color.rgb /= color.a;
+  return color;
+}
 #endif

src/webgl/text.js

@@ -766,7 +766,7 @@ function text(p5, fn) {
 
     // this will have to do for now...
     sh.setUniform('uMaterialColor', curFillColor);
-
+    this._beforeDrawText();
     this.glyphDataCache = this.glyphDataCache || new Set();
 
     try {
@@ -827,6 +827,7 @@ function text(p5, fn) {
       this.states.setValue('strokeColor', doStroke);
       this.states.setValue('drawMode', drawMode);
 
+      this._afterDrawText();
       this.pop();
     }
   };