Shader is not being reset after calling resetShader()

[aferriss]

Most appropriate sub-area of p5.js?

• Accessibility
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Build Process
• Unit Testing
• Internalization
• Friendly Errors
• Other (specify if possible)

p5.js version

1.7.0

Web browser and version

Chrome 116.0.5845.96

Operating System

Mac OSX

Steps to reproduce this

Seems like some shader is being cached, I'm having trouble drawing anything after having previously used a custom vertex+fragment shader. See the attached example.

Steps:

1. Use a custom shader
2. call resetShader()
3. Attempt to draw an additional shape. Observe the shape not appearing.

Snippet:

https://editor.p5js.org/aferriss/sketches/Db9X3PpG2

const vert = `
uniform mat4 uModelViewMatrix;
uniform mat4 uProjectionMatrix;

attribute vec3 aPosition;
attribute vec2 aTexCoord;
varying vec2 vTexCoord;

void main() {
   
  vTexCoord = aTexCoord;

  vec4 positionVec4 = vec4(aPosition, 1.0);
    
  gl_Position.xy = positionVec4.xy * 2.0 - 1.0; 
  gl_Position.zw = positionVec4.zw;

  // Un comment to get things working again
  //gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;

}
`;

const frag = `
precision highp float;

varying vec2 vTexCoord;
uniform sampler2D tex0;
uniform float strength;

void main() {
  vec2 uv = vec2(vTexCoord.x, 1.0-vTexCoord.y);
  gl_FragColor = texture2D(tex0, uv);
  gl_FragColor.rgb =1.0- gl_FragColor.rgb;
}
`;


let im;
let s;
function preload(){
  im = loadImage('testimg.png');
}

function setup() {
  createCanvas(400, 400, WEBGL);
  s = createShader(vert, frag);
}

function draw() {
  background(220);
  
  push();
    shader(s);
    s.setUniform('tex0', im);
    rect(0, 0, 100, 100);
    resetShader();
  pop();
  
  // Where is the red ellipse?
  fill('red');
  ellipse(0, 0, 100);
}

[davepagurek]

I think this isn't an issue with resetShader() but is actually an issue with the positioning in the vertex shader. If I disable depth testing before drawing the ellipse with drawingContext.disable(drawingContext.DEPTH_TEST), then it shows up, so I think the earlier rectangle is just being drawn closer to the camera.

I see these line in tutorials a lot:

gl_Position.xy = positionVec4.xy * 2.0 - 1.0; 
gl_Position.zw = positionVec4.zw;

...but I wonder if your commented out line, gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;, is actually one we should be using more in tutorials to avoid issues like this?

[aferriss]

Interesting, I definitely misdiagnosed the problem then! Yeah, that vertex shader was something I used in an example early on so that I didn't have to explain matrices to beginners, but it's proliferated beyond my initial intention. Lets definitely phase it out if we see it in the examples or code base elsewhere.