WebGL Error Triggered by `noSmooth()` Invocation Between Framebuffer Creation and Drawing on Framebuffer

[SableRaf]

Problem

In WEBGL mode, invoking the noSmooth() function specifically between the creation of a framebuffer and performing drawing operations on said framebuffer results in the following error:

WebGL: INVALID_OPERATION: bindTexture: object does not belong to this context

This issue appears to be browser-specific; it has been observed in Chrome, but not in Firefox.

Reproduction Steps

Here's a minimal example that demonstrates the issue:

let testBuffer;

function setup() {
  createCanvas(400, 400, WEBGL);

  testBuffer = createFramebuffer();

  // 🔴 Using noSmooth() between creating the buffer and drawing on the buffer triggers the error
  noSmooth();

  testBuffer.begin();
  circle(0, 0, 200);
  testBuffer.end();
}

function draw() {
  background(150);
  texture(testBuffer);
  orbitControl();
  box(200);
}

Expected Behavior

Calling noSmooth() between framebuffer creation and drawing should not introduce WebGL errors.

Actual Behavior

An error is thrown, specifically: WebGL: INVALID_OPERATION: bindTexture: object does not belong to this context.

Environment

• p5.js Version: 1.7.x Beta (cc @davepagurek)
• Browser: Chrome 116 (Error observed), Firefox 116.0.3 (No error observed)
• OS: Windows 10

[davepagurek]

I think the key issue here is that noSmooth() turns off antialiasing, which needs to recreate the canvas context, and invalidates anything attached to it (like framebuffers): #5902

Another issue is that noSmooth() in WebGL is kind of an opaque shortcut to setAttributes({ antialias: false }), and doesn't affect texture interpolation, mentioned in this issue: #6325

Aside from addressing those other issues, we should probably log a warning if noSmooth (or setAttributes) is called after framebuffers have been made, since those will get invalidated.