Fix #7030

Author: davepagurek

preview/index.html

@@ -20,17 +20,37 @@
     import p5 from '../src/app.js';
 
     const sketch = function (p) {
+      let myShader
+      let tex
       p.setup = function () {
-        p.createCanvas(200, 200);
-      };
-
-      p.draw = function () {
-        p.background(0, 50, 50);
-        p.circle(100, 100, 50);
-
-        p.fill('white');
-        p.textSize(30);
-        p.text('hello', 10, 30);
+        p.createCanvas(20, 10, p.WEBGL);
+        p.background(255);
+
+        myShader = p.baseMaterialShader().modify({
+          uniforms: {
+            'sampler2D myTex': undefined,
+          },
+          'Inputs getPixelInputs': `(Inputs inputs) {
+            inputs.color = texture(myTex, inputs.texCoord);
+            return inputs;
+          }`
+        })
+
+        // Make a red texture
+        tex = p.createFramebuffer();
+        tex.draw(() => p.background('red'));
+
+        p.translate(-p.width/2, -p.height/2)
+        p.shader(myShader);
+        p.noStroke();
+        myShader.setUniform('myTex', tex);
+
+        // Draw once to the left
+        p.rect(0, 0, 10, 10);
+
+        // Draw once to the right
+        p.rect(10, 0, 10, 10);
+        console.log(p.canvas.toDataURL())
       };
     };
 

src/webgl/p5.RendererGL.js

@@ -551,8 +551,10 @@ class RendererGL extends Renderer {
     const shader = this._drawingFilter && this.states.userFillShader
       ? this.states.userFillShader
       : this._getFillShader();
+    shader.bindShader();
     this._setGlobalUniforms(shader);
     this._setFillUniforms(shader);
+    shader.bindTextures();
 
     for (const buff of this.buffers.fill) {
       buff._prepareBuffer(geometry, shader);
@@ -576,8 +578,10 @@ class RendererGL extends Renderer {
     this._useLineColor = geometry.vertexStrokeColors.length > 0;
 
     const shader = this._getStrokeShader();
+    shader.bindShader();
     this._setGlobalUniforms(shader);
     this._setStrokeUniforms(shader);
+    shader.bindTextures();
 
     for (const buff of this.buffers.stroke) {
       buff._prepareBuffer(geometry, shader);
@@ -615,8 +619,10 @@ class RendererGL extends Renderer {
   _drawPoints(vertices, vertexBuffer) {
     const gl = this.GL;
     const pointShader = this._getPointShader();
+    pointShader.bindShader();
     this._setGlobalUniforms(pointShader);
     this._setPointUniforms(pointShader);
+    pointShader.bindTextures();
 
     this._bindBuffer(
       vertexBuffer,
@@ -2104,8 +2110,6 @@ class RendererGL extends Renderer {
   }
 
   _setGlobalUniforms(shader) {
-    shader.bindShader();
-
     const modelMatrix = this.states.uModelMatrix;
     const viewMatrix = this.states.uViewMatrix;
     const projectionMatrix = this.states.uPMatrix;
@@ -2139,8 +2143,6 @@ class RendererGL extends Renderer {
   }
 
   _setStrokeUniforms(strokeShader) {
-    strokeShader.bindShader();
-
     // set the uniform values
     strokeShader.setUniform('uUseLineColor', this._useLineColor);
     strokeShader.setUniform('uMaterialColor', this.states.curStrokeColor);
@@ -2150,8 +2152,6 @@ class RendererGL extends Renderer {
   }
 
   _setFillUniforms(fillShader) {
-    fillShader.bindShader();
-
     this.mixedSpecularColor = [...this.states.curSpecularColor];
 
     if (this.states._useMetalness > 0) {
@@ -2236,8 +2236,6 @@ class RendererGL extends Renderer {
     fillShader.setUniform('uConstantAttenuation', this.states.constantAttenuation);
     fillShader.setUniform('uLinearAttenuation', this.states.linearAttenuation);
     fillShader.setUniform('uQuadraticAttenuation', this.states.quadraticAttenuation);
-
-    fillShader.bindTextures();
   }
 
   // getting called from _setFillUniforms
@@ -2257,8 +2255,6 @@ class RendererGL extends Renderer {
   }
 
   _setPointUniforms(pointShader) {
-    pointShader.bindShader();
-
     // set the uniform values
     pointShader.setUniform('uMaterialColor', this.states.curStrokeColor);
     // @todo is there an instance where this isn't stroke weight?

src/webgl/p5.Shader.js

@@ -747,7 +747,6 @@ class Shader {
   unbindShader() {
     if (this._bound) {
       this.unbindTextures();
-      //this._renderer.GL.useProgram(0); ??
       this._bound = false;
     }
     return this;
@@ -781,8 +780,12 @@ class Shader {
   }
 
   unbindTextures() {
+    const gl = this._renderer.GL;
+    const empty = this._renderer._getEmptyTexture();
     for (const uniform of this.samplers) {
-      this.setUniform(uniform.name, this._renderer._getEmptyTexture());
+      gl.activeTexture(gl.TEXTURE0 + uniform.samplerIndex);
+      empty.bindTexture();
+      gl.uniform1i(uniform.location, uniform.samplerIndex);
     }
   }
 

test/unit/webgl/p5.RendererGL.js

@@ -69,6 +69,45 @@ suite('p5.RendererGL', function() {
     });
   });
 
+  suite('texture binding', function() {
+    test('textures remain bound after each draw call', function() {
+      myp5.createCanvas(20, 10, myp5.WEBGL);
+      myp5.background(255);
+
+      const myShader = myp5.baseMaterialShader().modify({
+        uniforms: {
+          'sampler2D myTex': undefined,
+        },
+        'Inputs getPixelInputs': `(Inputs inputs) {
+          inputs.color = texture(myTex, inputs.texCoord);
+          return inputs;
+        }`
+      })
+
+      // Make a red texture
+      const tex = myp5.createFramebuffer();
+      tex.draw(() => myp5.background('red'));
+
+      myp5.shader(myShader);
+      // myp5.fill('red');
+      myp5.noStroke();
+      myShader.setUniform('myTex', tex);
+
+      myp5.translate(-myp5.width/2, -myp5.height/2);
+      myp5.rectMode(myp5.CORNER);
+
+      // Draw once to the left
+      myp5.rect(0, 0, 10, 10);
+
+      // Draw once to the right
+      myp5.rect(10, 0, 10, 10);
+
+      // 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]);
+    })
+  });
+
   suite('default stroke shader', function() {
     test('check activate and deactivating fill and stroke', function() {
       myp5.noStroke();