Merge pull request #8815 from processing/fix/webgl-notint

Handle null tint in Renderer3D

Author: davepagurek

src/core/p5.Renderer3D.js

@@ -137,7 +137,7 @@ export class Renderer3D extends Renderer {
     this.states._useShininess = 1;
     this.states._useMetalness = 0;
 
-    this.states.tint = new Color([1, 1, 1, 1]);
+    this.states.tint = null;
 
     this.states.constantAttenuation = 1;
     this.states.linearAttenuation = 0;
@@ -1502,7 +1502,10 @@ export class Renderer3D extends Renderer {
     // works differently and is global p5 state. If the p5 state has
     // been cleared, we also need to clear the value in uSampler to match.
     fillShader.setUniform("uSampler", this.states._tex || empty);
-    fillShader.setUniform("uTint", this.states.tint._getRGBA([255, 255, 255, 255]));
+    fillShader.setUniform(
+      "uTint",
+      this.states.tint?._getRGBA([255, 255, 255, 255]) ?? [255, 255, 255, 255]
+    );
 
     fillShader.setUniform("uHasSetAmbient", this.states._hasSetAmbient);
     fillShader.setUniform("uAmbientMatColor", this.states.curAmbientColor);

test/unit/visual/cases/webgl.js

@@ -645,6 +645,15 @@ visualSuite('WebGL', function() {
       p5.circle(0, 0, 50);
       screenshot();
     });
+
+    visualTest('noTint() before image() does not throw', async (p5, screenshot) => {
+      p5.createCanvas(50, 50, p5.WEBGL);
+      const img = await p5.loadImage('/test/unit/assets/cat.jpg');
+      p5.noTint();
+      p5.imageMode(p5.CENTER);
+      p5.image(img, 0, 0, 50, 50);
+      screenshot();
+    });
   });
 
   visualSuite('Hooks coordinate spaces', () => {

test/unit/visual/screenshots/WebGL/Opacity/noTint() before image() does not throw/000.png

@@ -0,0 +1,3 @@
+{
+  "numScreenshots": 1
+}

test/unit/visual/screenshots/WebGL/Opacity/noTint() before image() does not throw/metadata.json

@@ -1517,10 +1517,12 @@ suite('p5.RendererGL', function() {
   });
 
   suite('tint() in WEBGL mode', function() {
-    test('default tint value is set and not null', function() {
+    test('default tint value', function() {
       myp5.createCanvas(100, 100, myp5.WEBGL);
-      assert.deepEqual(myp5._renderer.states.tint
-        ._getRGBA([255, 255, 255, 255]), [255, 255, 255, 255]);
+      assert.deepEqual(
+        myp5._renderer.states.tint?._getRGBA([255, 255, 255, 255]) ?? [255, 255, 255, 255],
+        [255, 255, 255, 255]
+      );
     });
 
 
@@ -1581,7 +1583,7 @@ suite('p5.RendererGL', function() {
           };
         });
       }).then(function(_tint) {
-        assert.deepEqual(_tint._getRGBA([255, 255, 255, 255]),
+        assert.deepEqual(_tint?._getRGBA([255, 255, 255, 255]) ?? [255, 255, 255, 255],
           [255, 255, 255, 255]);
       });
     });