Merge pull request #7668 from processing/fix/texture-binding

Fix binding of texture()

Author: davepagurek

src/webgl/p5.RendererGL.js

@@ -1036,7 +1036,7 @@ class RendererGL extends Renderer {
     if (!this._userEnabledStencil) {
       this._internalDisable.call(this.GL, this.GL.STENCIL_TEST);
     }
-  
+
   }
 
   /**
@@ -1781,7 +1781,7 @@ class RendererGL extends Renderer {
       if (!this._userEnabledStencil) {
         this._internalDisable.call(this.GL, this.GL.STENCIL_TEST);
       }
-    
+
     // Reset saved state
     // this._userEnabledStencil = this._savedStencilTestState;
     }
@@ -2349,6 +2349,7 @@ class RendererGL extends Renderer {
 
   _setFillUniforms(fillShader) {
     this.mixedSpecularColor = [...this.states.curSpecularColor];
+    const empty = this._getEmptyTexture();
 
     if (this.states._useMetalness > 0) {
       this.mixedSpecularColor = this.mixedSpecularColor.map(
@@ -2362,9 +2363,12 @@ class RendererGL extends Renderer {
     fillShader.setUniform("uUseVertexColor", this._useVertexColor);
     fillShader.setUniform("uMaterialColor", this.states.curFillColor);
     fillShader.setUniform("isTexture", !!this.states._tex);
-    if (this.states._tex) {
-      fillShader.setUniform("uSampler", this.states._tex);
-    }
+    // We need to explicitly set uSampler back to an empty texture here.
+    // In general, we record the last set texture so we can re-apply it
+    // the next time a shader is used. However, the texture() function
+    // 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);
 
     fillShader.setUniform("uHasSetAmbient", this.states._hasSetAmbient);

test/unit/webgl/p5.RendererGL.js

@@ -119,7 +119,8 @@ suite('p5.RendererGL', function() {
 
       // It should be red
       assert.deepEqual(myp5.get(5, 5), [255, 0, 0, 255]);
-    })
+    });
+
     test('textures remain bound after each draw call', function() {
       myp5.createCanvas(20, 10, myp5.WEBGL);
       myp5.background(255);
@@ -132,7 +133,7 @@ suite('p5.RendererGL', function() {
           inputs.color = texture(myTex, inputs.texCoord);
           return inputs;
         }`
-      })
+      });
 
       // Make a red texture
       const tex = myp5.createFramebuffer();
@@ -154,7 +155,33 @@ suite('p5.RendererGL', function() {
       // Both rectangles should be red
       assert.deepEqual(myp5.get(5, 5), [255, 0, 0, 255]);
       assert.deepEqual(myp5.get(15, 5), [255, 0, 0, 255]);
-    })
+    });
+
+    test('texture() does not remain bound', function() {
+      myp5.createCanvas(20, 10, myp5.WEBGL);
+      myp5.background(255);
+
+      const myShader = myp5.baseMaterialShader().modify({});
+
+      // Make a red texture
+      const tex = myp5.createFramebuffer();
+      tex.draw(() => myp5.background('red'));
+
+      myp5.shader(myShader);
+      const uSampler = myShader.samplers.find((s) => s.name === 'uSampler');
+
+      myp5.push();
+      myp5.texture(tex);
+      myp5.circle(0, 0, 20);
+      expect(uSampler.texture.isFramebufferTexture).toBeTruthy();
+      myp5.pop();
+
+      myp5.push();
+      // Texture should be unbound now
+      myp5.circle(0, 0, 20);
+      expect(uSampler.texture.isFramebufferTexture).toBeFalsy();
+      myp5.pop();
+    });
   });
 
   suite('default stroke shader', function() {
@@ -2711,48 +2738,48 @@ suite('p5.RendererGL', function() {
         myp5.createCanvas(50, 50, myp5.WEBGL);
         const gl = myp5._renderer.GL;
         const isEnabled = gl.isEnabled(gl.STENCIL_TEST);
-        
+
         assert.equal(isEnabled, false);
         assert.equal(myp5._renderer._userEnabledStencil, false);
       }
     );
-    
+
     test('Tracks when user manually enables stencil test',
       function() {
         myp5.createCanvas(50, 50, myp5.WEBGL);
         const gl = myp5._renderer.GL;
-        
+
         gl.enable(gl.STENCIL_TEST);
         assert.equal(myp5._renderer._userEnabledStencil, true);
         assert.equal(gl.isEnabled(gl.STENCIL_TEST), true);
       }
     );
-    
+
     test('Tracks when user manually disables stencil test',
       function() {
         myp5.createCanvas(50, 50, myp5.WEBGL);
         const gl = myp5._renderer.GL;
 
         gl.enable(gl.STENCIL_TEST);
         gl.disable(gl.STENCIL_TEST);
-        
+
         assert.equal(myp5._renderer._userEnabledStencil, false);
         assert.equal(gl.isEnabled(gl.STENCIL_TEST), false);
       }
     );
-    
+
     test('Maintains stencil test state across draw cycles when user enabled',
       function() {
         let drawCalled = false;
 
         myp5.createCanvas(50, 50, myp5.WEBGL);
         const originalDraw = myp5.draw;
-        
+
         myp5.draw = function() {
           drawCalled = true;
           if (originalDraw) originalDraw.call(myp5);
         };
-        
+
         const gl = myp5._renderer.GL;
         gl.enable(gl.STENCIL_TEST);
         assert.equal(gl.isEnabled(gl.STENCIL_TEST), true)
@@ -2764,7 +2791,7 @@ suite('p5.RendererGL', function() {
         myp5.draw = originalDraw;
       }
     );
-    
+
     test('Internal clip operations preserve user stencil test setting',
       function() {
         myp5.createCanvas(50, 50, myp5.WEBGL);
@@ -2783,7 +2810,7 @@ suite('p5.RendererGL', function() {
         assert.equal(gl.isEnabled(gl.STENCIL_TEST), true);
       }
     );
-    
+
     test('Internal clip operations do not enable stencil test for future draw cycles',
       function() {
         myp5.createCanvas(50, 50, myp5.WEBGL);