Merge branch 'dev-2.0' into fix-7917-dev2

Author: davepagurek

package-lock.json

@@ -19,7 +19,7 @@
     "test/**/*.js": "eslint",
     "utils/**/*.{js,mjs}": "eslint"
   },
-  "version": "2.2.0-rc.2",
+  "version": "2.2.0-rc.3",
   "dependencies": {
     "@davepagurek/bezier-path": "^0.0.2",
     "@japont/unicode-range": "^1.0.0",

package.json

@@ -102,11 +102,20 @@ 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);
 
-            avg += weight * p5.getTexture(canvasContent, sampleCoord);
+            const texSample = p5.getTexture(canvasContent, sampleCoord);
+            avg += weight * texSample * p5.vec4(
+              texSample.a, texSample.a, texSample.a, 1
+            );
             total += weight;
           }
 
-          return avg / total;
+          const blended = avg / total;
+          return p5.vec4(
+            blended.r / blended.a,
+            blended.g / blended.a,
+            blended.b / blended.a,
+            blended.a
+          );
         });
       }, { p5 });
 

src/core/filterShaders.js

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

src/core/p5.Renderer3D.js

@@ -297,8 +297,8 @@ export class StrandsFor {
     const scopeEndBlock = CFG.createBasicBlock(cfg, BlockType.SCOPE_END);
     CFG.addEdge(cfg, updateBlock, scopeEndBlock);
 
-    // Loop back to break check
-    CFG.addEdge(cfg, scopeEndBlock, breakCheckBlock);
+    // Connect end of for loop to the merge agter the loop
+    CFG.addEdge(cfg, scopeEndBlock, mergeBlock);
 
     // Break condition exits to merge
     CFG.addEdge(cfg, breakCheckBlock, mergeBlock);

src/strands/strands_for.js

@@ -1602,8 +1602,7 @@ class Camera {
       );
       // If the camera is active, make uPMatrix reflect changes in projMatrix.
       if (this._isActive()) {
-        this._renderer.states.setValue('uPMatrix', this._renderer.states.uPMatrix.clone());
-        this._renderer.states.uPMatrix.mat4 = this.projMatrix.mat4.slice();
+        this._renderer.states.setValue('uPMatrix', this.projMatrix.clone());
       }
     }
 

src/webgl/p5.Camera.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/p5.RendererGL.js

@@ -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/light_texture.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/phong.frag

@@ -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